盒模型CSS_html/css_WEB-ITnose

盒子的内心世界

1.模型

通过CSS的眼睛

在CSS看来，HTML的所有元素都被看成了盒子：段落，标题，块引用，列表，列表项等。甚至内联元素。

盒子的组成

内容区（content）：包含内容（文本或图像） 内边距（padding）：可选的 边框（border）：可选的 外边距（margin）：可选的

示图

2.简单介绍

内容区

内容区会存放文本或图像。 在浏览器的周围，看不到上图其周围的边界。

内边距

内边距是 透明 的，没有颜色，也没有自己的装饰 通过CSS，可以控制整个内容区周围内边距的宽度 甚至可以控制任意一边的（ 上，下，左，右 ）的 内边距宽度

边框

边框可以有各种不同的 宽度，颜色，样式

外边距

外边距也是 透明 的，没有颜色或装饰

3.定制盒子

内容区

height width

内边距

 1 h1{ 2     /*在内容四周增加20像素的内边距*/ 3     padding: 20px; 4 } 5  6 h2{ 7     /*分别指定内容四周增加的像素量*/ 8     padding-bottom:20px; 9     padding-left: 20px;10     padding-right: 20px;11     padding-top: 20px 12 } 

边框

样式

h2{    border-style: groove;} 

宽度

1 h2{2     border-width: thin;3     border-width: 5px;4 } 

颜色

h3{    border-color: red;    border-color: rgb(204,102,0);    border-color: #aabbcc;} 

指定边框圆角

1 h3{2     border-radius: 15px;3 } 

为某一边指定

外边距

 1 h1{ 2     margin: 30px; 3 } 4  5 h2{ 6     margin-bottom: 30px; 7     margin-left: 30px; 8     margin-right: 30px; 9     margin-top: 30px;10 } 

查看更多关于盒模型CSS_html/css_WEB-ITnose的详细内容...