css之属性(盒子属性)

字体属性

/*复合属性*/
<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。