欢迎访问 生活随笔!

ag凯发k8国际

当前位置: ag凯发k8国际 > 编程资源 > 编程问答 >内容正文

编程问答

css常用样式汇总记录 -ag凯发k8国际

发布时间:2024/10/14 编程问答 13 豆豆
ag凯发k8国际 收集整理的这篇文章主要介绍了 css常用样式汇总记录 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

1 div盒子样式居中

position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);

1.1 div盒子水平居中

margin:0 auto;

2 清除浮动

2.1 标签法

简单,结构性差

clear: both;

部分浏览器支持flow-root属性

display:flow-root;

2.2 overflow属性
简单隐藏元素,如果使用hidden,溢出的元素无法显示

overflow:hidden; /*hidden| auto| scroll 都可以实现。*/

2.3 after伪元素清除浮动

给需要去除浮动的盒子的父盒子添加clearfix属性
推荐使用

.clearfix:after { content: "";display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* ie6、7 专有 */ .clearfix::after{content:""display:table;clear:both; }

2.4 双伪元素清除浮动

给需要去除浮动的盒子的父盒子添加clearfix属性
推荐使用

.clearfix:before, .clearfix:after { content:"";display:table; }.clearfix:after {clear:both;}.clearfix {*zoom:1;}

3 禁止手机端缩放

content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"

暂时写到这,更新ing 3.1

4 色相hsl(270,60%,70%)

a:hover悬停
a:active活跃
rgb相互转换十六进制

推荐网站
webfx.com/web-design/hex-to-rgb

5 字体font-family

serif和sans-serif 衬线和无衬线 serif sans-serif
script fonts 斜线请柬cursive
decorative fonts 装饰字体cursive fantasy
monospace fonts 单行字体monospace
引入字体文件@font-face

字体网站fonts.google.com

6 清除浮动

.clearfix::after{content:""display:table;clear:both; } display:flow-root;

7 the box model fix

html{box-sizing : border-box; } *,*:before,*:after{box-sizing:inherit; }

position

static relative absolute fixed sticky

8 flex 轴

flex-container父元素 flex-item

<div class="container"><div>flex itemdiv> div> .container{display:flex;//不会跨越盒子宽度display:inline-flex//跨越盒子宽度 }

flex-direction决定轴方向

row row-reverse column column-reverse

flex-wrap

wrap 拆行或拆列 no-wrap不拆行或拆列

flex-flow

设置flex-item大小

flex-basis初始大小

flex-grow项目将如何展开

flex-shrink 决定物品收缩方式

flex:grow shrink basis

flex:0 1 100px

flex对齐

justify-content space-between center
align-items

.box{display:flex;align-items:center;justify-content:center; }

9 grid 行 列

grid container显式 隐式

grid-template-columns
grid-template-rows

grid-auto-columns
grid-auto-rows

grid-column
grid-row
单位 fr
repeat(3,1fr)
gap 间隙

高级选择器

p:first-child{}
p:last-child{}
first-of-type
last-of-type

响应式

max-width:800px;
width:85%;

图像铺满盒子不重复
.background{background-repeat:no-repeat;background-size:100% 100%;//background-size:cover;//background-position 显示图片位置,top right left 可以自己试试 }

10 媒体查询

@media screen and (max-width:800px){h1{font-size:16px;} }

宽度断点
@media (width:360px){}
@media (min-width:360px) and (max-width:800px){}

/* responsive

------------------------------------*/

@media screen and (min-width:750px){header, footer {text-align: center;}.project-item img {float: left;margin-right: 20px;}.job-item {display: grid;grid-template-columns: 1fr 2fr;column-gap: 20px;}.contact-list {display: flex;justify-content: center;} }@media screen and (max-width:749px){h1 {font-size: 75px;line-height: 0.9;margin-bottom: 20px;}h2 {line-height: 1;}.contact-list a {padding: 5px;} }

先到这3.19

多行文本超出显示省略号

/* 多行文本超出显示省略号 *//* 溢出隐藏 */overflow: hidden; /* 超出文本显示省略号 */text-overflow: ellipsis;/*文本需要显示的行数 */-webkit-line-clamp: 2;-webkit-box-orient: vertical;display: -webkit-box;

单行文本显示省略号

/* 单行文本显示省略号 */overflow: hidden;text-overflow: ellipsis;white-space: nowrap; //强制不换行

总结

以上是ag凯发k8国际为你收集整理的css常用样式汇总记录的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得ag凯发k8国际网站内容还不错,欢迎将ag凯发k8国际推荐给好友。

网站地图