一、CSS继承
1.文字相关的样式会被子元素继承。
2.布局样式相关的不会被子元素继承。（用inherit可以强行继承）
实现效果：
二、盒子模型
每个标签都有一个盒子模型，有内容区、内边距、边框、外边距。
从内到外：content->padding->border->margin。
注：如果没有设置box-sizing属性，一个盒子的最终大小为content+padding+border，也是background-color的区域。
1.content：标签的内容区域，用来盛放别的标签或文本，一般css设置的宽高就是这个区域。
2.padding：内容到边框的距离，一般设置完后，由于padding占位，会撑大盒子模型。
①单参数：指定对应边内边距或者一次性指定所有内边距（单位：px %）。
padding-left
padding-right
padding-top
padding-bottom
padding
②多参数：参数个数，按【上 -> 右 -> 下 -> 左】顺时针顺序，没有指定到的边则和对边相同。
padding：上下 右左
padding：上 右左 下
padding：上 右 下 左
3.border：边框样式
①单参数：指定对应边框或一次性指定所有边框。
border-left
border-right
border-top
border-bottom
border-width
②多参数：参数个数，按【上 -> 右 -> 下 -> 左】顺时针顺序，没有指定到的边则和对边相同。
border-width：上下 右左
border-width：上 右左 下
border-width：上 右 下 左
③快速写法
border：1px，solid #123456
4.margin：外边距，一般用来调整盒子之间的距离，参数写法与作用同padding。
①单参数：指定对应边框或一次项指定所有边框。
margin
margin-left
margin-right
margin-top
margin-bottom
②多参数：参数个数，按【上 -> 右 -> 下 -> 左】顺时针顺序，没有指定到的边则和对边相同。
margin：上下 右左
margin：上 右左 下
margin：上 右 下 左
补充：
1.背景颜色会填充到margin以内的区域
2.内容在content区域
3.box-sizing：可以改变盒子模型的展示形态
content-box（默认值）------width、height，作用于content
border-box------width、height，作用于content padding border，防止padding、border撑大盒子大小。
4.box-shadow：可以设置盒子模型的周边阴影
参数：x轴偏移量 y轴偏移量 阴影大小 阴影颜色
/* 一个偏右下的红色阴影 */
box-shadow: 10px 20px 10px red;
实现效果：
三、float浮动
1.文档流：文档中可显示对象在排列时所占用的位置。
块级元素：单独一行，自上而下（div、h1、p）
行内元素：从左到右水平分布显示（a、span、strong）
2.float特点：
①脱离文档流，相对于父容器靠左或者靠右排列，如果之前有浮动元素，会挨着排列。
②如果区域出现<img>标签，浮动元素的文本会绕开图片区域，呈现一个【文字围绕图片】的效果
3.参数值：
①none：不浮动，保持原文档流
②left：脱离文档流，居左浮动
③right：脱离文档流，居右浮动
实现效果：
多种浮动效果：
四、定位
分为relative、absolute、fixed。
属性值：top（距离顶部）、bottom（距离底部）、left（距离左边值）、right（距离右边值）
（top和bottom不同时用；left和right不同时用）
在开始布局之前，使用***｛｝**把所有标签的margin和padding设置为0，取消屏幕间隔。
没有设置*｛｝时，有间隔
1.相对定位：relative，以自身为参照点移动位置。
<div class="box">
.box{
width: 100px;
height: 100px;
background-color: green;
position: relative;
left: 100px;
top: 100px;
｝
实现效果：
2.绝对定位：absolute，以最近一个带有定位属性的父级元素为参照点来移动位置。
若父级元素没有定位属性，就以body为参照点，默认值为position：relative。
<div class="box">
<div class="box1"></div>
.box{
width: 100px;
height: 100px;
background-color: green;
position: relative;
left: 100px;
top: 100px;
}
.box1{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
}
实现效果：
父级元素没有定位属性的实现效果：
3.绝对固定定位：fixed，固定在网页的某一位置，无论怎么滚动网页它都不会移动位置。
<div class="box">
<div class="box1"></div>
</div>
<div class="place"></div>
.box1{
width: 50px;
height: 50px;
background-color: red;
position: fixed;
top: 50px;
left: 50px;
}
.place{
width: 50px;
height: 1000px;
background-color: pink;
}
实现效果：
无论如何滚动鼠标，向下滑动时，红色的小方块始终固定在原来位置不会移动。
注意点：
①元素移动后，原来的位置不会空出来，所以新元素不会占领原来的位置。
②考虑absolute会出现脱离文档流的情况，而relative不会。
效果图：
absolute出现脱离文档流的情况：
效果图：
五、diaplay
1.值
①none：隐藏该元素
②block：将元素转为块级元素
③inline：将元素转为行内元素
④inline-block：将元素转为行内块元素，可以指定宽高并且不换行。（未指定宽高则根据内容撑开）
2.去除元素间空白间隙
【inline-block】 【inline】元素之间会有空白间隙
1.在你的HTML代码里元素间不留任何空白。
2.父元素设置font-size：0。