一、边框拓展
设置边框圆角 border-radius
边框折叠 border-collapse: collapse ;
三角形制作：等腰三角形 设置一边有颜色，另外三边颜色为透明色transparent
直角三角形，根据直角三角形的角，来设置其颜色，另外两个方向为透明色transparent
如右上角：设置颜色的边为border-top border-right 设置透明色为left bttom
梯形，在设置宽高的情况下，可以设置梯形
二、外边距合并
当给盒子设置margin值，它为距离四个方向的外边距的值；当有相邻的盒子的时候，那么这个margin就是距离相邻盒子的值；当某些方向没有同级的相邻盒子的时候，那么这么margin值，就是相对于父容器来讲的。
4.1 两个同级的盒子，会产生上下外边距合并，以最大的那个为准
4.2 存在嵌套的盒子，也就是具有后代关系的元素：
解决办法一：给父元素设置border属性
解决办法二：给父元素设置padding属性
解决办法三：给父元素设置overflow:hidden属性
三、体会盒子模型
设置盒子大小为固定值，且设置盒子相关属性时，不会改变盒子整体的宽高；通过减法保证盒子大小不变
1
2
3
4
21
22
23
24
25
26
四、宽度剩余法 和 height
盒子的高度让内容撑起来; 左侧一致，右侧剩余
图片1.png
1
- 习近平同美国总统特朗普通电话
- 习近平回信勉励北京体育大学研究生冠军班 全文
- 地震了，婚还是要结的
- 「天气」明天雨水中场休息，周四周五重新袭扰申城！
- 唐山港1至5月货物吞吐量2.65亿吨
2
3
4
5
6
7
8 *{
9 margin: 0;
10 padding: 0;
11 }
12
13 /*.news{
14 width: 466px;
15 margin: 100px auto;
16 标准的盒子模型 padding 和 border会将盒子撑大
17 padding-left: 30px;
18 background: yellow;
19 border: dotted 2px red;
20 }
21 */
22
23 .news{
24 /*设置为怪异盒子，边框和内填充不再会将盒子撑大*/
25 box-sizing: border-box;
26 width: 500px;
27 margin: 100px auto;
28 padding-left: 30px;
29 line-height: 2;
30 background: yellow;
31 border: dotted 2px red;
32 }
五、设置居中
文本水平居中：
text-align:center
padding
容器水平居中：
margin：auto
pading撑
文本和容器的垂直居中：
padding去撑
六、布局模型
布局模型与盒子模型一样，是我们的核心与重点的内容；布局模型是在盒子模型基础上进行拓展和布局
布局模型有以下三种，我们分别展开来说：
5.1 流动(flow)布局模型（标准流）
流动模型是一种正常的布局方式，这种布局布局方式按照我们在html中书写标签的顺序，依次执行。且不同元素按照默认的方式进行排列。块状元素独立占有一行，非块状元素从左到右依次排列。
在html中标签的分类有两种：容器级标签和文本级标签。
那么，在css中标签元素也有以下三种分类：
块状元素block:
可以设置宽高，具有换行符；
在不设置宽高的情况下，容器默认独立占有一行；设置宽高后，容器为设置宽高的大小(但还是具有换行符)
前面学过的标签是块状元素的有：h1-h6 p ul-li ol-li dl-dt-dd table form div
其他非块状元素设置为块状元素 display:block;
行内元素 inline
不可以设置宽高，和其他非块状元素从左到右依次排列；上下padding 不生效，左右padding 生效
容器默认包裹内容
前面学过的标签是行内元素的有：font b u i em strong ins del s a span
其他非行内元素设置为行内元素 display:inline
行内块元素 inline-block
可以设置宽高，和其他非块状元素从左到右依次排列；
在不设置宽高的情况下，容器默认包裹内容；设置宽高后，容器为设置宽高的大小(和其他非块状元素从左到右依次排列)
前面学过的标签是行内块元素的有：img input textarea select button
其他非行内块元素设置为行内块元素 display:inline-block;
1
2
哈哈哈，我是一个特殊的元素
3 我不是块状元素
4
5 我也不是
6 asdfhlksad
7 
8
9
1
42
5.2 浮动(float)模型
浮动可以使元素脱离标准流，并且可以改变元素的默认类型(可以使元素具有块状元素的特点，可以设置宽高)；可以使块状元素在同一行内根据设置依次排列
浮动出现的初衷是为了解决文字环绕的效果；
浮动可以使元素紧密排列；
浮动使元素依次贴边显示；
浮动使用属性float:
属性值有 left right none(默认)
1
2
3
4
40
41
42
43
44
45
46
47
浮动使元素脱离了文档流，那么这里有一个属性可以用来清除浮动
clear: left | right | both;
48
49
50
51
89
90
91
92
93
94
95
96
我是container下面的文字我是container下面的文字我是container下面的文字我是container下面的文字我
97 是container下面的文字我是container下面的文字我是container下面的文字我是container下面的文字我
98 是container下面的文字我是container下面的文字我是container下面的文字我是container下面的文字我
99 是container下面的文字我是container下面的文字我是container下面的文字我是container下面的文字我
100 是container下面的文字
101
但是随浮动而来，也出现了问题，会造成父元素塌陷问题；如果解决这个问题，就变成我们需要研究一个课题：
1. 给容器设置一个高度，但是要保证这个高度，要超过所有子元素的高度
2. 给容器后面相邻的元素，清除浮动clear:both
102 conAfter{
103 clear: both;
104 }
这种方式，虽然可以使整体能够正确排列，但是并没有解决父元素塌陷问题
3. 在父元素的内部设置一个空元素
105
106
107
108
109
110
111
112 .clear{
113 clear: both;
114 }
这种方式可以解决父元素塌陷问题，但是需要增加一对标签，如果浮动地方特别多，那么就需要添加过多的空标签，影响加载时间和性能，不建议使用
4. 通过伪元素:after
115
116
117
118
119
120 /*利用伪元素:after解决塌陷问题*/
121 .clear:after{
122 display: block;
123 height: 0;
124 content: "";
125 clear: both;
126 /*元素占位不可见*/
127 visibility: hidden;
128 }
这种方式是最高大上的一种，它不会带来一些副作用，在工作中建议大家使用这种方式；
5. 使用overflow:hidden || scroll || auto
129
130
131
132
133
/*利用overflow解决塌陷,属性值 scroll || auto || hidden*/
134 .clear{
135 overflow: auto;
136 }
这种方式会产生一个副作用：overflow本身是设置内容溢出的处理方式，当内容真的溢出容器后，那么如果使用overflow:hidden;那么溢出的内容我们就看不到了。所以不建议使用
5.3 色块布局
137
138
139
140
141
142
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
关注VX公众号“icketang” 免费领取华为荣耀商城项目实战视频教程