总结并分享一些CSS当中常见,但是对于大家来说可能不太清晰的概念,当我们熟记于心的时候,在CSS开发上相信也会更加得心应手。
一、盒模型
盒模型:
- 标准盒模型(
content-box
):占用宽度 = 内容宽度(content
)+padding
+border
+margin
- IE盒模型(
border-box
):占用宽度 = 内容宽度(content
+border
+padding
)+margin
一言以蔽之,content-box
的宽高是规定内容的宽高,border-box
的宽高规定了content+border+padding
三者和的宽高
二、CSS优先级
!important
> 行内样式
>id
> 类(class,伪类,属性选择器)
> 标签元素
> 通配符
> 继承
> 默认
三、元素居中
3.1 margin 0 auto
要求目标元素宽度固定,并且与父元素左右margin
有空余。
.child { width: 200px; border: 1px solid gray; margin: 0 auto; }
3.2 absoulte + tarnsform
绝对定位,然后利用tarnsform
移动目标元素宽高的50%
(上下居中)
.child{ width: 200px; //此处可以不设置,默认为父元素的一半 position: absolute; left: 50%; transform: translateX(-50%) }
3.3 absolute + margin
与3.2同理,但必须设置width
.child{ position: absolute; left: 50%; width: 100px; // 此处必须设置 margin-left: -50px; // 设为元素自身宽度的一半,必须根据元素自身宽高明确左移动距离 }
3.4 flex
.child{ display: flex; justify-content: center; align-items: center; }
3.5 text-align: center
适用于行内元素居中
3.6 vertical-align: middle
- 使行内盒模型与行内元素容器垂直对齐,例如文本与图片
- 垂直对齐表格单元内容
- 如果父元素未设置高度,则与行内最高高度对齐,表现为本行与父元素垂直居中
3.7 line-height
垂直居中,适用于单行文本、行内元素、行内块级元素
.child{ line-height: 30px; height: 30px; }
- 如果一个标签没有定义高度,那么其高度将由
line-height
决定,例如,当div
没有设置height
属性时,设置line-height:0
,那么div
的高度就为0
3.8 IOS10上居中失效
在开发的时候遇到的一个兼容性问题
.ios-center{ position: absolute; left: 0; right: 0; margin: 0 auto; }
如上即可解决绝对定位不居中的问题
Reference: 《可食用的「css布局干货」,纯Html示例,可调试 | 水平、垂直、多列》
四、定位属性position
position:
absolute
:绝对定位,定点位于最近postion
值为绝对或相对值的父元素的左上角relative
:相对定位,定点原点为自身所在位置fixed
:固定static
:默认值inherit
:继承sticky
:元素根据正常文档流进行定位,可以被认为是相对定位和固定定位的混合。当元素在屏幕或滚动元素显示区域时,表现为relative
,就要滚出显示器屏幕的时候,表现为fixed
。可用来做吸顶特效
五、浮动
元素加了浮动属性后,会脱离文档流,提升半层层级,向指定方向移动,直到遇到父元素的边界或另一个浮动元素后停止。
层级:如果元素看作一层,那么下半层就是背景元素,上半层就是内容
- 浮动元素之间是漂浮着,并不会形成一个流。浮动元素总会保证自己的顶部与上一个标准文档流的底部对齐
- 利用position的absolute,会让元素以inline-block形式显示,此时可以设置长宽
元素浮动会影响兄弟元素的位置,父级元素高度塌陷
解决的方法:
- 父级元素定义固定高度
- 最后一个浮动元素之后,增加
<div style="clear:both;"></div>
- 包含浮动元素的父元素设置
overflow: hidden
六、页面渲染过程
一个网页接收到服务器返回的数据后,浏览器大致进行的操作步骤:
- 构建
DOM
树 - 构建
CSSOM
树 - 将
DOM
与CSSOM
结合,构建渲染树 - 回流(
layout
布局) - 重绘
display
七、margin的高度塌陷问题(外边距折叠)
涉及到BFC(Block Formatting Context
,块级格式化上下文)知识,简单来说就是一个独立的块级渲染区域,与外界不相干
BFC的布局约束规则:
内部的
Box
会在垂直方向,一个接一个地放置。Box垂直方向的距离由
margin
决定。属于同一个BFC
的两个相邻Box
的margin
会发生重叠。每个盒子(块盒与行盒)的
margin box
的左边,与包含块border box
的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。即BFC
中子元素不会超出他的包含块。
BFC
的区域不会与float box
重叠。
BFC
就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。计算
BFC
的高度时,浮动元素也参与计算。
折叠边距计算规则:
- 两者边距为正值或负值,则取绝对值大那个
- 两者边距一正一负,则取两者之和
margin
的左右是不受影响,外边距重叠主要是由于重叠的两个元素处于同一个BFC
下。通过某些属性使元素生成新的BFC
上下文即可解决。
BFC触发方式:
- 根元素,即HTML标签
- 浮动元素:
float
值为left
、right
overflow
值不为visible
,为auto
、scroll
、hidden
- display值为
inline-block
、table-cell
、table-caption
、table
、inline-table
、flex
、inline-flex
、grid
、inline-grid
- 定位元素:
position
值为absolute
、fixed
注意:display: table
也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell
,是这个匿名的table-cell
生成了BFC
。
八、行内元素与块级元素
块级元素,独占一行,宽、高、外边距、内边距可控
行内元素,共享一行,宽、高和margin
与padding
的top/bottom
均不可控
九、img标签的底部边距问题
有时候发现图片的底部有着一条缝的视觉效果,其原因是因为img
是一个行级置换元素,图片默认的对齐方式是基线,与字体大小有关
解决办法:
display: block;
float: left;
- 定义
vertical-align
img { border: 0; vertical-align: bottom; }
- 父容器的字体大小设置为0
- 标签设置与图片相同的高度
十、属性值中的百分比
- 宽高百分比相对于父级
- margin/padding中的百分比相对于自身,但padding值不能为负值
- translate的百分比相对于自身
十一、poniter-events
该属性可以用于设置当前元素的点击事件的是否进行处理,具体可参看MDN
关于pointer-events的内容
用于点击穿透,比如网页水印,兼容性很好~
十二、z-index
z-index
是控制层级的属性(换个词语:堆叠顺序),在网页中除了xy
的二维,同时也存在z
轴,比如元素叠加重合,优先级问题。元素重合后的从下到上主要由在文档流中顺序、z-index
、层叠上下文、层叠水平决定。
z-index
仅在定位元素中生效
层叠上下文元素有如下特性:
- 层叠上下文的层叠水平要比普通元素高;
- 层叠上下文可以嵌套,内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
- 每个层叠上下文是自成体系的,当元素发生层叠的时候,整个元素被认为是在父层叠上下文的层叠顺序中。
- 每个层叠上下文和兄弟元素独立,也就是当进行层叠变化或渲染的时候,只需要考虑后代元素。
- 层叠上下文可以阻断元素的混合模式;
层叠顺序的优先级顺序如下:
z-index > 0
(要求z-index
属性生效)z-index: auto
或者z-index: 0
(z-index: auto
不会创建层叠上下文)inline
、inline-block
行内盒子float
浮动盒子block
块级盒子,非inline-block
,无position
定位(static
除外)的子元素z-index < 0
- 层叠上下文元素的
background/border
偶然看到说默认firefox
中的z-index
是auto
,IE
是0
,有待验证,一般来讲z-index
,常用编码下,z-index
越大越靠前
堆叠顺序规则可以简单归纳为:
- 兄弟元素,文档流后者居上,兄弟元素的子元素相互比较根据堆叠上下文(父级元素)来排序
- 在相同的堆叠上下文中,按照明显的优先级顺序来,比如设置了
z-index
,那么值越大,显示距离用户越近
2020-08-18 23:18
2020-08-10 00:38
2020-08-04 15:25
(1)增加或删除 DOM 节点;
(2)display:none(重排并重绘); visibility:hidden(重绘);
(3)移动页面中的元素;
(4)改变元素尺寸(宽、高、内外边距、边框等);
(5)用户改变窗口大小,滚动页面等;
(6)页面初始渲染;
(7)改变元素内容(文本或图片等)。
作者:vivo互联网技术
链接:https://juejin.im/post/6856964615596769288
2020-08-04 11:55
(1)大小不固定的元素垂直居中
父元素设置:display:table; 子元素:display:table-cell; vertical-align:middle;
(2)两列自适应布局
(3)等高布局
2020-08-04 11:39
.a .b:(有空格)选择a的所有后代b
.a>.b:(>)选择a的子代b
.a, .b:(,)a与b样式相同
.a+.b:(+)选择a紧邻的兄弟b
.a~.b:(~)有共同父元素,选择a后的所有b,ab不必紧邻