Html+CSS第六章总结

第六章 盒子模型

一、概念

在网页中，认为所以元素都是盒子

盒子:边框(border)、内容、内边距(padding)、 外边距(margin)

二、边框(border)

1.border-color

border-top-style: dashed;
borde r- bottom-style: dotted;
border-1eft-style: double;
border-right-style: solid;
上面四句等于:方向是:上右下左
border-style: dashed solid dotted double;

2.border-style

border-top-co1or: red;
border-right-co7or: b7ue;
border- bottom-co1or: yel1ow;
border-left-color: green;
上面四句等于:
border-color: red b1ue ye11ow green;

3.border-width

border-top-wi dth:5px;
border-left-width:3px;
border- bottom-width: 2px;
border-ri ght-width: 1px;
上面四句等于:
border-width: 5px 3px;

总结:如果四个边框样式一样，可以写一行:

border:2px dotted blue;

三、外边距(margin)

1.分别设置四个边的外边距

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;

2外边距的妙用:设置块元素居中

a.必须为块元素
b.设置wi dth
C. margin:0 auto

四、内边距(padding)

paddi ng-1eft:10px;
padding- right: 5px;
padding-top: 20px;
paddi ng-bottom: 8px ;
paddi ng:20px 5px 8px 10px ;
padding:10px 5px;
padding:30px 8px 10px ;
padding: 10px;

五、盒子模型的尺寸

sum=border+padding+margin+content

六、box-sizing

值: a.border-box:盒子的宽度或高度等于元素内容的宽度或高度

		b.contentbox:默认值，盒子的总尺度

七、圆角边框.

border-radius:左上右上右下左下

border-radius: 20px 10px 50px 30px;
四个属性值按顺时针排列

通过圆角可以做一-些特殊的图形

1.圆形

特点:长宽-致。四个角是长宽的一半，也可以写50%

div{
    width: 100px;
    hei ght: 100px;
    border: 4px solid red;
    border-radius: 50%;
}

2.半圆形

特点:先写一个矩形，制作上半圆或下半圆时,元素的宽度是高度的2倍，而且圆角半径为元素的高度值。

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

制作一个上半圆
div{
    wi dth: 100px;
    height: 50px;
    border: 4px solid red;
    border-radius: 50px 50px 0px 0px;
}

3.扇形

特点:长宽一样。一个角与长度一样，其余三个角都是0。

扇形遵循"三同，- -不同"原则，

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

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

制作-一个扇形
    div{
    width: 50px;
    height: 50px;
    border: 4px solid red;
    border-radius: 50px Opx Opx 0px;
}

八、盒子阴影

box-shadow: inset  x-offset	 y-offset	b1ur- radius	co1or;
			内阴影	  x轴位移	  y轴位置		阴影半径		阴影颜色

第一个参数不写，默认外阴影

div{
    border:1px solid red;
    box-shadow:5px 5px 6px blue;
    }