盒子模型
- 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用
- CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容
- Margin(外边距)：元素与其他元素的距离（边框以外的距离），外边距是透明的，需要修改-style才能看见，设置负像素有效果，效果会体现在父标签上，但如果给父级标签添加边框，效果就不会体现
- margin复合样式
- auto：左右居中，没有上下居中
- margin-left:auto：左居中
- margin-right:auto：右居中
- margin-top上外边距，margin-bottom下外边距：取两者之间的较大值
- margin-right右外边距，margin-left左外边距：取两者的和
overflow:hidden;：解决内边距重叠问题，超出隐藏，清除浮动
- Border(边框) - 围绕在内边距和内容外的边框
- border复合样式：width style coloe
- border-color边框颜色
- 一个值的时候代表四个方向值一样，顺序为：上 右 下 左
- 两个值的时候：上下 右左
- 三个值的时候：上 下右 左
- 四个值的时候：上 右 下 左
- border-width边框宽度
- border-style边框样式
- solid:实线
- dashed:虚线
- dotted:点线
- double:双边框
- border-left左边框
- border-right右边框
- border-top上边框
- border-bottom下边框
- border-radius: 50%：圆角度（50%是一个圆）
- Padding(内边距)：边框与内容之间的距离，内边距是透明的
- padding复合样式
- padding-top上内边距
- padding-bottom下内边距
- padding-right右内边距
- padding-left左内边距
- Content(内容) - 盒子的内容，显示文本和图像
- display:inline-block：排列在同一行
- opacity:百分比：透明度
- vertical-align:middle/top/botton：对齐
- 一个盒子的大小，就是：内容高宽 + 内边距 + 边框
CSS浮动
- 其实就是对齐在同一行
- 完全可以用
display代替
- 浮动，其实就是让元素脱离正常的文档流。当正常文档布局不能解决的时候，则需要脱离正常文档流
- 优点：使元素脱离文档流，按照指定的(左右)方向移动，遇到父级边界或者相邻元素停下来，即遇到父元素或者别的浮动元素，浮动元素不占空间
- 缺点：浮动会带来高度塌陷的问题
浮动的实现
解决高度坍塌的办法
- 给父级增加高度（不推荐使用）
- 给父级加
overflow：hidden，即设置超出部分隐藏，但如果是导航栏有下拉元素也会被隐藏
- 添加一个空的
div，通过子级元素撑起来，会增加无意义元素
- 使用伪元素：
.clearfix（:after{ content: ""; display: block; clear: both;}）即添加括号中的内容，也可以用before，before是在前面添加伪元素
CSS定位
static 静态定位(没有定位)，默认fixed 固定定位，相对于浏览器窗口进行定位方形词； left 、right、 top、 bottomrelative 相对定位，相对于正常位置（原来没定位之前的位置）进行定位，还要占据位置absolute 绝对定位，没有占据位置，使元素完全脱离文档流； 没有定位父级，则相对整个文档发生偏移； 参考最近非static定位的父级进行定位
<style>.rap{width:200px;height:200px;background:red;/*固定定位*/position:fixed;botton:0;right:0;/*相对定位*/position:relative;left:50px;/*只有定位之后才有这个属性，否则没有*//*绝对定位*/position:absolute;/*没有父级的话相对于文档流定位*//*有定位父级时，子相对于父级定位*//*父级和定位父级是两个概念，定位父级是最近的父级*/left:50px;}/*层级：当多个窗口在一起的时候会有覆盖，那么到底该显示那个，可以通过层级来控制，z-index 默认都是0，可以通过这个来控制优先级*/.l1{z-index:1;/*默认都是0，数值越大，层级越高，类似ps的图层*/}
</style>
重置样式
- 浏览器在解析某些标签的时候，本身就自带了一些样式，导致我们写样式的时候就会效果不一致
- 公司里会根据每个公司的业务不同，会自己写一套属于自己公司的RESETCSS
- 我们可以使用别人提供的 ResetCSS 来去掉浏览器的样式，重新开始写自己的样式
