CSS自学3（盒子模型、浮动、定位）

参考自: 黑马程序员
从视频P136开始

1 CSS盒子模型

• 页面布局三大核心：盒子模型，浮动，定位。
• 网页布局第一准则：多个块级元素纵向排列找标准流，横向排列找浮动。
• 网页布局第二准则：先设置盒子大小，之后再设置盒子的位置。

1.1 网页布局的本质

• 利用CSS摆盒子。
• 网页布局过程
  1.准备好相关的网页元素，基本都是盒子Box。
  2.利用CSS设置好盒子样式，然后放到相应的位置。
  3.往盒子里装内容。

1.2 盒子模型(Box Model)组成

• 边框、内边距、外边距、实际内容。
  

1.3 边框(border)

• border:border-width | border-style | border-color （没有顺序）
• 分开写：border-top | border-bottom | border-left | border-right

1.3.1 表格的细线边框

• border-collapse:collapse
• 合并相邻的边框。

1.3.2 边框影响盒子大小

• 测量盒子时忽略边框或者测量后用width/height减去边框。

1.4 内边距（padding）

• 设置边框与内容之间的距离。

1.4.1 padding复合属性

值的个数	表达意思
padding:5px	上下左右
2个值	上下，左右
3个值	上，左右，下
4个值	上，右，下，左

1.4.2 padding也会影响盒子大小

• 如果盒子已经有了宽度和高度，再指定padding，会将盒子撑大。
• 用width/height减去多出来的内边距。
• 如果盒子本身（继承的不算）没有指定w/h，padding不会撑开盒子。

1.5 外边距（margin）

• 控制盒子和盒子之间的距离。
• 复合属性和padding一样。

1.5.1 块级盒子水平居中

• 盒子必须指定了宽度；
• 盒子 左右外边距 都是auto。
• margin：数值 auto

1.5.2 行内元素和行内块元素水平居中

• 给其父元素添加text-align:center即可。

1.6 外边距合并

• 1.相邻块元素垂直外边距的合并；
  上下相邻的两个块元素相遇时，上面的元素有margin-bottom，下面的元素有margin-top，他们之间的垂直间距不是两者之和，而是两值之间的较大者。
  解决方案：只给其中一个元素添加margin。

• 2.嵌套块元素垂直外边距的塌陷。
  浮动的元素不存在外边距合并的问题
  两个嵌套关系（父子关系）的块元素，父元素有margin-top的同时子元素也有margin-top，此时父元素会塌陷较大的外边距值。
  解决方案：①给父元素定义上边框；②给父元素定义padding-top；③为父元素添加overflow:hidden

1.7 清除内外边距

• 网页元素很多都带有默认的内外边距，在布局之前首先要进行清除。
• 使用通配符：* {padding:0；margin:0}

1.8 圆角边框（重要）

• 原理：形成半径为length的圆/椭圆 与 形成矩形盒子四个角的边相切。
• border-radius:length;
• length可以是 数值 或 百分比。
• length是简写属性，其实可以跟四个值，顺时针旋转： 左上，右上，右下，左下。

1.8.1 圆角边框的使用

• 设置圆形盒子
  length设置为正方形盒子的一半长/50%。
• 设置圆角矩形
  length设置为height的一半。

1.9 盒子阴影

• box-shadow:h-shadow v-shadow blur spread color inset;
• h-shadow 和 v-shadow允许负值。
• 默认的是外阴影(outset)，但是不可以写出来，否则导致阴影无效。
• 盒子阴影不占用空间，不影响其他盒子排列。

1.10 文字阴影

• text-shadow:h-shadow v-shadow blur color;

2 CSS浮动

2.1 传统网页布局的三种方式

• 普通流（标准流/文档流）
  标签按照默认方式排列。（块级，行内元素，行内块元素）
• 浮动
  可以改变元素标签默认的排列方式。
• 定位

2.2 什么是浮动

• float属性用于创建浮动框，将其移动到另一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
• 选择器 {float:属性值;}
• 创造之初的目的是为了产生文字环绕效果。

2.3 浮动特性（重难点）

• 1.浮动元素会脱离标准流，移动到指定位置（脱标），浮动的盒子不再保留原先的位置。
• 2.如果多个盒子都设置了浮动，它们会按照属性值在一行内显示并且顶端对齐排列。
  注意： 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动盒子，多出的盒子会另起一行对齐。
• 3.浮动元素具有行内块元素特性。
• 4.浮动的盒子会自动检测高度和宽度。
• 5.浮动的元素只会压住下面标准流的盒子，但不会压住盒子中的文字。

2.4 常见的网页布局

• 第一种
  

• 第二种

• 第三种

2.5 浮动布局注意点

2.5.1 浮动和标准流父级搭配使用

先使用标准流的父元素排列上下位置，内部子元素再采取浮动排列左右位置，符合网页布局第一准则。

2.5.2 从众效应

• 一个元素浮动了，理论上其他的兄弟元素也要浮动。
• 浮动的盒子只会影响后面的标准流，不影响前面的标准流。

2.6 清除浮动

• 选择器 {clear:属性值;}

2.6.1 为什么需要清除浮动？

• 父盒子不方便确定高度，子盒子浮动不占有位置，导致父盒子高度为0，影响了后面布局。

2.6.2 清除浮动本质

• 闭合浮动。
• 清除浮动元素的影响。
• 如果父盒子本身有高度，则不需要清除浮动。
• 清除后，父级根据浮动的子元素自动检测高度。

2.6.3 清除浮动方法

• 额外标签法（隔墙法）
  在最后一个浮动的元素后面添加一个空标签，且此标签必须是块级标签。

<style>
	.kong {
		clear:both;
	}
</style>
<div class="kong"></div>

• 父级添加overflow属性

  父级选择器 {overflow: hidden/auto/scroll}

• 父级添加after伪元素

	<style>
       .clearfix:after {
       	/*伪元素必须有的属性*/
           content: "";
           /*伪元素创建的元素是行内元素，但是清除浮动的元素必须是块级元素*/
           display: block;
           /*隐藏新创建的元素*/
           height: 0;
           /*核心代码清除浮动*/
           clear: both;
           /*隐藏新创建的元素*/
           visibility: hidden;
       }

       .clearfix {
           /* IE6、7专有 */
           *zoom: 1;
       }
	</style>

• 父级添加双伪元素

   <style>
       .clearfix:before,
       .clearfix:after {
           content: "";
           /*转换为块级元素且在一行显示*/
           display: table;
       }

       .clearfix:after {
           clear: both;
       }

       .clearfix {
           *zoom: 1;
       }
   </style>

方法	优点	缺点
额外标签	通俗易懂，书写方便	添加了无意义的标签，结构化较差
overflow	代码简洁	无法显示溢出的部分
after、双伪元素	没有增加标签，结构更简单	需要照顾低版本浏览器

3 PS切图

图层切图、切片切图、PS插件切图

3.1 常见的图片格式

• 1.jpg/jpeg：色彩信息保留较好，经常用于产品类图片；
• 2.gif：可以保存透明背景和动画效果，用于图片小动画效果；
• 3.png：背景透明，色彩保留好；
• 4.psd：photoshop专用格式，可以直接复制文字、图片、还能测量大小和距离。

3.2 图层切图

• 选中图层—>右键图层—>快速导出PNG。
• ctrl+E合并为一张图—>右键图层—>导出PNG。

3.3 切片切图

• 利用切片选中图片->文件菜单->导出->存储为web设备所用格式->选择我们想要的图片格式（见3.1）->存储。

3.4 PS插件切图

• Cutterman插件。

3.5 学成在线案例

1、准备素材和工具

• 学成在线PSD源文件。
• 开发工具=PS+Vscode+浏览器

2、案例准备工作

采取结构与样式相分离的思想。

• 创建一个用于存放这个页面相关内容的文件夹。
• 在根文件夹下创建一个存放图片的文件夹。
• 新建首页文件index.html
• 新建style.css样式文件。
• 采用外链样式表引入到html中。

3、页面布局整体思路

• 确定页面的版心（可视区）。
• 第一准则：先行模块后列模块，纵向标准流，横向找浮动。
• 第二准则：先大小后位置。
• 先结构后样式：搭建 HTML 结构。

4、导航栏注意点

• 实际开发中，使用 li+a 取代链接 a。
• 语义更清晰，减少堆砌关键字嫌疑，避免降权。
• 让导航栏一行显示，给 li 加浮动，而不是给 a 加浮动。
• 不给 nav 宽度，方便以后添加内容。
• 导航栏里的文字不一样多，给链接 a 左右 padding 值撑开盒子，不指定宽度。

4 CSS定位

4.1 为什么需要定位

• 浮动可以让多个盒子一行没有缝隙排列显示,经常用于横向排列盒子。
• 定位则是可以让盒子自由的在某个盒子内移动位置或固定屏幕中的某个位置,并且可以压住其他盒子。

4.2 定位组成

将盒子定在某一个位置，定位也是在摆放盒子，按照定位的方式移动盒子。

• 定位=定位模式（指定一个元素在文档中的定位方式）+边偏移（决定该元素的最终位置）。

4.2.1 定位模式

决定元素的定位方式，通过 position 属性设置。

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

4.2.2 边偏移

定位的盒子移动到的最终位置，有top、bottom、left和right4个属性。

• 可以有正负

边偏移属性	示例	描述
top	top:80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	…	…
left	…	…
right	…	…

4.3 静态定位 static（了解）

默认定位方式，无定位。

选择器 { position: static; }

• 静态定位没有脱离标准流，它具有标准流的所有特点，按照标准流特性摆放位置，没有边偏移。
• 很少使用。

4.4 相对定位 relative（重要）

元素相对于它原来所在位置进行移动。

选择器 { position: relative; }

• 不脱离标准流，继续保留原来的位置。（与浮动不同）
• 典型应用是限制绝对定位。

4.5 绝对定位 absolute（重要）

元素相对于父元素的位置移动。

选择器 { position: absolute; }

• 没有父元素/父元素没有定位时，以浏览器为对照定位。
• 如果父元素有定位（相对、绝对、固定定位），则以 最近一级 的 有定位 的父元素为参考点移动位置。
• 绝对定位是脱标的，不占有原来的位置。

4.6 子绝父相

子级是绝对定位的话，父级要用相对定位。

• 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
• 父盒子必须添加定位以此限制子盒子在父盒子内显示。
• 子绝父相很常用，但是也需要根据具体情况选择定位方式。

4.7 固定定位 fixed（重要）

将元素固定于浏览器可视区的位置，在浏览器页面滚动时，元素位置不会改变。

选择器 { position: fixed; }

• 以浏览器窗口可视区域为参照点移动元素。
• 跟父元素没有关系。
• 不随滚动条滚动。
• 脱标，不保留原来的位置，可以看作是一种特殊的绝对定位。

将元素固定在版心右侧的小技巧：
1、让固定定位的盒子 left: 50%，移动到可视区域的一半位置。
2、让固定定位的盒子 margin-left：版心宽度的一半距离。

4.8 粘性定位 sticky（了解）

相对定位和固定定位的混合。
和页面滚动搭配使用。兼容性差，IE不支持。

选择器 { position : sticky; top: 10px; }

• 以浏览器的可视窗口为参照点移动元素（固定定位特点）
• 不脱标，占有原先的位置（相对定位特点）
• 必须添加 top、bottom、left、right 才能生效。
• 例如top:10px—>粘性定位的盒子距离可视区域10px时就变为固定定位。

4.9 定位的总结

定位模式	是否脱标	移动位置
static	否	不能使用边偏移
relative	否	相对于自身位置偏移
absolute	是	带有定位的父级
fixed	是	浏览器可视区域
sticky	否	浏览器可视区域

4.10 定位的叠放次序 z-index

使用 z-index 来控制盒子的前后次序，避免出现盒子重叠（后写的盒子会压在上面，后来居上）。

选择器 { z-index :1; }

• 数值可以是正整数、负整数或0，默认是auto。
• 数值越大盒子越靠上。
• 数字后面不能加单位。
• 只有 定位 的盒子才有 z-index 属性。（标准流和浮动都没有）

4.11 定位的拓展

4.11.1 绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中。

• left: 50%;（父容器宽度的一半）
• margin-left: -自己盒子宽度的一半

垂直居中也是差不多的原理：

• 先bottom: 50%
• 再margin-top: -自己盒子高度的一半

4.11.2 定位特殊特性

absolute 和 fixed 两种定位和浮动类似（也有不同）。

• 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
• 块级元素添加绝对或者固定定位，默认是内容的大小，不再是独占一行。
• 脱标的盒子不会产生外边距合并的问题。
• absolute 和 fixed 会完全压住下面标准流的所有内容（和浮动不同）。

5 网页布局总结

方法	作用
标准流	布局垂直的块级盒子
浮动	布局水平的块级盒子
定位	布局在盒子里自由移动的元素

6 元素的显示和隐藏

6.1 display 属性

display: none ; 隐藏对象
display: block ;显示元素

display 隐藏（不是删除）元素后，不再占有原来的位置。

6.2 visibility 可见性

visibility: visible; 元素可见
visibility: hidden; 元素隐藏

visibility 隐藏元素后，仍占有原来的位置。

6.3 overflow 溢出

overflow: visible; 显示超出部分
overflow: hidden; 不显示超出部分
overflow: scroll; 显示滚动条（不论是否超出）
overflow: auto; 自适应显示滚动条

• 对于定位的盒子要慎用 overflow:hidden，因为会隐藏多余的部分（比如学成在线的hot组件）。