【前端】CSS基础学习笔记（Part3）

前言

• 该笔记是学习 黑马Pink老师的的HTML+CSS基础课程所记录的，纯手码~若对您有帮助，请给个赞，谢谢！
• 相关视频：前端Html5+Css3+移动Web教程，前端Web入门教程，零基础前端开发视频教程
• 课程相关代码已上传到个人Github，如有需要请自取：Github版HTML+CSS笔记和代码

各章节笔记对应链接：

【前端】HTML基础学习笔记

【前端】CSS基础学习笔记（Part1）

【前端】CSS基础学习笔记（Part2）

【前端】CSS基础学习笔记（Part3）

【前端】CSS基础学习笔记（Part4）

【前端】HTML5和CSS3学习笔记

CSS笔记

8 盒子模型

网页布局三大核心：盒子模型、浮动 和 定位

8.1 看透网页布局本质

网页布局过程：

1. 先准备好相关的网页元素，网页元素基本都是盒子Box

2. 利用CSS设置好盒子样式（盒子模型），然后摆放到相应位置（浮动、定位）

3. 往盒子里面装内容

网页布局核心本质：就是利用CSS摆盒子

8.2 盒子模型 (Box Model) 组成

本质：盒子——封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容

• border —— 边框
• content —— 内容
• padding —— 内边距
• margin —— 外边距

8.2.1 边框（border）

组成：边框宽度（粗细）、边框样式 和 边框颜色

语法：

border : border-width || border-style || border-color

border-style常用的三种样式（记）：

solid ——实线、dashed——虚线、dotted——点线

/*border-style常用:solid、dashed、dotted  */ 

div {
    width: 300px;
	height: 200px;
	/* border-width: 边框的粗细  一般情况下用单位px */
	border-width: 5px;
	/* border-style: 边框的样式  solid 实线边框*/
	/* border-style: solid; */
	/* border-style: 边框的样式  dashed 虚线边框*/
	/* border-style: dashed; */
	/* border-style: 边框的样式  dotted 点线边框*/
	border-style: dotted;
    border-color: pink;
}

（1）边框的复合写法（简写），没有顺序，一般默认如下：

/*默认为：边框宽度、样式、颜色*/
border: 1px solid red;

/*border 后加方位名词：top、left、right、bottom
  可单独设置一个方位的样式   */

（2）灵活利用层叠性（如：设计盒子上边框与其余方位不一样）

div {
    width: 200px;
    height: 200px;
    border: 2px solid blue;
    /* 层叠性 */
    border-top: 2px solid red;
}

（3）表格的细线边框

• border-collapse控制系统表格相邻单元格的边框

• border-collapse: collapse; —— 表示相邻边框合并到一起

（4）边框会影响盒子的实际大小

• 测量盒子大小时，不量边框

• 若测量时包含了边框，则需要width/height 减去边框宽度

8.2.2 内边距（padding）

定义：padding属性用于设置内边距，即边框与内容 (content) 之间的距离

语法：padding-方位词 （top、left、right、buttom，单位为px）

简写：padding属性可以进行简写，如下所示（四种都要记）：

注意：内边距需要注意的问题

（1） padding会影响盒子实际大小；当盒子已经指定宽和高，再设置内边框时，会撑大盒子

解决方法：为达到设想大小，让width/height 减去多出的内边距大小

如：前面小米侧边栏的案例，文字距离左侧的距离不应该用text-indent、这样不精确，实际开发的做法是给padding设置值，这样更精确

（2）若盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

8.2.3 外边距（margin）

定义：margin属性设置外边距，即控制盒子与盒子间的距离

语法：margin-方位词（top、left、right、buttom，单位px）（类似于padding）

简写：与padding一致（四种写法）

一、外边距典型应用

定义：外边距可以让块级盒子水平居中，但必须满足两个条件：

1. 盒子必须指定了宽度（width）
2. 盒子左右的外边距都设置为auto

/*常见的写法，以下三种都可以 */
margin-left: auto;  margin-right: auto;
margin: auto;
margin: 0 auto;

注意：以上方法是让块级元素水平居中，若要让行内元素或行内块元素水平居中 —— 给其父元素添加text-align: center 即可

二、外边距合并

定义：当定义块元素垂直外边距时，可能会出现外边距合并，有如下两种情况：

（1）相邻块元素垂直外边距的合并

说明：当两盒子的垂直边距要有重叠时，取两个值中较大的、而不是叠加，如下：

解决方案：尽量只给一个盒子添加margin值

（2）嵌套块元素垂直外边距的塌陷

说明：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距 同时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案：

1. 为父元素定义上边框
2. 为父元素定义上内边距
3. 为父元素添加 overflow: hidden （不会改变盒子大小）

还有其他方法，如浮动、固定和绝对定位，后面学了再总结

8.2.4 清除内外边距

定义：网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除下网页元素的内外边距，如下：

* {
    padding: 0;  /*清除内边距*/
    margin: 0;  /*清除外边距*/
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距（很多时候不起作用）。但是转换为块级和行内块元素时就可以设计。

8.3 PS的基本操作

定义：网页效果图一般由PS做出来，再进行开发，所以需要进行测量

测量步骤：

1. 在Photoshop中打开文件

2. ctrl + r （视图->标尺） —— 打开标尺（修改单位为像素）

3. ctrl + 加号/减号 —— 放大/缩小视图（或 Alt + 滚轮）

4. 按住空格 + 鼠标 —— 抓手工具、拖动PS视图

5. 用选区拖动（点击空白则取消） —— 测量大小

8.4 总结

一、布局时，怎么想到使用不同的div?

答：标签都是有语义的，合理的地方用合理的标签。比如产品标题 就用 h，大量文字段落就用 p，积累

二、为什么起那么多类名？

答：给每个盒子起一个名字，为了更好的找到该盒子，后期选取盒子更容易，维护起来也更方便

三、到底用margin还是padding?

答：大部分情况下可以混用，两者各有优缺点，但根据实际情况，会有更简单的方法

四、自己做时，没有思路？

答：布局时有多种实现方式，可先模仿老师，再做出自己的风格

注意：多运用辅助工具，如：屏幕画笔、ps等

8.5 CSS3新增

8.5.1 圆角边框（重点）

定义：border-radius —— 用于使盒子变成圆角

语法：border-radius: length；(数字px，或百分比)

原理：radius半径的圆与边框的交集形成圆角效果，原理如下图：

应用（2、3重点记）：

1. 参数值可为数值或百分比的形式
2. 若要将正方形设置为圆，把数值改为高或宽的一半，或直接写50%
3. 若要设置圆角矩形，把数值设置为高度的一半
4. 该属性为简写 (可有四个数值)，分别表示左上、右上、右下、左下 (顺时针)
   • 一个值 —— 设置四个角
   • 二个值 —— 1：左上右下，2：右上左下（对角线）
   • 三个值 —— 1：左上，2：右上和左下，3：右下
   • 还可：border-top-left-radius，border-top-right-radiu，border-bottom-right-radius，border-bottom-left-radius

8.5.2 盒子阴影

定义：box-shadow属性为盒子添加阴影

语法和属性值如下：box-shadow: 0px、10px、10px、-4px、rgba(0,0,0,.3)

1. h-shadow —— 阴影在x轴方向移动（负值向左，正值向右）
2. v-shadow —— 阴影在y轴方向移动（负值向上，正值向下）
3. blur —— 设置阴影的模糊度（实一点 或 虚一点）
4. spread —— 设置阴影尺寸（大小）
5. color —— 习惯设置为 rgba(0,0,0,.3)，为半透明色
6. inset —— 阴影在盒子内部，默认为outset（外部）

注意：

1. outset不可以写，否则导致阴影无效 （直接不写该属性即可）
2. 盒子阴影不占用空间，不会影响其它盒子排列
3. 任何标签都可添加 :hover

8.5.3 文字阴影（了解）

定义：text-shadow 用于设置文字阴影（实际开发用的少）

语法和属性值如下（类似box-shadow）：

9 CSS浮动

9.1 浮动

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

网页布局本质：用CSS摆放盒子

CSS提供三种传统布局方式：标准流(普通流)、浮动、定位

1. 标准流（普通流/文档流）—— 按标签默认方式排列
   • 块级元素会独占一行，从上向下排列，常用有(div、hr、p、h1-h6、ul、ol、dl、form、table)
   • 行内元素按从左到右排列，碰到父元素边缘自动换行，常用有(span、a、i、em等)

注意：实际开发中，一个页面包含三种布局方式（后面移动端会学新的布局方式）

2. 为什么需要浮动？

   • 浮动可以改变元素标签默认的排列方式（有些布局标准流无法完成）

   • 浮动最典型的应用：让多个块级元素在一行内排列显示

3. 网页布局第一个准则：多个块级元素—纵向排列找标准流，横向排列找浮动

9.1.2 浮动

定义：float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。其属性值如下：

浮动特性（重难点）：

1. 浮动元素会脱离标准流（脱标）
2. 浮动的元素会一行内显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性

一、脱离标准流位置、不再保留原先的位置

二、多个盒子设置浮动，会在一行显示，且顶部对齐排列

注意：浮动的元素互相贴靠在一起（不会有缝隙），若父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐

三、浮动的元素会具有行内块的特性

定义：任何元素都可以浮动。不管是什么模式的元素，添加浮动之后都具有行内块元素相似的特性

• 若块级盒子没设置宽度，默认宽度和父级宽度一样，但是浮动后，大小根据内容决定

• 行内元素同理

9.1.3 浮动搭配标准流使用

为了约束元素位置，网页布局常用策略：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置 —— 符合网页布局第一准则

网页布局第二准则：先设置盒子大小，之后设置盒子的位置

9.1.4 常见的网页布局

常见的网页布局如下图：

9.1.5 浮动布局的注意点

（1）浮动和标准流的父盒子搭配使用：

• 先用标准流的父元素排列上下位置，内部子元素采取浮动排列左右位置

（2）一个元素浮动了，理论上其余兄弟元素也要浮动

• 一盒子内有多个盒子，若一个浮动，其余也要浮动，以防引起问题
• 浮动的盒子只会影响其后面的标准流，不会影响前面的标准流

9.1.6 为什么要清除浮动

问题：有的时候不方便把父盒子的高度定死，因为不知道其中浮动的子盒子个数有多少，希望让子盒子撑开父盒子。但是子盒子浮动，且父盒子不指定高度时，父盒子高度则会变为0，布局就会出现问题

原因：父盒子不方便指定高度，子盒子浮动又不占位置，最后父盒子高度为0，会影响下面标准流的盒子（浮动元素不占用原文档流位置，所以对后面元素排版产生影响）

本质：清楚浮动元素造成的影响

作用：清除后，父盒子会根据浮动盒子自动检测高度，因此就不会影响后面的标准流

/*语法*/
选择器 {clear: 属性值;}
/*实际开发常用*/
选择器 {clear: both;}

清除浮动的策略：闭合浮动（闭在父盒子内）

9.1.7 清除浮动的方法

一、额外标签法也称为隔墙法（是W3C推荐的做法）

做法：在浮动元素末尾添加一个空标签，如：<div style="clear: both"></div>，或者其它标签

• 优点：通俗易懂，书写方便
• 缺点：添加了许多无意义的标签，结构化较差

注意：新增的标签，必须是块级元素

• 额外标签法在实际中不常用！

二、父级添加 overflow

做法：给父级元素添加 overflow属性，将属性值设置为hidden、auto或 scroll

常用：overflow: hidden;

• 优点：代码简洁
• 缺点：无法显示溢出的部分

三、父级添加:after 伪元素法（重要）

定义：:after方式相当于额外标签法的升级版，代码如下：

/*单冒号——照顾低版本浏览器，也可用双冒号*/
.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    /* IE6和7 专用 */
    *zoom: 1;
}

/*注意在父级盒子中调用 clearfix*/

• 优点：没有增加标签，使结构简单
• 缺点：需照顾低版本浏览器
• 代表网站：百度、淘宝、网易等

四、父级添加 双伪元素

代码如下：

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

.clearfix:after {
    clear: both;
}

.clearfix {
    /* 照顾低版本浏览器 */
    *zoom: 1;
}

/*注意在父级元素中调用 clearfix*/

• 优点：代码更简洁

• 缺点：需照顾低版本浏览器

• 代表网站：小米、腾讯等

五、总结

什么时候使用清除浮动？（满足以下三个条件时）

• 父级没高度

• 子盒子浮动

• 影响下面布局了，就应该清除浮动
  

9.2 PS 切图(必备)

9.2.1 常见的图片格式

1. JPG图像格式：JPEG(JPG)对色彩的信息保留较好、高清、颜色较多，产品类的图片常用JPG格式

2. gif图像格式：最多只能存储256色，常用于显示简单图形与字体，但可保存透明背景和动画效果，实际常用于一些图片小动画效果

3. png图像格式：新兴网络图片格式，结合了gif 和 JPEG的优点，具有存储形式丰富的特点，且能保持透明背景，若想要切成背景透明的图片，请选择png格式

4. PSD图像格式：Photoshop专用格式，可存放图层、通道、遮罩等多种设计稿；对前端人员最大的优点是：可以直接从上面复制文字、获得图片、还可测量大小和距离

注意：前三种可直接放到网页，PSD格式不行，只是便于开发

9.2.2 PS切图

一、图层切图

最简单的切图方式：右击图层 -> 快速导出为PNG

很多时候需合并图层再导出：

1. 选中图层（利用shift或ctrl）
2. 选中后：图层菜单 -> 合并图层（ctrl + E），再导出

二、切片切图

1.利用切片选中图片（切片工具，手动划出）

2.导出选中图片（菜单->导出->存储为web设备所用格式->选格式->存储）

三、PS插件切图

Cutterman是一款运行在Photoshop中的插件，自动将所需的图层进行输出，以替代传统手工的“导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程

10 学成在线网（案例）

10.1 准备工作

1.创建study文件夹，用于存放html文件

2.在study中，创建images文件夹，用于存放图片

3.创建首页文件index.html（统一）

4.创建样式style.css

5.将样式引入到html中

6.样式表写清除内外边距，来检测样式表引入是否成功

10.2 CSS属性书写顺序

建议遵循以下顺序：

布局 —> 盒子自身 —> 盒子内文本属性 —> 其它css3属性

例子：

10.3 页面布局整体思路

1.确定页面的版心（可视区），测量可得知

2.分析页面中的行模块，以及每个行模块中的列模块 —— 页面布局第一准则

3.一行中列模块经常浮动布局，先确定每个列的大小，再确定列的位置 ——第二准则

4.制作HTML结构；遵循：先结构、后样式的原则（结构永远最重要）

注意：先理清布局结构，再写代码，多写多积累

导航栏注意点：实际开发中，不会直接用链接a，而是用li包含链接（li+a）的做法

1. li + a 语义更清晰，有条理
2. 直接使用a，会让搜索引擎辨别为有堆砌关键字的嫌疑（有降权风险，影响网站排名）

注意：

1. 让导航栏一行显示，给li加浮动，因为li是块级元素
2. .nav导航栏可以不给宽度，将来便于添加其余文字
3. 导航栏内文字不一，最好给链接a左右padding撑开盒子，而不指定宽度

补充：

1. 浮动的盒子不会有外边距合并的问题（不会塌陷）

2. 把li的父亲 ul 修改的足够宽，使其能装下所要求的盒子个数，这样就不用去掉最右侧li的外边距