盒模型组成
内容、内边距(内填充)、边框、外边距
边框边
border:1px solid #000;
border:粗细 样式 颜色;
设置单独的边框线
border-top
border-bottom
border-left
border-right
取消边框线
border:none/0;
边框粗细
border-width
border-top-width
border-bottom-width
border-left-width
border-right-width
1个值:4条边框
2个值: 上下 左右
3个值: 上 左右 下
4个值: 上 右 下 左 顺时针方向
边框样式
border-style
border-top-style
border-bottom-style
border-left-style
border-right-style
solid 实线
dashed 虚线
dotted 点线
double 双线
边框颜色
border-color
border-left-color
border-right-color
border-top-color
border-bottom-color
red
16进制的颜色
rgb和rgba()
透明度取值0-1,0是完全透明
内边距
padding
1:设置内容和盒子之间的位置关系
2:边框线内部都可以设置padding
3:padding会让盒子变形,如果设置padding后想让盒子大小不变,盒子的宽高就需要减去padding的大小
4:
单一方向的padding
padding-left
padding-right
padding-top
padding-bottom
设置多个方向的padding
1个值:4条边框
2个值: 上下 左右
3个值: 上 左右 下
4个值: 上 右 下 左 顺时针方向
5:内边距不可以设置负值
外边距
margin
1、设置盒子与盒子之间的位置关系
2、边框线的外部的距离都可以设置margin
3、
单一方向的margin
margin-left
margin-right
margin-top
margin-bottom
设置多个方向的margin
1个值:4条边框
2个值: 上下 左右
3个值: 上 左右 下
4个值: 上 右 下 左 顺时针方向
4、margin:0px auto;
可以让块元素水平居中
margin可以设置负值
margin-left:负值 (左边移动)
正值 (右边移动)
margin-top: 负值 (上边移动)
正值 (下边移动)
5、外边距的常见bug
1、margin的重叠问题
上下两个盒子之间的margin会重叠,谁的值大设置谁,水平不会
解决方法: 只设置一个margin就行
2、margin-top的传递问题
当第一个子元素设置margin-top的时候,margin-top会错误的传递给父元素
解决方法:
父元素
border
padding
overflow:hidden
float(不推荐用浮动专门解决,可以顺便解决)
子元素
float
盒模型的计算
总宽度= width+左右的padding+左右的border
总高度= height+上下的padding+上下的border
字体属性
字体大小
font-size
浏览器默认的字体大小是16px
px/pt/em
em:是一个相对的单位,先看自己的font-size值,如果自己没有font-size值,参照父元素的font-size值
1em=16px
字体颜色
color
字体加粗
font-weight
bold 加粗
bolder 更粗
normal 取消加粗
100-900
500是常规粗细
字体倾斜
font-style
italic 设置倾斜字
oblique 字体
normal 取消倾斜
字体样式
font-family: 字体1,字体2;
中文字体和多个英文单词组成的字体需要加引号
font :加粗 倾斜 大小 字体;
文本属性
首行缩进
text-indent:2em
可以设置负值,可以设置影藏文本的效果
文本修饰(线条的修饰)
text-decoration:
underline 下划线
overline 上划线
line-throuth 删除线
none 取消修饰
字间距
letter-spacing
词间距(识别的是空格)
word-spacing
水平对齐
text-align
left 左对齐
right 右对齐
center 水平居中
justify 两端对齐
行高
line-height
1:设置多行文本的行间距
2:行高设置单行文本垂直居中
3:清除自带的行间距