CSS初级篇—基本属性、盒子模型、层模型及定位

CSS基本属性

css基本属性用来填充css内容
基本结构如下：

选择器{
	属性名:属性值;
	属性名:属性值;
}

CSS常用属性

1. font-size 设置字体大小(任何字体的大小设置的为它的高而不是宽)
2. font-weight 字体加粗(属性值：bold、lighter、 normal、bolder)
   *字体能不能被加到更粗，取决于字体包里面有没有更粗的样式
3. font-style 设置字体样式(属性值：italic斜体等)
4. font-family 设置字体(常用属性：arial、cursive等)
5. color 设置字体颜色
6. text-algin 水平居中方式(属性值center、right、left等)
   三种书写颜色属性值的方法：
   （1）纯英文单词(white、blue、black等)
   （2）颜色代码(#f40、#fff等)
   （3）颜色函数(rgb(0-255,0-255,0-255))
7. border 设置边框(属性值包含border-width，border-style，border-color)复合属性可以拆开写
   border属性还可以单独设置(top、left、right、bottom)
   例如：border-left-color:red;
      border-top-color:green;
      border-right-color:#00f;
   *可以将width和height设置为0，再利用border属性就可以绘制三角形
8. line-height 单行文本所占的高度
   *height和line-height的属性值相等时，则单行文本垂直方向居中
9. text-indent 设置首行缩进(单位em)
10. text-decoration 设置文本下划线(属性值none、underline等)
11. cursor 设置光标(即鼠标的样式) 属性值:pointer、help等

元素分类

1.行级元素(inline)：span、strong、em、a、del
  feature：内容决定元素所占的位置，不可以通过css改变宽高
2.块级元素(block)：div、p、ul、li、ol、form、address
  feature：独占一行，可以通过css改变宽高
3.行级块元素(inline-block)：img
  feature：内容决定大小，可以改变宽高
*以上元素之所以能够展示这些形式是由css属性中display所决定的，即可以控制display的值来改变原来元素的特点。
*凡是带有inline的或者inline-block的元素都有文字特性（即被分割）

盒子模型

盒子的组成部分：盒子壁(border)、内边距(padding)、盒子内容(width+height)
盒子模型组成部分：margin+border+padding+(content)

**盒模型中的属性都可以单独设置大小**

冷知识：在很多浏览器中，body都有默认的margin，这个值是8px。

层模型

定位

绝对定位(absolute)

absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。
它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。
feature:
1.脱离文档流进行定位
2.提升层级
3.根据最近的有定位的父级进行定位，如果没有，那么相对于文档(即body)进行定位。

相对定位(relative)

relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。
feature:
1.保留原来位置进行定位
2.提升层级
3.相对自己原来的位置进行定位


它必须搭配top、bottom、left、right这四个属性一起使用，用来指定偏移的方向和距离。

往往relative和absolute都是配合起来使用，例如：

/*
  HTML 代码如下
  <div id="father">
    <div id="son"></div>
  </div>
*/

#father {
  positon: relative;
}
#son {
  position: absolute;
  top: 20px;
}

固定定位(fixed)

fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。

它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的默认位置。

---

关注小编，带你一起自学前端！！！

阅读更多