您的当前位置：首页盒模型CSS_html/css

盒模型CSS_html/css

来源：宝捱科技网

盒子的内心世界

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 }