网页变灰
- 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 词间距
- 使用注释拼接
- 1
- 2
常见样式兼容问题
- 不同浏览器默认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(默认值):轴线占满整个交叉轴。