html+css知识点全面总结（三）

qq_43710066

已于 2023-02-06 10:46:04 修改

阅读量1.2k

点赞数 2

文章标签： css html 前端 javascript

于 2023-02-06 10:38:24 首次发布

本文链接：https://blog.csdn.net/qq_43710066/article/details/128897419

版权

前期文章：

html+css知识点总结回顾（一）
html+css知识点总结回顾（二）

html+css知识点总结回顾（三）

文章目录

- html+css知识点总结回顾（三）

1.标签的嵌套（拓展）

在网页布局中需要注意的标签嵌套关系：

p标签里不能嵌套其他块级元素

a标签不能互相嵌套，a标签可以嵌套其他任意标签

2.Chrome调试工具-（拓展）查错流程

1.右击检查

2.哪里不会点哪里

在elements找到对应的元素

3.看styles中有没有自己设置的选择器

如果没有，一般是选择器写错了
- 常见原因1：选择器单词拼错
- 常见原因2：选择器结构写错

4.如果选择器有，但是样式没出来

看是否有删除线（没生效）
- 常见原因1：样式被注释
- 常见原因2：样式被覆盖
看是否有小三角形（报错）
- 常见原因1：属性值后没有分号
- 常见原因2：出现中文标点
- 常见原因3：属性名或者属性值单词拼错

3.盒子模型-组成

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

1.内容的宽度和高度

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

➢ 属性：width / height

➢ 常见取值：数字+px

2.边框（border）

➢ 作用：给设置边框粗细、边框样式、边框颜色效果

➢ 单个属性：

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

border 连写形式：

➢ 属性名：border

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

如：border : 10px solid red;

➢ 快捷键：bd + tab

边框（border）- 单方向设置

➢ 场景：只给盒子的某个方向单独设置边框

➢ 属性名：border - 方位名词

➢ 属性值：连写的取值

3.盒子实际大小计算公式

➢ 盒子实际大小终极计算公式：

• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框

• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框

➢ 解决：当盒子被border和padding撑大后，如何满足需求？

• 自己计算多余大小，手动在内容中减去（手动内减）

box-sizing:content-box —W3C 标准盒子模型

内容content的宽高是设置的width和height 盒子的实际大小是width+border+padding

box-sizing:border-box —怪异盒子模型内减模式

盒子的实际的宽高就是设置的width和height

4.外边距折叠现象 – ① 合并现象

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

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

➢ 解决方法：避免就好

只给其中一个盒子设置margin即可

5.外边距折叠现象 – ② 塌陷现象

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

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

➢ 解决方法：

给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
给父元素设置overflow：hidden
// display:flex
转换成行内块元素
子元素设置浮动
设置定位

6.行内元素的margin和padding无效情况

➢ 场景：给行内元素设置margin和padding时

➢ 结果：

水平方向的margin和padding布局中有效！
垂直方向的margin和padding布局中无效！

也就是说行内标签的margin-top和bottom不生效，padding-top和bottom也不生效

要想改变垂直方向的布局可以使用line-height

7.结构伪类选择器

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

n的注意点：

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

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

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

nth-of-type（n）{}结构伪类选择器（了解）同类型中第几个

选择器：

选择器	说明
E:nth-of-type（n）	只在父元素的同类型（E）子元素范围中，匹配第n个

8.伪元素(☆)

作用：精简html结构

使用场景：不重要的内容，建议用伪元素

特点：js无法操作伪元素具有行内元素特性

语法：

::before{content：“”} 在盒子内容的最前面添加伪元素(父级的第一个子级)

::after{content：“”} 在盒子内容的最后面添加伪元素

注意点：

伪元素需要给盒子加，表单类和图片没有伪元素，只有盒子有（div p span标签）
伪元素一定要写content，否则无效
伪元素是行内元素，设置大小无效！
双冒号之前是父级！！在父级的最前或最后添加元素
不可以直接设置宽高，但一般配合定位使用，可以不设置display了

9.标准流

哪些是标准流？

块，行内，行内块

标准流可以设置 margin:auto（水平居中）其他流派不能使用

标准流子盒子的宽度默认是父盒子宽度？？

小技巧：盒子在父盒子最右侧：margin-left：auto

9-1.脱标

什么情况下元素会脱标？

元素设置position，并且position的值为fixed或absolute；
元素添加浮动float，并且float的值不为none；

脱标元素的特点：

可以随意设置宽高，宽高默认由内容决定。
- 脱标后的块元素宽高由内容自动撑开（标准流下默认占满父元素的宽度）
- 脱标后的行内元素宽高由内容撑开，但是可以设置宽高（标准流下默认由内容撑开，且不能设置宽高）
不再受标准流的约束。
不再给父元素汇报宽高数据，也就是不能将父元素撑开。

10.浮动

1.浮动的目的：

早期：文字环绕图片

几年前：布局（可以让块标签在一行排列，中间没有间隙，而且可以设置宽高）

缺点：

1.脱标

2.如果当前元素浮动，后面元素不浮动，后面元素把当前元素占据

3.一行放不下，会换行

2.浮动的特点：

脱标，在标准流中不占有位置，相当于从地面飘到了空中
浮动元素比标准流高半个级别，可以覆盖标准流中的元素
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动（浮动的标签是顶部对齐的）
浮动有特殊的显示效果：一行可以显示多个且可以设置宽高（浮动后的标签具备行内块的特点）

3.注意点

浮动的元素不能通过text-align：center或者margin：0 auto居中。

11.清除浮动

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

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

原因：

子元素浮动后脱标 → 不占位置

目的：

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

受浮动影响的情况： 父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，会显示到上面的位置。

11-1.直接设置父元素高度

➢ 特点：

优点：简单粗暴，方便
缺点：有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块需要一直添加东西高度不能固定。

11-2.额外标签法

➢ 操作：

在父元素内容的最后添加一个块级元素
给添加的块级元素设置 clear:both

➢ 特点：

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

11-3.单伪元素清除法

➢ 操作：用伪元素替代了额外标签（和额外标签法类似）

 1.基本写法：
        .clearfix::after{
            content:""; <!--伪元素添加的标签是行内，要求是块 -->
            display:block;
            clear:both;
        }
  2.补充写法
        .clearfix::after{
            content:"";
            display:block;
            clear:both;
           <!-- 为了兼容性 可以加两行代码 -->
            height:0;  <!--补充代码，在网页中看不到伪元素 -->
            visibility:hidden;
        }

➢ 特点：

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

11-4.双伪元素清除法

➢ 操作：

<!-- .clearfix::before 作用：解决外边距塌陷问题 -->
            .clearfix::before
            .clearfix::after{
                content:"";
                display:table;
            }
            <!-- 真正清除浮动的标签 -->
              .clearfix::after{
               clear:both
            }

➢ 特点：

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

11-5.给父元素设置overflow：hidden

➢ 操作：

直接给父元素设置 overflow : hidden

➢ 特点：

优点：方便

12.flex布局(拓展？)

display：flex

flex对自身没影响，让子元素在一行，子元素可以设置宽高，子元素装不下，也不会换行。行内块inline-block也可以让子元素在一行，但是行内块的儿子之间会有间隙。

	/* 让亲儿子们水平排列 */
display: flex;
	/* 让子元素们在水平方向两边贴齐，中间平均分 */
justify-content: space-between;
	/* 让儿子们换行 */
flex-wrap: wrap;
	/* 让子元素们在垂直方向两边贴齐，中间平均分 */
align-content: space-between;
	/* 让flex元素垂直居中 */
align-items: center;
	/* li的圆点去掉 */
list-style: none;

13定位

1.网页常见布局方式

标准流

块级元素独占一行 → 垂直布局

行内元素/行内块元素一行显示多个 → 水平布局
浮动

可以让原本垂直布局的块级元素变成水平布局
定位

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

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

1-1定位常见的应用场景

可以解决盒子与盒子之间的层叠问题

定位之后的元素层级最高，可以层叠在其他盒子上面（电影评分热门商品hot小角标）
可以让盒子始终固定在屏幕中的某个位置（滚动页面导航栏固定显示）

2.定位步骤

设置定位的方式：position

定位方式属性值
静态定位 static
相对定位 relative
绝对定位 absolute
固定定位 fixed
设置偏移值：水平+垂直就近各取一个

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

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

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

定位必备写法：

1.定位模式（3种）

2.偏移量（坐标，只需要x、y两个点就可以定住盒子）

3.如果left和right都有，以left为准，top和bottom都有，以top为准

top：往下走 bottom：往上走

left：往右走 right：往左走 right：负数：往右走

3.定位分类

3-1.静态定位：static

➢ 介绍：静态定位是默认值，就是之前认识的标准流。

➢ 代码： position：static

➢ 注意点：

静态定位就是之前标准流，不能通过方位属性进行移动
之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

3-2.相对定位：relative

➢ 介绍：自恋型定位，相对于自己之前的位置进行移动

➢ 代码： position：relative

➢ 特点：

占有原来的位置（移动后原来的位置还在，其他的盒子过不来）
仍然具有标签原有的显示模式特点
需要配合方位属性实现移动
改变位置参照自己原来的位置
可以压着其他盒子，但是不脱标（原来的位置还在）

➢ 应用场景：

配合绝对定位组CP（子绝父相）
用于小范围的移动

3-3.绝对定位:absolute (重要！)

➢ 介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动。脱标！不占位置！

先找已经定位的父级，如果有这样的父级，就以这个父级为参照物进行定位，有父级，但父级没有定位，以浏览器窗口为参照进行定位。

➢ 代码： position：absolute

➢ 特点：

需要配合方位属性实现移动
改变标签的显示模式特点，具备了行内块的特点（在一行共存，且宽高生效）。
默认相对于浏览器可视区域进行移动
在页面中不占位置 → 已经脱标（不给宽高，由内容决定宽高可以设置）

绝对定位的盒子显示模式具备行内块特点：加宽度高度生效，如果没有宽度也没有内容，盒子的宽度尺寸就是0

➢ 应用场景：

配合绝对定位组CP（子绝父相）

3-3-1.子绝父相

➢ 场景：让子元素相对于父元素进行自由移动

➢ 含义：

• 子元素：绝对定位

• 父元素：相对定位

➢ 子绝父相好处：

• 父元素是相对定位，则对网页布局影响最小

（拓展）子绝父绝特殊场景

➢ 场景：在使用子绝父相的时候，发现父元素已经有绝对定位了，此时直接子绝即可！

➢ 原因：父元素已经有定位已经满足要求，如果盲目修改父元素定位方式，可能会影响之前写好的布局

（案例）子绝父相水平居中案例-解决方法

子绝父相
先让子盒子往右移动父盒子的一半

left：50%
再让子盒子往左移动自己的一半
- 普通做法：margin-left：负的子盒子宽度的一半
  
  缺点：子盒子宽度变化后需要重新改代码
- 优化做法：transform：translateX(-50%)
  
  优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码

3-3-2.绝对定位居中

绝对定位的盒子不能使用margin：auto左右居中

第一种：宽度高度随时变化的话  很不方便
.box {
	position：absolute；
	left：50%  //移动了参照物的百分之五十 整个盒子移动到浏览器中间偏右的位置
	top：50% 
	margin-left：-200px;    //向左移动盒子的一半宽度
	margin-top： -200px;    //向上移动盒子一半高度
	width:400px;
	height:400px;
	}
	
第二种
.box {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%)  //位移：自己宽度高度的一半
    width:400px;
	height:400px;
}

3-4.固定定位：fixed

1.脱标-不占位置（可以放在代码里的任意位置很随意）

2.改变位置参考浏览器窗口不是body body可能需要滚动条很长

3.具备行内块特点

4.元素层级问题

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

• 标准流 < 浮动 < 定位

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

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

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

4-1 更改定位元素的层级

➢ 场景：改变定位元素的层级

➢ 属性名：z-index

➢ 属性值：数字

• 数字越大，层级越高。默认取值是0

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

5.装饰-垂直对齐方式 vertical-align

5-1 了解基线

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

文字对齐问题

➢ 场景：解决行内/行内块元素垂直对齐问题

➢ 问题：当图片和文字在一行中显示时，其实底部不是对齐的

5-2 垂直对齐方式

➢ 属性名：vertical-align

➢ 属性值：

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

浏览器遇到行内和行内块标签当做文字处理，默认文字是按照基线对齐，居中对齐要使用vertical-align：middle

5-2-1 （拓展）项目中 vertical-align 可以解决的问题

文本框和表单按钮无法对齐问题
input和img无法对齐问题
div中的文本框，文本框无法贴顶问题
div不设高度由img标签撑开，此时img标签下面会存在额外间隙问题
使用line-height让img标签垂直居中问题

➢ 注意点：

• 学习浮动之后，不推荐使用行内块元素让div一行中显示，因为可能会出现垂直对齐问题

• 推荐优先使用浮动完成效果

6.装饰-光标类型

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

属性名：cursor

常见属性值：

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

7.装饰-边框圆角

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

属性名：border-radius

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

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

画一个正圆：

1.盒子必须是正方形

2.设置边框圆角为盒子宽高的一半----border-radius:50%

胶囊按钮：

1.盒子要求是长方形

2.设置----border-radius：盒子高度的一半

8.装饰-overflow溢出部分显示效果

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

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

➢ 属性名：overflow

➢ 常见属性值：

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

一般用overflow解决外边距塌陷、浮动的影响等问题

9.装饰-元素本身隐藏

➢ 场景：让某元素本身在屏幕中不可见。如：鼠标:hover之后元素隐藏

➢ 常见属性：

visibility：hidden
display：none

➢ 区别：

visibility：hidden 隐藏元素本身，并且在网页中占位
display：none 隐藏元素本身，并且在网页中 不占位置

➢ 注意点：

开发中经常会通过 display属性完成元素的显示隐藏切换
display：none；（隐藏）、 display：block；（显示）

10.元素整体透明度

➢ 场景：让某元素整体（包括内容）一起变透明

➢ 属性名：opacity

➢ 属性值：0~1之间的数字

1：表示完全不透明
0：表示完全透明

➢ 注意点：

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

11.表格边框合并

➢ 场景：让相邻表格边框进行合并，得到细线边框效果

➢ 代码：border-collapse：collapse；

注意：一定要加给table标签：做细线表格

<style>
    table {
        border: 1px solid #000;
        /* 注意：一定要加给table标签  做细线表格*/
        border-collapse: collapse;
    }
    th,td{
        border: 1px solid #000;
    }
</style>
<body>
    <table>
        <caption>
            <h2>前端与移动开发学员学习情况</h2>
        </caption>
        <thead>
            <tr>
                <th>编号</th>
                <th>编号</th>
                <th>编号</th>
                <th>编号</th>
            </tr>

        </thead>
        <tr>
            <td>1</td>
            <td>小姐姐</td>
            <td>女</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>小姐姐</td>
            <td>女</td>
            <td>100</td>
        </tr>
        ······

12.用css画三角形技巧（面试题）

➢ 场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成。

➢ 实现原理：

利用盒子边框完成

➢ 实现步骤：

设置一个盒子
设置四周不同颜色的边框
将盒子宽高设置为0，仅保留边框
得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明

 div {
            /* width: 100px;
            height: 100px; */
            width: 0;
            height: 0;
            /* background-color: aquamarine; */
            /* transparent 透明 */
            border-top: 40px solid transparent;
            border-right: 40px solid transparent;
            border-left: 40px solid transparent;
            border-bottom: 40px solid gray;
        }

13.选择器拓展

13-1 链接伪类选择器

➢ 场景：常用于选中超链接的不同状态

➢ 选择器语法：

选择器语法	功能
a:link{}	选中a链接未访问过的状态
a:visited{}	选中a链接访问之后的状态
a:hover{}	选中鼠标悬停的状态
a:active{}	选中鼠标按下的状态

➢ 注意点：

如果需要同时实现以上四种伪类状态效果，需要按照 LVHA 顺序书写
- 记忆口诀：男盆友送了你一个 LV 包包，你开心的 HA 哈笑
其中 :hover伪类选择器使用更为频繁，常用于选择各类元素的悬停状态

13-2 焦点伪类选择器

➢ 场景：用于选中元素获取焦点时状态，常用于表单控件

➢ 选择器语法：

 /* 获得焦点：把光标点到input里面  失去焦点：把光标从input中拿出来 */
        input:focus{
/* 当获得焦点时 背景色变pink */
            background-color: pink;
        }

➢ 效果：

表单控件获取焦点时默认会显示外部轮廓线

13-3 属性选择器

➢ 场景：通过元素上的HTML属性来选择元素，常用于选择 input 标签

➢ 选择器语法：

选择器	功能
E[attr]	选择具有 attr 属性的 E 元素
E[attr=“val”]	选择具有 attr 属性并且属性值等于 val 的 E 元素

<style>
 /* 需求 text：背景色是粉色    button背景色是蓝色*/
        input[type='text']{
            background-color: pink;
        }
        input[type="button"]{
            background-color: blue;
        }
</style>
<body>
     <input type="text" name="" id="">
     <input type="button" name="" id="">
</body>

14.精灵图

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

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

例如：需要在网页中展示8张小图片

• 8张小图片分别发送 → 发送8次

• 合成一张精灵图发送 → 发送1次

background-position：改变背景图片的位置（水平方向垂直方向）

想要左侧移动，需要给一个负数。往左往上都是给一个负数。

使用步骤：

创建一个盒子
设置盒子大小为小图片大小
将精灵图设置为盒子的背景图片
修改背景图片的位置。通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y

一般精灵图的照片要和文字一行展示所以一般都用行内标签 span b i ，行内标签再display一下，转换模式，就可以显示宽高了

15.背景图片大小

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

语法:background-size:宽度高度；

取值	场景
数字+px	简单方便、常用
百分比	相对于当前盒子自身的宽高百分比
contain	包含图片等比缩放，但不会超出盒子的大小，宽或高其中之一和盒子宽或高大小相同，另一个方向就停止缩放，导致盒子可能有留白。
cover	缩放图片等比缩放，直到刚好填满整个盒子，没有空白，宽或高和盒子尺寸完全相同，导致图片显示不全。

16.background连写拓展

完整连写： background：color image repeat position/size;

注意点：

background-size和background连写同时设置时，需要注意覆盖问题

解决：

要么单独的样式写连写的下面
要么单独的样式写在连写的里面

17.盒子阴影

作用：给文字添加阴影效果，吸引用户注意

属性名：box-shadow

取值：

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

拓展：阴影可以叠加设置，每组阴影取值之间以逗号隔开

18.transition过渡

过渡的属性名：transition

取值：

参数	取值
过渡的属性	all：所有能过渡的属性都能过渡、具体属性名如：width：只有width有过渡
过渡的时长	数字+s（秒）

注意点：

过渡需要：默认状态和 hover状态样式不同，才能有过渡效果
transition属性给需要过渡的元素本身加
transition属性设置在不同状态中，效果不同

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

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

transition: all (所有的属性过渡) 1s （时间为1秒）

过渡只能是值与值之间过渡！！显示到隐藏转换不能用过渡，display：none是属性之间的。可以用opacity：0.。。。。

19.SEO简介

SEO（Search Engine Optimization）：搜索引擎优化
作用：让网站在搜索引擎上的排名靠前
提升SEO的常见方法：

竞价排名
将网页制作成html后缀
标签语义化（在合适的地方使用合适的标签）
…

SEO三大标签

title：网页标题标签
description：网页描述标签
keywords：网页关键词标签

20.（拓展）有语义的布局标签

标签名	语义
header	网页头部
nav	网页导航
footer	网页底部
aside	网页侧边栏
section	网页区块
article	网页文章

注意点：

以上标签显示特点和div一致，但是比div多了不同的语义

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pPbJerb2-1675650524890)(C:\Users\刘玉曼LIUYUMAN\AppData\Roaming\Typora\typora-user-images\1659594745713.png)]

注意点：
- 以上标签显示特点和div一致，但是比div多了不同的语义

21.(拓展补充)CSS书写顺序

顺序	类别	属性
1	布局属性	display、position、float、clear、visibility、overflow
2	盒子模型+背景	width、height、margin、padding、border、background
3	文本属性内容	color、font、text-decoration、text-align、line-height
4	点缀属性	cursor、border-radius、text-shadow、box-shadow

注意点：

开发中推荐多用类 + 后代，但不是层级越多越好，一个选择器中的类选择器的个数推荐不要超过 3 个

web移动端：

拓展：文字过多显示省略号

display: -webkit-box;
/* 文字显示两行 */
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow:hidden;

day01

1.移动端特点介绍

1.移动端和pc端的区别

1.屏幕不一样

2.操作方式

1.pc端有版心可以随心所欲的操作

2.移动端操作区域小，不能设置版心，网页宽度多数为100%

2.分辨率

1.逻辑分辨率

逻辑分辨率是由软件（驱动）决定的，逻辑分辨率会有很多个值

2.物理分辨率

固定只有一个出场值。物理分辨率是生产屏幕时就固定的，它是不可被改变的

思考：制作网页参考物理分辨率还是逻辑分辨率？
逻辑分辨率

3.视口

默认状态下，手机端网页的宽度是980 视口：约束HTML网页的尺寸跟设备尺寸一样

meta标签

目标：使用meta标签设置视口宽度，制作适配 不同设备宽度的网页

手机屏幕尺寸都不同，网页宽度为100%
网页的宽度和逻辑分辨率尺寸相同

<!-- viewport：视口 -->
   <!-- width=device-width：视口宽度=设备宽度 为了要让物理分辨率和设备的逻辑分辨率保持一致-->
   <!-- device 设备 -->
   <!-- initial-scale=1.0：缩放1倍 （不缩放） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

4.二倍图

目标：能够使用像素大厨软件测量二倍图中元素的尺寸

注意：二倍图使用在像素大厨开发中要选择2倍图

2.字体图标

目标：使用字体图标技巧实现网页中简洁的图标效果

➢ 字体图标展示的是图标，本质是字体。

➢ 处理简单的、颜色单一的图片

字体图标的优点：

➢ 灵活性：灵活地修改样式，例如：尺寸、颜色等

➢ 轻量级：体积小、渲染快、降低服务器请求次数

➢ 兼容性：几乎兼容所有主流浏览器

➢ 使用方便：

下载字体包
使用字体图标
图标库 Iconfont：https://www.iconfont.cn/

拓展：字体图标库

阿里 iconfont
icoMoon

基本使用

使用字体图标 – 类名：

引入字体图标样式表

<link rel="stylesheet" href="./iconfont/iconfont.css">

调用图标对应的类名，必须调用2个类名
- iconfont类：基本样式，包含字体的使用等
- icon-xxx：图标对应的类名

   <span class="iconfont icon-xxx"></span>

3.transform平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

平面转换

➢ 改变盒子在平面内的形态（位移、旋转、缩放）

➢ 2D转换

平面转换属性：

➢ transform

注意点：transform注意层叠的问题！！同一属性多次出现要用复合属性！！

3-1 位移：translate

目标：使用translate实现元素位移效果

语法 transform: translate(水平移动距离, 垂直移动距离);

取值（正负均可）

➢ 像素单位数值

➢ 百分比（参照物为盒子自身尺寸）

注意：X轴正向为右，Y轴正向为下

技巧

➢ translate()如果只给出一个值, 表示x轴方向移动距离

➢ 单独设置某个方向的移动距离：**translateX() & translateY() **（XY都是大写）

位移-绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果

	//核心代码
			position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50% ,-50%);
    //位移取值为百分比数值，参照盒子自身尺寸计算移动距离

注意：

注意层叠问题

 transform: translateX（100px）;
 transform: translateY（100px）;
 x轴方向的位移无效  被层叠了

行内元素设置位移是无效的
位移不会影响其他的元素
当使用百分比的时候，是基于自身来移动的，其他的都是基于父元素

3-2 旋转

目标：使用rotate实现元素旋转效果

场景：一般适用于盒子旋转（抽奖转盘）

语法：

➢ transform: rotate(角度); 默认的旋转是基于中心点

transform：rotateX()
transform：rotateY()

注意：角度单位是deg

技巧：取值正负均可

➢ 取值为正, 则顺时针旋转

➢ 取值为负, 则逆时针旋转

转换原点

目标：使用transform-origin属性改变转换原点

语法：

➢ 默认圆点是盒子中心点

➢ transform-origin: 原点水平位置原点垂直位置;

取值：

➢ 方位名词（left、top、right、bottom、center）

➢ 像素单位数值

➢ 百分比（参照盒子自身尺寸计算）

注意点：

行内元素设置旋转是无效的
旋转不会影响其他的元素
transform-origin：改变旋转中心点 left、top、right、bottom、center

具体的值

3-3 多重转换

目标：使用transform复合属性实现多形态转换

多重转换技巧：transform：translate() rotate();

注意：

不能拆开分别写位移和旋转

错误示范
transform：translate(600px);
transform：rotate(360deg);
因为css属性的层叠性，只有最后的旋转

调换顺序会改变轴向

transform：rotate(360deg) translate(600px);
旋转会改变坐标的轴向，位移是始终沿着X轴移动的，就会受影响。

如果遇到旋转，最好往最后放

当旋转后，坐标轴也会随之改变。
注意层叠问题

3-4 缩放

目标：使用scale改变元素的尺寸

语法

➢ transform: scale(x轴缩放倍数, y轴缩放倍数);

技巧

➢ 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

➢ transform: scale(缩放倍数);

➢ scale值大于1表示放大, scale值小于1表示缩小

注意点：

放大缩小的时候，不会影响其他的元素
0_1缩小，1 放大

3-5 倾斜

transform:skew(30deg);

transform:skewY(30deg);

4.渐变背景background-image

目标：使用background-image属性实现渐变背景效果

(渐变不是background-color！！！！！！)

渐变是多个颜色逐渐变化的视觉效果，一般用于设置盒子的背景

语法：

background-image:linear-gradient(
	颜色1,
	颜色2,
	...
)

//改变渐变角度
background-image:linear-gradient(
	to right//从左到右渐变   （to bottom···）
	颜色1,
	颜色2,
	...
)

//指定区间的渐变
background-image:linear-gradient(
	颜色1 0%,颜色2 20%,
	...
)
//重复渐变
background-image:repeating-linear-gradient(
	颜色1 0%,颜色2 10%,
	...
)

上边透明 向黑色过渡
background-image:linear-gradient(
	transparent,
	rgba(0,0,0,.6),
)

5.动画

目标：使用animation添加动画效果

思考：过渡可以实现什么效果？

答：实现2个状态间的变化过程

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）

实现步骤：

定义动画

方式1：
@keyframes 动画名称{
	from {
		属性：属性值
	}
	to {
		属性：属性值
	}
}

方式2：分区间写法(常用)
@keyframes 动画名称{
	0% {}
	10% {}
	15% {}
	100% {}
}

@keyframes 动画名称{
	0% {
		transform：translateX(0px)
	}
	10% {transform：translateX(400px)}
	15% {}
	100% {}
}
百分比指的是移动总路程的百分比

使用动画

animation:动画名称 动画花费时长;

举例

div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            animation: move 10s;
        }
        
        /* @keyframes move {
            from{
                transform: translate(0px);
            }
            to{
                transform: translate(200px);
            }
        } */
        
//分区间写法      
        @keyframes move {
            0% {
                transform: translate(0px);
            }
            25% {
                transform: translate(500px,0px);
            }
            50% {
                transform: translate(500px,500px);
            }
            75% {
            	transform: translate(0px,500px);
			}
			//也可以不写 动画执行完毕后，默认会回到原来的位置。
			100% {
				transform: translate(0px,0px);
			}
        }
        如果使用translateX 这种单方向的写法，要注意层叠性的问题

5-1 动画属性

目标：使用animation相关属性控制动画执行过程

animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;

注意：

➢ 动画名称和动画时长必须赋值

➢ 取值不分先后顺序

➢ 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

infinite 无限循环
linear 匀速
alternate 反向运动

拆分写法：太复杂了解即可

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function	速度曲线	steps（数字）：逐帧动画
animation-iteration-count	重复次数	infinite：无限循环
animation-direction	动画执行方向	alternate为反方向
animation-play-state	暂停动画	paused为暂停，通常配合：hover使用

案例-设置动画轮播图-无缝切换

 <!-- 
 思路：
        7张图片轮播
        布局：div>ul>li*7>img
 样式：
    1.让大盒子的大小和图片的大小保持一致
    2.让整个ul足够的控件（700%）li才能在一行显示
    3.实现动画：
                @keyfranmes MovePro {
                    0% {
                        transform：tranlateX(0px);
                    }
                    100% {
                        transform:translate(-3360px)  (7张图片的宽度)
                    }
                }
    4.要给ul添加动画
      是ul整条在向左移动，超出盒子的部分被隐藏起来了

问题：
	1.此时留有空白
 	 解决：移动7个盒子 走6个盒子的距离 2880px
	2.从滑动结束后的最后一张到第一张有跳跃感
 	 解决：在最后的地方加上第一张图片，此时有8张图片，此时改成移动7张图片的距离，移动7张后，界面显示的是最后一张 第八张图，因为最后一张和第一张一样 因为循环播放，此时排队的就是第一张，在前面7张移动过后即将移动，瞬间的切换肉眼看不出来
     -->

<style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 150px auto;
            overflow: hidden;
        } 
        div ul {
            width: 800%; 
            //infinite 无限循环
            animation: Movepro 8s linear infinite ;
            /* height: 300px; */

        }
        ul:hover {
            /* 滑动暂停 */
            animation-play-state: paused;
        }
        ul li {
            float: left;
            list-style: none;
        }
        img {
            width: 300px;
            /* vertical-align: middle; */
        }

        @keyframes Movepro {
            0% {
                transform: translate (0px);
            }
            100% {
                transform: translate(-2100px);
            }
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
            <li><img src="./img/4.jpg" alt=""></li>
            <li><img src="./img/5.jpg" alt=""></li>
            <li><img src="./img/6.jpg" alt=""></li>
            <li><img src="./img/7.jpg" alt=""></li>
            <li><img src="./img/1.jpg" alt=""></li>
        </ul>
    </div>
</body>

使用step实现逐帧动画

animation-timing-function 速度曲线 steps(数字)：逐帧动画

目标：使用steps实现逐帧动画

逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。

animation-timing-function: steps(N)；

➢ 将动画过程等分成N份[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SX5OpjUO-1675650644184)(D:\feiqiu\AppData\Roaming\feiq\Recv Files\就业班素材\3d第二天大飞哥\images\bg.png)]

//导入运动逐帧图片
<style>
        .box {
            width: 140px;
            height: 140px;
            background: url(./bg.png);
            
            animation: bg 1s steps(12) infinite ,pos 1s forwards;
        }
        @keyframes bg {
            0% {
                background-position: 0;
            }
            100% {
                background-position:-1680px;
            }
        }
        @keyframes pos {
            0%{
                transform: translate(0px);
            }
            100% {
                transform: translate(600px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

day02

1.3d空间转换 transform

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换
属性：transform

语法

transform: translate3d(x, y, z)
transform: translateX(值)
transform: translateY(值);
transform: translateZ(值);

取值（正负均可）像素单位数百分比

2.透视

目标：使用perspective属性实现透视效果

思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？
➢ 答：近大远小、近清楚远模糊
思考：默认情况下，为什么无法观察到Z轴位移效果？
➢ 答：Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果

属性（添加给父级）
- perpective：值
- 取值：像素单位取值，数值一般在800-1200.
- 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
  
  perpective：800px 一个物体以800像素的距离呈现给用户。
作用
- 控件转换时，为元素添加近大远小、近实远虚的视觉效果。

3.立体呈现

目标：使用transform-style: preserve-3d呈现立体图形

思考：使用perspective透视属性能否呈现立体图形？
答：不能，perspective只增加近大远小、近实远虚的视觉效果。
实现方法
➢ 添加 transform-style: preserve-3d;
➢ 使子元素处于真正的3d空间
➢ 默认值flat, 表示子元素处于2D平面内呈现

呈现立体图形步骤

盒子父元素添加transform-style: preserve-3d；
按需求设置子盒子的位置（位移或旋转）

注意
➢ 空间内，转换元素都有自已独立的坐标轴，互不干扰

day03

1.百分比布局\流式布局

目标：能够使用百分比布局开发网页

百分比布局也叫流式布局（浮动类型的布局都属于流式布局）
效果：宽度自适应，高度固定

百分比布局跟浮动布局基本没区别，只不过百分比布局子元素的宽度不是固定宽度，是自适应的。

百分比布局怎么使用？

1.float浮动起来

2.高度写死

3.宽度：根据内容占整个屏幕视口平均的份数

4.如果有图片：图片的高度设为100% 自适应

2.flex布局/弹性布局/伸缩布局（☆）

目标：能够使用Flex布局模型灵活、快速的开发网页

Flex布局：

是一种浏览器提倡的布局模型
布局网页更简单、灵活
避免浮动脱标的问题

作用

基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
Flex布局非常适合结构化布局

设置方式

父元素（亲爹爷爷不行）添加 display: flex，子元素可以自动的挤压或拉伸

组成部分

弹性容器（父级）
弹性盒子 (子级)
主轴（默认的水平方向的轴，x轴横向，方向从左到右）
侧轴 / 交叉轴 （默认垂直方向的轴）

注意：

父级添加了display：flex后，子级水平排列，因为默认情况下，主轴在水平方向，所以子级水平排列。
子级排列方向和主轴方向一致。
如果默认方向被改变了，要遵从被改变的方向
flex不存在行内或行内块即使是span也能设置大小。
想让侧轴居中，一定要确保直接父元素有足够的高度（例如：li的父元素ul 要设置高度，li才能设置垂直居中）

弹性盒子特点：高度弹弹弹

如果是flex布局，给子级设置多少宽高就按照多少来显示（如果父元素足够的话，如果父级不够，就发挥弹性盒子的优势，宽高都能自动伸缩）。如果不写高度，flex布局默认侧轴是拉伸，盒子的高度拉伸到和父级一样大，如果设置了高度，按照所设置的高度显示，如果侧轴对齐方式设置了center，盒子的高度由内容决定。

2-1.flex主轴对齐方式（☆）

目标：使用justify-content调节元素在主轴的对齐方式

只是主轴！！并不是调节水平方向，只不过默认主轴是水平方向！！！

在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距

属性值	作用
flex-start	默认值, 起点开始依次排列（左对齐）
flex-end	终点开始依次排列（右对齐盒子顺序不改变）
center	沿主轴居中排列
space-around	弹性盒子沿主轴均匀排列, 空白间距均分在弹性盒子之间。距离父盒子没有间距（两边贴齐，中间均分）
space-between	弹性盒子沿主轴均匀排列, 空白间距均分在相邻盒子两侧（子级之间的间距是父级两端间距的二倍）
space-evenly	弹性盒子沿主轴均匀排列, 弹性盒子与容器之间间距相等（各个地方的间距都相等）

2-2.flex侧轴对齐方式（☆）

目标：使用align-items调节元素在侧轴的对齐方式

修改侧轴对齐方式属性:

1.align-items 写在父级

（添加到弹性容器父级）

属性值	作用
flex-start	默认值, 起点开始依次排列
flex-end	终点开始依次排列
center	沿侧轴居中排列
stretch	默认值, 弹性盒子沿着侧轴线被拉伸至铺满容器（需要去掉子级的高度才有拉伸效果）

align-items：stretch 默认拉伸到侧轴的最大高度，但是需要把子级的高度去掉才有拉伸的效果

align-items 控制侧轴单行
align-content 控制侧轴多行

2.align-self 写在子级

align-self： 写在子级，控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

2-3.flex伸缩比

目标：使用flex属性修改弹性盒子伸缩比

属性

flex : 值;

取值分类

数值(整数)

注意 :作用在子级 只占用父盒子剩余尺寸可以跟stretch做对比，stretch是纵向拉伸，

flex:先计算父级剩余尺寸，看需要把父级分成多少份（把所有flex属性值相加），每个子级占用自己对应的份数

2-4.改变主轴方向

目标：使用flex-direction改变元素排列方向

主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction

属性值	作用
row	行，水平（默认值）
column	列, 垂直
row-reverse	行, 从右向左
column-reverse	列, 从下向上

2-5.弹性盒子换行

目标：使用flex-wrap实现弹性盒子多行排列效果

弹性盒子换行显示 : flex-wrap: wrap;
默认值是nowrap 不换行

换行之后，行与行之间有默认间距。

调整行对齐方式：align-content
- 取值与justify-content（主轴方向的值）基本相同还有stretch值
align-items 单行内容侧轴对齐方式
align-content 多行内容侧轴对齐方式

day04 移动适配方案

移动端布局：

flex布局、百分比布局、rem布局(rem+flexible.js+less)、vw布局、响应式

移动端适配：

1.rem+媒体查询

2.flexible.js+less+rem

3.vw

4.rem+vw

1.rem

目标：能够使用rem单位设置网页元素的尺寸

rem是单位，单位是以html根字体大小的改变而改变：默认的1rem=16px

网页效果
- 屏幕宽度不同，网页元素尺寸不同（等比缩放）
px单位或百分比布局可以实现吗？
- px单位是绝对单位
- 百分比布局特点宽度自适应，高度固定
适配方案
- rem
- vw / vh
rem单位
- 相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小

注意点：rem是基于html的根字体大小只和font-size的大小有关，和后面的属性值单位px无关

举例：html字体大小是1vw，则1rem就等于1vw的大小

1-1 rem移动适配-媒体查询

目标：能够使用媒体查询设置差异化CSS样式

思考
- 手机屏幕大小不同，分辨率不同，如何设置不同的HTML标签字号？
  - 媒体查询
- 设备宽度不同，HTML标签字号设置多少合适？
  - 设备宽度大，元素尺寸大
  - 设备宽度小，元素尺寸小
媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式

写法：

@media (媒体特性) {
	选择器 {
		CSS属性
	}
}


@media (width:320px) {
	html {
		font-size:32px;
	}
}


 @media (min-width:1920px){
            html{
                font-size: 100px !important;
            }
        }

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

1.使用媒体查询添加不同的根字号，视口宽度的1/10
@media (width:320px) {
	html {
		font-size:32px;
	}
}
@media (width:375px) {
	html {
		font-size:37.5px;
	}
}
@media (width:414px) {
	html {
		font-size:41.4px;
	}
}
2.设置box盒子尺寸，单位rem
.box {
	width:5rem;
	height:3rem;
}

1-2适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

rem单位尺寸

确定设计稿对应的设备的HTML标签字号
- 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
rem单位的尺寸
- 目标：计算68px是多少个rem？(假定设计稿适配375px视口)
- N * 37.5 = 68 → N = 68 / 37.5
- rem单位的尺寸 = px单位数值 / 基准根字号

1-3flexible

目标：使用flexible.js配合rem实现在不同宽度的设备中，网页元素尺寸等比缩放效果

flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

1-4 rem和em的区别

子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size

对于em和rem的区别一句话概括：em相对于父元素，rem相对于根元素。

rem中的r意思是root（根源），这也就不难理解了。

2.less

目标：使用Less运算写法完成px单位到rem单位的转换

目标：使用Less语法快速编译生成CSS代码
Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

2-1 运算

加、减、乘直接书写计算表达式
除法需要添加小括号或 .

.box {
	width:100+50px;
	height:5*32px;
	
	width:(100 / 4px);
	height:100 ./ 4px;
}



@import "./base.less";
@import url(./normalize.less);

// 变量 ：根字号
@rootSize:37.5rem;

.fixtop {
    height: 64/@rootSize;
}

注意：
- 表达式存在多个单位以第一个单位为准

2-2 变量

变量：存储数据，方便使用和修改。

使用：

定义变量:
	@变量名：变量值;
使用变量:
	元素{
		CSS属性：@变量名;
	}
	
	
@c:red;
@w:200px;
@h:100px;
.box {
    width: @w;
    height: @h;
    background-color: @c;
}

什么时候需要定义变量？

这个值不断重复使用就建议定义变量

2-3 嵌套

父选择器{
	子选择器{
		子选择器{
			子选择器{
			......
			}
		}
	}
	&父级的同级
}


.bigbox {
    width: 200px;
    height: 100px;
    background-color: aqua;
    .box {
        width: 100px;
        height: 50px;
        background-color: green;
        p{
            color: pink;
        }
    }
    &:hover {
        background-color: black;
    }
    &::after{
        content: "1234";
    }
}

2-4 函数

函数存储代码块
方式一：
	定义：
		.函数名(){
			代码块
		}
	调用:
		元素{
			.函数名()
		}

方式二：
	@fn(@w,@h,@c){
		width:@w;
		height:@h;
		background-color:@c;
	}
	.bigbox{
		.fn(100px,200px,blue)
	}
	.box{
		.fn(50px,20px,red)
	}
	
	
	
	
    // 方式一：
.fn(){
    width: 200px;
    height: 200px;
}
.one {
    .fn();
}
.two {
    .fn()
}

    // 方式二
.fn(@w,@h,@c){
    width: @w;
    height: @h;
    background-color: @c;
}
.bigbox {
    .fn(100px,200px,red)
}
.box {
    .fn(50px,20px,blue)
}

2-5 less导入

// 在less文件中导入其他的less 后缀名.less可以省略

@import ‘./文件名.less’;

@import url(./文件名.less);

注意：

导入css也可以用这种方式，@important非less独有，less只能用@import，注意分号结尾

2-6 导出

方法1.实现所有Less有相同的导出路径

vscode配置EasyLess插件，在设置中搜索EasyLess，在setting.json中配置导出路径

"less.compile": {
    "out": "../css/"
  }

方法2.控制当前Less文件导出路径

在.less文件夹中，写在代码第一行！！

// out:./bbb/abc.css

// out:“./aaa/”

禁止导出：// out:false

3.vw/vh

目标：能够使用vw单位设置网页元素的尺寸

相对单位
相对视口的尺寸计算结果
vw：viewport width
- 1vw = 1/100视口宽度
vh：viewport height
- 1vh = 1/100视口高度

vw单位尺寸

确定设计稿对应的vw尺寸（1/100视口宽度）

查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸（1/100 视口宽度）

vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

4.rem和vw/vh的区别

rem	vw/vh
市场比较常见： 1. 需要不断修改html文字大小 2. 需要媒体查询media 3. 需要 flexible.js	将来(马上)趋势 1. 省去各种判断和修改代表： b站…

5.媒体查询

开发常用写法
媒体特性常用写法
- max-width
- min-width

@media (媒体特性) {
	选择器 {
		样式代码;
	}
}
媒体查询宽度取值：
	width：表示指定宽度下生效
	min-width：表示指定最小宽度范围
	max-width：表示指定最大宽度范围
and关键字：用于连接多个媒体特性

        /* 视口宽度小于768px  显示粉红色*/
        @media (max-width:768px) {
            body {
                background-color: pink;
            }
        }
        /* 视口宽度大于1200px 显示蓝色 */
        @media (min-width:1200px){
            body {
                background-color: skyblue;
            }
        }

        /* 多个条件之间用and连接 */
        /* 实线768-1200之间变为绿色 */
         @media (min-width:769px) and (max-width:1199px) {
            body {
                background-color: lightgreen;
            }
        }

5-1 媒体查询书写顺序

目标：能够根据设备宽度的变化，设置差异化样式

媒体查询也具有层叠性

min-width（从小到大写）

max-width（从大到小写）

5-2 媒体查询link写法

<link rel="stylesheet" href="./css/01.css" media="(max-width:992px)">
<link rel="stylesheet" href="./css/02.css" media="(min-width:992px)">

5-3 媒体查询隐藏

 /* 如果检测到视口宽度小鱼768px  认为是手机端，left隐藏 */
        @media (max-width:768px){
            .left {
                display: none;
            }
        }

5-4 拓展 min-height和min-width

min-height/min-width 和width/height的区别：

当内容没有占满盒子的时候，min-height和min-width显示的是设置时的大小

当内容超出了盒子，width和height中的内容会溢出

当内容超出了盒子，min-width和min-height会自适应变大来适应内容

6. BootStrap框架

移动端优先(按照小屏幕写放大后布局跟随小屏幕的样式)

目标：使用 BootStrap框架快速开发响应式网页

使用步骤

引入： BootStrap提供的CSS代码
调用类：使用BootStrap提供的样式

6-1 BootStrap栅格系统

栅格化是指将整个网页的宽度分成若干等份

BootStrap3默认将网页分成12等份

	超小屏幕	小屏幕	中等屏幕	大屏幕
响应断点	<768px	>=768px	>=992px	>=1200px
类前缀	col-xs-*	col-sm-*	col-md-*	col-lg-*
容器宽度	100%	750px	970px	1170px

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
分别使用.row类名和 .col类名定义栅格布局的行和列。
- 注意:
  - container类自带间距15px;
  - row类自带间距-15px

qq_43710066

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
html+css知识点全面总结（三）

博主本人在学习前端入门初期时做的总结及笔记（三）适合前端初学者。希望多多交流讨论~~~
复制链接

扫一扫