CSS属性（一）

主要介绍五类：文本，盒模型，背景，浮动，定位。

一：文本

1.字体

font: 在一个声明中设置所有字体属性

• font-family: 规定文本的字体系列
• font-size: 规定文本的字体尺寸
• font-style: 规定文本的字体样式。倾斜：italic（有自动倾斜的字体会用这个字体，没有的话，原文字倾斜），oblique，正常：normal
  font-variant: 规定文本的字体样式
• font-weight: 规定字体的粗细。有bold（数值700），normal（数值400）。或者其他数值
  @font-face: 一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体
  font-size-adjust: 为元素规定 aspect 值
  font-stretch: 收缩或拉伸当前的字体系列

2.颜色

color：设置文本的颜色

• 1.颜色名：red，yellow，blue等
• 2.十六进制：黑色：#000000，白色：#ffffff等
• 3.RGB：黑色：rgb(0,0,0)，白色rgb(255,255,255)。RGBA，带透明度的色值，0～1，默认为1。rgb(0,0,0,0.5)

3.格式

direction | 规定文本的方向 / 书写方向
letter-spacing | 设置字符间距

• line-height | 设置行高。值是像素（px），或者百分比：50%，是相对字体大小来说的
• text-align | 规定文本的水平对齐方式。left，right，center
• text-decoration | 规定添加到文本的装饰效果。none，underline下划线，line-through中划线，overline上划线。a标签默认为underline，其他文本默认为none
• text-indent | 规定文本块首行的缩进。值是像素（px）；百分比：50%，是相对父级宽度来说的；字符例如：2em两个中文字符宽度

text-transform | 控制文本的大小写
unicode-bidi
vertical-align | 设置元素的垂直对齐方式
white-space | 设置怎样给一元素控件留白
word-spacing | 设置单词间距
hanging-punctuation | 指定一个标点符号是否可能超出行框
punctuation-trim | 指定一个标点符号是否要去掉
text-align-last | 当 text-align 设置为 justify 时，最后一行的对齐方式。
text-justify | 当 text-align 设置为 justify 时指定分散对齐的方式。
text-outline | 设置文字的轮廓。
text-overflow | 指定当文本溢出包含的元素，应该发生什么
text-shadow | 为文本添加阴影
text-wrap | 指定文本换行规则
word-break | 指定非CJK文字的断行规则
word-wrap | 设置浏览器是否对过长的单词进行换行。

效果图

二：盒模型

主要包括：宽，高，内边框，边框，外边距。单位为px

盒模型

宽：width
高：height。可以不设置，有内部元素决定其高度
内边距：padding。复合属性，包含上下左右。也可以单独设置，
例如：padding-top，padding-bottom，padding-left，padding-right。
padding:10px 20px 30px 40px;与iOS不同的是，顺序为上右下左
padding:10px 20px 40px;三个值时，为上，左右，下
padding:10px 20px;二个值时，为上下，左右
padding:10px;1个值时，为上右下左相同
边框：border。复合属性：border-width，border-style和border-color。
border: 1px solid gray
border-width | 指定边框的宽度。同上，也是复合属性，包含上下左右。border-top-width，border-bottom-width，border-left-width，border-right-width。也可以同时设置4，3，2，1个值，或者单独设置某个边。
border-color | 指定边框的颜色。同上，也是复合属性。
border-style | 指定边框的样式。同上，也是复合属性。具体的值有：点状dotted，实线solid，双线double，虚线dashed等，更多可以查看资料。

div {
      /*同时设置四边的复合属性width，style，color*/
      border: 1px solid gray;
      /*设置某边的复合属性width，style，color*/
      border-left:  2px dashed pink;

      /*设置某属性的四边*/
      border-width: 10px 20px 30px 40px;
      border-color: red yellow blue purple;
      border-style: solid double dotted dashed;

      /*单独设置某边单一属性*/
      border-top-width: 20px;
      border-top-style: dotted;
      border-top-color: red;
}

应用：
1.三角形：

.arrow {
    margin: 100px;
    width: 0px;
    height: 0px;

    /*background-color: gray;*/
    border:40px solid white;
    border-top-color: red;
}
2.表格边框合并
  属性为border-collapse：边框合并，默认值为separate，分开的，改为collapse，即可`border-collapse: collapse;`

外边距：margin。复合属性。同padding，也有上右下左四个边。可以单设，也可以同时设置。
盒子水平居中：左右值设为auto即可。例如：border：10px 20px 30px;

效果图

补充

1. 盒子高度可以不设置（或者auto），而是由内容来决定

2. 当盒子限定了高度后，内容溢出，可以设置overflow：hidden;

3. 宽度剩余：只设置左边距，不设置右边距（设置为0）。同理还有高度剩余

4. margin塌陷（竖直方向）

   • 同级：上下两盒子都有margin值时，其相邻两个margin值会取其中的大值，而不是和值。
   • 盒子嵌套：也会塌陷。并不是相对其父级盒子。
     对于这种情况，同级之间一般只设置其中一个盒子的一个边，另一个设置为0。嵌套关系呢，一般有两种：1.给父级加一个边框border，限定父盒子区域。2.父盒子设置padding，而不是子盒子用margin-top。
     5.居中：

5. 居中：

   1. 文本居中：
      • 水平方向：text-align: center;
      • 竖直方向：
        1. 单行文本，直接设置行高等于盒子高度。
        2. 多行文本，高度自适应，设置其上下padding相等即可
   2. 盒子居中：
      • 水平方向：margin左右边设置为auto即可
      • 竖直方向：高度自适应，设置其上下padding相等即可