CSS6 盒子模型

什么是盒子模型

1，html的所有的元素都可看作一个嵌套的盒子，可以设置下图中任何一个有文字表示的内容
从外到内分别由content，padding填充，border边框，margin

2.盒子模型的最简单的实例：发现实际上有颜色的部分和页面边距相差50px
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

    <style>
        div {
            background-color: lightgrey;
            border: 25px solid green;
            padding: 25px ;
            margin: 25px ;
        }
    </style>

边框 border

边框样式， border-style 属性

默认无边框，不继承父元素

值	描述
none	定义无边框。
hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted	定义点状边框。在大多数浏览器中呈现为实线。
dashed	定义虚线。在大多数浏览器中呈现为实线。
solid	定义实线。
double	定义双线。双线的宽度等于 border-width 的值
groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
inset	定义 3D inset 边框。其效果取决于 border-color 的值。
outset	定义 3D outset 边框。其效果取决于 border-color 的值。
inherit	规定应该从父元素继承边框样式。

2实例

<style>
        #t1{border-style: none}
        #t2{border-style:solid}
        #t3{border-style:double}
        #t4{border-style:dotted}
        #t5{border-style:dashed}
        #t6{border-style:groove}
        #t7{border-style:ridge}
        #t8{border-style:outset}
        #t9{border-style:inset}

    </style>

边框宽度，border-width 属性

1.可用参数
默认为medium，不继承父元素

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。
inherit	规定应该从父元素继承边框宽度。

2.实例

    <style>
        p{border-style: solid}
        #t1{border-width: thin}
        #t2{border-width:thick}
        #t3{border-width:medium}
        #t4{border-width:50px}
    </style>

边框图片，border-image属性

http://www.runoob.com/cssref/css3-pr-border-image.html

圆角边框，border-radius属性

1.给定值
给四个值，分别表示左上，右上，右下，左下角
给三个值，分别表示左上，左下和右上，右下角
给两个值，分别表示左上右下，左下和右上角
给一个值，表示四个角
http://www.runoob.com/cssref/css3-pr-border-radius.html
相当于角那里有个小圆，border-radius是小圆的半径，小圆与边框相切，小圆外面多余的部分被裁掉，所以就成圆角了

边框颜色，border-color 属性

1.可用参数
默认是透明的，不从父元素继承

name	指定颜色的名称，如 “red”
colo	r 指定背景颜色。在CSS颜色值查找颜色值的完整列表
transparent	指定边框的颜色应该是透明的。这是默认
inherit	指定边框的颜色，应该从父元素继承

2.实例

    <style>
        p{border-style: solid}
        #t1{border-color: #FF0000}
        #t2{border-color: transparent}
    </style>

边框的简写方法

可以设置的属性分别（按顺序）：border-width, border-style,和border-color.。如果没有设置就按照默认值。
2.实例
边框为20p的实线红色边框

    <style>
        p{border:20px solid #FF0000}
    </style>

边框上下左右部分都可以设置

1。一般情况下，如果只设置border，所有上下左右的border都是一个样式。为了灵活我们可以设置每个边上的border的样式
border-left/right/bottom/top设置某个边上的整体样式
border-left/right/bottom/top-color/style/width设置某个边上的某个样式
2.实例

 <style>
        p{
            border-left:20px solid #000000;
            border-right:10px solid #FF0000;
            border-bottom:5px solid #00FF00;
            border-top:25px solid #0000FF;
        }
    </style>

outline，在border外面再加上一层边框

1，与border的属性相同，唯一的不同就是不能单独设置某个边的样式。
不会增加个元素的宽度，相当于借用margin的空间。如果margin不够还是会显示outline的宽度

2.实例

    <style>
        #t1{
            outline: #FF0000 dotted 10px;
            border: #00FF00 solid 10px;
            margin: 0px;
        }
    </style>

margin和padding

1.特点，margin和padding只能指定宽度，不能指定其他值。默认都是0
2.区别：padding（填充）指定border与content间的间隙，margin指定border外边的和其他元素的间隙。
3.相同点：
（1）都可设置整体的margin和padding，用%多少表示或者固定长度表示
（2）一般情况下，如果只设置margin和padding，所有上下左右的margin和padding都是一个样式。为了灵活我们可以设置每个边上的margin和padding的样式
4.实例
（1）设置整体的margin和padding

   <style>
        #t1{margin:200px;
            border: 20px solid #FF0000;
        }
        #t2{padding:200px;
            border: 20px solid #FF0000;}
    </style>

（2）设置某个边上的margin和padding

       <style>
        #t1
        {
            border: 20px solid #FF0000;
            margin-left: 10px;
            margin-right: 20px;
            margin-bottom: 50px;
            margin-top: 5px;
        }
        #t2
        {
            border: 20px solid #FF0000;
            padding-left: 10px;
            padding-right: 20px;
            padding-bottom: 50px;
            padding-top: 5px;
        }
    </style>

阴影设置

box-shadow: h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

http://www.w3school.com.cn/tiy/c.asp?f=css_box-shadow

总结盒子模型

1.content表示内容的样式
2.padding表示内容和边框之间的距离
3.border表示边框的样式
4.margin表示边框外的距离
5.outline表示margin里的border外的边框