你需要掌握的HTML和CSS

[FanFanJUN]

• 块元素（block）独占一行，内联元素（inline），不独占一行
• 盒子大小决定（padding border width height）
• box-sizing: border-box;(设置整个盒子大小)
• outline(轮廓 不会影响可见盒子大小)
• box-shadow(阴影)
• border-radius(圆角)
• float(设置浮动 从文档流脱离 不再占用文档流位置 其他元素占用位置 水平布局等式不需强制成立 垂直排布-> 横向排列)

浮动

• 设计初衷： 文字环绕图片的排版功能
• 特性

1. 脱离文档流 不再保留原来的位置 形成高度塌陷
2. 具有行内块的特性(行内元素、块级元素)
3. 一行内显示并且元素顶部对齐
4. 父级元素装不下这些浮动盒子 多出的盒子另起一行对齐

• 浮动元素经常和标准流父级搭配,父元素约束子元素； 先用标准流上下排列位置，之后内部子元素采取浮动排列左右位置
• 浮动注意点

1. 浮动元素只会影响后面的标准流

• 清除浮动

1. 父元素不设置高度，子盒子浮动不占位，父盒子高度为0， 就会影响下面的标准流盒子
2. 父盒子本身有高度 则不需要清除浮动
3. 清除浮动之后 父级元素会根据子盒子自动检测高度，父级有高度就不会影响下面的标准流

• 清除浮动语法 clear: both
• 清除浮动方法

1. 额外标签发（隔离法）W3C推荐(额外标签必须是块级元素)
2. 父级添加overflow
3. 父级添加after伪元素
4. 父级添加双伪元素

BFC(块级格式化上下文)

• 特点

1. BFC的区域不会与float的元素区域重叠
2. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
3. 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关

• 触发条件

1. 浮动元素：float值为left、right
2. overflow值不为 visible，为 auto、scroll、hidden
3. display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
4. position的值为absolute或fixed

flex 布局(弹性布局)

• 通过给父盒子添加flex属性 控制子盒子的位置和排列方式
• 父元素设置为flex 子元素的float、clear、vertial-align属性失效
• 行内元素 块级元素均可以
• 父项常见属性

flex-direction: x 轴(row)  y 轴(column)
justify-content：控制子元素位置
1. space-between 先两边贴边 再平分剩余空间
2. center 在主轴居中对齐 (x 轴水平居中)
flex-wrap : wrap 换行  nowrap 不换行

侧轴
align-items: center  挤在一起居中（垂直居中） 单行有效

align-content : 多行有效(换行多行)

定位

• 语法

position： left right bottom top
定位 = 定位模式 + 边偏移

• fixed（相对于浏览器窗口固定定位 不会脱离文档流）
• relative（相对于自身定位, 真正作用是给absolute‘当爹’ 占有原有位置）
• absolute

1、相对于最近的一层父级定位元素；没有一个祖先元素设置定位，那么参照物是body层
2、脱离文档流 不占有原有位置

• 子绝父相

• 子级绝对定位，不会占有位置，可以放到父盒子的任意位置，不会影响其他兄弟盒子
• 父盒子需要加定位限制子盒子在父盒子内显示