盒子模型

 

首先定义一个内容区

语法结构

{

width:300px;

height:300px;

background-color:颜色;

}

 

边框–border

表示盒子边框

属性

Width–设置边框的宽度

语法结构

border-width:属性值;

color–设置边框的颜色

语法

border-color:属性值;

style–设置边框的样式

属性值

Solid–表示实线

double–表示双实线

dashed–表示虚线

dotted–表示点线

语法结构

border-style:属性值;

 

内边距–padding

表示盒子的内边距

语法

padding:50px

 

外边距–margin

表示盒子的外边距，可以控

制盒子在页面中所显示的位置

左外边距–可控制盒子水平方向的位置

设置大于零时，盒子往右移

设置小于零时，盒子往左移

上外边距–可控制盒子垂直方向的位置

设置大于零时，盒子往下移

设置小于零时，盒子往上移

右外边距和下外边距–不会影响盒子的位置

可控制与当前盒子相邻的盒子的位置

右外边距：控制下一个相邻的盒子的水平方向的位置，

设置大于零时，相邻盒子往右移

设置小于零时，相邻盒子往左移

左外边距：控制下一个相邻的盒子的垂直方向的位置，

设置大于零时，相邻盒子往下移

设置小于零时，相邻盒子往上移

 

页面的默认样式

浏览器在加载盒子时

会默认给body设置

一个8像素的外边距

可设置body{

margin:0;

}来消除

 

盒子页面水平居中

语法结构

{

margin:0 auto;

}

 

外边距重叠

垂直重叠

问题描述

两个相邻的div设置外边距

上一个div设置下外边距

下一个div设置上外边距

发现两个外边距重叠，没有相加

两个div之间取外边距的最大值

 

解决办法

两个div只设置其中一个的外边距

在两个div中间添加内容，比如br

 

设置内嵌盒子位置

问题描述

两个div父子关系时，子级div

设置上边距时会把值传递给父级div

导致父子div位置同时改变

解决方法

给父级div设置上内边距–改变父级div的height

给父级div设置透明边框（改变父级div的width和height）

 

内联元素盒子模型

设置高度和宽度是无效的，

盒子的大小由文字大小决定

上外边距和下外边距是无效的

 

怪异盒子模型

box-sizing

设置当前盒子模型

属性

content-box

默认盒子模型

border-box

怪异盒子模型

（出自CSS3）

作用：设置内边距和边框时，向里收缩，实际宽度=width

盒子属性的简写方式

内边距的简写方法

只设置一个属性值时

上右下左都为一个值

padding:50px;

 

同时设置两个值时，

上下为同值，左右为同值

padding:50px 40px;

 

同时设置三个值时，

上为第一个值，左右同值

下为第三个值

padding:50px 40px 30px;

 

同时设置四个值时，则按

照上右下左的顺序排列

padding:50px 40px 30px 20px;

 

边框的简写方法

方向同上

宽度设置

border-width：50px;

border-width：50px 40px;

border-width：50px 40px 30px;

border-width：50px 40px 30px 20px;

 

颜色设置

属性–color

用法同上

 

样式设置

属性–style

用法同上