web前端零基础css3

一、摘抄

font：字体样式    text：文本样式    line-height：行高    color：字体颜色    width：宽度

height：高度    background-color：背景色    border：边框    margin：外边距

padding：内边距    background：背景相关属性    display：转换行内块元素    float：浮动

position：定位    transform：位移    z-index：设置元素的堆叠顺序    cursor：鼠标光标 

vertical-align：文字垂直对齐    border-radius：画圆    overflow：溢出属性    opacity：透明度

box-shadow：盒子阴影    transition：过渡

二、CSS基础

1.css的介绍

CSS：层叠样式表(Cascading style sheets)。

CSS的作用：给网页中的HTML标签设置样式。

css写在style标签中，style标签一般写在head标签里面，title标签下面。

2.css引入方式

内嵌式：CSS写在style标签中。

        提示：style标签虽然可以写在页面任意位置，但是通常约定写在head标签中。

        <style>p{color: red;}</style>

外联式：CSS写在一个单独的.css文件中。

        提示：需要通过link标签在网页中引入。

        <link rel="stylesheet" href="mycss.css">

行内式：CSS写在标签的style属性中。

        <span style="color: red">你好，世界。</span>

3.基础选择器

3.1.标签选择器

结构：标签名 { css属性名：属性值; }

作用：通过标签名找到页面中所有这类标签，设置样式。

注意点：

        1.标签选择器选择的是一类标签，而不是单独某一个。

        2.标签选择器无论嵌套关系有多深，都能找到对应的标签。

3.2.类选择器

结构：.类名 { css属性名：属性值; }

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式。

注意点：

        1.所有的标签上都有class属性，class属性的属性值称为类名(类似于名字)。

        2.类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头。

        3.一个标签可以同时有多个类名，类名之间以空格隔开。

        4.类名可以重复，一个类选择器可以同时选中多个标签。

3.3.id选择器

结构：#id属性值 { css属性名：属性值; }

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式。

注意点：

        1.所有标签上都有id属性。

        2.id属性值类似于身份证号码，在一个页面中是唯一的，不可重复。

        3.一个标签上只能有一个id属性值。

        4.一个id选择器只能选中一个标签。

3.4.通配符选择器

结构：* { css属性名：属性值; }

作用：找到页面所有的标签，设置样式。

注意点：

        1.开发中使用极少，只会在极特殊情况下才会用到。

        2.一般用于去除默认的maigin和padding。

<style>
    * { /* 通配符选择器 */
        font-size: 30px;
    }

    p { /* 标签选择器 */
        color: red;
    }

    .class { /* 类选择器 */
        color: #5bc0de;
    }

    #id { /* id选择器 */
        color: #8a6d3b;
    }
</style>

<p>标签选择器</p>
<span class="class">类选择器</span>
<span id="id">id选择器</span>

4.字体样式

4.1.字体大小font-size

属性名：font-size

取值：数字 + px

注意点：谷歌浏览器默认文字大小是16px，单位需要设置，否则无效。

4.2.字体粗细font-weight

属性名：font-weight

取值：

        关键字：正常normal，加粗bold。

        纯数字100~900的整百数：正常400，加粗700。

注意点：

        不是所有字体都提供了九种粗细，因此部分取值页面中无变化。

        实际开发中以：正常、加粗两种取值使用最多。

4.3.字体样式font-style

属性名：font-style

取值：正常(默认值)normal，倾斜italic。

4.4.字体系列font-family

属性名：font-family

常见取值：具体字体1, 具体字体2, 具体字体3, ..., 字体系列。

        具体字体：微软雅黑、黑体、宋体、楷体等...

        字体系列：sans-serif、serif、monspace等...

渲染规则：

        1.从左往右按照顺序查找，如果电脑中未安装字体，则显示下一个字体。

        2.如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体。

注意点：

        1.如果字体名称中存在多个单词，推荐使用引号包裹。

        2.最后一项字体系列不需要引号包裹。

        3.网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示。

4.5.字体font相关属性的连写

属性名：font(复合属性)

取值：font：sytle weight size family;

省略要求：只能省略前两个，如果省略了相当于设置了默认值。

注意点：如果需要同时设置单独和连写形式

        1.要么把单独的样式写在连写的下面

        2.要么把单独的样式写在连写的里面

<style>
    .c1 {
        font-size: 24px; /* 字体大小 */
        font-weight: bold; /* 字体加粗*/
        font-style: italic; /* 字体倾斜*/
        font-family: 楷体, sans-serif; /* 字体样式 */
    }

    .c2 {
        font: italic bold 24px 楷体, sans-serif;
    }
</style>

<p class="c1">何以解忧？唯有杜康。</p>
<p class="c2">何以解忧？唯有杜康。</p>

5.文本样式

5.1.文本缩进text-indent

属性名：text-indent

取值：

        数字 + px

        数字 + em(推荐：1em = 当前标签的font-size的大小)

5.2.文本水平对齐方式text-align

属性名：text-align

取值：左对齐left，居中对齐center，右对齐right。

注意点：如果需要让水平居中，text-align属性给文本所在标签(文本的父元素)设置。

5.3.文本修饰text-decoration

属性名：text-decoration

取值：下划线underline，删除线line-through，上划线overline，无装饰线none。

注意点：开发中会使用 text-decoration: none; 清除a标签默认的下划线。

5.4.行高line-height

作用：控制一行的上下间距

属性名：line-height

取值：数字 + px，倍数(当前标签font-size的倍数)

应用：

        1.让单行文本垂直居中可以设置 line-height: 文字父元素高度。

        2.网页精准布局时，会设置 line-height: 1 可以取消上下间距。

行高与font连写的注意点：如果同时设置了行高和font连写，注意覆盖问题

font：style weight size/line-height family;

<style>
    .text1 {
        text-indent: 2em;   /* 文本缩进 */
        text-align: center; /* 对齐方式 */
        text-decoration: underline; /* 文本修饰 */
        line-height: 2; /* 行高 */
    }
</style>

<p class="text1">暗恋就像是等待测试的程序，不确定运行结果，也不确定运行时间，但只要需求没变，就要努力优化程序，直到它成功运行。</p>

6.颜色常见取值

属性名：文字颜色color，背景颜色background-color。

属性值：

颜色表示方式	表示含义	属性值
关键词	预定义的颜色名	red, green, blue, yellow ...
rgb表示法	三原色，每项取值范围0~255	rgb(0,0,0), rgb(255,255,255) ...
rgba表示法	三原色+a透明度，取值范围0~1	rgba(255,255,255,0.5) ...
十六进制表示法	#开头，十六进制	#000000, #ff0000 简写：#000, #f00

三、CSS进阶

1.选择器进阶

1.1.后代选择器：空格

作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素。

选择器语法：选择器1 选择器2 { css }

结果：在选择器1所找到标签的后代中，找到满足选择器2的标签，设置样式。

注意点：后代包括儿子、孙子、重孙子等，后代选择器中，选择器与选择器之前通过空格隔开。

1.2.子代选择器：>

作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素。

选择器语法：选择器1 > 选择器2 { css }

结果：在选择器1所找到标签的子代中，找到满足选择器2的标签，设置样式。

注意点：子代只包括儿子，子代选择器中，选择器与选择器之前通过 > 隔开。

1.3.并集选择器：,

作用：同时选择多组标签，设置相同的样式。

选择器语法：选择器1 , 选择器2 { css }

结果：找到选择器1 和 选择器2 选中的标签，设置样式。

注意点：

        1.并集选择器中的每组选择器之间通过 , 分隔。

        2.并集选择器中的每组选择器可以说基础选择器或者复合选择器。

        3.并集选择器中的每组选择器通常一行写一个，提高代码的可读性。

1.4.交集选择器：紧挨着

作用：选中页面中同时满足多个选择器的标签。

选择器语法：选择器1选择器2 { css }

结果：找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式。

注意点：

        1.交集选择器中的选择器之间是紧挨着的，没有东西分隔。

        2.交集选择器中如果有标签选择器，标签选择器必须写在最前面。

1.5.hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式。

选择器语法：选择器:hover { css }

注意点：伪类选择器选中的元素的某种状态。

<style>
    div span { /* 后代选择器 */
        color: red;
    }

    div > a { /* 子代选择器 */
        color: #5bc;
    }

    h3, h4 { /* 并集选择器 */
        color: #eee;
    }

    p.box { /* 交集选择器 */
        color: #56b;
    }
    a:hover {   /* 伪类选择器 */
        color: brown;
    }
</style>

<div>
    <p>
        <span>少年美酒，鲜花怒马。</span>
        <a>花前月下，对酒高歌</a>
    </p>
    <a>百病易消，心病难医。</a>
</div>
<h3>自在有枷锁，逍遥任我行。</h3>
<h4>知道是心魔，不知亦是心魔。</h4>
<p class="box">凉风率已厉，游子寒无衣。</p>

2.背景色

2.1.背景颜色background-color

属性名：background-color

属性值：颜色取值：关键字、rgb表示法、rgba表示法、十六进制...

注意点：

        1.背景颜色默认是透明：rgba(0,0,0,0)、transparent。

        2.背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置。

2.2.背景图片background-image

属性名：background-image

属性值：background-image：url('图片的路径');

注意点：

        1.背景图片中url中可以省略引号。

        2.背景图片默认是在水平和垂直方向平铺的。

        3.背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的。

2.3.背景平铺background-repeat

属性名：background-repeat

属性值：

取值	效果
repeat	(默认值)水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向(x轴)平铺
repeat-y	沿着垂直方向(y轴)平铺

2.4.背景位置background-position

属性名：background-position

属性值：background-position：水平方向位置 垂直方向位置;

        1.方位名词：水平方向left，center，right，垂直方向top，center，bottom。

        2.数字+px：坐标系原点(0,0)盒子的左上角。

注意点：方位名词和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直。

2.5.背景相关属性的连写形式

属性名：bcakground

属性值：单个属性值的合写，取值之间可以空格隔开。

书写顺序：bcakground：color image repeat position;

省略问题：可以按照需求省略。

注意点：如果需要设置单独的样式和连写，要么把单独的样式写在连写的下面，要么把单独的样式写在连写的里面。

<style>
    .bgc1 {
        width: 500px;
        height: 500px;
        background-color: #ccc; /* 背景色*/
        background-image: url(1.jpg); /* 背景图片 */
        background-repeat: no-repeat; /* 背景平铺 */
        background-position: center center; /* 背景位置 */
    }

    .bgc2 {
        width: 500px;
        height: 500px;
        background: #ccc url(1.jpg) no-repeat center center;
    }
</style>

<div class="bgc1"></div>
<div class="bgc2"></div>

3.元素显示模式

3.1.块级元素

显示特点：

        1.独占一行(一行只能显示一个)。

        2.宽度默认是父元素的宽度，高度默认由内容撑开。

        3.可以设置宽高。

代表标签：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer...

3.2.行内元素

显示特点：

        1.一行可以显示多个。

        2.宽度和高度默认由内容撑开。

        3.不可以设置宽高。

代表标签：a、span、b、u、i、s、strong、ins、em、del...

3.3.行内块元素

显示特点：

        1.一行可以显示多个。

        2.可以设置宽高。

代表标签：

• ipnut、textarea、button、select...
• 特殊情况：img标签有行内块元素特点，但是Chrome调试工具显示结果是inline。

3.4.元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求。

属性名：display

属性值：

属性	效果	使用频率
block	转换成块级元素	较多
inline-block	转换成行内块元素	较多
inline	转换成行内元素	较少

4.CSS特性

4.1.继承性

特性：子元素有默认继承父元素样式的特点。

可以继承的常见属性(文字控制属性都可以继承)

1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height
5. ...

注意点：可以通过调试工具判断样式是否可以继承。

4.2.层叠性

特性：

        1.给同一个标签设置不同的样式-->此时样式会层叠叠加-->会共同作用在标签上。

        2.给同一个标签设置相同的样式-->此时样式会层叠覆盖-->最终写在最后的样式会生效。

注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果。

四、CSS盒子模型

1.选择器优先级

1.1.优先级

特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低选择器样式。

优先级公式：

        继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important

注意点：

        1.!important写在属性值的后面，分号的前面。

        2.!important不能提升继承的优先级，只要是继承优先级最低。

        3.实际开发中不建议使用!important。

1.2.权重叠加计算

场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效。

权重叠加计算公式：(每一级之间不存在进位)

比较规则：

        1. 先比较第一级数字，如果比较出来了，之后的统统不看。

        2. 如果第一级数字相同，此时在去比较第二级数字，如果比较出来了，之后的统统不看。

        3. ...

        4. 如果最终所有的数字都相同，表示优先级相同，则比较层叠性(谁写在下面，谁说了算)。

注意点：!important如果不是继承，则权重最高。

2.盒子模型

2.1.盒子模型介绍

盒子的概念：

        1.页面中的每一个标签，都可看做是一个“盒子”，通过盒子的视角更方便的进行布局。

        2.浏览器在渲染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为盒子。

盒子模型：CSS中规定每个盒子分别由内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)构成，这就是盒子模型。

2.2.内容的宽度和高度width/height

作用：利用width和height属性默认设置是盒子内容区域的大小。

属性：width/height

常见取值：数字 + px

2.3.边框(border)-连写形式

属性名：border

属性值：单个取值的连写，取值之间以空格隔开。

        如：border：10px solid red;

单个属性：

作用	属性名	属性值
边框粗细	border-width	数字 + px
边框样式	border-style	实线solid、虚线dashed、点线dotted
边框颜色	border-color	颜色取值

2.4.内/外边距padding/margin

属性名：padding/margin

属性值：数字 + px

注意点：可以添加单独方向的边距padding/margin-left/right/top/bottom。

<style>
    .hz {
        width: 300px; /* 宽度 */
        height: 300px; /* 高度 */
        border: 1px solid red; /* 边框 */
        padding: 5px; /* 内边距*/
        margin: 10px; /* 外边距 */
    }
</style>

<div class="hz">
    人都是被动出生的，无辜来到世上，只有选择死亡，才能体现真正的自由。
</div>

2.5.CSS3盒子模型(自动内减)

需求：盒子尺寸300*300，背景颜色粉色，边框10px实现黑色，上下左右20px的内边距，如何完成？

        — 给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？

解决方法1：手动内减

        操作：自己计算多余大小，手动在内容中减去。

        缺点：项目中计算量太大，很麻烦。

解决方法2：自动内减

        操作：给盒子设置属性 box-sizing：border-box; 即可。

        优点：浏览器会自动计算多余大小，自动在内容中减去。

2.6.外边距折叠现象—合并现象

场景：垂直布局的块级元素，上下的margin会合并。

结果：最终两者距离为margin的最大值。

解决方法：避免就好，只给其中一个盒子设置margin即可。

2.7.外边距折叠现象—塌陷现象

场景：互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上。

结果：导致父元素一起往下移动。

解决方法：

        1.给父元素设置border-top或者padding-top(分隔父子元素的margin-top)。

        2.给父元素设置overflow：hidden。

        3.转换成行内块元素。

        4.设置浮动。

五、CSS浮动

1.结构伪类选择器

1.1.选择器

作用与优势：

        1.作用：根据元素在HTML中的结构关系查找元素。

        2.优势：减少对于HTML中类的依赖，有利于保持代码整洁。

        3.场景：常用于查找某父级选择器的子元素

选择器：

选择器	说明
E:first-child { }	匹配父元素中第一个子元素，并且是E元素
E:last-child { }	匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n) { }	匹配父元素中第n个子元素，并且是E元素
e:nth-last-child(n) { }	匹配父元素中倒数第n个子元素，并且是E元素

1.2.公式

n的注意点：

1.n为：0、1、2、3、4、5...

2.通过n可以组成常见公式

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前5个	-n+5
找到从第五个往后	n+5

2.伪元素

伪元素：一般页面中的非主体内容可以使用伪元素。

区别：

        1.元素：HTML设置的标签。

        2.伪元素：由CSS模拟出的标签结果。

种类：

        ::before：在父元素内容的最前面添加一个伪元素。

        ::after：在父元素内容的最后添加一个伪元素。

注意点：

        1.必须设置content属性才能生效。

        2.伪元素默认是行内元素。

<style>
    .father{
        height: 200px;
        width: 200px;
        background-color: pink;
    }
    .father::after{
        /* 内容 */
        content: 'world!';
        color: #afd9ee;
    }
</style>

<div class="father">hello </div>

3.标准流

标准流：又称文档流，是浏览器在渲染网页显示内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。

常见标准流排版规则：

        1.块级元素：从上往下，垂直布局，独占一行。

        2.行内元素或行内块元素：从左往右，水平布局，空间不够自动拆行。

4.浮动

4.1.浮动的特点

1.浮动元素会脱离标准流，在标准流中不占位置，相当于从地面飘到了空中。

2.浮动元素比标准流高半个级别，可以覆盖标准流中的元素。

3.浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动。

4.浮动元素有特殊的显示效果，一行可以显示多个，可以设置宽高。

注意点：浮动的元素不能通过text-align:center或者margin:0 auto

CSS书写顺序：浏览器执行效率更高

        1.浮动 / display

        2.盒子模型：margin barder padding 宽度高度背景色

        3.文字样式

4.2.清除浮动的介绍

含义：清除浮动带来的影响。

影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素。

原因：子元素浮动后脱离文档流-->不占位置。

目的：需要父元素有高度，从而不影响其他网页元素的布局。

4.3.清除浮动的方法—直接设置父元素高度

特点：

        优点：简单粗暴，方便。

        缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块。

4.4.清除浮动的方法—额外标签法

操作：

        1.在父元素内容的最后添加一个块级元素。

        2.给添加的块级元素设置clear:both

特点：

        缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂。

4.5.清除浮动的方法—单伪元素清除法

操作：用伪元素替代了额外标签。

基本写法                                                补充写法

.clearfix::after {                                       .clearfix::after {

        content: ' ';                                              content: ' ';

        display: block;                                         display: block;

        clear: both;                                              clear: both;

}                                                                       /* 补充代码：在网页中看不到伪元素 */

                                                                        height: 0;

                                                                        visibility: hidden;

                                                                }

特点：

        优点：项目中使用，直接给标签加类即可清除浮动。

4.6.清除浮动的方法—双伪元素清除法

操作：
.clearfix::before,.clearfix::after {
    content: '';
    display: table;
}
.clearfix::after {
    clear: both;
}

特点：
    优点：项目中使用，直接给标签加类即可清除浮动。

4.7.清除浮动的方法—给父元素设置overflow: hidden

操作：直接给父元素设置overflow: hidden;

特点：优点方便。

六、CSS定位装饰

1.定位

1.1网页常见布局方式

标准流：

        1.块级元素独占一行-->垂直布局。

        2.行内元素/行内块元素一行显示多个-->水平布局。

浮动：可以让原本垂直布局的块级元素变成水平布局

定位：

        1.可以让元素自由的摆放在网页的任意位置。

        2.一般用于盒子之间的层叠情况。

1.2.使用定位的步骤

设置定位方式：

        属性名：position

        常见属性值：静态定位static、相对定位relative、绝对定位absolute、固定定位fixed。

设置偏移量：

        偏移量设置分为两个方向，水平和垂直方向各选一个使用即可。

        选取的原则一般是就近原则(离哪边近用哪个)。

方向	属性名	属性值	含义
水平	left	数字 + px	距离左边的距离
水平	right	数字 + px	距离右边的距离
垂直	top	数字 + px	距离上边的距离
垂直	bottom	数字 + px	距离下边的距离

2.定位分类

2.1.相对定位

介绍：相当于自己之前的位置进行移动。

代码：position：relative;

特点：

        1.需要配合方位属性实现移动。

        2.相当于自己原来位置进行移动。

        3.在页面中占有位置-->没有脱离文档流。

引用场景：配合绝对定位组CP(子绝父相)，用于小范围的移动。

2.2.绝对定位

介绍：相对于非静态定位的父元素进行定位移动。

代码：position：absolute;

特点：

        1.需要配合方位属性实现移动。

        2.默认相对于浏览器可视区域进行移动。

        3.在页面中不占位置-->脱离文档流。

应用场景：配合绝对定位组CP(子绝父相)。

2.3.固定定位

介绍：相对于浏览器进行定义移动。

代码：position：fixed;

特点：

        1.需要配合方位属性实现移动。

        2.相对于浏览器可视区域进行移动。

        3.在页面中不占位置-->脱离文档流

应用场景：让盒子固定在屏幕中的某个位置。

<style>
    .box {
        height: 200px;
        width: 200px;
    }
    .bgc{
        background-color: pink;
    }

    .dw1 {  /* 相对定位 */
        position: relative;
        left: 300px;
        top: 100px;
        background-color: #5bc0de;
    }
    .dw2{   /* 绝对定位 */
        position: absolute;
        left: 50%;  /* 与transform配合实现居中 */
        top: 50%;
        transform: translate(-50%,-50%);    /* 位移 */
        background-color: burlywood;
    }
    .dw3{   /* 固定定位*/
        position: fixed;
        left: 0;
        top: 0;
        background-color: #a6e;
    }
</style>

<div class="box dw1"></div>
<div class="box bgc"></div>
<div class="box dw2"></div>
<div class="box dw3"></div>
<div class="box bgc"></div>

2.4.元素层级问题

不同布局方式元素的层级关系：

        标准流 < 浮动 < 定位

不同定位之间的层级关系：

        相对、绝对、固定默认层级相同。

        此时HTML中写在下面的元素层级更高，会覆盖上面的元素。

默认情况下，定位的盒子，后来者居上。

z-index：整数，取值越大，显示顺序越靠上，z-index的默认值是0

注意：z-index必须配合定位才生效。

3.装饰

3.1.认识基线

基线：浏览器文字类型元素排版中存在用于对齐的基线(baseline)。

3.2.垂直对齐方式

属性名：vertical-align

属性值：

属性值	效果
baseline	默认，基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

<style>
    /* 浏览器遇到行内和行内块标签当做文字处理，默认文字是按基线对齐 */
    input {
        height: 50px;
        box-sizing: border-box;
        vertical-align: middle;
    }
</style>

<input type="text"><input type="button" value="搜索">

3.3.光标类型

场景：设置鼠标光标在元素上显示的样式。

属性名：cursor

常见属性值：

属性值	效果
defalt	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

3.4.边框圆角

场景：让盒子四个角变得圆润，增加页面细节，提升用户体验。

属性名：border-radius

常见取值：数字 + px、百分比。

赋值规则：从左上角开始赋值，然后顺时针赋值，没有赋值的看对角。

3.5.溢出部分显示效果

溢出部分：指的是盒子内容部分所超出盒子范围的区域。

场景：控制内容溢出部分的显示效果，如：显示、隐藏、滚动条...

属性名：overflow

常见属性值：

属性值	效果
visble	默认值，溢出部分可见
hidden	溢出部分隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动显示或隐藏滚动条

3.6.元素整体透明度

场景：让某元素整体(包括内容)一起变透明。

属性名：opacity

属性值：0~1之间的数字，1表示完全不透明，0表示完全透明。

注意点：opacity会让元素整体透明，包括里面的内容，如：文字、子元素等...

4.精灵图

4.1.精灵图的介绍

场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图。

优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度。

4.2.精灵图的使用步骤background-position

1.创建一个盒子，设置盒子的尺寸和小图尺寸相同。

2.将精灵图设置为盒子的背景图片。

3.修改背景图位置。

        通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y;

4.3.背景图片大小background-size

作用：设置背景图片的大小。

语法：background-size：宽度 高度;

取值：

取值	场景
数字+px	简单方便，常用
百分比	相对于当前盒子自身的宽高百分比
contain	包含，将背景图片等比例缩放，直到不会超出盒子的最大
cover	覆盖，将背景图片等比例缩放，直到刚好填满整个盒子没有空白

4.4.盒子阴影

作用：给盒子添加阴影效果，吸引用户注意，体现页面的制作细节。

属性名：box-shadow

取值：

参数	作用
h-shadow	必须，水平偏移量，允许负值
v-shadow	必须，垂直偏移量，允许负值
blur	可选，模糊度
spread	可选，阴影扩大
color	可选，阴影颜色
inset	可选，将阴影改为内部阴影

4.5.过渡

作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验。

属性名：transition

常见取值：

        过渡的属性：all所有能过渡的属性都过渡、具体属性名如：width：只有width有过渡。

        过渡的时长：数字 + s(秒)。

注意点：

        1.过渡需要：默认状态和hover状态样式不同，才能有过渡效果。

        2.transition属性需要过渡的元素本身加。

        3.transition属性设置在不同状态中，效果不同的。

            3.1.给默认状态设置，鼠标移入移出都有过渡效果。

            3.2.给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果。

<style>
    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        transition: all 1s;
    }

    .box:hover {
        width: 600px;
        background-color: red;
    }
</style>

<div class="box"></div>

5.骨架标签

<!DOCTYPE html>文档类型声明，告诉浏览器该网页的HTML版本。

<html lang="en">表示网页使用的语言。

作用：搜索引擎归类 + 浏览器翻译。

常见语言：zh-CN简体中文 / en英文。

<meta charset="UTF-8">标识网页使用的字符编码。

作用：保存和打开的字符编码需要统一设置，否则可能会出现乱码。

常见字符编码：

        1.UTF-8：万国码，国际化的字符编码，收录了全球语言的文字。

        2.GB2312：6000 + 汉字。

        3.GBK：20000 + 汉字。

注意点：开发中统一使用UTF-8字符编码即可。

5.1.SEO搜索引擎优化

SEO(Search Engine Optimization)：搜索引擎优化。

作用：让网站在搜索引擎上的排名考前。

title：网页标题标签。

description：网页描述标签。

keywords：网页关键词标签

<meta name="description" content="网页描述标签">

<meta name="keywords" content="网页关键词标签">

5.2.ico图标设置

场景：显示在标签标题左侧的小图标，习惯使用.ico格式的图标。

常见代码：<link rel="stylesheet icon" href="favicon.ico" type="text/x-icon">