CSS总结
链接：https://www.zhihu.com/question/426944573/answer/2620278344
来源：知乎
1. css 选择器及其权重
为元素写 CSS 样式，那么首先就要了解 CSS 选择器。
选择器：
- 行内样式权重为 1000
- ID选择器 —— 权重100
- 类选择器 —— 权重10
- 标签/伪类/属性选择器 —— 权重1
- 通配符选择器 —— 权重0
- 继承没有权重。
- 遇到 !important 则是最大，大于一切。
2. 行内元素和块级元素
- block：是块级元素，会独占一行，能设置宽度，高度。
- inline：行内元素，设置 width 和 height 无效，由内容撑开，
- inline-block：能设置宽度高度，且不会独占一行。
3. 盒子模型
盒子模型由：内容 content，内边距 paddig，边框 border，外边距 margin 组成。
通常我们设置标准盒子模型（W3C 盒子模型）的宽度时，要考虑他的宽度是：
width = content（设定宽度）+ padding + border
设定的宽度与实际的宽度不符。这让我们在使用时需要计算。
CSS3 提供了一种新方法：
box-sizing: border-box；
可以让我们盒子的宽度就是我们所设定的 width，不会因内边距和边框而撑开。
我们也称这种盒模型叫 IE 盒子模型或怪异盒子模型。
4. margin 常见问题
（1）外边距合并和传递
当我们在设置两个上下排列的 p 标签的上下外边距时，会发生外边距合并（重叠）。
<style>
.p{
margin-bottom:10px;
margin-top:15px;
}
</style>
<body>
<p>段落1</p>
<p></p>
<p></p>
<p></p>
<p>段落2</p>
</body>
当这样两个 p 标签上下排列时，他们的间距并不是：15+10=25 px。 会发生外边距合并，他们中间将只有 15 px（较大者）的距离。
同时，他们中的空标签，会被忽略，不会影响两个有内容的标签。
（2）负值的 margin
我们在操作中有时会给 margin 加一个负值，目的是让盒子朝我们期望的方向移动。
当为盒子添加 margin-top/left：负数的时候，这个盒子会朝上或左移动。
但我们给盒子添加 margin-bottom/right：负数时，这个盒子之后的元素会向着这个盒子的位置移动。（自身宽高缩小）
5. float
float可以说是 CSS 的必备招式
float会为元素设置浮动，浮动的元素自动变为行内块元素，且会 ” 一个挨一个 “ 的排列在一行上。
这种排练元素的手法在 flex 出现之前非常常见，但同时也会伴随诸多问题。
其中最常问的就是清除浮动,那就涉及到 BFC 的应用
6. BFC
https://www.itcast.cn/news/20201016/16152387135.shtml
嵌套元素的外边距塌陷：
我们在为子元素加一个向上的 margin 时，期待的效果是子元素可以与父元素隔开，而事实却不会这样。
这个margin会加到父元素上，父元素依此移动，但父子元素还是紧贴在一起。
为了解决这样的现象，我们有几种办法：
- 加一个透明边框。
- 使用父元素 padding 的方式来隔开父子。
- 父元素
overflow:hidden。
第三种解决方案就是利用了 BFC
BFC 是块级格式化上下文。可以为内容添加独立的渲染区域。
BFC 的常见应用有：
- 清除浮动。
- 独立渲染。
- 解决外边距塌陷。
形成 BFC 的几种条件：
- 是body 根元素
- 是浮动元素 ———— 是float 但不是 none
- 定位元素 ———— position 是 absolute 或 fixed
- 行内块显示模式 —— inline-block
- 设置overflow —— 即hidden，auto，scroll（不能为 visible）
- 表格单元格 —— table-cell
- 弹性布局 —— flex
划重点:
一个 BFC 区域只包含其子元素，不包括其子元素的子元素。
并不是所有的元素都能成为一块 BFC 区域，只有当这个元素满足了上面的任意1个条件之后，这个元素才会成为一块 BFC 区域。
不同的 BFC 区域之间是相互独立的，互不影响的。利用这个特性我们可以让不同 BFC 区域之间的布局不产生影响。
7. 清除浮动
这是一道常见的手写题：
.clearfix :after{
content:'';
height:0;
overflow:hidden;
clear:both;
display:block;
}
.clearfix{
*zoom:1; //浏览器兼容性
}
8. 水平居中及垂直居中方式
简单来说，分几种常用的手法：
- 最最基础的方式是的使用
margin:0 auto来使元素水平居中。 - 使父元素中的子元素垂直居中的方式是：父元素
line-height与自身高度相同。 - 接下来就是使用
定位+位移的方法:
1.定位+margin
position:absolute;
left:50%;
top:50%;
margin:-1/2height 0 0 -1/2width;
2.定位+tarnslate
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%)
- 用flex来实现居中：
display:flex;
justify-content:center;
align-items:center;
flex布局在工作中的使用频率极高也极其方便，需要重点学习！
9. flex 弹性布局
flex 弹性布局提供了一种不同于传统 float 的布局方式，通过主轴和侧轴实现元素的排列。
- 我们先来看父元素的属性(只列举一些常见的）：
display:flex; //定义父元素为flex盒子
flex-direction:row/column; //定义flex盒子中的主轴方向
flex-warp:warp/nowarp; //定义flex盒子的主轴元素是否自动换行
justify-content:center/space-around/space-between; //定义元素在主轴上的排列方式
align-items:center; //定义元素在副轴上的排列方式。
对于子元素来说有一个必须知道的知识点：flex:1代表什么？
简单来说，flex:1是一个语法糖，浏览器会解析为对应的属性。
flex-grow:1; //会填充主轴的剩余空间
flex-shrink:1; //会在主轴空间元素不足时，被压缩
flex-basis:0%; //元素在扩展或收缩时，基于的自身原本宽度
那我们就知道了，这三个属性配合使用，就可以使所有的子元素都保持同样的大小。
在开发中通常需要擅用这三个属性，来控制 flex 中子元素的大小。
通过这些特性，实现了 flex “弹性”盒子，让布局更加方便。
浙公网安备 33010602011771号