7.29笔记浮动

浮动
默认文档流：
1.块级远元素，默认沾满一行，如果手动设置了尺寸，则以手动设置的为准。如果有内容，内容决定了块级的尺寸。
2.内联元素。默认从右往左

破坏默认文档流
1.浮动：float

清除浮动：必须要和浮动元素是同级（兄弟元素），且在浮动元素之后

.clear::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}

色块布局：
问题： 1. class，id 定义太多。结构复杂。 2. 命名烂，无语义性。易读。 3. 有效区域。 4. 从大到小，从粗到细。
命名，规范，有语义性，足够的注释。
样式含义：尺寸作用在哪个盒子上。默认值是content-box box-sizing: contect-box | boder-box
calc()计算边距
flex
水平方向上的布局，可以使用浮动，也可以使用 display:inline-block，特殊场景也可以使用定位。
清除列表的小点：list-style-type：none；写在ul标签里边。
清除a元素的下划线：text-decartion：none；//用作导航栏 录像83
鼠标的形状：cursor：pointer
让文字垂直居中：line-height： 设置与行高相同尺寸就可以垂直居中
max-width| max-height |min-width | min-height 最大最小宽高单行文字超出出现省略号

等分布局：
使用浮动等分，calc函数计算宽高，display：inline-block
css：盒模型，浮动，定位
另外一种破坏默认文档流。
position：位置。static | absolute | relative | fixed static 表示默认文档流。
absolute ：绝对定位。
定位基准： 祖先元素中，第一个非static定位的元素，如果未找到，则以body为基准。
relative：相对定位。 以自身元素所在位置为定位基准进行偏移。
fixed：固定定位。 定位基准：以视区为定位基准。

top、left、bottom、right。 如果是使用两个方向相对的名词，那么有可能其中一个无效，或者两个决定元素的尺寸。
display:inline-block ，行内块级元素，既保证在同一行，同时可以设置尺寸。注意有空格
display：block：显示为块级元素，此元素前后会带有换行符。
display：inlne：显示为内联元素，前后没有换行符。
display：none：隐藏元素并释放空间，visibility：hidden 也可以隐藏但不释放空间。
z-index:提高楼层。
box-sizing: content-box|border-box|inherit:
content-box: 指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box: 指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

单行文本超出不换行：

overflow：hidden；
text=over：ellipsis；
white-space：nowrap；