该系列文章是博主学习前端入门课程的笔记，同时也为了方便查阅，有任何问题都欢迎在评论区提出。本文主要介绍CSS基础知识，包括盒子模型、浮动布局、PS切图、定位、元素的显示与隐藏和一些零碎知识点

思维导图

第1章 盒子模型

页面布局核心：盒子模型、浮动、定位

1.1 网页布局的本质

网页布局过程：

1. 根据设计稿准备好相关的网页元素

1. 利用CSS设置好盒子样式，然后摆放到相应位置

1. 往盒子里装内容

由上述过程可以看出：

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

1.2 盒子模型组成

盒子模型包括：边框、外边距、内边距和实际内容等

1.3 边框

border可以设置元素的边框。边框由三部分组成：边框宽度(粗细)、边框样式、边框颜色

a.语法格式

div {width: 300px;height: 200px;/* border-width 边框宽度 */border-width: 4px;/* 常用的三种边框样式：实线边框 solid 实线边框 dashed 虚线边框 dotted 点线边框 *//* border-style: solid; *//* border-style: dashed; */border-style: dotted;border-color: skyblue;
}

边框语法简写

div {width: 300px;height: 200px;border: 4px dotted skyblue;
}

也可以把各部分边框分开写

div {width: 300px;height: 200px;border-top: 4px dotted skyblue;
}

小练习：给一个200*200的盒子，设置上边框为红色，其余边框为蓝色。(提示：层叠性)

b. 表格的细线边框

border-collaPSe属性控制浏览器绘制表格边框的方式。

语法格式

table,
td,
th {border: 1px solid skyblue;border-collaPSe: collaPSe;
}

注：collaPSe是合并的意思。 border-collaPSe: collaPSe;表示将相邻边框合并在一起。(让表格线条更细、更美观)

c. 边框会增加盒子大小

对于这种情况有两种解决方案：

1. 测量盒子大小时，不量边框

1. 测量时包含了边框，那么width/height要减去对于的边框宽度

1.4 内边距

padding用于设置内边距，即边框与内容之间的距离

padding属性简写可以有一到四个值

如果盒子有了高度和宽度，再指定内边距，会撑大盒子。

解决办法：

1. width/height减去多出来的内边距大小

1. 不设置width/height

1.5 外边距

margin用于设置外边距，即控制盒子和盒子之间的距离

margin的简写方式与padding完全一致，这里不做讲解

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

1. 盒子指定了宽度

1. 盒子的左右外边距设置为auto

.header {width: 900px;height: 300px;background-color: skyblue;margin: 10px auto;text-align: center;
}

注：想要行内元素或行内块元素水平居中给父级元素添加text-align:center即可

a. 外边距合并

使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。主要有两种情况：

i. 相邻块元素垂直外边距的合并

当上下相邻的两个块元素(兄弟关系)相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是取两个值中间的最大值。这种现象被称为相邻块元素垂直外边距的合并

示例

.damao,
.ermao {width: 200px;height: 200px;background-color: skyblue;
}.damao {margin-bottom: 100px;
}.ermao {margin-top: 200px;
}

效果图

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

ii. 嵌套块元素垂直外边距的塌陷

对于两个嵌套关系(父子关系)的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距

示例

.father {width: 300px;height: 300px;background-color: skyblue;margin-top: 40px;
}.son {width: 100px;height: 100px;background-color: pink;margin-top: 100px;
}

效果图

解决方案：

1. 为父元素定义上边框

1. 为父元素定义上内边距

1. 为父元素添加overflow:hidden

1. 还有其他方法：如浮动、固定、绝对定位的盒子

1.6 清除内外边距

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

/* 这也是实际开发中CSS的第一段代码 */
* {padding: 0;margin: 0;
}

注：行内元素为了兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级元素或行内块元素时不受影响

练习

第二章 零碎知识点

2.1 PS基本操作

利用PS可以测量图片的大小，方便练习时还原网页或者设计稿

• 文件-打开：打开需要测量的图片

• Ctrl+R(视图-标尺)：可以打开标尺。右击标尺，将单位改为像素。

• 左键点击标尺拖动，可以拉出辅助线(方便测量)

• Ctrl+加号可以放大视图，Ctrl+减号可以缩小视图

• 按住空格键，鼠标会变成小手，可以拖动PS视图

• 用选区(测量工具)拖动，可以测量高度和宽度

• Ctrl+D或者在旁边空白处点击可以取消选区

2.2 圆角边框

border-radius可以设置元素的外边框圆角

语法格式

div {width: 432px;height: 321px;background-color: skyblue;border-radius: 10px;
}

效果图

注：

• 参数值可以为数值或者百分比(高度的百分比)的形式

• 该属性是简写属性，可以设置四个值，分别代表左上角、右上角、右下角、左下角

.radius {width: 100px;height: 100px;background-color: skyblue;border-radius: 10px 20px 30px 40px;
}

• 分开写则是：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius

2.3 盒子阴影

box-shadow可以为盒子添加阴影

语法格式

div:hover {/* box-shadow: 阴影水平位移量 阴影垂直位移量 阴影模糊半径 阴影尺寸 阴影颜色 阴影模式*/box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
}

注：

• 默认是外阴影(outset)，但不可以设置该属性值，否则会导致阴影失效

• 盒子阴影不占空间，不会影响其他盒子排列

2.4 文字阴影

text-shadow可以为文本设置阴影

语法格式

div {font-weight: 700;color: orange;font-size: 50px;text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
}

2.5 line-style

使用列表布局时，可以使用下列语句去除无序列表前面的小圆点

li {line-style:none;
}

第三章 浮动

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

网页布局的本质：用CSS把盒子摆放到相应位置

CSS提供了三种传统布局方式：

1. 普通流(标准流)

1. 浮动

1. 定位

3.2 标准流(普通流/文档流)

含义：标签按照默认方式排列

1. 块级元素会独占一行，从上向下顺序排列

• 常用元素：div、hr、p、h1-h6、ul、ol、dl、form、table

1. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

• 常见元素：span、a、i、em等

以上都是标准流布局，前面的内容讲述的都是标准流。标准流是最基本的布局方式

注：实际开发中，一个页面基本都包含了这三种布局方式

3.3 如何让多个块级盒子(div)水平排列成一行

按照以前的写法，将div转换为行内块元素可以实现一行显示，但是它们之间会有空白缝隙，无法控制

此时利用浮动就可以很好的完成布局(这也是浮动最典型的应用)，因为浮动可以改变元素标签默认的排列方式

3.4 浮动语法

float属性用于创建浮动框，将其移动到一边，直到左边缘/右边缘/另一个浮动框的边缘/块元素

语法格式

.right {float: right;
}

3.5 浮动特性

脱标：脱离标准流的控制(浮)移动到指定位置(动)，浮动的盒子不再保留原先的位置

示例

.box1 {float: left;background-color: pink;width: 231px;height: 231px;
}.box2 {background-color: skyblue;width: 321px;height: 321px;
}<div class="box1">浮动的盒子</div>
<div class="box2">标准流的盒子</div>

效果图

可以看到：设置了浮动的元素，漂浮在标准流的上面，不占位置

1. 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐(示例可以看3.3)

1. 浮动元素具有行内块元素特性

• 块级盒子添加浮动后，如果没有设置宽度，它的宽度根据内容决定

• 浮动的盒子中间没有缝隙，是紧挨在一起的

• 行内元素同理

3.6 练习

第四章 常见网页布局及清除浮动

4.1 常见网页布局

网页布局准则

1. 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

1. 先设置盒子大小，再设置盒子的位置

根据准则可以看出浮动元素通常和标准流父级搭配使用

常见网页布局

第一个是标准流布局，第二个是浮动+标准流的布局，可以尝试自行还原，这里不做讲解

4.2 浮动布局注意点

1.浮动和标准流的父级盒子搭配

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

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

• 如果盒子浮动，而后面的标准流的同级盒子不浮动，会出现覆盖的现象

4.3 为什么要清除浮动

由于父级盒子很多情况下，不方便给高度(子元素需要更新，父元素高度无法确定)，但是子盒子浮动不占位置，此时父级盒子高度为0，就会影响后面的标准流盒子

示例

.box {width: 921px;border: 1px solid black;
}.damao {float: left;width: 321px;height: 321px;background-color: pink;
}.ermao {float: left;width: 231px;height: 321px;background-color: red;
}.footer {height: 321px;background-color: gray;
}

4.4 清除浮动本质

• 本质是清除浮动元素造成的影响

• 如果父级元素有高度，则不需要清除浮动

• 清除浮动之后，父级会根据浮动的子盒子自动检测高度，这样就不会影响后面的标准流了

4.5 清除浮动方法

clear可以闭合浮动，实际开发中，基本只用clear:both

• 额外标签法

在浮动元素末尾添加一个空的标签(必须是块级元素)。例如

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

优点：通俗易懂，书写方便

缺点：添加许多无意义的标签，结构化较差

• 父级添加overflow属性

为父级标签添加overflow属性，将其属性值设置为hidden、auto或scroll

优点：代码简介

缺点：无法显示溢出的部分

• 父级添加:after伪属性

:after是额外标签法的升级版，给父元素添加样式

.clearfix:after {content: '';display: block;height: 0;clear: both;visibility: hidden;
}.clearfix { /* IE6、7专有 */*zoom: 1;
}

优点：没有增加标签，结构更简单

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

代表网站：百度、淘宝网、网易等

• 父级添加双伪属性

给父元素添加样式

.clearfix:before,
.clearfix:after {content: "";display: table;
}.clearfix:after {clear: both;
}.clearfix { /* IE6、7专有 */*zoom: 1;
}

优点：代码更简洁

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

代表网站：小米、腾讯等

• 总结

第五章 PS切图

5.1 常见的图片格式

5.2 图层切图

• 这是最简单的切图方式：右击图层-快速导出为PNG(如果需要导出其他格式，则选”导出为...“。然后根据需要调整设置)

• 如果图片内容分别在不同图层内，按住shift键选中多个图层-图层-合并图层(或者CTRL+E)，之后按上述步骤导出即可

5.3 切片切图

1. 利用切片工具手动划出需要的内容

1. 导出选中的图片：文件菜单-导出-存储为web设备所用格式-设置所需格式-存储

5.4 cutterman插件切图

cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。

下载地址：使用之前确定PS是正式版本(窗口菜单-拓展功能，如果里面的文字发亮说明是正式版本)

使用方法

1. 打开插件：窗口菜单-拓展功能-cutterman

1. 选择存储位置：在插件栏输出那部分选择导出内容存放的位置

1. 切图：选中需要的图层(记得勾选”合并导出选中的图层“)，然后点击导出选中图层即可

5.5 像素大厨

作为PS(毕竟安装及使用较为复杂)的替代，功能也是非常强大。本人未使用，所以这里不做讲解，如有兴趣可以查看pink老师的教学视频

5.6 练习

第六章 定位

6.1 为什么需要定位

以下效果利用标准流和浮动难以实现或者无法实现

• 令某个元素自由在一个盒子移动位置，并且压住其他盒子

• 滚动窗口时，盒子固定在屏幕某个位置

6.2 定位组成

定位由定位模式和边偏移组成。其中定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置

语法格式

div {position:relative;top:20px;left:20px;
}

定位模式

边偏移

注：如果一个盒子既有left属性也有right属性，则默认会执行left属性。同样，如果一个盒子既有top属性也有bottom属性，则默认会执行top属性

6.3 静态定位 static

静态定位是元素的默认定位方式，意思是无定位

tiPS：

• 按照标准流特性摆放位置，没有边偏移

• 在布局时很少用到

6.4 相对定位 relative

相对定位的元素是以原来的位置作为参考点移动的

案例

.box1 {position: relative;top: 100px;left: 100px;width: 200px;height: 200px;background-color: blue;
}.box2 {width: 200px;height: 200px;background-color: skyblue;
}

效果

特点：

• 它是相对于原来的位置移动的(即移动时的参照点是自己原来的位置)

• 原本在标准流的位置仍然占有，后面的盒子以标准流的方式对待它(不脱标)。最典型的应用是作为绝对定位盒子的父级元素

6.5 绝对定位 absolute

绝对定位的元素是以最近一级的有定位祖先元素为参考点移动

示例

.grandfather {position: relative;width: 800px;height: 800px;background-color: purple;
}.father {width: 500px;height: 500px;background-color: skyblue;
}.son {position: absolute;left: 30px;bottom: 20px;width: 200px;height: 200px;background-color: blue;
}

效果图

tiPS:

• 如果祖先元素都没有定位，则以浏览器为准进行定位

• 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动

• 绝对定位不占有原先的位置(脱标)

6.6 子绝父相

含义：子级用绝对定位，父级通常要用相对定位

原因

• 子级是绝对定位，不会占有位置，可以放到父级盒子的任何位置，而不会影响其他兄弟盒子

• 父盒子需要加定位限制子盒子在父盒子内显示

• 父盒子布局时，需要占有位置，因此父盒子只能是相对定位

案例

.father {position: relative;width: 200px;height: 200px;background-color: red;
}.son {position: absolute;top: 20px;right: 0;width: 20px;height: 20px;background-color: skyblue;
}

效果图

6.7 固定定位fixed

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

特点

• 以浏览器的可视窗口为参考点移动，与父级元素没有关系

• 不随滚动条移动

• 不占有原先的位置(脱标)

示例：参考右侧的快捷栏

小技巧：将盒子固定到版心右侧

1. 让固定定位的盒子left:50%，走到浏览器可视区的一半位置

1. 让固定定位的盒子margin-left:版心一半的距离。再走版心宽度的一半

示例

.w {width: 800px;height: 800px;margin: 0 auto;background-color: pink;
}.box {position: fixed;/* 1.先走浏览器宽度的一半 */left: 50%;/* 2.再将外边距设置为版心宽度的一半 */margin: 405px;width: 100px;height: 50px;background-color: skyblue;
}

效果图

6.8 粘性定位 sticky

粘性定位可以认为是相对定位和固定定位的混合

特点

• 以浏览器的可视区域为参考点移动元素(固定定位特点)

• 粘性定位占有原先的位置(相对定位特点)

• 必须添加top、bottom、left、right其中一个才生效

tiPS：跟页面滚动搭配使用。兼容性较差，IE不支持

6.9 总结

6.10 定位叠放次序 index

使用定位时，可能会出现盒子重叠的情况。这时可以使用z-index来控制盒子的前后次序

案例

.box {position: absolute;top: 0;left: 0;width: 200px;height: 200px;}.xiongda {z-index: 1;background-color: green;
}.xionger {top: 50px;left: 50px;background-color: red;
}.guangtouqiang {top: 50px;left: 100px;background-color: blue;
}

效果图

tiPS：

• 数值可以是正整数、负整数或0，默认是auto，数值越大，盒子越往上

• 如果属性值相同，则按照书写顺序，后来者居上

• 只有定位的盒子有z-index属性

6.11 定位的拓展

1.绝对定位的盒子居中

绝对/固定定位的盒子不能通过margin:0 auto水平居中，但是可以通过以下方法实现水平/垂直居中

.box {position: absolute;top: 50%;/* 1.让盒子的左侧移动到父级元素水平中心位置 */left: 50%;margin-top: -100px;/* 2.盒子向左移动自身宽度的一半 */margin-left: -100px;width: 200px;height: 200px;background-color: pink;
}

2.定位特性

• 行内元素添加绝对/固定定位，可以直接设置高度和宽度

• 块级元素添加绝对/固定定位，如果不给高度和宽度，默认大小是内容的大小

• 脱标的盒子(浮动、固定/绝对定位)不会触发外边距塌陷

• 绝对/固定定位会完全压住下面标准流的内容，浮动只会压住盒子，但不会压住文字(因为浮动最初就是为了做文字环绕效果出现的)

6.12练习

6.13 总结

一个完整的网页，是标准流、浮动、定位一起完成布局的。

1. 标准流：可以让盒子上下排列或者左右排列。垂直的块级盒子显示用标准流布局

1. 浮动：可以让多个盒子一行显示或左右对齐盒子。多个块级盒子水平排列用浮动布局

1. 定位：最大的特点是有层叠的概念，可以让多个盒子前后叠压来显示。如果元素在盒子内压住其他元素用定位布局

第七章 元素的显示与隐藏

7.1 display属性

设置一个元素应该如何显示，display隐藏元素后，不再占有原来的位置

示例

.page {width: 200px;height: 200px;background-color: pink;
}.george {width: 200px;height: 200px;background-color: skyblue;
}

没有设置元素隐藏时，按照标准流正常显示且占有位置

.page {display: none;width: 200px;height: 200px;background-color: pink;
}.george {width: 200px;height: 200px;background-color: skyblue;
}

设置display:none后元素隐藏，不再占有原来的位置

7.2 visibility可见性

用于指定一个元素是可见还是隐藏。元素使用visibility隐藏后，还是会占有原来的位置

示例

.baba {visibility: hidden;height: 200px;width: 200px;background-color: pink;
}.mama {height: 200px;width: 200px;background-color: skyblue;
}

设置visibility:hidden后，元素虽然不可见但还是占据原来的位置

7.3 overflow溢出

指定内容溢出(内容超出指定高度或宽度)时的操作

示例

.peppa {overflow: visible;width: 200px;height: 200px;margin: 100px auto;border: 1px solid black;
}

默认overflow: visible，显示溢出部分

overflow: hidden，隐藏溢出部分

overflow: scroll，在需要的时候添加滚动条

overflow: auto，在需要的时候添加滚动条

7.4 总结