css基础语法（2）

css基础语法

盒子模型

一个盒子我们会分成几个部分：
–内容区(content)
–内边距(padding)
–边框(border)
–外边距(margin)

内容区：内容区指的是盒子中放置内容的区域，也就是标签 中的文本内容，子标签都是存在于内容区中的。如果没有为标签设置内边距和边框，则内容区大小 默认和盒子大小是一致的。通过width和height两个属性可以设置内容区的大小而不是整个盒子的大小。
内边距：内边距指的就是标签内容区与边框以内的空间。内边距会影响整个盒子的大小。使用padding属性来设置标签的内边距。
边框：可以在标签周围创建边框，边框是标签可见框的最外部。可以使用border属性来设置盒子的边框，也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框。border-radius设置四个角为圆角边框，border-top-left-radius设置左上为圆角边框。
外边距：外边距是标签边框与周围标签相距的空间。 使用margin属性可以设置外边距。外边距不会影响盒子的整体大小，但是会影响盒子的位置，会影响盒子
的实际控制范围。

清除浏览器默认样式

*{
margin: 0;
padding: 0;
}

文档流

文档流指的是文档中的标签在排列时所占用的位置。 将窗体自上而下分成一行行 ，并在每行中按从左至右的顺序排放标签，即为文档流。
也就是说在文档流中标签默认会紧贴到上一个标签的右边，如果右边不足以放下标签，标签则会另起一行，在新的一行中继 续从左至右摆放。这样一来每一个块标签都会另起一行，那么我们如果想在文档 流中进行布局就会变得比较麻烦。

浮动

所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。浮动使用float属性。
可选值：
none ：不浮动
left ：向左浮动
right ：向右浮动

清除浮动

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不发生变化。可选值：
left ： 忽略左侧浮动
right ：忽略右侧浮动
both ：忽略全部浮动

css定位

• 相对定位
• 绝对定位

相对定位：相对定位是一个非常容易掌握的概念. 相对于它的起点进行移动，移动后原来的位置还被占用。可以通过position:relative;开启相对定位， left right top bottom四个属性来设置标签的偏移量。
绝对定位：绝对定位是不占空间的，运用了
绝对定位的标签会脱离原来的文档流，浮动起来，因此视觉上会其他的标签重叠。可以通过position: absolute; 开启绝对定位，left right top bottom四个属性来设置标签的偏移量。