设置边框圆角 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> |
盒子的高度让内容撑起来; 左侧一致，右侧剩余
|
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去撑
布局模型与盒子模型一样，是我们的核心与重点的内容；布局模型是在盒子模型基础上进行拓展和布局
布局模型有以下三种，我们分别展开来说：
流动模型是一种正常的布局方式，这种布局布局方式按照我们在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 |
浮动可以使元素脱离标准流，并且可以改变元素的默认类型(可以使元素具有块状元素的特点，可以设置宽高)；可以使块状元素在同一行内根据设置依次排列
浮动出现的初衷是为了解决文字环绕的效果；
浮动可以使元素紧密排列；
浮动使元素依次贴边显示；
浮动使用属性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;那么溢出的内容我们就看不到了。所以不建议使用
|
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 /**/ 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 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> 1 |
原文：https://www.cnblogs.com/Vhaomei0452/p/11346964.html