网络编程（三）之 CSS（2）

作者: blackmanba_084b | 来源:发表于2021-05-18 17:40 被阅读0次

接着上一篇我们网络编程之 CSS (一), 开启我们学习CSS第二篇。

一、CSS的三大特性

CSS有三大特性： 层叠性， 继承性，优先级

1.1 层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠），另一个冲突的样式。层叠性主要解决样式冲突问题。遵循的是就近原则，那个样式离结构近，就执行哪个样式。样式不冲突，不会层叠。

<!--此时我们发现粉丝离机构近，所以test应该是粉色, 但是font-size不会被覆盖掉，因为上下两个div不冲突-->
<head>
    <style>
        div{
            color: red;
            font-size: 12px;
            }
        div {
            color: pink;
            }
    </style>
</head>
<body>
    test
</body>

1.2 继承性

子元素可以继承父元素的样式（text-, font-, line-这些元素开头的可以继承，以及color属性）, 可以理解为和文字相关的属性。

<!--此时的p继承了div的style>
<head>
    <style>
        div{
            color: pink;
            font-size: 14px
                }
    </style>
</head>
<body><div><p>hahhahah</p></div></body>

1.3 优先级

当同一个元素制定多个选择器，就会有优先级的产生。

选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
权重不会有进位的问题
可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器。以此类推
继承的选择性永远是0
如果是复合选择器，则会权重叠加, 需要计算权重

选择器	选择器权重
继承或者*	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内选择器	1，0，0，0
!important重要的	∞

二、盒子模型

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

2.1 盒子模型

盒子模型就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括:边框(border)、外边距(margin)、内边距(padding)、和 实际内容(content).

1. 边框(border)

border可以设置元素的边框。边框有三部分组成:边框宽度(粗细) 边框样式 边框颜色, 属性如下所示
【1】border-width 定义边框粗细，单位是px

【2】border-style 定义边框的样式
none 没有边框即忽略所有边框的宽度（默认值）
solid 边框为单实线（最为常用）
dashed 边框为虚线
dotted 边框为点线
【3】border-color 定义边框的颜色

【4】边框的写法

<!--边框写法-->
border: 1px solid red; 没有顺序
<!--边框分开写法-->
border-top: 1px solid red; /* 只设定上边框， 其余同理 */

【5】边框的细线边框
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。表示表格相邻的边框做合并。

border-collapse:collapse;

table, td, th{
border: 1px solid pink;
border-collapse: collapse;
}

2. 内边距（padding）

padding 属性用于设置内边距，即边框与内容之间的距离。
padding-left 左内边距
padding-right 右边边距
padding-top 上内边距
padding-bottom 上内边距
padding属性可以有一到四个值。

值的个数	表达的意思
padding: 5px	1个值代表上下左右都是5
padding: 5px 10px	2个值代表上下5，左右10
padding: 5px 10px 20px	代表上5，左右10，下20
Ipadding: 5px 10px 20px 30px	上5，右10，下20 左30

如果设定了宽度和高度，此时设定padding会撑大盒子，没设定则不影响.如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

3. 外边距（margin）

margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
margin-left 左外边距
margin-right 右外边距
margin-top上外边距
margin-bottom 下外边距
margin 简写方式代表的意义跟 padding 完全一致

外边距典型应用: 外边距可以让块级盒子水平居中, 必须满足：（1）盒子必须制定宽度 （2）盒子左右的外边距为auto
以下三种写法都是可以的：

margin-left: auto;
margin-right: auto; 
margin: auto;
margin: 0 auto;  /*上下0，左右auto*/

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

注意:以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可，记住是对其父元素，添加。比如div插入span或者img, 只要对其 父元素添加text-align:center就好。

3.3 外边距合并的问题

【1】相邻元素垂直外边距的合并

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

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

【2】嵌套块元素垂直外边距的塌陷(注意浮动的盒子不会有外边距塌陷的问题（浮动之后说）)

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

解决方法：
a. 可以为父元素定义上边框。(加上border， border可以为transparent), 如下所示：

border: 1px solid transparent

b. 可以为父元素定义上内边距(加上padding)。

padding: 1px;

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

overflow:hidden

d. 还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面咱们再总结。

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

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

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

三、补充知识

新知识点: 去掉 li 前面的 项目符号(小圆点)

list-style: none;

四、圆角边框、盒子阴影与文字阴影

4.1 圆角边框

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

border-radius:length;

参数值可以为数值或百分比的形式
如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%
该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角, 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius
兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用.

4.2 盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。(记住盒子阴影不占用空间，不会影响其他盒子排列)

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

h-shadow 必填，水平阴影的位置，允许为负值
v-shadow 必填，垂直阴影的位置，允许为负值
blur 可选模糊距离
spread 可选阴影的尺寸
color 可选阴影的颜色
insert 可选将外部阴影改为内部阴影（默认outset，但不可以写这个单词）

4.3 文字阴影

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

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

h-shadow 必填水平阴影的位置
v-shadow 必填垂直阴影的位置
blur 可选模糊的距离
color 可选阴影的颜色

五、浮动

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

网页布局的本质——用 CSS 来摆放盒子。把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):

普通流（标准流）：所谓的标准流: 就是标签按照规定好默认方式排列, 如块元素div, p, ul等，行内元素span, a, em
浮动
定位

5.2 为什么需要浮动

行内块元素可以实现一行显示，但是他们之间会有大的空白缝隙，很难控制。
两个盒子一个在左边一个在最右边

网页布局第一准则: 所以说多个盒子横向排列用浮动， 标准流适合垂直排布

5.3 什么是浮动

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

选择器 { float: 属性值; }

none 元素不浮动（默认值）
left 元素左浮动
right 元素右浮动

5.4 浮动特性

浮动元素会脱离标准流（脱标），脱离标准普通流的控制(浮) 移动到指定位置(动)
【1】浮动的盒子不再保留原先的位置
浮动的元素会一行内显示并且元素顶部对其
【1】如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。
【2】浮动的元素是互相贴靠在一起的(不会有缝隙)，如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。
浮动的元素会具有行内块元素的特性(比如span加了浮动会具有行内块元素特性)
【1】如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定
【2】浮动的盒子中间是没有缝隙的，是紧挨着一起的
【3】行内元素同理

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

为了约束浮动元素位置, 我们网页布局一般采取的策略是:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧

5.6 浮动布局注意点

浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流（比如第一行是div，后面如果有浮动也影响不了第一行的div，因为第一行的div独占一行）

5.7 清除浮动

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

【2】清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子有高度，则不需要清除浮动
清除浮动之后, 父级就会根据浮动的盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

【3】清除浮动

选择器{clear:属性值;}

left 不允许左侧有浮动元素（清除左侧浮动的影响）
right不允许右侧有浮动元素说（清除右侧浮动的影响）
both 同时清除左右两侧浮动的影响
我们实际工作中，几乎只用clear： both；清除浮动的策略是：闭合浮动

【4】清除浮动的方法：

额外标签法也称为隔墙法（要求这个新的空标签必须是块级元素）

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

父级添加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 {
   *zoom:1;
}

六、定位（`主要记住子绝父相`）

6.1 为什么定位

某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.

i

当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

so：

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

6.2 定位的组成

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

       定位 = 定位模式 + 边偏移

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

【1】定位模式
定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个:

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

【2】边偏移
边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

top: 80px 顶端偏移量，定位元素相对于其父亲上边线的距离
bottom: 80px 底部偏移量，定位元素相对于其父亲下边线的距离
left: 80px 左侧偏移量，定位元素相对于其父亲左边线的距离
right: 80px 右侧偏移量，定位元素相对于其父亲右边线的距离

【3】静态定位(标准流)
静态定位是元素的默认定位方式，无定位的意思,静态定位按照标准流特性摆放位置，它没有边偏移。

选择器 { position: static; }

【4】相对定位(不脱标)
相对定位是元素在移动位置的时候，是相对于它原来的位置来说的(自恋型)

选择器 { position: relative; }

a. 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)。
b. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的

【5】绝对定位(脱标)
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的(拼爹型)。

选择器 { position: absolute; }

a. 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位(Document 文档)。
b. 如果祖先元素有定位(相对、绝对、固定定位)，则以最近一级的有定位祖先元素为参考点移动位置。
c. 绝对定位不再占有原先的位置，位置会被其他地方占据。(脱标)

子级是绝对定位的话，父级要用相对定位。(用的较多)

【6】固定定位fixed(脱标)
固定定位是元素固定于浏览器可视区的位置。主要使用场景: 可以在浏览器页面滚动时元素的位置不会改变。

选择器 { position: fixed; }

a. 以浏览器的可视窗口为参照点移动元素。

跟父元素没有任何关系
不随滚动条滚动。
b. 固定定位不在占有原先的位置。固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

固定定位小技巧: 固定在版心右侧位置

小算法（适用于脱标的固定定位以及绝对定位）:
1. 让固定定位的盒子 left: 50%. 走到浏览器可视区(也可以看做版心) 的一半位置。
2. 让固定定位的盒子 margin-left: 版心宽度的一半距离。 多走 版心宽度的一半位置
  就可以让固定定位的盒子贴着版心右侧对齐了。

【7】粘性定位(不脱标)
性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

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

以浏览器的可视窗口为参照点移动元素(固定定位特点)
粘性定位占有原先的位置(相对定位特点)
必须添加 top 、left、right、bottom 其中一个才有效

【8】定位的叠放次序
在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序 (z轴)

选择器 { z-index: 1; }

数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有 z-index 属性

【9】定位的扩展
a. 绝对定位的盒子居中
加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。

left: 50%;让盒子的左侧移动到父级元素的水平中心位置。
margin-left: -100px;:让盒子向左移动自身宽度的一半。

b. 定位特殊特性
绝对定位和固定定位也和浮动类似。

*行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

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

c. 脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位)元素的都不会触发外边距合并的问题。

d. 绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字(图片) 但是绝对定位(固定定位) 会压住下面标准流所有的内容。浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

七、网页布局总结

7.1 `标准流`

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

7.2 `浮动`

可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。

7.3 `定位`

定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

八、元素的显示与隐藏

本质: 让一个元素在页面中隐藏或者显示出来

8.1 display 属性

display: none ;隐藏对象
display:block ;除了转换为块级元素之外，同时还有显示元素的意思
display 隐藏元素后，不再占有原来的位置

8.2 visibility属性

visibility 属性用于指定一个元素应可见还是隐藏

visibility:visible ; 元素可视
visibility:hidden; 元素隐藏
display隐藏元素后，不再占有原来的位置

8.3 overflow益处

overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度及宽度) 时，会发生什么。
visible 不剪切内容也不添加滚动条(默认)
hidden 不现实超过对象尺寸的内容，超出的部分隐藏掉
scroll 不管超出内容否，总是显示滚动条
auto 超出自动显示滚动条，不超出不现实滚动条

1. display 显示隐藏元素 但是不保留位置
2. visibility 显示隐藏元素 但是保留原来的位置
3. overflow 溢出显示隐藏 但是只是对于溢出的部分处理