盒子模型应用

1. 什么是盒子模型？

 

1. 边框
   1. border-color
   2. border-width
   3. border-style

 

border-color:

属性	说明	示例
border-top-color	上边框颜色	border-top-color:#369;
border-right-color	右边框颜色	border-right-color:#369;
border-bottom-color	下边框颜色	border-bottom-color:#fae45b;
border-left-color	左边框颜色	border-left-color:#efcd56;
border-color	四个边框为同一颜色	border-color:#eeff34;
	上、下边框颜色：#369 左、右边框颜色：#000	border-color:#369 #000;
	上边框颜色：#369 左、右边框颜色：#000 下边框颜色：#f00	border-color:#369 #000 #f00;
	上、右、下、左边框颜色： #369、#000、#f00、#00f	border-color:#369 #000 #f00 #00f;

 

border-width:

thin,medium,thick,像素值

border-top-width:5px;

border-right-width:10px;

border-bottom-width:8px;

border-left-width:22px;

border-width:5px ;

border-width:20px 2px;

border-width:5px 1px 6px;

border-width:1px 3px 5px 2px;

 

 

border-style:

none,hidden,dotted（点线）,dashed（虚线）,solid（实线）,double（）双线

border-top-style:solid;

border-right-style:solid;

border-bottom-style:solid;

border-left-style:solid;

border-style:solid ;

border-style:solid dotted;

border-style:solid dotted dashed;

border-style:solid dotted dashed double;

 

1. 同时设置边框的粗细、样式和颜色

    border:1px solid #3a6587;

border: 1px dashed red;

 

 

 

 

 

 

 

 

 

 

4. 外边距

margin

margin-top

margin-right

margin-bottom

margin-left

margin

 

margin-top: 1 px

margin-right : 2 px

margin-bottom : 2 px

margin-left : 1 px

margin :3px 5px 7px 4px;

margin :3px 5px;

margin :3px 5px 7px;

margin :8px;

 

 

外边距的妙用：网页居中对齐

margin:   0px        auto;

    上下边距    左右对齐

网页居中对齐的必要条件

块元素

固定宽度

1. 内边距

 

padding 示例：

padding-left padding-left:10px;

padding-right padding-right: 5px;

padding-top padding-top: 20px;

padding-bottom padding-bottom:8px;

padding padding:10px 5px;

padding:30px 8px 10px ;

padding:10px;

6.盒子型模的尺寸

盒子模型总尺寸=border+padding+margin+内容宽度

 

7. box-sizing

8.圆角边框

语法：

border-radius: 20px  10px  50px  30px;

四个属性值按顺时针排列

9.  使用border-radius制作特殊图形-1

圆形

利用border-radius属性制作圆形的两个要点

元素的宽度和高度必须相同

圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

示例：

 div{

            width: 100px;

            height: 100px;

            border: 4px solid red;

            border-radius: 50%;

        }

div{                     或者：     div{

width: 100px; width: 100px;

height: 100px; height: 100px;

border: 4px solid red; border: 4px solid red;

border-radius: 50%;  } border-radius: 54px;  }

运行结果：

10.  使用border-radius制作特殊图形-2

半圆形

利用border-radius属性制作半圆形的两个要点

制作上半圆或下半圆时，元素的宽度是高度的2倍，而且圆角半径为元素 的高度值

制作左半圆或右半圆时，元素的高度是宽度的2倍，而且圆角半径为元素 的宽度值

上半圆：

div{                   

width: 100px;

height: 50px;

border: 4px solid red;

border-radius: 54px  54px  0  0;  }

下半圆：

div{                   

width: 100px;

height: 50px;

border: 4px solid red;

border-radius: 0  0  54px  54px;  }

左半圆：

div{                   

width: 50px;

height: 100px;

border: 4px solid red;

border-radius: 54px  0  0  54px;  }

右半圆：

div{                   

width: 50px;

height: 100px;

border: 4px solid red;

border-radius: 0  54px  54px  0;  }

 

1.  使用border-radius制作特殊图形-3

扇形

利用border-radius属性制作扇形遵循“三同，一不同”原则

“三同”是元素宽度、高度、圆角半径相同

“一不同”是圆角取值位置不同

左上扇形：

div{                   

width: 50px;

height: 50px;

border: 4px solid red;

border-radius: 54px  0  0  0;  }

右上扇形：

div{                   

width: 50px;

height: 50px;

border: 4px solid red;

border-radius: 0  54px  0  0;  }

右下扇形：

div{                   

width: 50px;

height: 50px;

border: 4px solid red;

border-radius: 0  0  54px  0;  }

左下扇形：

div{                   

width: 50px;

height: 50px;

border: 4px solid red;

border-radius: 0  0  0  54px;  }

13.盒子阴影

浏览器兼容性：

属性名	IE	Firefox	Chrome	Opera	Safari
box-shadow	9+	3.5+	2.0+	10.5+	4.0+

Inset是内阴影

不设置就是外阴影

 

 

1. 总结