CSS盒子模型+浮动qing'chu+字体+背景

CSS盒子模型+浮动清除+字体+背景

盒子模型：也称为盒子模型或者框模型
  每一个封闭区域我们都可以把它看做一个盒子模型，依照盒子的属性来确定区域的样式

盒模型的区域划分：

margin(外边距) - 清除边框外的区域，外边距是透明的
border(边框) - 围绕在内边距和内容外的边框
padding(内边距) - 清除内容周围的区域，内边距是透明的
content(内容) - 盒子的内容，显示文本和图像

关于盒子模型的相关属性：

width（宽度）- 设置模型的内容宽度
height（高度）- 设置模型的内容高度
padding（内边距）- 设置模型的内边距的距离
margin（外边距）- 设置模型的外边距的距离
border（边框）- 设置模型的边框大小

margin和padding都有两种设置的方式：

1、直接margin或padding再加上参数，表示默认上下左右的margin和padding都为参数值

2、margin或padding再加上“-”再加上下左右，表示只设置上下左右一边

注意：塌陷现象：对于两个盒子的同一边进行margin设置时，margin区域会重叠，值取较大的一个

常用：父子盒子之间用padding，兄弟盒子之间用margin

如果父子盒子之间用margin，则可能引起的问题就是父子盒子之间的上边距（margin-top）重合

解决方法：1、给父盒子设置边框 2、用overflow属性来解决

浮动清除：

首先先要认识文档流：标准文档流：是指元素排版布局过程中，元素会自动从左往右，从上往下的流式排列
    典型的文档流：word排版，html所有排版方式，类似于word中的文档排版，遵循排版规则

文档流中元素分类：内联元素（行内元素），块级元素

块级元素的特点：

（1）所有块级元素独自占有一行，不能和其他元素共享一行
（2）可以根据盒模型特性设置宽高内外间距，如果不设置宽度，则默认填充父级元素的宽度
（3）内部可以继续容纳其他元素
（4）元素包括：div、dl、h系列、hr、ul、li、ol、table、p等

内联元素的特点：

（1）默认和其他元素在同一行
（2）不遵循盒模型特性设置，宽高只和内容有关
（3）元素包括：文本标签(a、b、u、font、span )、input、label、textarea、img、select等

块级元素和内联元素相互转换：

块级元素->内联元素：增加css属性 display:inline
内联元素->块级元素：增加css属性 display:block

如果想要元素既有块级元素的特点，又有内联元素的特点：增加css属性  display:inline-block

脱标实现:

定义：让标签脱离标准文档流的约束限制，独自进行定位设置
约束：一般脱标设置的都是块级元素（内联元素可以脱标，不常用）
实现方式：浮动、绝对定位、固定定位

浮动说明:
（1）给元素的float属性赋值后，标签会脱标，停留在浮动层
（2）浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去
（3）如果填充的元素为块级元素且发生了重叠，浮动元素覆盖块级元素
（4）如果之前是内联标签，浮动后，是可以设置宽高度（因为脱标了）

注意：所有脱标的元素，都符合盒模型的约束规则（不管是块级元素还是内联元素）

浮动带来的问题：
（1）不同区域的浮动元素同行贴边
（2）浮动子元素不能撑开父容器的高度
（3）浮动子元素的父容器背景无法正常显示

如何解决浮动问题：

（1）通过对父级容器设置适合CSS高度
（2）通过overflow属性清除浮动
（3）通过设置clear属性清除浮动

字体属性的常用设置：

（1）字体大小：font-size：以像素为单位设置字体大小、以百分比设置字体大小、变量值（small、larger）；单位模式：px、em

（2）行高：line-height：以像素为单位设置每行的高度值、百分比设置行高

（3）字体：font-family：设置字体的样式，如“黑体”、“宋体”等

三合一的写法格式如下：font：字体/行高    字体

背景图片的获取：

background-image属性，取值方式：url(地址)

设置背景图片重复方式：
background-repead属性，取值方式：no-repeat（不重复，只设置一次）、repeat-x（水平一横平铺）、repeat-y（竖直一列平铺）

设置背景图片位置：
background-position属性
取值方式1：x坐标 y坐标
取值方式2：left、right、top、bottom、center

一行写法：background：属性1 属性2 属性3