01-边框默认值及去掉边框:
border-color
默认 文字颜色
border-style
默认 none 没有边框
border-width
默认 不是0
border:0/none
去掉边框,将其中一项设为默认值,推荐宽度和style
02-列表属性:
list-style: none 去掉列表的项目符号
03-字体字号属性:
字号
font-size
消失 0px
最小 12px
默认 16px
一般写偶数, 避免奇数号字有锯齿
px 像素
em 当前元素字体大小的倍数
rem 根元素(html)字体大小的倍数 一般用在移动端
字体
font-family
中文 多个英文单词组成的字体需要加引号
谷歌 默认微软雅黑
支持多个字体逗号隔开, 使用的时候从前向后找,直到找到可用的字体
字体粗细
font-weight
100-900整百数 100-300细体 400-500常规 600-900粗体
lighter 细体
normal 常规
bold 粗体
bolder 更粗
字体倾斜
font-style
normal 常规
italic 倾斜
oblique 倾斜
文本修饰线
text-decoration
none 没有
underline 下划线
line-through 删除线
overline 上划线
行高
line-height
数值px
百分比 行高的百分比参考的是文字的字号
数字 1 2 3 4 文字大小的倍数
应用: 单行文字垂直居中
容器的高度 = 文字的行高
文本水平对齐方式 (只有独占一行的元素才能生效)
text-align
left 靠左对齐
right 靠右对齐
center 居中对齐
justify 两端对齐 只有多行文字才能生效
文本缩进 (只有独占一行的元素才能生效)
text-indent
应用: text-indent写负数结合h1标签,可以起到seo
字间距
letter-spacing + -
词间距
word-spacing + -
04-浮动:
float:
none 默认
left 向左浮动
right 向右浮动
1. 浮动元素会半脱离文档流,不占据空间,不会遮挡下面的文字
2. 浮动的元素会在父元素限制范围内进行浮动
3. 浮动的元素会在当前行框内进行浮动
05-浮动的问题
子元素发生浮动,导致父元素没有高度撑开,此刻父元素高度塌陷
解决
方法一: 给高度塌陷的元素添加一个高度
方法二: 给高度塌陷的元素添加 overflow: hidden
(原因:触发了BFC,计算BFC区域高度,浮动元素参与计算)
不独占一行的元素添加浮动属性之后可以直接设置宽高
原因:元素添加浮动属性后会产生一个块级框,可以直接设置宽高