CSS基础（2） ｜ 青训营笔记

九、CSS的背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1.背景颜色background-color

background-color: ;

一般情况下背景颜色默认是透明的 transparent

2.背景图片background-image

background-image: url(图片路径)；

一般情况下背景图片默认是没有的 none

3.背景平铺background-repeat

background-repeat: ;

• 平铺其实就是铺满
• 一个块既可以有背景图片也可以有背景颜色，只不过背景图片会压住背景颜色
• 参数：repeat no-repeat repeat-x repeat-y

4.背景图片位置background-position

利用 background-position: x y;

参数代表的意思是：x坐标和y坐标.可以使用方位名词或者精确单位。

参数值	说明
length	百分数	由浮点数子和单位标识符组成的长度值
position	top,center,bottom 和 left,center,right 方位名词

方位名词：

• 如果指定的两个值都是方位名词，则两个值的前后顺序都无关。（因为不存在歧义）
• 如果只写一个方位名词，则另一个方位名词默认为center

精确单位：

• 如果指定的两个值都是精确坐标，那么第一个肯定是x坐标，第二个肯定是y坐标

混合单位：

• 如果指定的两个坐标有精确单位，也有方位名词，那么第一个肯定是x坐标，第二个肯定是y坐标

5.背景附着background-attachment

参数	作用
scroll	背景图像是随着对象内容滚动（默认值）
fixed	背景图像固定

6.背景属性复合写法

习惯顺序：

background: 背景颜色 背景图片地址 背景平铺 背景附着 背景图片位置

7.背景颜色半透明background: rgba

background: rgba(r, g, b, a)

a就是alpha的简写，就是透明度，取值在0~1之间

十、CSS的三大特性

1.层叠性

相同的选择器给设置相同的样式，会引起冲突，层叠性主要解决样式冲突问题

层叠性原则：

• 样式冲突，遵循就近原则，哪个样式离结构进，就执行哪个样式（代码之间的距离-数几行）
• 样式不冲突，不会层叠

2.继承性

子标签会继承父亲标签的某些样式，如文本颜色和字号、字体等等有关文字的样式。

------》如果页面中的文本颜色、自号是同一个，那不妨直接给body设置。

3.优先级

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

• 选择器相同，则执行重叠性
• 选择器不同，则根据选择器权重执行

选择器权重：

!important > 行内样式 style="" > ID选择器 > 类选择器、伪类选择器 > 元素选择器 > 继承 *

规律：

• 选择器控制范围越小，权重越高
• 选择器的权重可以叠加，但是不会有进位的问题（叠加可以看成二进制的加法）

十一、盒子模型

1.盒子模型的组成

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

div th tr p等等

组成：外边距margin、边框border、内边距padding、实际内容content四个部分。

2.边框border

边框样式定义要显示怎样一个元素边界。

属性	作用
border-width	定义边框粗细，单位是px
border-style	边框的样式
border-color	边框的颜色

边框样式又有： solid（实线的）、dashed（虚线的）、dotted（点线的）、none（无边框，与边框粗细无关）等等，其他的用的时候再查。

复合写法： 一般是 width style color 但是实际应用中顺序不同不影响

注意： border是占据盒子内部的空间，设置border会使盒子内部变小。

当然，boder也可以个性化上下左右边框： 用border-top border-bottom border-left border-right 就可

例：

<style>
    div {
            height: 200px;
            width: 100px;
            border-left: 10px solid black;
            border-top-color: red;
        }
</style>

3.表格细线边框border-collapse

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

语法：border-collapse:collapse;

• collapse是合并的意思
• 这个属性用于把相邻边框合在一起

4.内边距padding

定义元素边框与元素内容之间的距离。

padding-top: 20px;

padding-bottom padding-left padding-right等等

符合写法：

padding: 5px; 1个值，代表上下左右都有5像素内边距。

padding: 5px 10px 2个值，代表上下内边距是5像素，左右内边距是10像素。

padding: 5px 10px 20px 3个值，代表上、左右、下

4个值，代表上、右、下、左。

注意： padding是占据盒子外部的空间，设置padding会使盒子变大。

padding不会撑开盒子的情况：

• 不加width属性或者不加height的情况（宽度或高度继承父亲），加padding会使占据盒子内部的空间，不会撑开盒子

5.外边距margin

是指相邻同辈元素之间的距离。

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

margin的复合写法规则与padding一样

应用： 让块级盒子水平居中，但是必须满足两个条件

• 盒子必须指定了宽度（width）
• 盒子的左右外边距都设置为auto margin: 0 auto;
• 而行内块元素居中要加上text-align: center;

6.外边距合并

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

主要有两种情况：

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

   如果两个垂直相邻的块元素的外边距相等----->和外边距则为两个外边距之和

   如果两个垂直相邻的块元素的外边距不相等-->和外边距是两个外边距中最大的那一个

   避免：尽量只给一个盒子margin值

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

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

   解决：

   • 可以为父元素定义上边框 transparent
   • 可以为父元素定义上内边距
   • 可以为父元素添加overflow:hidden (常用)

7.清除内外边距

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

* {
    padding:0;
    margin: 0;
}

十二、圆角边框、盒子阴影、文字阴影

圆角边框： border-radius: 10px; 将角换为半径为10px的圆。

当然，后边的数可以是精确单位，也可以是百分比。比如将一个正方形盒子的圆角边框 设置为50%就变成了圆。

可以加四个值，表示左上角，右上角，左下角和右下角。

盒子阴影： box-shadow: h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必须，水平阴影的位置。允许负值。
v-shadow	必须，垂直阴影的位置。允许负值。
blur	可选，模糊的距离。
spread	可选，阴影的尺寸。
color	可选，阴影的颜色。 一般用rgba(0, 0, 0, 0.n)半透明效果
inset	可选，将外部阴影（outset）改为内部阴影。

文字阴影： text-shadow: h-shadow v-shadow blur color

值	描述
h-shadow	必须，水平阴影的位置。允许负值。
v-shadow	必须，垂直阴影的位置。允许负值。
blur	可选，模糊的距离。
color	可选，阴影的颜色。一般用rgba(0, 0, 0, 0.n)半透明效果

十三、浮动

1.传统网页布局的三种方式

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

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

• 普通流动（标准流）
• 浮动
• 定位

标准流： 标签按照规定好的默认方式排列

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

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

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

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

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

语法： 选择器{ float: 属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

2.浮动特性

浮动特性-脱离标准流（脱标）

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

0. 脱离标准普通流的控制移动到指定位置，俗称脱标
1. 浮动的盒子不再保留原先的位置
2. 浮动其实可以理解为盒子浮起来（开辟一个新的图层），沿着垂直于屏幕方向浮向我们，所以也就不再保留原先的位置了，标准流的盒子可以占据浮动盒子原先的空间
3. 浮动只会影响其后面的元素的排列，因为标准流占据整个一行的空间，标准流后面元素浮动后，不会影响到其前面的标准流，而是会在标准流独占一行的下一行浮动，从而影响后面的元素。

浮动特性-浮动元素一行显示

所有浮动的盒子都是在一行内对齐的，上沿对齐

浮动特性-浮动元素具有行内块特性

--->给一个行内元素加浮动就可以让其拥有行内块的特性

• 如果块级盒子没有设置宽度，默认宽度和父亲一样宽，但是添加浮动后，它的大小根据内容来决定
• 浮动的盒子中间是没有缝隙的，是紧挨着一起的

综上：浮动元素经常和标准流的父亲搭配使用

常见的网页布局

3.清除浮动

为什么清除浮动：

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

清除浮动本质：

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

额外标签法

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

做法：在浮动元素的末尾添加一个空的标签，例如

,或其他标签(必须是块级元素但是br比较特殊) br 等等(用一个标准流标签把父盒子撑开)

• 优点:通俗易懂,书写方便
• 缺点:添加许多无意义的标签,结构比较差

overflow法

给父级元素添加overflow属性,将其属性设置为 hidden,auto,scroll 等值常用hidden

• 优点:代码简洁
• 缺点:无法显示溢出父级元素的部分(直接切除)

after伪元素法

after伪元素方式是二外标签法的升级版.也是给父级元素添加

<style>
    .clearfix:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        *zoom: 1;       /* IE6,7专有   这一句是为了照顾低版本浏览器*/  
    }
</style>
<body>
    <div class="clearfix">
        
    </div>
</body>

双伪元素法

顾名思义,就是在盒子左右都插入伪元素,双保险

<style>
    .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }
​
        .clearfix:after {
            clear: both;
        }
​
        .clearfix {
            *zoom: 1;
            /* IE6,7专有   这一句是为了照顾低版本浏览器*/
        }
</style>
<body>
    <div class="clearfix">
        
    </div>
</body>

十四、切图

1.常见的图片格式

格式	描述
jpg图像格式	jpg对色彩的信息保留较好，高清、颜色较多，我们产品类的图片经常用jpg格式的
gif图像格式	gif格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保留透明背景和动画效果，实际经常用于一些图片小动画效果
png图像格式	png图像格式是一种新型的网络图形格式，结合了gif和jpg的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，请选择png格式
psd图像格式	psd格式是photoshop的专用格式，里面可以存放图层、通道、遮罩等多种设计稿。对我们前端人员来说，最大的优点就是我们可以直接从上面负值文字，获得图片，还可以测量大小和距离

2.切图方式

0. 图层切图

   0. 最简单的方式：右击图层--->快速导出为PNG
   1. 按住shift选择并合并图层再右击导出

1. 切片切图

   0. 利用切片工具切片
   1. 文件菜单-->导出-->存储为web设备所用格式-->选择我们要的图片格式-->储存

2. ps插件切图(正版ps才能用)

   0. 安装cutterman

十五、定位

1.作用（与浮动区分）：

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

2.定位的组成（定位模式+边偏移）：

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

组成： 定位 = 定位模式 + 边偏移

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

定位模式：

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位
sticky	粘性定位

边偏移：

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于父级元素上边线的距离
bottom	bottom: 80px	底部偏移量，定义元素相对于父级元素下边线的距离
left	left: 80px	左侧偏移量，定义元素相对于父级元素左边线的距离
right	right: 80px	右侧偏移量，定义元素相对于父级元素右边线的距离

1.静态定位 static

语法：选择器 { position: static; }

静态定位的特点：

• 静态定位是元素的默认定位方式，无定位的意思。
• 其实每个元素默认都是静态定位，无特别的性质，其实就是标准流。
• 静态定位按照标准流的特性摆放位置，它没有边偏移
• 静态定位再布局时很少用到

2.相对定位 relative

语法：选择器{ positiion: realitve; }

相对定位的特点：

• 他是根据自己原来的位置来移动的
• 他保留原来的位置，原来的位置不能占有其他的标准流的盒子
• 他不占有移动后现在的位置，其他标准流的盒子可以到这个位置
• 移动后的图层高度高于标准流和浮动
• 可以看看成保留原先的位置和空间，但是复制一份它的图层去移动，并且把原先的自己变成透明的。

3.绝对定位 absolute

语法：选择器{ position: absolute; }

绝对定位的特点：

• 绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
• 绝对定位不保留移原来的位置。（可以看成比浮动更高的浮动）
• 如果没有父级元素或者父级元素没有定位（除了静态定位之外的其他定位），则以上一级祖先元素为准定位，如果都没有，则以浏览器为定位。
• 如果父级元素有定位（除了静态定位之外的其他定位），则以父级元素为准定位。

------>子绝父相：子级盒子用绝对定位在腹级盒子之中随意摆放，父级盒子利用相对定位保留自己的位置，方式打乱后面的元素排列。

4.固定定位 fixed

语法：选择器{ position: fixed; }

主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

固定定位的特点：

• 固定定位是元素固定于浏览器可视区域的位置
• 固定定位不保留原来的位置。（比浮动更高的浮动）
• 跟父级元素没有任何关系
• 不随滚动条滚动

固定定位小技巧：固定到版心右侧

小算法：

0. 让固定定位的盒子 left: 50%，走到浏览器可视区域（版心）的一般位置。
1. 让固定定位的盒子 margin-left: 版心宽度的一半距离。------>多走版心宽度的一半。
2. 当然，固定盒子的上下位置就直接用固定定位的盒子的top: 就行了。

5.粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合。sticky adj. 粘性的

粘性定位的特点：

• 以浏览器的可视窗口为参照点移动元素（固定定位特点）
• 粘性定位占有原来的位置（相对定位特点）
• 必须添加 top left right bottom 其中一个才有效 （不加就按相对定位来看）

------> sticky并不常用，因为兼容性太差了，现在一般用js来实现这种效果

3.定位叠放次序 z-index

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

语法：选择器{ z-index: 数值; }

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

4.小算法

固定定位固定到版心右侧算法：

0. 让固定定位的盒子 left: 50%，走到浏览器可视区域（版 心）的一般位置。
1. 让固定定位的盒子 margin-left: 版心宽度的一半距离。------>多走版心宽度的一半。
2. 当然，固定盒子的上下位置就直接用固定定位的盒子的top: 就行了。

绝对定位的盒子居中算法：

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

0. left: 50%; 让盒子的左侧移动到父级元素的水平中心位置。
1. margin-left：-npx;（n是盒子自身宽度的一半）让盒子向左移动到自身宽度的一半。

5.定位的扩展

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

6.元素的显示与隐藏--控制元素是否占有原来的位置

类似于网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

本质：让一个元素再页面中隐藏或显示出来

display

display 属性用于设置一个元素应如何显示。

• display: none; 隐藏元素，并且不占有原来的位置
• display: block; 除了转换为块级元素之外，同时还有显示元素的意思
• display还有其他丰富的参数，但是很多不常用

visibility 可见性

• visibility: visible; 对象可视
• visibility: hidden; 对象隐藏，并且对象占有原来的位置
• visibility: inherit; 继承上一个父对象的可见性（不常用）
• visibility: collapse; 主要用来隐藏表格的行或列（不常用）

overflow 溢出

• overflow: visible; 显示超过对象尺寸的内容，并且不添加滚动条。
• overflow: auto; 此为body对象和textarea的默认值。超出自动显示滚动条，不超出不显示滚动条。
• overflow: hidden; 不显示超过对象尺寸的内容。
• overflow: scroll; 不管超出与否，总是显示滚动条。

注意：

0. 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。
1. 但是如果有定位的的盒子，请慎用 overflow:hidden 因为它会隐藏多余的部分（有时候我们会用定位故意让某些盒子超出父盒子）