CSS总结
div -> 块级元素->width : 父元素的宽度（包含块） width属性默认值不是100% 是 auto ;
viewport -> 移动端适配 rem、vw、vh
CSS 预处理器 包括这三个
元素属性分类
比如class、id、title 属性是公共属性
比如meta元素的charset属性,img元素的alt属性等 是特有属性不是每一个元素都可以设置的
CSS是什么
css(Cascading style sheet)表示层叠样式表 又称串样式列表 是为网页添加样式
css是一种语言吗
MDN解释:CSS也不是真正的编程语言,甚至不是标记语言 它是一门样式表语言
维基百科解释:是一种计算机语言,但不算是一种编程语言
css总结
css出现是为了美化html 并且让结构html与样式css分离
css美化方式一,为html添加各种各样的样式,比如颜色,字体,大小,下划线等等,
css美化方式二,对html进行布局,按照某种结构显示 css进行布局 浮动,flex,grid
CSS 规则
声明: 属性名 : 属性值
color : red
添加CSS 三种方法
内联样式(internal style)(行内样式)
<div style=""></div>
内部样式(internal style sheet)(文档样式表) -- 放在head 标签内
<style>
</style>
外部样式表(external style sheet) --- 放在head标签内
<!-- <link rel="stylesheet" href="./css/mycss.css"> -->
利用 import导入所有的css集合到同一个css样式中
@import url(./mycss.css)
css注释
/* */
快捷键ctrl + /
CSS常见的元素
不常见的css
w3c官方文档
https://www.w3.org/TR/?tag=css
常见的css
/* 当鼠标放上去变成小手 */
cursor: pointer;
text 文本属性
<!-- 设置文本的装饰线 -->
常见取值
text-decoration:none 没有任何装饰线(可用于去除a标签默认的下划线)
text-decoration:underline 下划线
text-decoration:overline 上划线
text-decoration:line-through 中划线 删除线
text-decoration
/* 无装饰线 */
text-decoration: none;
/* 下划线 */
text-decoration: underline;
/* 上划线 */
text-decoration: overline;
/* 通常用 border-top 添加上划线*/
/* 删除线 */
text-decoration: line-through;
text-transforme
/* 首字母大写 */
text-transform: capitalize;
/* 将所有字母大写 */
text-transform: uppercase;
/* 将每个单子变为小写 */
text-transform: lowercase;
/* 没有任何影响 */
text-transform: none;
text-indent:几个字符(em) 像素(px)
text-align属性<!-- ### 设置对齐方式 --- 相对于它的父元素对齐 -->
<!-- 基本使用 -->
text-align
/* 居中显示 */
text-align: center;
/* 左对齐 */
text-align: left;
/* 右对齐 */
text-align: right;
/* 两端对齐 */
text-align: justify;
设置字母或单词之间的间距
默认为0可以设置为复数
<!-- 字母之间的间距 -->
letter-spacing
<!-- 单词之间的间距 -->
word-spacing
图片、输入框等行内元素居中
div等块级元素无法进行居中
如果要想使用可以使用display:属性让他变为行内元素
display: inline-block;
/* 还可以使用margin:0 auto;使其自身居中 */
margin: 0 auto;
<!-- -->
word/letter-spacing
font 文体属性
文字大小
font-size:
设置字体样式
在浏览器渲染的时候 会先考虑当前操作系统字体库是否具备设置的字体,当不支持这个字体的时候会用浏览器默认的字体显示,
在设置font-family时最好多设置几个备用字体
可以通过网络方式直接下载字体
@font-face指定的可以直接下载字体.
font-family
设置字体加粗
font-weight
设置行高并且文本可以行内居中
line-height
可以影响小写字母的显示形式 将小写字母变成大写字母但是高度还是小写字母
font-variant
设置文本斜体或常规
font-style
/* 常规显示 */
font-style: normal;
/* 斜体 字体本身支持斜体时,显示斜体 */
font-style: italic;
/* 倾斜 仅仅让文字倾斜 不管支不支持都可以斜体*/
font-style: oblique;
font缩写属性
font 属性可以用来作为 font-style,font-variant,font-weight,font-size,line-height,font-family 属性简写
规律:
font:font-style font-variant font-weight font-size/line-height font-family
规则:
1.font-style font-variant font-weight 可以随意调换位置 并且可以省略
2.line-height可以省略 ,如果不省略必须跟在font-size后面 加 / 后加 line-height
3.font-size,font-family 不可以调换顺序 不可以省略
color: 前景色(文字颜色)
background-color: 背景色
width: 宽度
height: 高度
display 属性可以设置元素的内部和外部显示类型
display:none 元素不会显示
display:block 此元素会显示为块级元素,此元素前后会换行
display:inline 默认.此元素默认为内联元素或者行内元素,前后没有换行符
display:inline-block 行内块元素
display:inline-table 此元素作为内联表格显示(类似table)表格前后没有换行符
display:table 此元素作为块级表格显示类似(table) 表格前后有换行符
display:inherit 规定应该从父元素继承display属性值
display:grid 网格布局(Grid) 最强大的CSS布局方案,他将网页划分成一个个网格,可任意组合不同的网格,做出各种各样的布局
display:flex 弹性布局 用来为盒装模型提供最大的灵活性
CSS颜色表示方式
1.颜色关键字
(1)不区分大小写
(2)全部颜色关键字
https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value#%E8%AF%AD%E6%B3%95
2.RGB颜色:
(1) RGB是一种色彩空间,通过R(red,红色)G(green,绿色)B(bule,蓝色)组成了不同的颜色
(2)各个原色的取值范围是0~255
3.rgba 透明度:
rbga(r,g,b,[a])
CSS选择器(selector)
开发过程中需要找到特定的网页元素进行设置样式
按照一定规则选出符合条件的元素,并为之添加css样式
通用选择器
*{}
元素选择器
元素名{}
类选择器
.类名{}
id选择器
id值{}
属性选择器
[属性名]{}
[属性名=属性值]{}
兄弟选择器
/* 相邻兄弟选择器 */
.brother + .all{
color: aquamarine
}
/* 全部兄弟选择器 */
.brother ~ div{
color: blue;
}
后代选择器
<!-- 全部后代
-->
.home span{
color: #f00;
}
/* 直接子代选择器 */
.home > span{
color:#00f;
}
组合-交集选择器
属性名类名{}
div.text{
color: #0283c8;
font-size: 20px;
}
并集选择器
div,p,span,h1{
font-size: 20px;
}
伪类
伪类是选择器的一种,它用于选择处于特定状态的元素;
1.动态伪类
:link :visited :hover :active : focus
a:link 给未访问链接设置样式
a:visited 给已访问的链接设置样式
a:focus 元素聚焦(获取焦点)
a:hover 鼠标挪动到链接上设置样式
a:active 激活链接设置样式(鼠标在连接上长按不松开)
注意事项:
:hover 必须放在:link和:visited 后面
:active 必须放在 :hover后面才能完全生效
所以建议编写顺序为 :link :visited :hover :active
2.目标伪类
:target
3.语言伪类
:lang()
4.元素状态伪类
:enabled :disabled :checked
5.结构伪类
:nth-child
:nth-child(1) --- 是父元素中的第一个子元素
:nth-last-child(1) ---父元素中倒数第一个子元素
:nth-of-type(1) ---父元素中的第一个唯一的子元素
:nth-last-of-type(1) --- 列表中倒数第一位唯一的子元素
:only-child ---父元素中唯一的子元素
:only-of-type ---父元素中唯一的这种类型的子元素
:root 根元素就是html元素
:empty 代表里面完全空白的元素
所有的伪类链接:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
伪元素
常用的伪元素有
第一种写法 第二种写法(推荐第二种 因为伪类是一个冒号)
:first-line ::first-line
:first-letter ::first-letter
:before ::before
:after ::after
CSS的特性
继承性
如果一个属性具备继承性,那么这个元素设置后,他的后代元素都可以继承这个属性
注意: 当后代元素自己有设置属性,那么优先使用后代元素自己的属性(不管继承过来的权重有多高)
1.默认继承性
2.继承计算值
/* font-size: 30px; /
/ 相对于自身字体(父元素的字体) /
/ 浏览器 16px /
font-size: 2em;/ 32px */
3.强制继承
/* 很少用 */
border: inherit;
层叠性
对于一个元素来说,同一个属性可以通过不同的选择器来设置不同的值
那么这个属性就会被一层层覆盖上去
但是最终只有一个会生效
层叠规则:
1.判断选择器的权重,根据权重判断优先级
2.先后顺序,权重相同时,后设置的会生效
选择器的权重:
!important > 内联样式 > id选择器 > 类选择器,属性选择器,伪类 > 元素选择器,伪元素 > 通配符
10000 1000 100 10 1 0
元素类型
CSS 样式不生效原因
1.选择器优先级太低
2.选择器没有选中对应的元素
3.css属性形式不对
a.元素不支持此css属性 比如span元素不支持width和height
b.浏览器不支持此css属性,比如旧版本的浏览器不支持css module3 的某些属性
c.被同类型的css属性覆盖 比如font 覆盖 font-size
建议:
可以使用浏览器开发工具进行调试,查错
盒子模型
内容
设置height 和 width
设置最大/小宽度和最大/小高度
min-width
max-width
padding 内边距 --- 一般设置父子元素之间的距离
简写:padding:top,right,bottom,left
padding-top
padding-right
padding-bottom
padding-left
在父元素中设置子元素对于父元素的距离 可以使用padding 但是要加上box-sizing : border-box
padding-left:20px
box-sizing : border-box
margin 外边距 --- 一般设置兄弟元素之间的距离
简写:margin:top,right,bottom,left
margin-top
margin-right
margin-bottom
margin-left
outline 外轮廓
不占据空间
默认显示在border外面
应用实例:去除外轮廓 outline : none
box-shadow 盒子阴影
box-shadow可以设置一个或者多个阴影
多个阴影之间用,分开,从前向后叠加
在父元素中设置子元素对于父元素的距离 可以使用margin 但是要在父元素中添加 overflow : auto
margin 父子之前的上下传递(左右不会传递)
margin-top传递
如果块级元素的顶部线和父元素的顶部线重合,那么这个块级元素的margin-top值会传递给父元素
margin-bottom传递
如果块级元素的底部线重叠,并且父元素的高度为auto,那么这个块元素的margin-bottom值会传递给父元素
如何防止出现传递问题
1.给父元素设置padding-top\padding-bottom
或者
2.给父元素设置一个border
或者
3.触发BFC:设置overflow 为 auto
margin 上下margin折叠
垂直方向上的2个margin(margin-top margin-bottom) 有可能会合并为一个margin,这种现象叫做collapse(折叠)
!注意水平方向上的margin(margin-left margin-right) 永远不会折叠
border-sizing
属性值
content-box 内容盒子
实际宽度 = width + padding + border
padding border 都布置在width height 外边
border-box 边框盒子
实际宽度 = width
padding border 布置在 width height 里面
折叠最终值计算规则
两个值进行比较取最大值
如何防止折叠
一般只设置一个margin
border 边框
border包含四个
简写 border:top,right,bottom,left
上边框
border-top
下边框
border-bottom
左边框
border-left
右边框
border-right
设置背景
background-image 设置背景图片
background-image:url(../../../)
background-repeat 设置背景平铺
background-repeat:no-repeat;
background-repeat:repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-size 设置背景大小
/* 默认值 /
background-size: auto;
/ 拉伸 保持图片的宽高比 /
background-size: contain;
/ 覆盖 保持图片宽高比进行 /
background-size: 100% 100%;
/ 缩放 宽度或者高度铺满元素 */
background-size: contain;
background-position 设置背景位置
/* 调整背景位置 */
background-position: 100px 100px;
/* 背景调整到右下角 */
background-position: right bottom;
<!-- 只设置一个值 另外一个方向默认为center -->
background-position: 100px;
background-attachment
/* 随着内容进行滚动 */
background-attachment: local;
/* 表示背景相对于元素本身固定,而不是随着它的内容滚动*/
background-attachment: scroll;
/* 相对浏览器视口固定 */
background-attachment: fixed;
background 缩写属性
background:color url() position/size repeat attachment
background:#fff url(../../../) 20px 30px/50px 50px no-repeat local
常见的结构伪类
:nth-child
:nth-child(1) --- 是父元素中的第一个子元素
:nth-last-child(1) ---父元素中倒数第一个子元素
:nth-of-type(1) ---父元素中的第一个唯一的子元素
:nth-last-of-type(1) --- 列表中倒数第一位唯一的子元素
:only-child ---父元素中唯一的子元素
:only-of-type ---父元素中唯一的这种类型的子元素
:root 根元素就是html元素
:empty 代表里面完全空白的元素
否定伪类的使用
<style>
/* 这种样式只会显示带item的 无法选择不带item类的标签 */
.item{
color: brown;
}
/* 不是abc类的全部选中 不论是不是带item类的标签 */
div :not(.abc){
color: blueviolet;
}
</style>
</head>
<body>
<div>
<div class="item">列表内容1</div>
<div class="item">列表内容2</div>
<div class="item">列表内容3</div>
<div class="item">列表内容4</div>
<div class="abc">列表内容5</div>
<div >列表内容6</div>
<div >列表内容7</div>
<div >列表内容8</div>
<div >列表内容9</div>
<div >列表内容10</div>
</div>
</body>
额外知识补充03
border图形
<style>
.box{
width: 100px;
height: 100px;
background-color: #f00;
border: 30px solid orange;
/* 设置box类型为border-box 边框就不会增加宽度 */
box-sizing: border-box;
/* 设置box类型为content-box 边框会增加宽度 */
/* 给border四边添加颜色 */
border-right-color: aqua;
border-bottom-color: blueviolet;
border-left-color: burlywood;
/* 给border设置为三角形 */
/* 将border设置为高度的一半 将其他四边设置为透明色:transparent*/
border: 50px solid orange;
border-right-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
/* 将背景删掉或者设置为透明色 */
background-color:transparent;
/* 旋转 */
/* 轴心 */
transform-origin: center 25%;
/* 旋转90度 */
transform: rotate(180deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
更多图形:https://css-tricks.com/the-shapes-of-css/#top-of-size
Web网络字体
字体:https://www.fonts.net.cn/fonts-zh-1.html
生产对应的字体文件:https://font.qqe2.com/#
基本使用:
Web字体图标
好处:1.放大不会失真
2.可以任意切换颜色
3.用到很多图标,文本相对图片较小
字体图标连接:https://www.iconfont.cn
CSS精灵图
好处:
1.减少网页http请求数量,加快网页响应速度,减轻服务器压力
2.减小图片大小
3.解决图片命名困扰,只针对一个图片命名就行
Sprite图片制作(雪碧图,精灵图)
方法一:PhotoShop 设计人员设计
方法二:https://www.toptal.com/developers/css/sprite-generator
如何获取精灵图位置:http://www.spritecow.com/
使用:
<style>
.img{
background-image: url(./images/topbar_sprite.png);
/* 禁止不平铺 */
background-repeat: no-repeat;
/* 设置行内块元素 */
display: inline-block;
}
.icon{
width: 26px;
height: 13px;
/* 设置图片位置 */
background-position: -192px 0;
}
.logo{
width: 157px;
height: 33px;
background-position: 0 -19px;
}
</style>
</head>
<body>
<i class="icon img"></i>
<i class="logo img"></i>
</body>
cursor属性 -- 设置光标在元素上显示的样式
cursor常见属性:
auto:浏览器根据上下文决定指针显示的样式,比如文本和非文本切换指针样式
default:由系统操作决定,一般就是一个小箭头
pointer:一只小手,鼠标指针挪到链接上默认就是这个样式
text:一条竖线,鼠标挪到文本输入框上默认的样式
none:没有任何指针显示在元素上面
auto 到底是什么
auto->就是交给浏览器来处理到底是什么值
1.行内非替换元素->width:包裹的内容
2.块级元素-> width:包含块的宽度
3.绝对定位元素->width:包裹内容
CSS 定位
标准流布局(Normal Flow)
标准流特点:1.块级元素独占一行
2.行内元素会和其他行内元素在同一行显示
3.从左向右,从上向下按顺序排好
4.默认情况下互相之间不会存在层叠现象
在标准流里调整位置
方法一:
margin和padding 位置调整
在标准流里可以使用margin和padding对元素进行定位
1.margin还可以设置负数
缺点:设置一个元素的margin和padding 通常会影响到标准流中其他元素的定位效果
不便于实现元素层叠效果
跳出标准流实现层叠效果:可以使用position属性进行设置
position属性值: --->可以让元素变成定位元素
1.static:默认值,静态定位
2.relative:相对定位
3.absolute:绝对定位
4.fixed:固定定位
5.sticky:粘性定位
静态定位-static
按照标准流布局
left,right,top,bottom没有作用
相对定位-relative
relative:相对定位----->元素依然按照标准流定位
相对定位应用场景:在不影响其他元素位置的前提下,对当前位置进行'微调'
固定定位-fixed
fixed:固定定位------->元素脱离标准流,脱标
可以通过left,right,top,bottom进行定位
定位参照物是浏览器的视口--->就是浏览器可见区域
当画布滚动时,固定不动
绝对定位-absolute
元素设置绝对定位会脱离标准流
相对谁来设置 left,right,top,bottom --->最邻近的定位祖先元素,如果找不到这样的祖先元素,参照的元素为视口
绝对定位元素的特点(将position 设置为 absolute/fixed 元素)
1.可以随意设置宽高(不管是行内元素还是块级元素)
2.宽高默认由内容决定
3.不再受标准流的约束
4.不再严格按照从上到下,从左到右排布
5.不再严格区分,行内级,块级,行内级的很多特性都会消失
6.不再给父元素汇报宽高数据
7.脱标元素内部子元素默认按照标准流排布
绝对定位元素的特点(将position 设置为 absolute/fixed 元素)二
定位参照对象的宽度 = left + right + margin-left + margin-right + 绝对定位元素的实际占用宽度
可以实现 水平居中 设置定位元素left:0,right:0,设置定位元素宽度,margin:0 auto;
定位参照物的高度 = top + bottom + margin-top + margin-bottom + 绝对定位元素的实际占用高度
可以实现垂直居中 设置定位元素 top:0,bottom:0,定位元素高度,margin:auto 0;
子绝父相:在绝大情况下,子元素都是相对于父元素进行定位
如果希望子元素相对于父元素进行定位,又不希望父元素脱离标准流,常用的解决方案是:
父元素设置position:relative
子元素设置position:absolute
简称子绝父相
粘性定位-sticky
sticky粘性定位 相对于最近的滚动祖先包含滚动视口的
sticky粘性定位比较新--要考虑兼容性
可以看作是相对定位与固定(绝对)定位的结合体
它允许被定位的元素表现的像相对定位一样,知道滚到到某个阈值点;
当他达到这个阈值点时就会变成固定(绝对)定位
z-index(只对定位元素有效)
层叠规则
普通元素(非定位元素)<浮动元素<定位元素
z-index 属性用来设置定位元素的层叠顺序(仅对定位元素有效)
相对于的是兄弟元素
取值可以是正整数,负整数,0
比较原则
如果是兄弟关系
z-index的值越大,层叠越在上面
z-index相等,写在最后面的那个元素层叠在最上面
如果不是兄弟关系
各自从元素自己及祖先元素中,找出最邻近的2个定位元素进行比较
而且这2个定位元素必须有设置z-index的具体数值
CSS 浮动
认识浮动
float 属性可以指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它
float 属性最初只用于在一段文本内浮动图像,实现文字环绕的效果
但是早期的CSS的标准并没有提供很好的左右布局方案,因此在一段时间里面他成为网页多列布局的常用工具
绝对定位和浮动都会让元素脱离标准流,以达到灵活布局的效果
可以通过float属性让元素产生浮动效果,float的常用取值
none:不浮动,默认值
left:向左浮动
right:向右浮动
浮动规则
1.元素一旦浮动后,脱离标准流
朝着向左或向右方向移动,直到自己的边界紧贴着包含块(一般是父元素)或者其他浮动元素的边界为止
定位元素会层叠在浮动元素的上面
2.浮动元素是向左向右浮动,浮动元素的左右边界不能超出包含块的左(右)边界
3.浮动元素之间不能层叠
如果一个元素浮动,另一个浮动元素已经在那个位置了,后浮动的元素将紧贴着前一个浮动元素(左浮找左浮,右浮找右浮)
如果水平方向剩余的空间不够显示浮动元素,浮动元素向下浮动,直到有充足的空间为止
4.浮动元素不能于行内级的内容层叠,行内级元素会被浮动元素推出
5.行内元素,inline-block元素浮动后,其顶部将与所在行的顶部对齐
将多个行内元素中间的间隙去除方法
1.删除换行符(不推荐)
2.给父元素的font-size设置为0 单独给子元素设置font-size
3.使用浮动--通过子元素统一向一个方向浮动即可
4.设置为 flex 布局
浮动的问题-高度塌陷
因为浮动元素脱离了标准流,变成了脱标元素,所以不再向父元素汇报高度
父元素计算高度时,就不会计算浮动子元素的高度,导致高度塌陷的问题
解决方案:
清除浮动:父元素在计算高度时,把浮动的高度计算进去
使用clear属性清除浮动
clear属性可以指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面
clear:left -- 移动到往左边浮动的元素的下面
clear:right -- 移动到往右边浮动的元素的下面
clear:botn --- 移动到所有浮动元素的底部
clear:none 默认值无特殊要求
弊端
1.会增加很多无意义的空标签,维护麻烦
2.违反了结构与样式分离的原则(css产生的问题,通过增加html元素来解决)
给父元素设置固定的高度也可以解决高度塌陷的问题
弊端
1.扩展性不好
利用伪元素添加样式
.hdc::after{
content: "";
clear: both;
display: block;
}
弊端:存在兼容性问题
解决办法
.hdc::after{
content: "";
clear: both;
display: block;
visibility:hidden; 浏览器兼容性
height:0; 浏览器兼容性
}
.hdc{
*zoom:1; IE6/7兼容性
}
布局方案总结
1.标准流布局-----垂直布局
2.绝对定位-------层叠布局
3.浮动-----------水平布局
flex 布局
认识flex布局
flexbox翻译为弹性盒子
弹性盒子是一种用于"按行"或"按列"布局元素的一维布局方法
元素可以膨胀以填充额外的空间,收缩以适应更小的空间
通常我们使用flexbox来进行布局的方案称为flex布局
div-> display:flex;
flex box 布局时目前web开发中使用最多的布局方案:
flex 布局 (Flexible 布局,弹性布局)
目前在移动端可以说完全普及
在PC端也几乎完全普及和使用,只有非常少数的网站依然使用浮动来布局
为什么要用flex布局
长久以来,css布局中唯一可靠且跨浏览器兼容的布局工具只有floats和positioning
但是这两个方法本身就存在很大的局限性,并且用他们布局实在时无奈之举
flex布局的理解
重要概念
重要概念一
开启了flex布局的元素叫flex container
flex container 里面的直接子元素叫做 flex item
当flex container中的子元素变成了flex item 时具备以下特点:
1. flex item的布局将受flex container 属性的设置来进行控制和布局
2. flex item 不再严格区分块级元素和行内元素
3. flex item 默认情况下时包裹内容的,但是可以设置宽度和高度
设置display 属性为 flex 或者 inline-flex 可以称为 flex container
flex : flex container 以 block-level (块级元素)形式存在
inline-flex : flex-contaniner 以 inline-level (行内元素)形式存在
主轴(main):从左向右排布 交叉轴(cross): 从上向下
可以改变主轴或交叉轴的方向(改变的不是flex布局的方向) 使用flex-direction属性
flex-container属性
flex-flow 是flex-direction 和 flex-wrap的简写属性
任何顺序,都可以省略
flex-direction 默认都是沿着main axis(主轴) 从 main start 开始往 main end 方向排布
flex-direction 决定了main axis的方向 有四个取值
1.row 默认值
2.row-reverse 主轴反转:由右向左排布
3.column
4.column-reverse
flex-wrap 决定flex container是单行显示 还是多行显示
1.nowrap:(默认)单行显示
2. wrap : 多行
3. wrap-reverse:多行(对比wrap,cross start 与 cross end 相反)
justify-content 决定了flex item 在 main axis上的对齐方式
flex-start(默认值):与main start 对齐
flex-end: 与 main end 对齐
center :居中对齐
space-between:
flex items 之间的距离相等
与 main start 和 main end 两端对齐
space-around:
flex items 之间的距离相等
flex items 与 main start,main end 之间的距离是 flex items之间距离的一半
space-evenly:
flex items之间距离相等
flex items 与mian start 和 main end 之间的距离 等于 flex items 之间的距离
align-items 决定了 flex items 在 cross axis 上的对齐方式
normal : 在弹性布局中,效果和stretch一样
stretch : 当flex items 在 cross axis 方向size 为auto时,会自动拉伸至填充flex container
flex-start : 与cross start 对齐
flex-end : 与cross end 对齐
center:居中对齐
baseline:与基准线对齐
align-items: first baseline 在顶部文字基线对齐 ;
align-items: last baseline 在底部文字基线对齐 ;
align-content 决定了多行flex items 在 cross axis 上的对齐方式,用法和justify-content类似
stretch:默认值 与 align-items 的 stretch类似
flex-start:与cross start对齐
flex-end : 与cross end 对齐
center:居中对齐
space-between:
flex items 之间的距离相等
与 cross start,corss end 两端对齐
space-around:
flex items 之间的距离相等
flex items 与 cross start,corss end 之间的距离是 flex items之间距离的一半
space-evenly:
flex items之间距离相等
flex items 与cross start,corss end之间的距离 等于 flex items 之间的距离
flex-item属性
flex-grow 决定了flex-item如何扩展(拉伸/成长)
可以设置任意非负数字(正小数,正整数,0)
默认值是0
当flex container 在main axis 方向上有剩余的size时,flex-grow属性才会生效
如果所有的flex items的flex-grow 的总和sum超过1 每个flex item 扩展的size为flex container剩余size*flex-grow/sum
flex-items扩展后的最终size不能超过 max-width或交叉轴拉伸不能超过max-height
flex-shrink 决定了flex-items如何收缩(缩小)
可以设置任意非负数字(正小数,正整数,0)默认值是1
当 flex items 在main axis方向上超过了 flex container 的 size,flex-shrink属性才会生效
当所有flex items 的 flex-shrink 总和超过1,每个flex item收缩的size为:
flex items超出flex container 的 size*收缩比例/所有flex items的收缩比例之和
flex items 收缩后的最终size不能小于min-width或者交叉轴压缩不能小于min-height
flex-basis 用来设置flex items 在main axis 方向上的base size(基础尺寸)
auto(默认值),具体的宽度数值(100px)
当内容为单词时显示不完会扩展尺寸
flex 是 flex-grow||flex-shrink||flex-basis简写属性可以指定一个值,两个或者三个值
单值语法:值必须为以下其中之一
一个无单位数:他会被当作flex-grow的值
一个有效的宽度:他会被当作flex-basis的值
关键字none,auto或者initial
双值语法:第一个必须为一个无单位数 他会被当作flex-grow的值
一个无单位数:他会被当作flez-shrink的值
一个有效的宽度值:他会被当作flex-basis的值
三值语法:
第一个值必须为一个无单位数,并且它会被当作flex-grow的值
第二个值必须为一个无单位数,并且它会被当作flex-shrink的值
第三个值必须为一个有效的宽度值,它会被当作flex-basis的值
flex-grow,flex-shrink,flex-absis
none:0 0 auto
auto:1 1 auto
决定flex items 最终base size 的因素,从优先级高到低
max-width\max-height\min-width\min-height
flex-basis
width\height
内容本身的size
order 决定flex-items的顺序
可以设置任意整数(正整数,负整数,0)值越小就越排在前面
默认值为0
align-self 可以通过align-self 覆盖flex container 设置的 align-items
auto:默认值 遵从flex container 的 align-items设置
stretch,flex-start,flex-end,center,baseline 效果和align-items一致
normal : 在弹性布局中,效果和stretch一样
stretch : 当flex items 在 cross axis 方向size 为auto时,会自动拉伸至填充flex container
flex-start : 与cross start 对齐
flex-end : 与cross end 对齐
center:居中对齐
baseline:与基准线对齐
align-items: first baseline 在顶部文字基线对齐 ;
align-items: last baseline 在底部文字基线对齐 ;
flex布局常见的问题
1.内容不齐
``` html
<style>
.box{
width: 500px;
/* height: 500px; */
background-color: orange;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item{
width: 110px;
height: 140px;
}
/* 解决内容不齐时 可以在下方加span标签 并且设置和flex items相同的宽度 */
.box>span{
width: 110px;
}
1
2
3
1
2
3
1
2
3
3
3
额外知识补充 03
1.text-indent 不会对行内非替换元素生效-可以对块级元素和行内块级元素生效
2.line-hight 不会撑起行内非替换元素的高度
3.当block里面没有内容的时候 line-height是不会生效的
4.块级元素中嵌套img问题
1.默认情况下放在块级元素下的行内元素默认是基线对齐的,所以为了保证图片和文本可以基线对齐 所以图片底下会有几个像素
解决办法:找到img 设置vertical-align:middle 或 top 或者bottom
2.将img的display:block 设置成块元素
5.box-sizing 到底哪里需要加
box-sizing 再明确设置宽度和高度的情况下 才会起作用
需要加的地方
1.有明确的高度和宽度
2.不希望内容被扩展
不需要添加 无作用的地方
1.没有明确设置宽度
6.文本超出内容变为省略号
7.行内非替换元素嵌套块级元素
1.a标签嵌套div元素
transform 形变
transform --形变
CSS的transform 属性允许我们对某一个元素进行形变,包括旋转,缩放,倾斜或平移等
重要!---->(!并不是所有的元素都可以进行形变(通常对行内非替换元素进行形变))
transform:函数值
transform-list
transform 设置多个值
transform可以写多个值 并且以空格进行分割
MDN文档中
+代表可以写多个值 并且以空格进行分割
# 代表可以写多个值 并且以,号进行分割
不能分开写多个会覆盖
transform: translate(100px) scale(0.5) rotate(90deg) skew(30deg);
常见的形变函数:
translate(x,y) 平移(位移)函数
这个函数用于移动元素再平面上的位置
translate本身可以表示翻译的意思,在物理上也可以表示位移
position:relative 这个是真正改变了元素的位置
translate 只是在浏览器渲染的过程中把该元素渲染到这个位置
值个数
一个值时,设置x轴上的位移
两个值,设置x轴和y轴上的位移
百分比相对于谁
translate 是相对于自身的 如果设置的是x轴上的位移 参考的是自身的宽度,如果是y轴上的位移 参考的是自身的高度
margin-top 的百分比相对于包含块(父元素)的宽度
scale(x,y) 缩放函数
scale()css函数可以改变元素的大小
值个数
一个值时,设置x轴上的缩放
两个值,设置x轴和y轴上的缩放
当设置的值为0-1可以对元素进行缩小
当设置的值>1是可以对元素进行放大
rotate(deg) 旋转函数
值只有一个 表示旋转的角度 单位是deg
值类型
常用单位deg:旋转的角度
正数为顺时针旋转
负数为逆时针旋转
rotate 补充
补充一:rotate函数是rotateZ函数的简写写法
补充二:rotate的其他单位
度(deg),百分度(grad),弧度(rad),圈数(turn)
skew(deg,deg) 倾斜函数
函数定义了一个元素在二维平面上的倾斜转换
skew(x,y)
一个值时:表示x轴上的倾斜
两个值时:表示x轴和y轴上的倾斜
值类型:
deg:倾斜的角度
正数为顺时针
负数为逆时针
倾斜的原点也受transform-origin控制
坐标圆心
css属性-不是transform的函数值
默认值
transform-origin:center,center;
属性值:
可以为关键字:center,left,right,bottom等
也可以为数值:10px,20px等(是从左上角开始计算的)
可以为百分比:(参考元素本身的大小)
水平垂直居中总结
水平居中:
1.行内级元素:
*设置父元素的text-align:center
2.块级元素:
*设置当前块级元素(必须要有宽度) margin:0 auto;
3.绝对定位
*在元素有宽度的情况下,可以设置left:0;right:0;margin:0 auto;
4.flex布局
* justify-content:center 设置对应元素水平居中
垂直居中:
行内元素
line-height的值为包含块的高度
块级元素:
1.绝对定位:
*在元素有高度的情况下,top:0;bottom:0;margin:auto 0;
2.flex布局
使用align-items:center;
3.使用top/translate
两件事:1/先让元素向下位移父元素的50%
2/让元素向上位移自身的50%
transition动画
CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法
可以让css属性变化成为一个持续一段时间的过程,而不是立刻生效的
比如将一个元素从一个位置移动到另一个位置,默认在修改玩CSS属性后会立即生效
但是我们可以通过CSS transition 让这个过程加上一定的动画效果,包括一定的曲线速率变化
缺点:
1.transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态
2.transition 不能重复执行除非再触发动画
3.transition 需要在特定的状态下才会执行,比如某个属性被修改了
通常将两个状态之间的过渡称之为隐型过度,因为开始和结束之间的状态由浏览器决定
告诉浏览器在绘制我们从开始到结束的中间状态展示给用户一个丝滑的过度效果
transition可以决定哪些属性发生动画
方法一:在mdn文档中查询
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties
方法二:
哪些属性可以发生动画----transition-property
属性值:
1.all:所有属性都执行动画
2.none:所有属性都不执行动画
3.CSS属性名称:要执行动画的属性名称,比如width,left,transform等
什么时候开始(delay)----transition-delay
属性值:
单位可以为秒也可以为毫秒(ms)
持续多久(duration)----transition-duration
属性值:单位可以为秒也可以为毫秒(ms)
如何动画(定义timing function,比如匀速地先快后慢)-----transition-timing-function
属性值:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
animation动画(序列帧动画)
分两个步骤
1.使用keyframes定义动画序列(每一帧如何执行)
2.配置动画执行的名称,持续时间,动画曲线,延迟,执行次数,方向等等
属性值:
/* 执行 */
animation: remove;
/* 执行总时间 */
animation-duration: 3s;
/* 动画速度曲线 */
animation-timing-function: ease-in-out;
/* 延迟时间 */
animation-delay: 0.3s;
/* 其他属性 */
/* 动画执行次数 */
animation-iteration-count: 2;
infinite无限执行动画
/* 动画执行方向 */
/* 反转 */
animation-direction: reverse;
/* 动画停留在哪一个位置 */
/* 默认时没有执行的位置 */
animation-fill-mode: forwards;
属性值:
none:回到没有执行动画的位置
forwards:动画最后一帧位置
backwards:动画第一帧的位置
/* 暂停状态 */
animation-play-state: paused;
属性值:
paused:暂停
running:执行
vertical-align
默认值为:baseline 所以图片下方会有空隙
baseline都是谁呢?
1.文本的baseline是字母X的下方
2.lnline-block默认的baseline是margin-bottom的底部(没有就是盒子的底部)
3.lnline-block有文本的时候,baseline是最后一行文本的X的下方
行盒的概念
作用:将当前行里面所有的内容全部包裹在一起
white-space/text-overflow
white-space用于空白符处理和换行规则
normal:合并所有连续的空白,允许超出换行
nowrap:合并所有连续的空白,不允许超出换行
pre:不合并所有连续的空白,并且不换行
pre-wrap:不合并所有连续空白,允许超出换行
pre-line:合并所有连续空白但是保留换行符,允许单词超出后换行
text-overflow设置超出后的样式
----------overflow的值为visible和scroll的时候不生效
clip:超出部分内容直接裁剪掉(字符可能显示不完整)
ellipsis:超出部分用省略号表示
理解浏览器前缀
有时候可能会看见有些CSS属性名前面带有:-o-,-xv-,-ms-,-moz-,-webkit-
为什么会有浏览器前缀
CSS属性在刚开始并未成为标准,浏览器为了防止后续会修改名字给新的属性添加了浏览器前缀
-o-,-xv- :Opera等
-ms-,-mso-:IE等
-moz-;FireFox等
-webkit-:Safari,Chrome等
模块化打包工具会自动添加浏览器前缀
CSS常见的函数扩展
CSS函数:比如rgb/rgba/translate/rotate/scale等
CSS函数可以帮助我们更加灵活的编写样式的值
其他好用的函数
var:使用CSS定义的变量
使用方法:
<style>
html{
/* 定义一个变量 */
--main-color:#f0f;
}
.box{
/* 使用var函数引用定义的变量 */
color: var(--main-color);
}
</style>
calc:计算CSS的值,通常用于计算大小或位置
使用方法:
/* width 的100%是包含块的宽度 */
/* 使用计算函数calc() */
width: calc(100% - 100px);
blur:毛玻璃(高斯模糊)效果
使用方法:
blur(radius)
radius,模糊的半径吗,用于定位高斯函数的偏差值,偏差值越大越模糊
通常和这两个属性一起使用
filter:将模糊或者颜色偏移等图形效果应用于元素
backdrop-filter:为元素后面的区域添加模糊或者其他效果
gradient:颜色渐变函数
常见的渐变函数
liner-gradient():创建一个表示两种或多种颜色线性渐变的图片
radial-gradient():创建一个图像,该图像是由原点发出的两种或者多种颜色之间的逐步过渡组成
repeating-liner-gradient():创建一个由重复线性渐变组成的<image>
repeating-radial-gradient():创建一个重复的原点触发渐变组成的<image>
深入理解BFC
FC:Formatting Context :格式化上下文
FC全称Formatting Context:元素在标准流里面都是属于一个FC的,可能是block 可能是inline但是不会同时属于两个,
块级元素属于BFC布局
行内级元素属于IFC布局
BFC:从包含块的顶部一个一个挨着排布
垂直方向的间距由margin属性决定
在同一个BFC中,相邻的两个BOX之间的margin会折叠
在BFC中,每个元素的左边缘是紧挨着包含块的左边缘的
BFC作用二:解决高度塌陷
如果只有inline-level是行高的顶部和底部的距离
如果由block-level是由最底层的块上边缘和最底层的下边缘距离
如果由绝对定位元素,将被忽略
如果有浮动元素,那么会增加高度以包括这些浮动元素的下边缘
媒体查询
媒体查询是一种提供给开发者针对不同设备需求进行定制化的一个接口
可以根据设备的类型(比如屏幕设备,打印机设备)或者特定的特性(比如屏幕的宽度)来修改你的页面
媒体查询的使用方法主要有3种
方法一:通过@media和@import使用不同的CSS规则;
/* 可以和媒体查询结合使用 */
@import url(./css/body_bgc.css) (max-width:800px);
方法二:使用media属性为<style>,<link>,<source>和其他元素指定特定的媒体类型;
方法三:使用window.matchMedia()和MediaQueryList.addListener()方法来测试和监控媒体状态;
媒体类型(media types)
在使用媒体查询时,必须指定媒体的类型
媒体类型是可以选择的,并且隐式地应用all类型
常见媒体类型值如下:
all:适用于所有设备
print:适用于在打印浏览模式下在屏幕上查看分页材料和文档
screen:主要用于屏幕
speech:主要用于语音合成器
媒体特性
媒体特性描述了浏览器,输出设备,或者浏览环境的具体特征
通常会将媒体特性描述为一个表达式
每条媒体特性表达式都必须用括号括起来
特性: 价值 是否支持最小/最大值 描述
width 长度 是的 渲染表面的宽度
height 宽度 是的 渲染表面的高度
color 整数 是的 每个颜色分量的位数
device-aspect-ratio 整数/整数 是的 长宽比
device-width 长度 是的 输出设备的高度
device-height 长度 是的 输出设备的宽度
orientation protrait或landscape 不 屏幕方向
resolution 分辨率(dpi,dpcm,或dppx) 是的 解析度
媒体查询
逻辑运算符
表达式最终会获得一个Boolean的值,也就是true和false
如果为真就会生效
如果为假就不生效
如果有多个条件,可以通过逻辑操作符联合复杂的媒体查询
and:and操作符用于将多个媒体查询规则组合成单条媒体查询
not:not运算符用于否定媒体查询,如果不满足这个条件则返回为true,负责返回为false
only:only运算符仅在整个查询匹配时才用于应用样式
,:逗号用于将多个媒体查询合并为一个规则
CSS 常见单位详解
我们经常会用px来表示一个长度(大小) 比如font-size设置为18px width设置为100px
px时一个长度单位
整体可以分为两类
绝对长度单位:
他们于其他任何东西都没有关系,通常认为总是相同的大小
这些值大多数在用于打印时比用于屏幕输出更有用,例如我们通常不会在屏幕上使用cm
cm 厘米
mm 毫米
Q 四分之一毫米
in 英寸
pc 十二点活字
pt 点
px 像素
相对长度单位
相对单位相对其他一些东西
比如父元素的字体大小,或者视图端口大小
相对单位的好处是,经过仔细的规划,可以使文本或其他元素的大小与页面的内容相对应
em:
em:相对自己的font-size
如果自己没有设置 那么会继承父元素的font-size
如果font-size种写em单位,可以理解相对于父元素
更准确的理解依然是相对自身的
ex:
字符X的高度
ch:
数字0的宽度
rem:
根元素的字体大小
html{
font-size: 2px;
}
.box{
/* rem:相对与html的font-size
html默认的font-size是16px
*/
width: 100rem;
height: 100rem;
font-size: 20rem;
background-color: orange;
}
lh:
元素的字体大小
vw:
视窗宽度的1%
vh:
视窗高度的1%
深入理解pixel,DPR,PPI
像素分为 物理像素 和 逻辑像素
物理像素是固定的 逻辑像素是操作系统为了方便开发设置的
DPR 设备像素比
PPI 每英寸像素
CSS 预处理器Less Scss
CSS预处理器是一个通过预处理器自己独特的语法来生成CSS的程序
sass/scss
less
less增加了很多相比于CSS更好用的特性
比如定义变量,混入,嵌套,计算等等
less最终需要被编译成CSS运行于浏览器种(包括部署到服务器中)
less语法一 兼容CSS
less语法二 定义变量
less中定义变量格式:@变量名:变量值;
& 符号表示选择器名称
a.link{
color: @main-color;
font-size: @smallFontSize;
&:hover{
color: #00f;
}
}
less语法三 运算
算术运算符在加,减或比较之前会进行单位换算,计算结果以最左侧操作数的单位类型为准
如果单位换算无效或失去意义则忽略单位
less语法五 混合-映射
多个选择器可能会有大量的相同代码我们需要抽取
混合:将一组属性从一个规则集混入到另一个规则集的方法
// 混合 混合可以定义变量传参数
.nowrap_ellipsis{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.box_border(@borderwidth:5px,@bordercolor:purple){
border: @borderwidth solid @bordercolor;
}
.box1{
width: 100px;
background-color: red;
.nowrap_ellipsis();
.box_border();
}
.box2{
width: 150px;
background-color: green;
.nowrap_ellipsis();
// 混合可以传参
.box_border(10px,orange);
}
// 2.3 混入和映射结合使用
.box_size{
width: 100px;
height: 100px;
}
.box1{
// 映射
width: .box_size()[width];
background-color: red;
.nowrap_ellipsis();
.box_border();
}
.box2{
width: 150px;
background-color: green;
.nowrap_ellipsis();
// 混合可以传参
.box_border(10px,orange);
}
less语法七 继承
// 继承
.box_border{
border: 5px solid red;
}
.box{
width: 100px;
background-color: orange;
// .box_border();
&:extend(.box_border);
}
// less内置函数
// color将关键字转为rgb颜色
// convert转换
// floor向下取整
// ceil 向上取整
.box{
color: color(skyblue);
width: convert(100px,"in");
font-size: floor(18.5px);
font-size: ceil(18.5px);
background-color: orange;
}
// 作用域
// 首先在本地查找变量和混合,如果找不到则从父级作用域继承
// 显示蓝色
@mainColor:#f00;
.box{
@mainColor:#0f0;
.item{
span{
color: @mainColor;
@mainColor:#00f;
}
}
}
scss预处理器
移动端开发
移动端开发目前主要包括三类:
原生App开发:(IOS,Android,RN,uniapp,flutter等)
小程序开发(原生小程序,uniapp,Taro 等)
Web页面(移动端的Web页面,可以使用浏览器或者webview浏览)
因为目前移动端设备较多 所以我们需要对其进行适配
自适应:根据不同设备屏幕的大小来自动调整尺寸,大小;
响应式:会随着屏幕的实时变动而自动调整是一种自适应;
浏览器视口Viewport
在浏览器中,我们能看到的区域就是视口
我们说过fixed就是相对于视口来进行定位的
在pc端页面中,我们是不需要对视口进行区分,因为我们的布局视口和视觉视口是同一个
移动端
移动端的网页窗口往往很小,我们希望一个大的网页在移动端可以完整显示
所以在默认情况下,移动端的布局视口是大于视觉视口的;
移动端可以将视口分为三种情况:
布局视口
默认情况下 一个pc端的网页在移动端会如何显示
第一 他会按照宽度为980px来布局一个页面的盒子和内容
第二 为了显示可以完整的展示在页面中,对整个页面进行缩小
我们相对于980px布局的这个视口,称之为布局视口
布局视口默认的宽度是980px
视觉视口
默认情况下 我们按照980px显示内容,那么右侧有一部门区域就会无法显示,所以手机端浏览器会默认对页面进行缩放以显示到用户的可见区域中
那么显示在可见区域的这个视口就叫做视觉视口
理想视口
如果所有的网页都是按照980px在移动端布局,那么最终页面都会被缩放显示
事实上这种方式是不利于我们进行移动端的开发的,我们希望设置的100px 显示的就是100px
默认情况下布局视口并不适合我们进行布局
我们可以对布局视口进行宽度和缩放的设置以满足正常在一个移动端窗口的布局
这个时候设置meta中的viewport
width 一个正整数,或者字符串device-width 定义viewport的宽度
height 一个正整数,或者字符串device-height 定义viewport的高度
initial-scale 一个0.0和10.0之间的正数 定义设备于viewport大小之间的缩放比例
minimum-scale 一个0.0和10.0之间的正数 定义缩放的最大值,必须小于等于maximum-scale的值否则不可预测
maximum-scale 一个0.0和10.0之间的正数 定义缩放的最大值,必须大于等于minimum-scale的值否则不可预测
user-scalable yes或者no 默认为yes 如果设置为no 将无法缩放当前页面,浏览器可以忽略此规则
移动端适配vw方案
移动端屏幕的尺寸通常是非常多的,我们希望不同尺寸的屏幕上显示不同的大小
解决方案
方案一:使用百分比设置
因为不同属性的百分比值,相对的可能是不同的参照物,所以百分比往往很难统一
所以百分比在移动端适配中使用的非常少
方案二:rem单位+动态html的font-size
rem单位是相对html元素的font-size来设置的,那么如果我们需要在不同的屏幕下有不同的尺寸我们仅仅需要动态修改html的font-size尺寸
在开发过程中我们只需要考虑两个问题
问题一:针对不同的屏幕设置不同的font-size
方法一:可以通过媒体查询来设置不同尺寸范围内的屏幕html的font-size尺寸
缺点:
1.我们需要针对不同的屏幕尺寸编写大量的媒体查询
2.如果动态改变尺寸,不会实时进行更新
方法二使用js监听视口变化 实时改变font-size的大小
使用js来实时监听
<style>
html{
font-size: 16px;
}
.box{
width: 5rem;
height: 5rem;
background-color: orange;
}
p{
font-size: 0.5rem;
}
</style>
<script>
// 获取HTML的元素
const htmlEl=document.documentElement
// console.log(htmlEl)
// 将函数抽取在运用
function setRemUnit(){
// 拿到html的宽度 clientWidth--->客户端的宽度
const htmlWidth = htmlEl.clientWidth
// console.log(htmlWidth)
// 设置html的fontSize
const htmlFontSize = htmlWidth/10
// console.log(htmlFontSize)
// 将font-size设置到html上
htmlEl.style.fontSize=htmlFontSize+"px"
}
// 主动调用一次
setRemUnit()
// 设置监听器 监听窗口变化 addEventListener-->添加事件监听
window.addEventListener("resize",setRemUnit)
</script>
方法三:使用lib-flexible库直接引入
问题二:将原来的尺寸转化为rem单位
方法一:手动转换
比如有一个在375px屏幕上,100px宽度和高度的盒子
我们需要将100px转换对应的rem的值
100/37.5=2.6667
方法二:less/scss函数
.PxToRem(@px){
result: 1rem * (@px/37.5);
}
.box{
width:.PxToRem(100)[result];
height:.PxToRem(100)[result];
background-color: orange;
.PxToRem(100)
}
p{
font-size: .PxToRem(14)[result];
}
方法三:postcss-pxtorem(后续学习)
我们可以借助webpack插件自动将px换算成rem
方案四:接入VScode插件
px to rem 的插件,在编写时自动转化
方案三:vm单位
vw 相对于 rem 的优势
1.不需要去计算html的font-szie大小,也不需要给html的font-size设置数值
2.不会因为设置html的font-size大小,而必须设置一个font-size,防止继承
3.因为不依赖font-size的尺寸,所以不用担心某些原因html的font-size尺寸被篡改,页面尺寸混乱
4.vw相比rem更加的语义化,1vw刚好是1/100的viewport的大小
5.可以具备rem之前所有的优点;
劣势:vw只能相对与窗口,rem可以通过媒体查询设置最大最小font-size设置最大最小宽度
vw单位换算过程
方法一:手动计算或者使用calc()函数
/* 375设计稿 */
/* 1vw=3.75px */
.box{
width: calc(100vw / 3.75);
height: calc(100vw / 3.75);
background-color: orange;
}
p{
font-size: calc(14vw / 3.75);
}
方法二:less/scss函数计算
@vwUnit:3.75;
.pxTovw(@px){
result:(@px / @vwUnit) * 1vw
}
.box{
width: .pxTovw(100)[result];
height: .pxTovw(100)[result];
background-color: orange;
}
p{
font-size: .pxTovw(14)[result];
}
方法三:使用插件postcss-px-to-viewport-8-plugin
可以和rem一样在前端工程化开发中,我们可以借助webpack的工具来完成自动转化
方法四:使用vscode插件
px to vw 的插件在编写时自动转化
方案四:flex的弹性布局
grid布局
目前页面布局我们存在很多方式:定位,浮动,flex布局
flex布局相对于前面的布局来说更加强大 基本可以满足我们目前的所有需求
但是flex布局是一个一维布局方案
它主要布局在主轴(main axis) 上进行操作 也提供了一些交叉轴(cross axis)属性
为了进一步增强布局能力 提供了grid布局
CSS Grid Layout(又名"Grid"或"CSS Grid") 是一种基于二维布局系统
更加强大,同时也更加复杂;
grid Container
元素设置为display为grid的盒子
grid item 单元格称之为grid cell
grid container的直接子项(必须是直接子代元素)
grid line
构成网格结构的分割线
他们可以是垂直的(列网格线)或水平的(行网格线)
grid track
两条相邻的网格线之间的空间
你可以看成是网格的行或者列
grid Area
由四条网格线包围的总空间
一个网格区域可以由任意数量的网格单元组成
