一些css的用法

养成架构师

已于 2022-12-06 23:30:25 修改

阅读量229

点赞数

文章标签： css 前端 javascript

于 2022-12-04 23:38:53 首次发布

本文链接：https://blog.csdn.net/weixin_43160562/article/details/128178654

版权

网页变灰

grayscale() : 对图片进行灰度转换
用法 filter: grayscale(amount);

块级元素和行内元素

块级元素：div,p,ui,ol,h1,form…
行内元素：span,a,img,button,input…

>>> 与 /deep/ 与 ::v-deep

都是深度选择器,可以操作深度选择器，可以操作样式穿透，用于局部修改UI组件库默认样式
在less/sass中不能识别>>>，>>>只作用于css,所有在less/sass中使用deep代替。在vue3.0之前用/deep/,vue3.0之后使用::v-deep

position

static:正常文档流，无定位
relative:正常文档流，相对自身定位。
absolution:脱离文档流，相对于上级有position不为static的元素定位，若没有则相对于body定位
fixed:脱离文档流，相对于浏览器窗口定位
sticky:根据窗口滚动自动切换relative和fixed，由top决定。

几种隐藏

visibility:hidden 隐藏元素，会在文档流中占位，所以会触发重绘，隐藏后不能出发点击事件。
display:none 隐藏元素，会从页面中删除，所以会出发重绘和重排
opacity:0 透明，会继续在文档流中占位，所以会触发重绘。因为是作用于元素自身，所以子元素会继承，全部变透明，透明后可以触发点击事件。
rgba(0,0,0,0) 透明，会继续在文档流中占位，会触发重绘。由于只作用于颜色或背景色，所以子元素不会继承，透明后可以触发点击事件。

触发重排

添加删除更新dom节点
display:none
动画
添加或改变字号、宽度
用户行为，比如滚动，调整窗口大小

减少重排影响

避免使用大量style属性，而是用class
让动画脱离文档流
能用css动画就不用js动画
尽量不用table布局

margin和padding

margin,padding对行内元素影响，比如span，设置不了宽高，但可以设置margin和padding,但是设置了margin后，都只有水平方向有效果，垂直方向无效果
两个div上下排列，会发生边距重叠，margin都大于0就取较大值，一正一负就相加，都负取绝对值较大的。这是由于BFC

BFC块级元素格式化上下文

BFC元素垂直方向的边距会发生重叠，由margin决定。
BFC区域不会与浮动元素的区域重叠
BFC是一个独立的容器，子元素会影响外面元素
计算BFC高度的时候，浮动元素也会参与计算

创建或触发BFC

html就是一个BFC
float值不为none
position的值为absolute或者fixed
display值为table和flex相关的几个属性
overflow为auto或hidden

BFC使用场景

外边距重叠，如
父元素都设置了margin-top.
兄弟元素margin-bottom,和margin-top会重叠
空元素设置了上下margin值不一样
左边定宽，右边自适应，只需要给右边创建BFC即可
BFC可以阻止浮动元素覆盖。父元素没有设置高度，子元素浮动了，不参与父元素高度计算，由于父元素高度为0，导致父元素的兄弟元素向上顶，与子元素重叠，只需给父元素创建BFC即可。

清除浮动

设置了浮动后，display变为block，由于父元素没有写高度，子元素浮动后会导致父元素发生调试塌陷，所以需要清除浮动
给父元素设置overflow:hidden;
给父级设置高度
父级也设置成浮动
浮动元素下添加div,设置样式{clear:both;height:0;overflow:hidden;}
使用伪类
.clearfix{
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix{
zoom:1;
}

盒模型

标准盒模型：元素的width/height = content+border+padding;
iE盒模型：元素width/height = content(包含border,padding)
通过box-sizing切换，content-box是标准模式，border-box就是IE模式

标签之间空白间隙如何解决

float:left;
父元素font-size:0,子元素再单独设置字体
margin负值
letter-spacing 字间距
word-spacing 词间距
使用注释拼接

常见样式兼容问题

不同浏览器默认margin和padding不一样
谷歌浏览器默认文字最小12px，可添加css属性-webkit-text-size-adjust:none;解决，或者transform:scale()缩小。
chrome中visibility的值为collapse和hidden是一样的，在firefox,operah和IE中，collapse和display:none是一样的
CSS3属性添加针对不同浏览器的前缀。

display:inline-block布局

inline：1.使元素变成行内元素，拥有行内元素的特性。即可以与其他行内元素共享一行，不会独占一行。2.不能更改元素的height，width的值，大小由内容撑开。3.可以使用padding,margin的各个属性值能够产生边距效果。
block: 1.使元素变成块级元素，独占一行，在不设置自己宽度的情况下，块级元素会默认填满父级元素的宽度。2.能够改变元素height,width的值。3.可以设置padding和margin的值能够产生边距效果。
inline-block:结合了inline和block的一些特点，结合了上述line的第一个特点，block的2，3特点。
当添加inline-block时，存在间隙问题大小为4px,因为我们在写标签时通常会在标签结束符后回车，回车会产生回车符。去除空白间隙的方法是在父元素添加{font-size:0｝

inline与浮动区别

当设置display：inline-block时，块级元素能够在同一行展示
对元素添加属性inline-block时，元素不会脱离文档流。而浮动会脱离文档流

flex布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。.box{display:flex;}
行内元素也可以使用Flex布局。.box{display:inline-flex;}
Webkit内核的浏览器，必须加上-webkit前缀。.box{display:-webkit-flex;/* Safari */display:flex;}
注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex-direction

flex-direction 属性决定主轴的方向（即项目的排列方向） =>{flex-direction:row|row-reverse|column|column-reverse;}

在这里插入图片描述

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

值	含义
nowrap	不换行
wrap	由上而下换行
wrap-reverse	由下自上换行
flex-flow	flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

justify-content 属性定义了项目在y轴的对齐方式。（y轴）

{justify-content:flex-start|flex-end|center|space-between|space-around;}
在这里插入图片描述

值	意义
flex-start（默认值）	左对齐
flex-end	右对齐
center	居中
space-between	两端对齐，项目之间的间隔都相等
space-around	每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items 属性定义项目在交叉轴上如何对齐。（x轴）

{align-items:flex-start|flex-end|center|baseline|stretch;}
在这里插入图片描述

值	含义
flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的中点对齐
baseline	项目的第一行文字的基线对齐
stretch（默认值）	如果项目未设置高度或设为auto，将占满整个容器的高度。

align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box{align-content:flex-start|flex-end|center|space-between|space-around|stretch;}
该属性可能取6个值。
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。