CSS入门的那些坑

几种引入css的方式

分别有用style 属性、style 标签、css link、css import，
<div style="color:red;">引入css属性</div>
<style> div{color:red;}</style>
<link rel="stylesheet" href="./css/style.css">
@import url("./css/style.css") 在css顶部加入

---

盒模型

在html标签指定范围通常在css中都是由盒模型构成的，浏览器渲染引擎会根据CSS-Box模型（CSS Basic Box model）将所有元素表示为一个矩形盒子（box)。CSS决定这些盒子的大小，位置以及属性（颜色，背景，边框尺寸...)

盒模型
内边距与内容边界之间的空间可以由 padding-top, padding-right, padding-bottom, padding-left 和简写属性 padding 控制。
外边距区域大小由 margin-top, margin-right, margin-bottom, margin-left 及简写属性 margin 控制。
margin：10px 20px;表示上下左右分别是 10px 10px 20px 20px
margin：10px 20px 30px 40px;表示上下左右分别是 10px 30px 40px 20px padding同理。

---

postion的一些属性值及其用法

1. position: static static(没有定位)是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。
2. position: relative relative(相对定位)是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响。
3. position: absolute absolute(绝对定位)是指给元素设置绝对的定位，通过top，bottom，left，right定位，相对定位的对象可以分为两种情况：
   i. 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。
   ii. 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。
4. position: fixed 可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的。（可用于固定navbar）
5. inherit 继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。

什么是文档流

文档流是文档中可显示对象在排列时所占用的位置。比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。