这是我参与「第四届青训营 」笔记创作活动的第11天
1 div+css布局?
关键词： 盒子 位置
布局是确定内容的位置和大小的算法，依据元素、容器、内容、兄弟节点等信息来计算
布局相关技术：
行级、块级、表格布局、FlexBox（display: flex）、Grid布局（display:grid）、浮动布局（float）、定位布局（position）
网页设计，首先要做好整体的布局，网页布局就是将不同的元素按照一定的规则放置在 浏览器的不同位置，因此会经常用到一些内容、填充、边框、边界等属性，html布局元 素经过不同的嵌套与位置的摆放，就类似于日常生活中的用盒子装东西，把每一个布局 元素看成一个盒子，引出了盒子模型。
元素框的最内部分是实际的内容，直接包围内容的是内边距（padding）内边距呈现了元素的背景（background）；内边距的边缘是边框（border）；边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素（其实元素的margin就是其所在父元素的padding）。元素的背景应用于由内容和内边距、边框组成的区域。
在 CSS 中，width 和 height 指的是内容区域的宽度和高度，增加内边距、边框和外边 距不会影响内容区域的尺寸，但是会增加元素框的总尺寸
2 盒子模型？
width : 宽度 height: 高度 border: 边框 margin: 外边距 padding: 内边距 作用：思想 用来摆放内容的位置
2.1 margin 外边距
规律：border margin padding：四边（上 下 左 右） border-left border-right border-top border-bottom
2.2 margin简单注意问题：
body有默认的margin： chrome 8px
百分数相对于容器的宽度或高度
如果设置了上下两个盒子的margin 两个盒子的距离是以大的那个margin为准（margin的塌陷）
盒子居中： margin: 10px auto;
有四个值的时候：margin:10px 5px 15px 20px;（顺序依次是 上 右 下 左）；
有三个值的时候：margin:10px 5px 15px; （顺序依次是 上 左右 下）；
有两个值的时候：margin:10px 5px; （顺序依次是 上下 左右）；
有一个值的时候 margin：10px；（代表四个值都是10px）；
3 padding 内边距
作用：用来调整盒子内部的内容的摆放 注意问题：设置了padding以后会把外层盒子整体撑大？影响：影响整个网页的布局 百分数相对于容器的宽度或高度 盒子的总宽度：300(width) + padding-left/right(10+10) + border-left/right(5+5) = 330
注：padding 简写时值的顺序与margin相同
有四个值的时候：padding:10px 5px 15px 20px;（顺序依次是 上 右 下 左）；
有三个值的时候：padding:10px 5px 15px; （顺序依次是 上 左右 下）；
有两个值的时候：padding:10px 5px; （顺序依次是 上下 左右）；
有一个值的时候：padding：10px；（代表四个值都是10px）；
这个简写属性设置元素所有内边距的宽度，或者设置各边上内边距的宽度。行内非替换 元素上设置的内边距不会影响行高计算；因此，如果一个元素既有内边距又有背景，从 视觉上看可能会延伸到其他行，有可能还会与其他内容重叠。元素的背景会延伸穿过内 边距。不允许指定负边距值。
4 块级元素和行内元素
- 块级元素：div h1 p li 等等 独占一行 可以设置宽高 不和其它盒子并列摆放，适用所有的盒模型属性
- 行内元素：span i a img 等等 在一行内显示，和其他行级盒子一起放在一行或拆成多行，盒模型的width、height不适用，
行内元素转换成块级元素：转换以后就可以支持宽高
- display:block 块 /行内元素转换成块级元素 独占一行/
- display:inline 行/块级元素转换成行内元素/
- display:inline‐block; /行内元素转换成行内块可以支持宽高.作为一个整体不会被拆成多行/
- none /无/
规律：div+css布局，margin 、padding、float、position都是和位置有关 把盒子摆放到合适的位置
5 float 浮动
普通流：不使用定位、浮动等特殊css规则的时候，元素的自然排序规则 浮动：脱离了普通流，元素可以左右移动 (脱离标准文档流并且可以左右移动) float:left float:right 作用：做盒子的左右布局 可以很方便的布局 例如： 两个div左右布局 在一行内显示
浮动带来的问题：有可能会影响到后面元素的布局 解决方案：在浮动过后的元素后面一定要清除浮动
float：左右布局 margin：调整盒子之间的距离 padding:调整盒子内部 的盒子之间的距离（内边距） position：定位 固定位置 作用-可以把元素摆放到任意位置
overflow:hidden; 防浮动带来的问题
- visible
- hidden
- scroll
6 相对定位
postion:relative
参照物：根据谁来做这个定位的? 在没有使用定位之前自身的初始位置 要使位置发生变化还需要有偏移量 left：100px
根据没有使用定位之前的位置发生偏移 向右偏移100px 元素框偏移某个距离。元素仍保持其未定位前的 形状，它原本所占的空间仍保留。
7 绝对定位
position:absolute; left:xxpx; right:xxpx;
参照物：1 上级元素中有定位(position)属性的 2 并且找的是最近的那个有定位属性的父级 偏移量：left top right bottom
查找参照物的顺序： 先找父级元素，如果有定位属性（position）就以这个父级元素作为参照物发生偏移， 如果没有找到就向外层逐一查找，直到找到有position属性的元素，如果一直都没有，那么就以最外层的html 元素为参照物发生偏移
8 固定定位
参照物：浏览器可视区
position:fiex;
10、其他选择器
选择器：选择元素的方法 id ==> # class ==>. 标签选择器==> 标签名称
10.1 相邻选择器 ==> + 选择某个元素后面相邻的元素
相邻选择器可以选择紧跟其后的相邻元素
注意：相邻选择器用＋号来连接
10.2 多元素选择器 ==> ， 应用场景：有多个元素具有相同的属性（又很多代码是重复的，可以提取出来做成公用的）
当几个元素有共同属性的时候，可以使用多元素选择器
注意：选择多个元素的时侯， 用逗号隔开
10.3 后代选择器 ==> 空格， 应用场景：选择符合条件的后代元素,
后代选择器作用于父元素下面的所有子元素
10.4 子元素选择器==> > ， 应用场景： 选择符合条件的子元素
- 子元素选择器作用于父元素的子元素，
- 子元素选择器与后代选择器的区别在于后代选择器可以作用于子孙元素，
- 而子元素选择器只能作用于它的子元素
注意： 子元素只能选择下一层元素后代选择器能选中下面n层元素
作用：都是用来方便的选择元素
10.5 属性选择器 ==> 元素[属性=属性值] 应用场景：选择具有某些属性的元素
,例如： input[name]，只要有name属性的input元素都会被选中 name
- name = val 匹配所有name属性值等于val的元素 (input[id=ipt2] 属性值一般不加引号)
- name ^= val 属性值以val开头的元素都会被选中
- name $= val 属性值以val结尾的元素都会被选中
- name ~= val 属性值包含了val的元素都会被选中 可以理解为筛选的条件
11、伪类、伪元素
伪元素 不基于标签和属性定位元素
对a元素使用:before 和 :after伪选择器，使用这类选择器对时候，通过设 置content属性对值可以指定耀插入的内容。这个属性比较特别，只能跟伪选择器一起使用。
- after表示在a元素内容之前插入，
- before表示在a元素内容之后插入
伪类 状态伪类 和结构性伪类
- 未访问链接(:link)、
- 鼠标放上状态(:hover)、
- 已访问链接(:visited)、
- 当前活动链接(:active)
- :focus
- :nth-child() 第几个子元素
- :first-child 第1个子元素
- :last-child() 最后1个子元素
