认识盒模型
1.所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，称为"盒模型"
width表示内容的宽度、height表示内容的高度。
width、height不是盒子总宽高
盒子的总宽度=width+左右padding+左右border；
盒子的总高度=height+上下padding+上下border；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 200px; height: 200px; background-color: orange; border: 10px solid red; padding: 10px; } </style></head><body> <div class="box"> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </div></body></html>
此时盒子的总宽度为240px；
width属性：
1.width属性表示盒子内容的宽度；
2.width属性的单位通常是px，移动端开发也会涉及百分数、rem等单位
3.当块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ height: 100px; background-color: red; } a{ height: 100px; background-color: red; } </style></head><body> <div class="box"></div> <a href="">我是超级链接</a></body></html>
常见的h、p系列标签会填满，而a标签是签内元素。
height属性
1.height属性表示盒子内容的高度
2.height属性的单位通常是px，移动端开发也会涉及百分数、rem等单位。
3.盒子的height属性如果不设置，他将自动被其内容撑开，如果没有内容，则heigh默认是0；
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ /* 宽度省略掉，由于div是块级元素，能够自动撑满 */ background-color: blue; width: 200px; color: white; } </style></head><body> <div class="box"> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </div></body></html>
padding属性详解
padding是盒子的内边距
1.padding是盒子的内边距，即盒子边框内壁到文字的距离。
padding是四个方向的
1.四个方向的padding，可以分别用小属性进行设置。
padding-top 上padding；
padding-right 右padiing
padding-bottom 下padding
padding-left 左padding
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 200px; height: 200px; padding: top 10px; padding-right: 30px; padding-bottom: 50px; padding-left: 70px; background-color: rgb(230, 181, 90); } </style></head><body> <div class="box"></div></body></html>
padding的四数值写法
1.padding属性如果用四个数值以空格隔开进行设置，分别表示上、右、下、左的padding。
padding：10px 20px 30px 40px；
padding的三数值写法
1.padding属性如果用三个数值以空格隔开进行设置，分别表示上、左右、下的padding。
padding：10px 20px 30px；
上 左右 下
padding的二数值写法
1.padding属性如果用二个数值以空格隔开进行设置，分别表示上下、左右的padding
padding：10px 20px；
上下 左右
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: rgb(230, 181, 90); padding: 10px 30px 50px 70px; } .box2{ width: 200px; height: 200px; background-color: rgb(230, 181, 90); padding: 10px 20px 70px; } .box3{ width: 200px; height: 200px; background-color: rgb(230, 181, 90); padding: 10px 70px; } .box1{ width: 200px; height: 200px; background-color: rgb(230, 181, 90); padding: 10px; } </style></head><body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div></body></html>
灵活设置padding属性：
1.
2.
3.
4.
margin属性详解
1.margin是盒子的外边距，即盒子和其他盒子之间的距离。
2.margin也有四个方向
margin的塌陷
1.竖直方向的margin有坍塌现象：小的margin会坍塌到大的margin中，从而margin不叠加，只以大值为准。
2.左右方向的margin没有塌陷现象，左右margin属性会叠加。如sapn并排显示的，可用margin修饰。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: rgb(230, 181, 90); padding: 10px 30px 50px 70px; margin-bottom: 90px; } .box2{ width: 200px; height: 200px; background-color: rgb(230, 181, 90); padding: 10px 20px 70px; margin-bottom: 80px; } .box3{ width: 200px; height: 200px; background-color: rgb(230, 181, 90); padding: 10px 70px; margin-bottom: 60px; } .span1{ margin-right: 60px; } .span2{ margin-left: 100px; } </style></head><body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <span class="span1">我是一个span</span><span class="span2">我是一个span</span></body></html>
一些元素有默认的margin
1.一些元素（比如body、ul、p等）都有默认的margin，在开始制作网页的时候，要将他们清除。
*{ margin:0; padding:0;}上图为通配选择器，表示选择所有的元素。
但是通配符有效率问题，应该使用并集选择器。
body,ul,p{ margin:0; padding:0;}在编辑器中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: rgb(230, 181, 90); padding: 10px 30px 50px 70px; margin-bottom: 90px; } .box2{ width: 200px; height: 200px; background-color: rgb(230, 181, 90); padding: 10px 20px 70px; margin-bottom: 80px; } body,ul,p{ margin: 0; padding: 0; } .span1{ border: 1px solid #000; margin-right: 60px; } .span2{ border: 1px solid #000; margin-left: 100px; } </style></head><body> <span class="span1">我是一个span</span><span class="span2">我是一个span</span> <div class="box1"></div> <div class="box2"></div> <ul> <li>列表项</li> <li>列表项</li> <li>列表项</li> <li>列表项</li> </ul> <p>我是段落</p> <p>我是段落</p> <p>我是段落</p></body></html>
盒子的水平居中
1.将盒子左右两边的margin都设置为auto，盒子将水平居中
.box{ /* 上下是0，左右自动 */ margin: 0 auto; }2.文本居中是text-align:center;和盒子水平居中是两个概念。
3.盒子的垂直居中，需要使用绝对定位技术实现。
盒模型计算
1.有父盒子和子盒子。
即父亲的width=儿子的width+padding+border
父亲的height=儿子的height+padding+border
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding:0; } .box{ width: 400px; height: 300px; padding: 10px; border: 6px solid blue; margin: 40px auto; } .box .c1{ width: 388px; height: 188px; border: 6px solid green; margin-bottom: 20px; } .box .c2{ width: 388px; ; height: 48px; ; padding: 10px 0; border: 6px solid orange; } </style></head><body> <div class="box"> <div class="c1"></div> <div class="c2"></div> </div></body></html>
box-sizing属性
1.将盒子添加了box-sizing:border-box;之后，盒子的width、height数字就表示盒子实际占有的宽高(不含margin)了，即padding、border变为"内缩"的，不再"外扩"。
2.box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局等非常好用，在pc页面开发中使用较少。
3.box-sizing属性兼容到IE9
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ box-sizing: border-box; width: 200px; height: 200px; padding: 10px; border: 10px solid blue; margin-bottom: 30px; } .box1{ box-sizing: border-box; width: 200px; height: 200px; padding: 10px; border: 10px solid blue; } </style></head><body> <div class="box"></div> <div class="box1"></div></body></html>display属性
块级元素能设置宽高，天生上下排列
行内元素不能设置宽高，天生并排显示（以字为准）
行内块
1.img和表单元素是特殊的行内快，它们即能够设置宽度高度，也能够并排显示。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 100px; height: 100px; background-color: orange; } .box2{ width: 100px; height: 100px; background-color:blue; } span{ width: 100px; height: 100px; background-color: red; padding: 4px 10px; } img{ width: 400px; } input{ width: 200px; height: 100px; } </style></head><body> <div class="box1"></div> <div class="box2"></div> <span>我是span1</span> <span>我是span2</span> <div> <img src="../images/jiuyou.png" alt=""> <img src="../images/jiuyou.png" alt=""> </div> <div> <input type="text"> <input type="text"> </div></body></html>
行内元素和块级元素的相互转换
1.使用display:block;即可将元素转为块级元素
2.使用display:inline;即可将元素转为行内元素，将元素转为行内元素的应用不多见
3.使用display:inline-block;即可将元素转为行内块
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .djjr{ /* 转为块级元素 */ display: block; background-color: blue; width: 200px; height: 60px; color: white; text-align: center; line-height: 60px; text-decoration: none; /* 圆角 */ border-radius: 6px; } .djjr:hover{ background-color: orange; } span{ /* 转为行内块 */ display: inline-block; background-color: orange; padding: 8px 20px; margin-top: 30px; color: white; } </style></head><body> <a href="" class="djjr">点击进去</a> <span>我是span</span> <span>我是span</span> <span>我是span</span></body></html>行内元素会覆盖之前的内容，变为行内块之后就不会覆盖了。
元素的隐藏
1.使用display:none;可以将元素隐藏，元素将彻底放弃位置，如同没有写它的标签一样
2.使用visibility:hidden;可以将元素隐藏，但是元素不放弃自己的位置。
源代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: orange; } .box3{ width: 200px; height: 200px; background-color: blue; } </style></head><body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div></body></html>
第一个改动：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: orange; /* 隐藏，彻底放弃了自己的位置 */ display: none; } .box3{ width: 200px; height: 200px; background-color: blue; } </style></head><body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div></body></html>
第二个改动：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: orange; /* 隐藏，不放弃位置 */ visibility: hidden; } .box3{ width: 200px; height: 200px; background-color: blue; } </style></head><body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div></body></html>