字体属性
/*复合属性*/
<style>
font: font-style font-weight font-size/line-height font-family;
</style>
/*顺序不可颠倒,并且font-size 和 font-family 不可省略*/
文本属性
- em是一个相对单位,相对于当前元素(font-size)的大小。
- text-align不仅可以使文字水平居中,还可以使 行内元素 或 行内块元素 水平居中。
line-indent: 2em
,首行缩进2字符。- 行高控制 上下间距 ,不会影响
content
。 - 令盒子行高=盒子高,则 盒子内 行内元素 或 行内块元素(img元素还需设置vertical-align) 垂直居中。
- 行高可以继承。
背景属性
盒子属性
边框
border: 2px solid red;
设置边框粗细,类型,颜色。border-collapse: collapse;
重合的边框进行合并操作,仅对表格标签使用。border-radius: 10px;
设置边框圆角, 10px为四个角内切圆形的半径。- 先准备一个 正方形,边框圆角设置为 50%,得到一个圆形。
- 边框圆角设置为 高度的一半,得到一个两边为半圆的圆角矩形。
- 表单标签默认有2px的边框。
内边距
padding: 1px 2px 3px 4px;
按顺时针方向指定。- 利用
padding
使内容与内容均匀排列开来。 - 指定宽高的情况下,
padding
会撑开盒子,需要修改宽高。
外边距
margin: 0 auto;
让 块级 元素水平居中。注意盒子一定要有宽度。- 给 父级 块元素 或者 行内块元素 设置
text-align:center;
让行内和行内块子元素水平居中。 - 关于垂直外边距(标准流中)
- 两个相邻的块级元素是上下排列的,他们之间的垂直外边距会发生合并,最终他们之间的距离并不是
margin-top + margin-bottom
,而是 外边距较大的那个。 - 嵌套块元素,垂直外边距也会发生合并,合并方式是 父元素塌陷,以使得父子元素 上边缘紧贴。需要让父子元素 外边距分开(给父元素设置上边框/上内边距等, 或者设置
overflow: hidden
)。 - 行内元素 设置垂直外边距不起作用,转化为块级元素或者行内块元素即可。
- 两个相邻的块级元素是上下排列的,他们之间的垂直外边距会发生合并,最终他们之间的距离并不是
盒子阴影
box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3) inset;
> 文字阴影:
text-shadow
缺少spread参数
其他属性
li
list-style: none;
列表没有小圆点。
关于通配符*
* {
margin: 0;
padding: 0;
}
- margin主要针对:
body
默认有8px的外边距,p
默认有上下18px的垂直外边距h
默认也有20px左右的垂直外边距。
- padding主要针对:
input
默认上下1px内边距,左右2px内边距。buttom
默认上下1px内边距,左右6px内边距。ul
默认左内边距40px。