框模型相关知识
1.盒模型
我们常说的盒子模型一般有四个属性
border值为边框的宽度，相当于现实中盒子的包装。aadding值为内边距，指盒子内容距离盒子边框的距离content值为盒子的主要内容margin值用于盒子与盒子之间，表示盒子与盒子之间的距离
真实占有宽度 = 左 border + 左 padding + width + 右 padding + 右 border = padding+content+border
1.1border
border就是边框。边框有三个要素：像素(粗细)、线型、颜色颜色默认是黑色。其余两个属性必须，否则显示不出来边框
border:1px solid red重点是 border 的拆分
上面的例子我们明白了 border 属性，是由三个小属性综合而成的,顺序为 上右下左
1.1.1 按照三要素拆分
border-width:10px; //边框宽度border-style:solid; //线型border-color:red; //颜色
1.1.2 按照方向来拆
border-top:10px solid red;border-right:10px solid red;border-bottom:10px solid red;border-left:10px solid red;
1.2padding margin有四个方向
方法有两种，第一种分开写小属性，第二种放在一起写综合属性，用空格分隔
小属性
padding-top: 30px;padding-right: 20px;padding-bottom: 40px;padding-left: 100px;margin-top: 30px;margin-right: 20px;margin-bottom: 40px;margin-left: 100px;- 综合属性(上、右、下、左)，顺时针方向
padding:30px 20px 40px 100px;margin:30px 20px 40px 100px; - 如果只写了三个值，则顺序为：上、右、下；还有一个跟右一样
padding: 20px 30px 40px;margin: 20px 30px 40px; - 如果只写了两个属性,就是上下左右
实列代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style type="text/css">.total {width: 600px;/*border:1px solid red;*/margin: 0 auto;}div {border-radius: 15px;text-align: center;margin-top: 10px;}.header {/*border: 1px solid red;*/background: #c9f790;}.nav {border: 1px /*solid*/ red;background: #c9f790;}.left {/*border: 1px solid red;*/width: 370px;display: inline-block;background: #c9f790;vertical-align: top;margin-top: 0px;}.right {/*border: 1px solid red;*/width: 220px;height: 197px;display: inline-block;background: #c9f790;vertical-align: top;margin-top: 0px;}.footer {/*border: 1px solid red;*/background: #c9f790;}.bg1 {background: #d6f7cd;margin: 5px 10px;}.style1 {font-weight: bolder;}.style2 {margin-top: 50px;}.style3 {text-align: left;}</style><body><div class="total"><div class="header"><div class="style1">header</div><div>我是头部</div></div><div class="nav"><div class="style1">nav</div><div>我是导航</div></div><div class="content"><div class="left"><div><div><div class="style1">article</div><div>我是中间</div></div><div class="bg1"><div>section</div><div>我是广告一</div></div><div class="bg1"><div>section</div><div>我是广告二</div></div></div></div><div class="right"><div class="style1 style2">aside</div><div class="style3">我是右边</div></div></div><div class="footer"><div class="style1">footer</div><div>我是底部</div></div></div></body></html>
实列截图
课后总结：
- 所有的HTML元素都可以看做盒子，包括：实际内容（content），内边距（padding），边框 （border），外边距（margin）四个属性