五、HTML+CSS

CSS盒子模型

一、边框

border-color 边框颜色

border-width 边框粗细

border-style 边框样式 （dashed虚线 solid实线）

简写

border：颜色 粗细 样式（顺序可以调整）

二、外边距

margin-top控制外边距上面距离

margin-right控制外边距右面距离

margin-bottom控制外边距下面距离

margin-left控制外边距左面距离

简写

margin 只写一个控制全部；写两个先上下，后左右；写四个按顺时针上左下右

注意：网页居中对齐 margin：0px auto；

三、内边距

padding-left

padding-right

padding-top

padding-bottom

padding

和外边距差不多

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

box-sizing：border-box 消除内边距和边框

四、圆形边框

1.圆形

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

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

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

border-radius：50% （正方形成为圆形）也可以用多少px来控制弧度，写一个是控制四个，两个是线上下后左右，四个是左上，右上，右下，左下

2.半圆形

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

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

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

3.扇形

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

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

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

五、盒子阴影

box-shadow:inset x-offset y-offset blur-radius color;

box-shadow:阴影类型 x轴位移 y轴位移 阴影模糊半径阴影向外模糊的模糊范围 阴影颜色

ul li:hover{box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0,0,0,0.2);}
​