Web前端开发笔记(4)

Web前端开发笔记(4)

CSS入门

---

前言

该笔记通过b站视频(网址）https://www.bilibili.com/video/BV14J4114768?p=1，以及老师PPT加上我自己的补充合成。每天一篇，网安笔记每周一篇。

---

基础学习路线

目标：

CSS 盒子模型

CSS 浮动

盒子模型

1. 盒子模型

页面布局要学习三大核心, 盒子模型, 浮动 和 定位. 学习好盒子模型能非常好的帮助我们布局页面

1.1 看透网页布局的本质

网页布局过程：

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

1.2 盒子模型（Box Model）组成

所谓 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边框、外边距、内边距、和 实际内容

1.3 边框（border）

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

语法：

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

CSS 边框属性允许你指定一个元素边框的样式和颜色。

语法：

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

边框样式 border-style 可以设置如下值：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

边框简写：

border: 1px solid red; /*没有顺序 */

边框分开写法：

border-top: 1px solid red; /* 只设定上边框， 其余同理 */ 

1.4 表格的细线边框

border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。

语法：

border-collapse:collapse; 

collapse 单词是合并的意思

border-collapse: collapse; 表示相邻边框合并在一起

1.5 边框会影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决:

1. 测量盒子大小的时候,不量边框.
2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

1.6 内边距（padding）

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

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

以上 4 种情况，我们实际开发都会遇到。

当我们给盒子指定 padding 值之后，发生了 2 件事情：

1. 内容和边框有了距离，添加了内边距。
2. padding影响了盒子实际大小。 也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

如过盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.

1.7 外边距（margin）

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

margin 简写方式代表的意义跟 padding 完全一致。

1.7.1 外边距典型应用

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

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

.header{ width:960px; margin:0 auto;}

常见的写法，以下三种都可以：

margin-left: auto; margin-right: auto;

margin: auto;

margin: 0 auto;

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

1.8 外边距合并

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

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

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

解决方案：

尽量只给一个盒子添加 margin 值。

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

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

解决方案：

可以为父元素定义上边框。

可以为父元素定义上内边距。

可以为父元素添加 overflow:hidden。

1.9 清除内外边距

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

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

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

2. 圆角边框

在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角。

语法：

border-radius:length; 

参数值可以为数值或百分比的形式

如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%

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

分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius

兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用.

3. 盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

语法：

box-shadow: h-shadow v-shadow blur spread color inset; 

注意：

1. 默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效
2. 盒子阴影不占用空间，不会影响其他盒子排列。

4. 文字阴影

在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。

语法：

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

CSS 浮动

1. 浮动（float)

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

网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置.

CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

普通流（标准流）

浮动

定位

1.2 标准流（普通流/文档流）

所谓的标准流: 就是标签按照规定好默认方式排列.

1. 块级元素会独占一行，从上向下顺序排列。
   常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
   
   
2. 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
   常用元素：span、a、i、em 等

以上都是标准流布局，我们前面学习的就是标准流， 标准流是最基本的布局方式。

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局方式（后面移动端学习新的布局方式） 。

1.3 为什么需要浮动？

提问：我们用标准流能很方便的实现如下效果吗？

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

比较难，虽然转换为行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。

如何实现两个盒子的左右对齐？

总结： 有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.

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

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

1.4 什么是浮动？

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

语法：

选择器 { float: 属性值; }

1.5 浮动特性（重难点）

加了浮动之后的元素,会具有很多特性,需要我们掌握的.

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

设置了浮动（float）的元素最重要特性：

1. 脱离标准普通流的控制（浮） 移动到指定位置（动）, （俗称脱标）
2. 浮动的盒子不再保留原先的位置

如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

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

1.5.1 浮动元素会具有行内块元素特性。

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

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

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

行内元素同理

1.6 浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置, 我们网页布局一般采取的策略是:

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧.

2. 常见网页布局

2.1 浮动布局注意点

浮动和标准流的父盒子搭配。

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

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


一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

我们前面浮动元素有一个标准流的父元素, 他们有一个共同的特点,都是有高度的.

但是, 所有的父盒子都必须有高度吗?

3 清除浮动

3.1 为什么需要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响

3.2 清除浮动本质

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

如果父盒子本身有高度，则不需要清除浮动

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

3.3 清除浮动

语法：

选择器{clear:属性值;}

我们实际工作中， 几乎只用 clear: both;

清除浮动的策略是: 闭合浮动.

3.3.1 清除浮动 —— 额外标签法

额外标签法 也称为隔墙法 ，是 W3C 推荐的做法。

额外标签法 会在浮动元素末尾添加一个空的标签。例如 <div style=”clear:both”></div>，或者其他标签（如<br />等）。

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

注意： 要求这个新的空标签必须是块级元素。

总结:

1. 清除浮动本质是?
   
   清除浮动的本质是清除浮动元素脱离标准流造成的影响
2. 清除浮动策略是?
   
   闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.
3. 额外标签法?
   
   隔墙法, 就是在最后一个浮动的子元素后面添加一个额外标签, 添加 清除浮动样式. 实际工作可能会遇到,但是不常用

3.3.2 清除浮动 —— 父级添加 overflow

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

子不教,父之过,注意是给父元素添加代码

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

3.3.3 清除浮动 —— :after 伪元素法

:after 方式是额外标签法的升级版。也是给父元素添加

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

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器

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

3.3 清除浮动 —— 双伪元素清除浮动

也是给给父元素添加

.clearfix:before,.clearfix:after {
 content:"";
 display:table;
}
.clearfix:after {
 clear:both;
}
.clearfix {
 *zoom:1;
} 

优点：代码更简洁
缺点：照顾低版本浏览器

代表网站：小米、腾讯等

3.4 清除浮动总结

为什么需要清除浮动？

父级没高度。

子盒子浮动了。

影响下面布局了，我们就应该清除浮动了。

CSS 属性书写顺序(重点)

建议遵循以下顺序：

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
 display: block;
 position: relative;
 float: left;
 width: 100px;
 height: 100px;
 margin: 0 10px;
 padding: 20px 0;
 font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 color: #333;
 background: rgba(0,0,0,.5);
 border-radius: 10px;
} 

总结

这是一个web前端开发的笔记，希望对你有帮助。如有错误的地方，还望指出来相互讨论。