一、边框拓展
设置边框圆角 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 <head>
2 <meta charset="UTF-8">
3 <title></title>
4 <style type="text/css">
5 .wrap{
6 /*height:400px;*/
7 /*height: 210px;*/
8 height: 190px;
9 width: 360px;
10 /*padding: 190px 0;*/
11 /*padding-top: 190px;*/
12 padding-top: 170px;
13 border: solid 20px pink;
14 background: red;
15 }
16
17 .content{
18 background: yellow;
19 }
20 </style>
21 </head>
22 <body>
23 <div>
24 <div>阿斯顿福建撒地方</div>
25 </div>
26 </body>
四、宽度剩余法 和 height
盒子的高度让内容撑起来; 左侧一致，右侧剩余
图片1.png
1 <ul>
2 <li>习近平同美国总统特朗普通电话</li>
3 <li>习近平回信勉励北京体育大学研究生冠军班 全文</li>
4 <li>地震了，婚还是要结的</li>
5 <li>「天气」明天雨水中场休息，周四周五重新袭扰申城！</li>
6 <li>唐山港1至5月货物吞吐量2.65亿吨</li>
7 </ul>
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 <body>
2 <p>哈哈哈，我是一个特殊的元素</p>
3 <span>我不是块状元素</span>
4 <input type="text" name="" id="" value="" />
5 <a href="">我也不是</a>
6 asdfhlksad
7 <img src="./images/aaa.jpg"/>
8 <button>按钮</button>
9 </body>
1 <style type="text/css">
2 p{
3 /*设置行内后宽高失效*/
4 /*display: inline;*/
5 /*设置行内块宽高生效*/
6 display: inline-block;
7 width: 800px;
8 height: 30px;
9 background: yellow;
10 }
11
12 a{
13 /*display: block;*/
14 display: inline-block;
15 width: 300px;
16 height: 30px;
17 background: red;
18 }
19
20 img{
21 height: 300px;
22 }
23
24 input{
25 width: 200px;
26 height: 40px;
27 border: solid 1px;
28
29 outline: none;
30 }
31
32 button{
33 width: 100px;
34 height: 30px;
35 background: palegreen;
36 border:solid 1px;
37 border-radius: 10px;
38 /*外轮廓线*/
39 outline: none;
40 }
41 </style>
42
5.2 浮动(float)模型
浮动可以使元素脱离标准流，并且可以改变元素的默认类型(可以使元素具有块状元素的特点，可以设置宽高)；可以使块状元素在同一行内根据设置依次排列
浮动出现的初衷是为了解决文字环绕的效果；
浮动可以使元素紧密排列；
浮动使元素依次贴边显示；
浮动使用属性float:
属性值有 left right none(默认)
1 <head>
2 <meta charset="UTF-8">
3 <title></title>
4 <style type="text/css">
5 body{
6 margin: 0;
7 padding: 0;
8 }
9
10 .container{
11 height: 200px;
12 border: solid 1px;
13 }
14
15 .container>div{
16 /*设置左浮动*/
17 float: left;
18 /*设置右浮动*/
19 /*float: right;*/
20 height: 200px;
21 width: 200px;
22 }
23
24 .container>.box1{
25 background: red;
26 }
27
28 .container>.box2{
29 background: pink;
30 }
31
32 .container>.box3{
33 /*重新设置样式层叠掉上面的样式*/
34 float: right;
35 background: blue;
36 }
37
38
39 </style>
40 </head>
41 <body>
42 <div>
43 <div>盒子1</div>
44 <div>盒子2</div>
45 <div>盒子3</div>
46 </div>
47 </body>
浮动使元素脱离了文档流，那么这里有一个属性可以用来清除浮动
clear: left | right | both;
48 <head>
49 <meta charset="UTF-8">
50 <title></title>
51 <style type="text/css">
52 body{
53 margin: 0;
54 padding: 0;
55 }
56
57 .container{
58 /*height: 200px;*/
59 border: solid 1px;
60 }
61
62 .container>div{
63 /*设置右浮动*/
64 float: right;
65 height: 200px;
66 width: 200px;
67 }
68
69 .container>.box1{
70 background: red;
71 /*清除浮动*/
72 /*clear: both;*/
73 }
74
75 .container>.box2{
76 background: pink;
77 /*清除浮动*/
78 clear: right;
79 }
80
81 .container>.box3{
82 /*重新设置样式层叠掉上面的样式*/
83 /*float: right;*/
84 background: blue;
85 /*清除浮动*/
86 clear: both;
87 }
88 </style>
89 </head>
90 <body>
91 <div>
92 <div>盒子1</div>
93 <div>盒子2</div>
94 <div>盒子3</div>
95 </div>
96 <p>我是container下面的文字我是container下面的文字我是container下面的文字我是container下面的文字我
97 是container下面的文字我是container下面的文字我是container下面的文字我是container下面的文字我
98 是container下面的文字我是container下面的文字我是container下面的文字我是container下面的文字我
99 是container下面的文字我是container下面的文字我是container下面的文字我是container下面的文字我
100 是container下面的文字</p>
101 </body>
但是随浮动而来，也出现了问题，会造成父元素塌陷问题；如果解决这个问题，就变成我们需要研究一个课题：
1. 给容器设置一个高度，但是要保证这个高度，要超过所有子元素的高度
2. 给容器后面相邻的元素，清除浮动clear:both
102 conAfter{
103 clear: both;
104 }
这种方式，虽然可以使整体能够正确排列，但是并没有解决父元素塌陷问题
3. 在父元素的内部设置一个空元素
105 <div>
106 <div>盒子1</div>
107 <div>盒子2</div>
108 <div>盒子3</div>
109 <div class="clear"></div>
110 </div>
111
112 .clear{
113 clear: both;
114 }
这种方式可以解决父元素塌陷问题，但是需要增加一对标签，如果浮动地方特别多，那么就需要添加过多的空标签，影响加载时间和性能，不建议使用
4. 通过伪元素:after
115 <div class="container clear">
116 <div>盒子1</div>
117 <div>盒子2</div>
118 <div>盒子3</div>
119 </div>
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 <div class="container clear">
130 <div>盒子1</div>
131 <div>盒子2</div>
132 <div>盒子3</div>
133 </div>
/*利用overflow解决塌陷,属性值 scroll || auto || hidden*/
134 .clear{
135 overflow: auto;
136 }
这种方式会产生一个副作用：overflow本身是设置内容溢出的处理方式，当内容真的溢出容器后，那么如果使用overflow:hidden;那么溢出的内容我们就看不到了。所以不建议使用
5.3 色块布局
137 <!DOCTYPE html>
138 <html>
139 <head>
140 <meta charset="UTF-8">
141 <title></title>
142 <style type="text/css">
143 *{
144 margin: 0;
145 padding: 0;
146 }
147
148 .main{
149 float: left;
150 height: 800px;
151 width: 70%;
152 /*background-color: red;*/
153 }
154
155 .main-header{
156 height: 150px;
157 background: skyblue;
158 }
159
160 .main-details{
161 height: 650px;
162 /*background: yellow;*/
163 }
164
165 .item1{
166 float: left;
167 width: 49%;
168 height: 300px;
169 margin-top: 25px;
170 }
171
172 .item1:nth-of-type(1){
173 background: blue;
174 }
175 .item1:nth-of-type(2){
176 background:gray;
177 }
178 .item1:nth-of-type(3){
179 background: #E3E3E3;
180 }
181 .item1:nth-of-type(4){
182 background: blue;
183 }
184
185 .ml{
186 margin-left: 2%;
187 }
188
189 .right{
190 /*float: left;
191 margin-left: 2%;*/
192
193 float: right;
194 height: 800px;
195 width: 28%;
196 background-color: palegreen;
197 }
198 </style>
199 </head>
200 <body>
201 <div id="wrap">
202 <!--主要内容部分-->
203 <div>
204 <!--主要内容头部-->
205 <div>
206
207 </div>
208
209 <!--主要内容详细内容-->
210 <div>
211 <div></div>
212 <div class="item1 ml"></div>
213 <div></div>
214 <div class="item1 ml"></div>
215 </div>
216 </div>
217
218 <!--右边栏-->
219 <div>
220
221 </div>
222 </div>
223 </body>
224 </html>
关注VX公众号“icketang” 免费领取华为荣耀商城项目实战视频教程
网友评论