一盒模型

div{
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 1px solid #000;
    margin: 20px;
}
.content-box{
    box-sizing: content-box;
}
.border-box{
    box-sizing: border-box;
}

使用了box-sizing:content-box;属性的是标准模式

横向空间：width + padding宽度 + border宽度纵向空间：height + padding宽度 + border宽度

使用了box-sizing:border-box;是怪异模式

即是当年IE678的盒模型，width和height即实际尺寸，内容区大小是width－border－padding

外边距折叠

相邻margin取大值

二文档流

如元素使用了定位或固定定位absolute和fixed，那么这个元素会脱离文档流，后面的块元素会忽略它的存在。而这个元素会按指定位置重新定位，如无指定值，则按脱离之前的位置定位。如使用了浮动属性float，也会脱离文档流，后面的块元素会忽略它的存在。但在文本排布中占有位置。

三页面层级

HTML是三维空间，有xy位置，也有z轴上的层叠关系。 HTML在渲染时最先渲染的标准文档流，所以标准文档流排在最下一层 float之后渲染，默认在标准文档流上一层 absolute最后渲染，默认在最上层

可使用z-index指定层叠关系。z-index在对已有定位元素失效(position:relative/absoulte/fixed) 可对每个z-index层限制范围。如：内容层100~200 导航层200-300 蒙版层300-400

四属性选择器

input[class=input]{  // 不会匹配class="input text"
    color: red;
}
input[class~=input]{  // 匹配class="input text"
    color: red;
}
div[class|=article]{  // 匹配 article / article- 开头， 不会匹配article_
    color: red;
}
div[class^=article]{  // 只要是article 开头就匹配
    color: red;
}
[class$=disabled]{  // 匹配结尾
    display: none;
}
[class*=disabled]{   //匹配包含
    display: none;
}

五子选择器

.page > p{    // 直接子选择
    color: grey;
}
h1 + p{      // 紧邻下一个兄弟节点
    margin-top: 10px;
    color: red;
} 
h1 ~ p{    // 同级兄弟结点
    color: red;
}

六伪类选择器

a:{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

标记状态伪类

:link :visited :hover :active :focus

筛选伪类

:empty 没有子元素的元素，比如空span 可用 span:empty :checked :disabled :first-child :last-child :nth-child(an+b) :nth-last-child(an+b) :only-child 匹配一个元素的父元素只有它一个子元素 :only-of-type一个元素的父元素只有它一个当前类型的元素，允许父元素有其他元素，只要不和自己一样就可以

验证伪类

:valid 用于匹配输入值为合法的元素 :invalid 用于匹配输入值为非法的元素 required 属性规定必需在提交之前填写输入字段 pattern 属性规定用于验证输入字段的正则表达式

:valid/:invalid 选择器用于在表单元素中的值是合法/非法时设置指定样式。 :valid/:invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。

required 属性适用于以下类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。当然textarea也可以。

/* 对清空按钮的控制 */
.tt-search.on-focus .tt-search-input:valid + .tt-search-clear{
    display: block;
}

只有在搜索状态下并且输入框有内容的时候才让这个清空按钮出现，所以使用了一个 :valid 选择器来判断和它相邻的输入框的状态。这个 :valid是和 input 中的“required”属性对应的，input 元素有内容时“required”验证条件就会通过，这时候 :valid 选择器就会选中这个 input，从而后面的兄弟选择器才会选中 .tt-search-clear 元素。这种用法就可以直接使用 CSS 来控制清空按钮的显示了，省去了 JS 的工作。

七伪元素选择器

::first-line ::first-letter ::before ::after ::selection 光标选择的元素伪元素是虚拟的，不能用JS操作它

八权重

内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器 > 继承样式 > 浏览器默认样式内联样式1000 ID 100 类选择器、属性选择器和伪类选择器 10 标签选择器 1

九适配

物理像素

1、物理像素点是屏幕的自身属性，设备一出厂这个数值就是固定的了。 2、物理像素只是设备的属性，一般和开发者没什么关系，我们的代码也不会直接去操作物理像素。

逻辑像素

高分辨率设备与底分辨率设备物理像素差距过大造成样式差距过大，为解决此问题出现了逻辑像素在高分辨率设备中1逻辑像素等于3个物理像素在底分辨率设备中1逻辑像素等于1物理像素

设备名称	屏幕尺寸	物理像素(宽*高)	逻辑像素(宽*高)
iPhone X	5.8	1125 x 2436	375 x 812
iPhone 8	4.7	750x1334	375x667
iPhone 8+	5.5	1242 x 2208	414 x 736
Samsung Galaxy S8	5.8	1440 x 2960	360 x 740
HUAWEI P10	5.1	1080 x 1920	360 x 640
红米 4 (4, 4X)	5.0	720 x 1280	360 x 640

十媒体查询

/* 屏幕宽度小于340px时的样式 */
@media (max-width: 340px){ /* 样式1 */ }

/* 屏幕宽度在340px至410px时的样式 */
@media (min-width: 340px) and (max-width: 410px){ /* 样式2 */ }

/* 屏幕宽度大于410px时的样式 */
@media (min-width: 410px){ /* 样式3 */ }

十一 Formatting Context

Formatting Context 是 CSS2.1 规范中的概念。是页面中的一块渲染区域，有一套渲染规则，决定了子元素将如何定位，及和其他元素的关系和相互作用。

BFC (Box Formatting Context)

根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

BFC布局规则：

每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此。
BFC的区域不会与float box重叠
两个BFC相互独立

避免float重叠

body{ width: 300px; position:relative}
.aside{ width:100px; height:150px; float: left; background: #f66;}
.main{height:200px; background:#fcc;}

<body> <div.aside/> <div.main/> </bod>

为main增加overflow:hidden; 启用BFC：匹配到布局规则2（BFC的区域不会与float box重叠）

清除内部浮动

.par{ border:5px solid #fcc; width:300px}
.child{border:5px solid #f66; width:100px; height:100px; float: left;}

<div.par> <div.child/> <div.child/> </div>

为.par增加overflow:hidden; 启用BFC：让par内部浮动元素参与计算高度

防止垂直margin重叠

p{color:#fss; background:#fcc; width:200px; margin:100px;

<p>Haha</p>
<p>Hehe</p>

为hehe增加overflow:hidden; 启用BFC: 独立计算margin

IFC (Inline Formatting Context)

内联格式化上下文高度由其包含行内元素中最高的实际高度计算而来（不受竖直方向的padding/margin影响）

水平居中

当一个块要在环境中水平居中，设置其为inline-block在外层产生IFC，通过text-align使其居中

垂直居中

创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素则可在此父元素下垂直居中。

单行垂直居中

.inline{font-size:12px; vertical-align:middle; border: dotted 1px royalblue;}
.inlien:after{dispaly:inline-block; conent:''; height:100%; width:0;}
.inline span{font-size:24px; vertical-align: inherit;}
.inline b{font-size:46px; vertical-align: inherit;}

<div class="inline"> <span>aaa</span> 123 <b>bbb</b> 456</div>

多行垂直居中

.moreline{line-height:300px; border: dotted 1px rosybrown;}
.moreline span{dispaly: inline-block; vertical-align: middle; line-height: normal;}

<div class="normal"><span>内联格式化上下文高度由其包含行内元素中最高的实际高度计算而来（不受竖直方向的padding/margin影响）</span></div>

FFC (Flex Formatting Contexts)

display值为flex / inline-flex 元素将会生成自适应容器

GFC (GridLayout Formatting Contexts)

display值为grid，此元素会获得独立渲染区域

scw = (容器宽度 - (m * (mc - 1))) / mc
cw = (scw * cs) + (m * (cs - 1))

scw: 单列宽度
m: 列间距
mc: 最大列数(一般12)
cw: 列宽度
cs: 列数(1~12)

.card{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;  /* fr 类似flex中的拉申、repeat(3, 1fr) 等价写法*/
    grid-template-rows: 100px 50px;
    grid-gap: 20px;
}
.card:nth-child(1){  /* 合并单元格 */
    grid-column-start: 2;   /* 等价写法 grid-column: 2/4 */
    grid-column-end: 4;
    grid-row-start: 1;      /* 等价写法 grid-row: 1/3 */
    grid-row-end: 3;
}

.card:nth-child(1){  /* 合并单元格 */
    grid-area: 1 / 2 / 3 / 4;
    /* grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end */
}

CSS整合笔记01

一 盒模型