CSS学习笔记3-常用属性、元素、盒子、浮动、定位

5、CSS常用属性
注意：front是一个复合属性
line-height:调整行间距

6、CSS块、行内、行内块元素
（1）块元素block
·块级元素通常会从新行开始，并占据整行宽度
·可以包含其他块级元素和行内元素

（2)行内元素inline
·行内元素通常在同一行呈现，不会独占一行
·只能占据其内容所需的宽度，而不是整行的宽度
·行内元素不能包含块级元素，但可以包含其他行内元素

（3）行内块元素inline-block
·水平方向上排列，但可以设置宽度、高度、内外边距等块级元素的属性。
·行内元素可以包含其他行内元素或块级元素

7、盒子模型
属性名              说明
内容Content     盒子包含的实际内容，比如文本、图片等
内边距Padding 围绕在内容的内部，是内容与边框之间的空间
边框Border       围绕在内边距的外部，是盒子的边界（border-left：只在左边框显示）
外边框Margin   围绕在边框的外部，是盒子与其他元素之间的空间

8、浮动
网页布局方式有以下五种：
（1）标准流(普通流、文档流)：网页按照元素的书写顺序依次排列
（2）浮动
（3）定位
（4）Flexbox和Grid（自适应布局）

标准流是由块级元素和行内元素按照默认规定的方式来排列，块级就是占一行，行内元素一行放好多个元素

浮动属性创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，这样即可使元素进行浮动

语法：
选择器{
    float: left/right/none;
}
注意：浮动是相对于父元素浮动，只会在父元素的内部浮动

浮动的三大特性：
脱标：脱离标准流
一行显示，顶部对齐
具备行内块元素特性

9、定位
定位布局可以精准定位，但缺乏灵活性
定位方式：
（1）相对定位：相对于元素在文档流中的正常位置进行定位
（2）绝对定位：相对于其最近的已定位祖先元素进行定位，不占据文档流
（3）固定定位：相对于浏览器窗口进行定位。不占据文档流，固定在屏幕上的位置，不随滚动而滚动