1. 清除浮动方法
首先明确：清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。
- 添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
- 原理同1。利用:after伪类达到加入一个空标签 清除浮动的原理
- 父级div手动定义height，就解决了父级div无法自动获取到高度的问题
- 父级div定义overflow:hidden/auto。原理：在使用overflow:hidden/auto时，浏览器会自动检查浮动区域的高度
- 父级div也一起浮动。
- 父级div定义display:table
```
//以下就是一个由于浮动引起的高度塌陷。
<style type="text/css">
.div1{background:#fff;border:1px solid yellow;/*清除浮动代码 width:98%;overflow:hidden;*/}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:30px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮动代码1*/
/* .clearfloat{clear:both;} */
/*清除浮动代码2*/
/*.div1:after{
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
div1{//兼容低版本IEzoom:1}
*/
/*清除浮动代码3*/
.div1:after,.div1:before{
content:'';
display:block;
clear:both;
visibility: hidden;
}
.div1{
zoom:1;//兼容低版本IE
}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>
```
2. position 定位问题
-
默认（static）正常文档流。设置left,right,bottom,top,z-index这些属性都是没有效果的
-
相对定位（relative）正常文档流
- 相对于它在文档流中的位置的起始点进行移动。
- 就算元素被偏移了，但是他仍然占据着它没偏移前的空间
- 通过z-index去区分层级。
-
绝对定位（absolute） 脱离文档流
- 相对于设置了除static定位之外的定位属性的第一个祖先元素，如果所有的祖先元素都没有以上三种定位中的其中一种定位，那么它就会相对于文档body来定位 <可以说是一直找父级元素>
- 通过z-index去区分层级。
- 不在文档流中占据空间
- 行内元素绝对定位之后将具有行内块元素的特征。
- 绝对定位的优先级别大于浮动。！！！
-
固定定位（fixed）脱离文档流
- 相对于浏览器窗口定位，并且不会随着滚动条进行滚动。
- 通过z-index去区分层级。
- 不在文档流中占据空间
在设置了相对定位时也会让元素浮起来，但它们的不同点在于，相对定位不会删除它本身在文档流中占据的空间，其他元素不可以占据该空间，而绝对定位则会删除掉该元素在文档流中的位置，使其完全从文档流中抽了出来，其他元素可以占据其空间。
3. CSS行内元素、行内块元素和块级元素
- 行内元素：span，a，br，img（可以设置宽高），
- 由内容撑开宽高
- 可以和其他元素保持一行
- 不能设置宽/高/上下外边距，可设置margin-left和right.高度等于行高
- 块级元素：div
- 默认元素宽度和父元素保持一致，独占一行
- 可以设置所有属性（宽、高、外边距）
- 行内块元素：display: inline-block; input
- 不设置宽带时，元素宽度和元素内容宽度保持一致
- 可以和其他元素保持一行
- 可以设置所有属性（宽、高、外边距）
- 可变元素: 根据上下文语境决定该元素为块元素或者内联元素。例如：button，map
- 不自动换行
- 能够识别宽高
- 默认排列方式为从左到右1
《CSS权威指南》中文字显示：任何不是块级元素的可见元素都是内联元素。其表现的特性是“行布局”形式，这里的“行布局”的意思就是说其表现形式始终以行进行显示。比如，我们设定一个内联元素border-bottom:1px solid #000;时其表现是以每行进行重复，每一行下方都会有一条黑色的细线。如果是块级元素那么所显示的的黑线只会在块的下方出现。
4. 边框 border
- border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px; “/”前的四个数值表示圆角的水平半径，后面四个值表示圆角的垂直半径
-
box-shadow 对象选择器 {box-shadow:投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色}
标签 意义 阴影类型 此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值“inset”,就是将外阴影变成内阴影，也就是说设置阴影类型为“inset”时，其投影就是内阴影； X-offset 是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边； Y-offset 是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部； 阴影模糊半径 此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； 阴影扩展半径 此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小 阴影颜色 此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
5. 文本换行
- CJK: 中日韩统一表意文字。他们是单独的换行规则。和英文数字不同。以下统一用中文代替。
overflow-wrap（W3C版本的）和 word-wrap（牛逼的微软造的） 是一个东西，最好使用word-wrap
word-break属性|意义
-|-
normal | 默认规则
break-all | 非中文则在任意字符处折行
keep-all | 中文不断行，英文数字保持原本
| word-wrap属性 | 意义 |
|---|---|
| normal | 默认规则 |
| break-word | 单词断开 |
| white-space属性 | 意义 |
|---|---|
| normal | 默认。空白会被浏览器忽略。 |
| nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 br 标签为止。 |
| ... | 还有一些属性 不做记录了。。。 |
不换行超出部分打点：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
6. 水平垂直居中的三种比较好的方法
- 绝对定位 50% 然后再向左 上调整自身宽高一半
div{
background:red;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
//或者是偏移自身宽高的一半
margin-left:-300px;
margin-top:-300px;
}
- 绝对定位下top left right bottom 都设置0 margin为auto 原理：绝对定位的布局取决于三个因素，一个是元素的位置，一个是元素的尺寸，一个是元素的margin值。而没有设置尺寸和 margin 的元素会自适应剩余空间，位置固定则分配尺寸，尺寸固定边会分配 margin，都是自适应的。
.centerBox{
width: 200px;
height: 200px;
background:red;
position: absolute;
left:0;
top:0;
right: 0;
bottom: 0;
margin: auto;
}
- flex 水平垂直都居中
.box{
height:800px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #ccc;
}
7. flex布局详细解析
- Flex是Flexible Box的缩写，就是“弹性布局”，用来为盒装模型提供最大的灵活性。
- flex适用于任何容器。需要注意的是，设为flex布局以后，子元素的float、clear和vertical-align属性将失效！！！
// display:inline-flex;
// display:flex;
- 用Flex布局的元素，称为Flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，成为flex项目（flex item），简称“项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
- 容器属性：
.box{
// 主轴方向 → | ← | ↓ | ↑
flex-direction:row | row-reverse | column | column-reverse;
// 主轴线排列不下： 不换行 | 正常换行 | 往上面换行（第一行在下，第二行在上）
flex-wrap: nowrap | wrap | wrap-reverse;
// flex-direction属性和flex-wrap属性的简写形式 上面俩玩意的简写。
flex-flow: <flex-direction> || <flex-wrap>;
//主轴对齐方式：左对齐 | 右对齐 | 向中心对齐 | 两侧对齐 | 每个项目两侧的间隔相等，所以，项目之间的间隔比项目与边框的间隔大一倍。
justify-content:flex-start | flex-end | center | space-between |space-around;
//交叉轴对齐方式：上对齐 | 下对其 | 中间对齐 | 项目的第一行文字的基线(小写字母x的下沿)对齐 | 项目未设置高度或设为auto，将占满整个容器的高度
align-items:flex-start | flex-end | center |baseline | stretch;
}
- 项目item属性
.item{
//自定义该项目位置。默认为0，数字越小越靠前排列。
order: <number>;/* default 1 */
//自定义该项目放大比例，默认值为0，即如果存在剩余空间，也不放大。
// 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目为1，则牵着占据的剩余空间将比其他项多一倍
flex-grow: <number>;/* default 1 */
//自定义了项目的缩小比例，默认为1，即如果空间不足，改项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 负值无效！！！
flex-shrink:<number>;/* default 1 */
// 定义了在分配多余空间之前，item占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即item本来宽度。
flex-basis:<length> | auto ; /*default auto*/
//flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。后面两个属性可选
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
快捷方式： auto（1 1 auto）和 none（0 0 auto）
//align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，等同于stretch。
//自定义某个item的对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
- transform变形
// 旋转 | 缩放 | 扭曲 | 移动 | 矩阵变形
ransform: rotate(30deg) | scale(x,y) | skew(30deg,10deg) | translate |matrix;
rotate 正数顺时针
scale x,y分别为水平垂直方向缩放的倍数。1是不变。
skew 水平/垂直方向扭曲角度
matrix 含六值的(a,b,c,d,e,f)变换矩阵
transform-origin 设置元素的运动的基点（参照点）。默认是元素的中心点。
8. 盒模型
标准盒子模型：width/height是指内容宽高
占用宽高 = width/content + padding*2 + border*2
IE盒子模型：width/height是指实际占用的宽高
占用宽高 = width = content + padding*2 + border*2
