2020年6月12日笔记

CSS3

盒子阴影

box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（大小） 阴影颜色 内/外阴影;

参数：
h-shadow：必须，水平阴影的位置，允许负值；
v-shadow：必须，垂直阴影的位置，允许负值；
blur：可选，模糊距离；
spread：可选，阴影的尺寸；
color：可选，阴影的颜色，（请参阅CSS颜色值）；
inset：可选，将外部阴影（outset）改为内部阴影，默认为inset（不写）。

CSS

CSS书写规范

空格规范

【强制】选择器 与 { 之间必须包含空格。

.class {
}

【强制】属性名 与之后的 : 之间不允许有空格，：与属性值之间必须包含空格。

font-size: 12px;

选择器规范

【强制】并集选择器，每个选择器声明必须独占一行。

.cost,
.page,
.comment {
}

【建议】一般情况下，选择器的嵌套层级应不大于3级，位置靠后的限定条件应尽可能精确。

#username input {
}

属性定义

【强制】属性定义必须另起一行

.class {
		margin:0;
		padding:0;
}

【强制】属性定义必须以分号结尾。

.class {
		margin:0;
}

浮动（float）

CSS布局的三种机制

网页布局的核心—就是用CSS来摆放盒子
CSS提供了三种方式来设置盒子的摆放位置：普通流（标准流）、浮动、定位。

普通流（标准流）

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

浮动

• 让盒子从普通流中浮起来，主要作用是让多个块级盒子在一行显示；

固定

• 将盒子定在浏览器某一个位置——CSS离不开定位，特别是后面的js特效；

为什么需要浮动

• 如何让多个盒子（div）水平排列成一行，并且中间不能有缝隙？
• 如何实现盒子的左右对齐？

虽然我们前面学过行内块元素（inline-block）但是他却也有缺陷：

• 它可以实现多个元素一行显示，但是中间会有空白缝隙，不能满足以上第一个问题。

• 他不能实现以上第二个问题，盒子左右对齐。

因为一些网页布局要求，标准流已经不能满足我们了，所以我们需要浮动。

什么是浮动

概念：
元素的浮动是指设置了浮动属性的元素会：

1. 脱离普通流的控制；
2. 移动到指定位置的过程。

作用：

1. 让多个盒子（div）水平排成一行，使得浮动成为布局的重要手段；
2. 可以实现盒子的左右对齐等等；
3. 浮动最早是用来控制图片，实现文字环绕图片的效果。

语法：

选择器 {
		float: 属性值;
}

参数：
none：元素不浮动（默认）；
left：元素向左浮动；
right：元素向右浮动。

特性：

• 设置了浮动的元素，漂浮在标准流的上面，不占位置，俗称“脱标”；
• float属性会改变元素的display属性；任何元素都可以浮动，浮动元素会生成一个块级框，而不论他本身是何种元素，生成的块级框和我们前面的行内块元素相似。
• 浮动元素会紧紧贴靠在一起，如果父级宽度装不下这些浮动的盒子，多出的盒子会像文字一样另起一行对齐。

浮动的应用

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

浮动是脱标的，会影响下面的标准流元素，此时，我们需要给浮动元素添加一个标准流父盒子，这样，我们就最大化的减少了对其它标准流元素的影响。