[CSS3] 学习笔记--CSS盒子模型
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[CSS3] 学习笔记--CSS盒子模型相关的知识，希望对你有一定的参考价值。
1、CSS盒子模型概述
盒子模型的内容范围包括：margin(外边距)、border(边框)、padding(内边距)、content(内容)部分组成。
2、内边距
内边距在content外，border内，属性有5个：
padding:设置所有边距
padding-bottom:设置底边距
padding-left:设置左边距
padding-right:设置右边距
padding-top:设置上边距
3、边框
我们可以创建效果出色的边框，并且可以应用于任何元素。边框的样式为border-style，定义了10个不同的非继承样式，包括none。
4、外边距
围绕在内容外框的区域就是外边距，外边距默认为透明区域，外边距接受任何长度单位、百分数值。外边距常用属性：
margin:设置所有边距
margin-bottom:设置底边距
margin-left:设置左边距
margin-right:设置右边距
margin-top:设置上边距
5、外边距合成
如果两个一样的盒子，其margin都是100px，盒子上下排列，盒子之间的margin会自动合成，为100px，而不会为200px。
6、盒子模型应用
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>盒子模型的应用</title> 6 <link href="1.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <div class="top"> 10 <div class="top_content"></div> 11 </div> 12 <div class="body"> 13 <div class="body_img"></div> 14 <div class="body_content"> 15 <div class="body_no"></div> 16 </div> 17 </div> 18 <div class="footing"> 19 <div class="footing_content"></div> 20 <div class="footing_subnav"></div> 21 </div> 22 </body> 23 </html>
对应的css文件：
1 *{ 2 margin:0px; 3 padding:0px; 4 } 5 .top{ 6 width: 100%; 7 height: 50px; 8 background-color: black; 9 } 10 .top_content{ 11 width: 75%; 12 height: 50px; 13 margin: 0px auto; 14 background-color: blue; 15 } 16 .body{ 17 margin: 20px auto; 18 width: 75%; 19 height: 1500px; 20 background-color: blanchedalmond; 21 } 22 .body_img{ 23 width: 100%; 24 height: 400px; 25 background-color :darkorange; 26 } 27 .body_content{ 28 width:100%; 29 height: 1100px; 30 background-color: blueviolet; 31 } 32 .body_no{ 33 width: 100%; 34 height: 50px; 35 background-color: aqua; 36 } 37 .footing{ 38 width: 75%; 39 height: 400px; 40 background-color: coral; 41 margin:0px auto; 42 } 43 .footing_content{ 44 width: auto; 45 height: 330px; 46 background-color: chartreuse; 47 } 48 .footing_subnav{ 49 width: auto; 50 height: 70px; 51 background-color: black; 52 }
以上是关于[CSS3] 学习笔记--CSS盒子模型的主要内容，如果未能解决你的问题，请参考以下文章