css盒模型
盒子模型包括内边距，边框，外边距，和实际 内容这几个部分，设置box-sizing: content-box|border-box;
标准盒模型：width和height为content 的内容宽高，盒子的大小 = content + border + padding + margin
怪异盒模型：width和height为内容、边框、内边距的总宽高，盒子的大小=width(content + border + padding) + margin
css 选择器优先级 & 权重
权重规则：Important＞行内样式＞ID＞class＞标签，伪元素＞通配符*
相同权重后面覆盖前面应用
子元素默认继承父元素，没有权重，若有*权重规则则应用
| 选择器 | 权重 |
|---|---|
| 继承/通配符* | 0, 0, 0, 0 |
| 元素标签选择器 | 0, 0, 0, 1 |
| 类/伪类选择器 | 0, 0, 1, 0 |
| ID选择器 | 0, 1, 0, 0 |
| 行内样式 | 1, 0, 0, 0 |
| !important | ∞ |
优先级注意点:
- 权重是有 4 组数字组成,但是不会有进位。
- 可以理解为类选择器永远大于元素选择器, id 选择器永远大于类选择器,以此类推…
- 等级判断从左向右，如果某一位数值相同，则判断下一位数值。
- 可以简单记忆法: 通配符和继承权重为 0, 标签选择器为 1,类(伪类)选择器为 10, id 选择
器 100, 行内样式表为 1000, !important 无穷大. - 继承的权重是 0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重
都是 0。
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。示例如下：
div ul li ------> 0,0,0,3
.nav ul li ------> 0,0,1,2
a:hover ------> 0,0,1,1
.nav a ------> 0,0,1,1
css 书写顺序建议：
- 位置属性(position, top, right, z-index, display, float等)
- 大小(width,height, padding, margin)
- 文字系列(font, line-height, letter-spacing, color- text-align等)
- 背景(background, border等)
- 其他(animation,transition等)
BFC（Block-formatting-context）
块级格式化上下文，独立的渲染区域。
只有 Block-level box 参与，它规定了内部的 Block-level Box 如何布局，并且与这个区域
外部毫不相干
布局规则：上下左右
- 内部Box垂直方向，一个接一个放置
- 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠（margin 塌陷）
- 元素margin box 的左边， 与包含块 border box 的左边相接触(对于从左往 右的格式化，否则相反)。即使存在浮动也是如此
- BFC 的区域不会与 float box 重叠
- BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
- 计算 BFC 的高度时，浮动元素也参与计算
生成 BFC的方式:
1、根元素
2、float 属性不为 none
3、position 为 absolute 或 fixed
4、display 为 inline-block， table-cell， table-caption， flex， inline-flex
5、overflow 不为 visible
postion: sticky(粘性定位), sticky属性仅在以下几个条件都满足时有效：
1、父元素不能overflow:hidden或者overflow:auto属性
2、必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
3、父元素的高度不能低于sticky元素的高度
IFC(Inline-Formatting-Context)
内联格式化上下文，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)
1、ifc中的元素会在一行中从左到右排列。
2、在一行上的所有元素会在该区域形成一个行框。
3、行宽的高度为包含框的高度，高度为行框中最高元素的高度。
4、浮动的元素不会在行框中，并且浮动元素会压缩行框的宽度。
5、行框的宽度容纳不下子元素时，子元素会换到下一行显示，并且会产生新的行框。
6、行框的元素内遵循text-align和vertical-align。
浮动元素会引起的问题 & 清除浮动
浮动将元素排除在普通流之外，即元素将脱离文档流，不占据空间。浮动元素碰到包含它的边界或者浮动元素的边界停留
可能会引起的问题：
1、子元素浮动后，不占位置，父元素的高度无法被撑开，影响与父元素同级的元素;
2、与浮动元素同级的非浮动元素(内联元素)会跟随其后;
3、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
清除浮动：
1、使用空标签清除浮动。clear:both.弊端就是增加了无意义标签。（A2&A3）
2、使用overflow。给包含浮动元素的父标签添加css属性overflow:auto; zoom:1;zoom:1用于兼容IE6。A1
3、使用after伪对象清除浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。
使用中需注意以下几点。给父元素设置 A1
一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
二、content属性是必须的，但其值可以为空，content属性的值设为”.”，空亦是可以的。
4、浮动外部元素
10px实现
- transform:scale(0.8);
- zoom:50%;
- -webkit-text-size-adjust:none;
0.5px边框
1、伪元素相对布局，结合scale缩放
.border::after {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: red;
transform: scaleY(0.5);
}
2、border + border-image + 线性渐变linear-gradient
.border {
border-bottom: 1px solid transparent;
border-image: linear-gradient(to bottom,transparent 50%, red 50%) 0 0 100%/1px 0;
}
3、伪元素绝对定位 background + 线性渐变linear-gradient
.border::before {
content: " ";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-image: linear-gradient(to bottom, transparent 50%, red 50%);
}
flex / grid 布局
flex是一维布局，局部布局；grid是二维布局，整体布局。
flex常用属性：
flex-direction： row|column;
flex-wrap:no-wrap|wrap|wrap-reverse; // 包裹换行／反转
父元素属性justify-content／align-items ／align-content；
flex子元素属性：flex-grow／flex-shrink／flex-basis／align-self／order等
flex-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性。
grid可以用于实现瀑布流的效果，常用属性：
// 定义列宽 行高 多种方式
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: 100px 100px 100px;
grid-template-columns: repeat(3, 100px);
grid-template-columns: repeat(auto-fill, 100px);
grid-template-columns: 1fr 1fr minmax(100px, 1fr);
grid-template-columns: 100px auto 100px;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4]; // 指定网格名称
// 同理 grid-template-rows
grid-gap: <grid-row-gap> <grid-column-gap>; // 设置 行间距和列间距
grid-row: auto/span 11; // 当前元素所占行数，实际item高度=行高*行数+行间距*（行数-1）
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
