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);}