CSS 基础-03

1.盒子模型

盒子模型分为两类：（非IE）标准物理盒子 和 IE盒子

标准物理盒子：物理空间=内容+边框+内边距 （以外都是外边距）

IE盒子：物理空间=内容 内容包括边框和内边距（内容固定，做减法） （以外都是外边距）

2.行块级元素

html中，标签分为两种： 块级 和 行级

块级元素（display：block）：

特征： 1.独占一行。

​ 2.宽度若不设置，则默认与浏览器宽度一样；

​ 3.高度若不设置，则默认随着内容增高而增高；

​ 4.宽高，行高，内外边距的等属性均可以设置；

​ 5.容纳性：可容纳任何元素；

行级元素（display：inline）：

特征：1.不独占一行；

​ 2.宽度若不设置，则默认随着内容的增加而增加；

​ 3.高度若不设置，则默认随着内容的增高而增高；

​ 4.宽高，内外上下边距等无法控制，行高，内外左右边距等可以控制；

​ 5.容纳性：行级元素

3.内外边距

外边距（margin）：定义元素与元素之间的距离

​ margin：10px；（四边）

​ margin：10px 20px；（上下10，左右20）

​ margin：10px 20px 30px；（上10，左右20，下30）

​ margin：10px 20px 30px 40px；（上10 ，右20，下30，左40）

单边距：

​ margin-方向 :__px；

常用技巧：基于父级宽度内，自动居中

​ margin-left：auto；

​ margin-right：auto；

常见简写：

​ marigin：__px auto；

内边距（padding）：定义边框与内容之间的距离

​ padding：10px；（四边）

​ padding：10px 20px ；（上下10，左右20）

​ padding：10px 20px 30px；（上10，左右20，下30）

​ padding：10px 20px 30px 40px；（上10，右20，下30，下40）

单边距

​ padding-方向：__px;

4.定位(position)

使用场景：当元素（标签）发生重合时，就可以使用定位判定双方的位置属性。

属性名：position

属性值：

• absolute（绝对定位）

  定位后是否保留原位置：不保留原来的位置（网）

  定位原点：基于网页第一页的四个角落

• relative（相对定位）

  定位后是否保留原有位置：保留原来的位置（柱子）

  定位原点：基于原来位置的四个角落

• fixed（固定定位）

  定位后是否保留原有位置：不保留原来的位置（网）

  定位原点：基于当前可视窗口的四个角落

---

补充概念：

文档流：在body体中，标签从上往下依次排列，形成一条奔流不止的河流。

定位：脱离文档流，原始位置就会被清除，下方元素上移补位，定位元素就会与文档流中的元素发生重叠

定位优先级(z-index)

​ 当定位元素发生重叠时，可通过z-index来改变上层顺序；

​ 格式：z-index:数字；

​ 其中数字越大，优先级越高

仅限定位元素使用

5.浮动

属性名：float

属性值：left | right | none

作用：脱离文档流，将兄弟（同级）元素排成一排

位置：不保留原来的位置

---

有些场合不需要保留原来的位置，但有些也需要保留原来的位置

如何保留原来的位置：通过clear清除浮动

---

6.清除浮动

属性名：clear

属性值：left | right | both

• 方法一：条件（原理）

  在兄弟元素的最后面，加空标签（非浮动），通过空标签来清除前面的浮动元素

  原理	
  		<ul>
  			<li>小米手机</li>
  			<li>红米</li>
  			<li>电视</li>
  			<li>笔记本</li>
  			<li>家电</li>
  			<li>新品</li>
  			<li>路由器</li>
  			<li>智能硬件</li>
  			<div style="clear: left;"></div>
  		</ul> 

• 方法二

  ​ 在浮动元素的父级，添加属性overflow：hidden，形成BFC区域，即可清除儿子项的浮动

  BFC区域：内部元素不会影响任何外界的元素（统统保留位置）

  形成BFC区域的方式：overflow：hidden；或者 float：none；

  目前部分浏览器不支持BFC，故不推荐此种写法

  <ul style="overflow:hidden">
     	<li>小米手机</li>
     	<li>红米</li>
     	<li>电视</li>
     	<li>笔记本</li>
     	<li>家电</li>
     	<li>新品</li>
     	<li>路由器</li>
     	<li>智能硬件</li>
     </ul> 

• 方法三

  在浮动元素的父级，通过伪对象的方式实现清除儿子项的浮动

  父级元素::after{
      content:' ';
      display:block;		/*将当前元素转为块级标签*/
      clear:both;
  }

  <style>
  	/* 完美点的 方法3 */
  	ul::before, ul::after{
  		content:'';
  		display:block;
  	}
  	ul::after{
  		clear:both;
  	}
  </style>
  	...
  <ul>
     	<li>小米手机</li>
     	<li>红米</li>
     	<li>电视</li>
     	<li>笔记本</li>
     	<li>家电</li>
     	<li>新品</li>
     	<li>路由器</li>
     	<li>智能硬件</li>
     </ul> 

  ​ 友情提示：浮动若不需要后面的元素向上填充，记得及时清除浮动

• 四.市场常用写法：

  .clearfix::before, .clearfix::after{
         content:' ';
         display:block;
  }
  .clearfix::after{
         clear.both
  }
  之后儿子项需要使用清除浮动，只需给父级赋予class="cleanfix"

7.元素转换

标签名：display

标签名：

• block

  将当前元素转换为块级元素 （替换：独占一行，可应用宽高控制）

  .i2{width: 400px; height: 100px; background: skyblue; display: block;}

• inline

  将当前元素转换为行级元素 （替换：无法使用宽高控制，不独占一行）

  .b1{width: 300px; height: 50px; background: pink; display: inline; }

• inline-block

  将当前元素转换为内联-块元素（既不独占一行(block)，也可以应用宽高控制(inline)）

  .b3{width: 300px; height: 50px; background: pink; display: inline-block;}

• table

  将当前元素转换为块级表格

• table-cell

  将当前元素转换为td单元格

• none

  将当前元素隐藏（不占位）

  .box1{width: 300px; height: 50px; background: lightgreen; display: none;

• visibility：hidden

  将当前元素隐藏（占位）

  .box1{width: 300px; height: 50px; background:lightgreen; visibility: hidden;}

8.初始化

​ 目的：各个浏览器对css样式的默认设定值不一定一样，为了保证代码在各个浏览器上显示的效果一致，所以需要对浏览器的默认css值重新统一设定，（也称初始化）

​ 主要初始化内容包括：默认内外边距（margin、padding），字体（font），项目符号（li），超链接（a下划线），表格等

9.网页布局

主要使用：Div+Css

在布局中主要使用定位和浮动，为方便维护修改，推荐尽量使用浮动

布局规则：

• 由宏观到微观
• 先看行，再看列
• 由上至下，从左到右