css面试知识点
1.基础知识类
1.1css的层叠性
css层叠性指当为同一个属性指定多个渲染时，只会选择其中一个来作为渲染，
1.2继承性
一个元素的某个属性没有层叠值，则可能会继承某个祖先元素的值
1.2.1哪些属性可以继承？
文本属性
1.2.2line-height的继承
三种继承情况：
- 具体数值（继承具体数值）
- 比列（继承比例）
- 百分比（继承计算过的百分比）
文字垂直居中：让文字的行高等于盒子的高度
文字的行高由文字上空隙+文字高度+文字下空隙组成
当行高等于盒子高度时 文字就会被空隙挤到中间
当行高小于盒子高度时文字就会被挤到偏上的位置
1.2.3不可继承的样式属性
width height border margin padding
1.2.4不可继承的元素怎么办
可以通过添加inherit属性强制继承
1.3选择器相关知识
1.3.1常用选择器
1.3.2选择器优先级
1.3.3伪类选择器与伪元素选择器的区别？
1.3.4关于伪类LVHA的解释
1.3.5LVHA这个顺序能不能变
1.4块级元素行内元素
1.5什么是盒子模型
分为content-box(w3c标准盒模型)和border-box(IE盒模型) 它们的区别在于给盒子提前设置宽高之后 再次设置padding，border是否会再次撑开盒子的大小
content-box会被撑开 而border-box不会被撑开
1.6对line-height是如何理解的？
1.7为什么img是inline还可以设置宽高？
因为img属于替换元素 其通过src属性来获取元素的 获取过来的元素可能自带宽高属性 故可以设置宽高
1.8浮动-清除浮动-标准流-浮动布局
1.8.1传统网页布局的三种方式
标准流(即普通流/文档流)
浮动
定位
1.8.2标准流(普通流/文档流)
标准流就是元素默认的排列方式
1.8.3浮动
浮动可以使元素脱离标准流，例如使多个div盒子呈一行排列
1.8.2浮动特性
脱离标准流（即不再保留原来的位置）
使元素具有行内块的特点即可以设置宽高了
1.8.4浮动布局注意点
浮动元素要搭配标准流的盒子一起使用 标准流的父盒子排列上下位置 子盒子在内部使用浮动排列左右位置
一个元素浮动了其他的兄弟盒子也会浮动 浮动的盒子只会影响浮动盒子后面的标准流
1.8.5清除浮动
为什么需要清除浮动
在很多情况下，子盒子可能不断增加，父级不方便给高度，但是子盒子浮动又不占有位置，最后父盒子高度为0时，就会影响下面的标准流盒子
清除浮动后 父盒子会根据子盒子的自动检测高度 当子盒子增加后父盒子也会自动拓宽
清除浮动本质
清除浮动的本质就是清除浮动所带来的影响 若父盒子本身就有高度那么就不需要清除浮动(针对父盒子不方便给高度的情况)
清除浮动方法
- 额外标签法
通过在浮动元素的末尾添加一个空的标签
如果是添加一个空的盒子要求必须是块级盒子 且需要添加清除样式的属性
或者添加一个换行符
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<div class="ermao">二毛</div>
<div class="ermao">二毛</div>
<div class="ermao">二毛</div>
<div class="clear"></div> //这个就是在浮动元素末尾添加一个空的标签
<!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
<!-- <span class="clear"></span> -->
</div>
<div class="footer"></div>
- 父级添加overflow属性
直接给没有给出高度的父盒子添加一个 overflow属性
可以将属性值设置为 hidden scroll或者auto
- 父级添加after伪元素
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; //兼容IE6、7
}
- 父级添加双伪元素
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
1.9什么是定位？用处
-
为什么需要
因为定位可以做到标准流和浮动无法做到的一些事情
- 即某个元素可以自由的在一个盒子内部移动，并且可以压住其他的盒子
- 滚动窗口时，可以固定在窗口的某个位置
-
定位组成 定位 = 定位模式 + 边偏移 2.1 定位模式
position:absolute
position:relative
position:static
position:fixed
2.2边偏移
决定元素的偏移位置
top:80px
bottom:80px
left:80px
right:80px
-
静态定位 static （了解）
即没有定位 就是元素默认的位置
-
相对定位 relative （重要）
元素设置相对定位就是以自身原来的位置为参照去移动
<style> .nav1 { position: relative;//相对定位是不脱标的 top: 200px; left: 100px; /* 相对定位是是相对于之前的位置移动 */ width: 300px; height: 300px; background-color: pink; } .nav2 { width: 300px; height: 300px; background-color: red; } </style> </head> <body> <div class="nav1"></div> <div class="nav2"></div> </body> -
绝对定位 absolute （重要）
元素设置绝对定位就是以它的祖先元素或者浏览器为参照去移动的
- 当祖先元素设置的有定位的时候就是以最近一级设置定位的祖先为参照去移动
- 如果祖先元素都没有设置定位的话 那么就以浏览器为参考去移动
- 绝对定位是脱标的
-
子绝父相的由来 子级使用绝对定位，父级则需要相对定位 相对定位经常用来作为绝对定位的父级 因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位 子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到
- 固定定位 fixed （重要） 小技巧：固定版心右侧位置
- 以浏览器窗口为参照点去移动元素
- 不随滚动条的移动而移动
- 固定定位不占有原来的位置
-
粘性定位 sticky （了解）
- 以浏览器窗口为参照点去移动元素
- 占有原来的位置
-
总结
- 静态定位：不脱标 不能使用边偏移 很少用
- 相对定位：不脱标 相对自己为参照点去偏移 常用
- 绝对定位：脱标 以有定位的最近一级祖先元素为参照去偏移 常用
- 固定定位：脱标 以浏览器可视窗口为参照去移动 常用
- 粘性定位：不脱标 以浏览器可是窗口为参照去移动 现在不常用
-
定位叠放次序 z-index
使用定位的时候一个盒子可能会压住另外一个盒子
这时可以用z-index来决定叠放次序
-
定位的拓展 10.1 绝对定位的盒子居中
<style> div { width: 200px; height: 200px; background-color: pink; position: absolute;//这里是以窗口为参照去移动 left:50%//向右移动父盒子宽度一半的距离 margin-left:-100//在向左移动自身宽度的一半 top: 50%; margin-top: -100px; } </style> </head> <body> <div></div> </body>10.2 定位特殊特性
- 行内元素添加绝对定位或者是固定定位的话，脱标，并且可以直接设置宽高
- 块级元素添加绝对或者是固定定位的话，脱标，可以设置宽高，如果不给宽高默认的就是内容的大小
-
<style> div { background-color: pink; position: absolute; /* 块级元素如果不给宽高的情况下给定绝对或者是固定定位的话则默认大小是内容的大小 就是下面‘风起洛阳’的大小*/ } span { background-color: skyblue; position: absolute; /* 行内元素添加绝对或者是固定定位的话 则可以设置宽高 */ width: 200px; height: 100px; } </style> </head> <body> <div>风起洛阳</div> <br> <span>哈哈哈哈</span> </body>
10.3 脱标的盒子不会触发外边距塌陷
即绝对定位 固定定位的盒子不会引起外边距塌陷的问题
10.4 绝对定位（固定定位）会完全压住盒子
- 绝对定位和固定定位的盒子是脱标的会盖住整个盒子包括盒子里面的一些文字内容
- 浮动的盒子虽然也是脱标的，但是不会盖住整个盒子，盒子里面的内容会围绕着浮动元素
- 浮动之所以不会压住盒子的所有内容，因为浮动产生的最初目的是为了做文字环绕效果的，即文字会环绕着浮动元素布局
1.10display有哪些值？说明他们的作用。
-
display:block 块类型 给元素添加这个属性后可以设置它的宽高 换行显示
-
display:none 使元素不显示 从DOM文档流中移除
-
display:inline 行内元素类型 使元素不可设置宽高 一行显示
.div2 { display: inline;//下面设置的宽高就不起效果了 并且呈和其他的行内元素呈一行显示 width: 200px; height: 200px; background-color: hotpink; } <div class="div2">222</div>- display:inline-block 行内块元素类型 元素可以设置宽高 一行显示
1.11 负外边距
margin-top:-100px//即向上提拉100px的距离
1.12BFC
介绍
Block formatting context--块级格式化上下文
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
触发方式/哪些元素会生成BFC
-
根元素，即HTML标签
属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以把第二个p用div包起来，然后激活它使其成为一个BFC <p>看看我的 margin是多少</p> <div> <p>看看我的 margin是多少</p>// </div> -
浮动元素：float值为left或right(不是none)
-
定位元素：position为fixed或absolute的元素
-
overflow值不为visible，为auto、scroll、hidden的元素
-
display值为inline-block、table-cell、table-caption、flex、inline-flex的元素
BFC布局规则
-
内部的box会在垂直方向上一个接一个放置
-
内部的box垂直方向上的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
/* 触发BFC */ .outside { /* float: left; */ overflow: hidden; width: 300px; /* height: 200px; */ background: skyblue; /* border: 1px solid #000000; */ } .inside { /* float: left; *///如果给这里添加浮动 那么这两个子div的外边距就不会发生重叠 width: 100px; height: 100px; background: crimson; margin: 50px; } <div class="outside"> <div class="inside"> </div> <div class="inside"> </div> </div> -
每个元素的左外边距与包含块的左边界相接触，即使浮动元素也如此
-
BFC的区域不会与float的元素区域重叠
-
计算BFC高度时，浮动元素也参与计算
作用
1.阻止相邻元素margin合并（防止外边距折叠）
2.可以用来自适应两栏布局，阻止元素被浮动元素覆盖
3.可用来清除浮动带来的外边距塌陷问题（高度坍塌问题）
//当我们不给父节点设置高度是，而子节点设置浮动时，会发生高度塌陷，这个时候我们就要清除浮动
//这个时候我们根据最后一条：
//计算BFC的高度时，浮动元素也参与计算。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>清除浮动</title>
</head>
<style>
.par {
border: 5px solid rgb(91, 243, 30);
width: 300px;
overflow: hidden;//激活了BFC 清除了浮动带来的影响
}
.child {
border: 5px solid rgb(233, 250, 84);
width:100px;
height: 100px;
float: left;
}
</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
5.阻止因浏览器四舍五入造成的多列布局换行的情况
1.12什么是外边距折叠？
块的顶部外边距和底部外边距有时被组合（折叠）为单个边框，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷（合并）
毗邻的两个或多个margin会合并成一个margin，叫做外边距折叠。规则如下： 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠； 浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠； 创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠； 元素自身的margin-bottom和margin-top相邻时也会折叠；
解决方案：
- 设置padding或者border
- 触发BFC
发生外边距折叠的三种情况
1.块级父元素与其第一个/最后一个子元素
如果块级父元素中，不存在上边框、上内边距、内联元素、清除浮动这四条属性
.outside{
width:300px;
height:200px;
background: skyblue;
/* border: 1px solid #000000; *///添加了边框就不会合并
}
.inside{
width:100px;
height:100px;
background: crimson;
margin-top:50px;//引起塌陷
}
<div class="outside">
<div class="inside">
</div>
</div>
2.相邻的兄弟元素
<style>
* {
margin: 0;
}
.box1 {
width: 150px;
height: 100px;
margin-bottom: 50px;
/* border: 1px solid #000000; */
background-color: rgb(201, 239, 98);
}
.box2 {
width: 100px;
height: 100px;
/* border: 1px solid #000000; */
background-color: rebeccapurple;
margin-top: 10px;
}
</style>
<div class="box1"></div>
<div class="box2"></div>
此时两个盒子中间的距离不是60px，而是50px，取得是margin最大的那个值
3.空块元素
如果存在一个空的块级元素，border、padding、inline content、height、min-height都不存在，那么上下边距中间将没有任何阻隔，上下外边距将会合并。
<p style="margin-bottom: 0px;">这个段落的和下面段落的距离将为20px</p> <div style="margin-top: 20px; margin-bottom: 20px;"></div> <p style="margin-top: 0px;">这个段落的和上面段落的距离将为20px</p>
1.13隐藏页面中某个元素的方法
-
opacity=0
-
visibility=hidden
-
display：none
-
position移到外面去
-
z-index 图层遮盖
visibility=hidden, opacity=0, display:none区别
opacity=0 元素依然存在文档流之中但是透明度为0不改变页面的布局 绑定的事件依然会被触发
visibility=hidden,元素不可见但是依然存在，不改变页面的布局，但是不会触发绑定的事件
display:none ,元素不可见并且会改变页面的布局，即从文档流中删除了
从继承方面角度看：
display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式；opacity=0也是继承属性，子元素会继承父元素，一样也会变成透明，但是可以使用rgba()间接设定opacity这样就不会被子元素继承了(rgba的最后一个参数就是opacity)
1.14 你能实现多少种水平垂直居中的布局？
1.子元素定宽高的情况
- 绝对定位+负margin值
- 绝对定位+transform
- 绝对定位+top/bottom/left/right+margin：auto
- flex布局：父元素的justify-content和align-items都设置设置为center
2.子元素不定宽高的情况
- 绝对定位+transform:translate(-50%,-50%)
- flex布局：父元素的justify-content和align-items都设置设置为center
- flex变异布局：父元素就只设置display:flex 子元素设置margin:auto
2.css3新特性
2.1css3有哪些新特性
- 新增了各种选择器 属性选择器 结构伪类选择器 伪元素选择器
- 圆角 （border-radius:8px）
- 多列布局 （multi-columnlayout）
- 阴影和反射 （Shadow\Reflect）
- 文字特效 （text-shadow）
- 文字渲染 （Text-decoration）
- 线性渐变 （gradient）
- 旋转 （transform） 缩放，定位，倾斜，动画，多背景
- 媒体查询（@media）;
- RGBA和透明度 ; @font-face属性; 多背景图 ; 盒子大小; 语音;
- CSS3 2D转换：transform: translate()、rotate()、scale()
- CSS3 3D转换：transform: rotateX()、rotateY()
- CSS3 过渡：transition
- CSS3 动画：animation
2.2transition有哪些属性？
transition-property :指定过渡的属性值
transition-delay：指定延迟过渡时间
transition-duration：指定过渡持续时间
transition-timing-function：指定过渡动画缓动类型
div {
width: 200px;
height: 200px;
background-color: pink;
/* transition: 变化的属性 花费时间 运动曲线 何时开始; */
/* transition: width .5s ease 0s, height .5s ease 1s; */
/* 如果想要写多个属性，利用逗号进行分割 */
/* transition: width .5s, height .5s; */
/* 如果想要多个属性都变化，属性写all就可以了 */
/* transition: height .5s ease 1s; */
/* 谁做过渡，给谁加 */
transition: all 0.5s;
}
div:hover {
width: 600px;
height: 400px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
2.3新增伪类
（1）elem:nth-child(n)选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数 值，也可以接受函数。
（2）elem:nth-last-child(n)作用同上，不过是从后开始查找。
（3）elem:last-child选中最后一个子元素。
（4）elem:only-child如果elem是父元素下唯一的子元素，则选中之。
（5）elem:nth-of-type(n)选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数。
（6）elem:first-of-type选中父元素下第一个elem类型元素。
（7）elem:last-of-type选中父元素下最后一个elem类型元素。
（8）elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选中该元素。
（9）elem:empty选中不包含子元素和内容的elem类型元素。
（10）elem:target选择当前活动的elem元素。
（11）:not(elem)选择非elem元素的每个元素。
（12）:enabled 控制表单控件的禁用状态。
（13）:disabled 控制表单控件的禁用状态。
(14):checked单选框或复选框被选中。
2.6单独制作移动端页面（主流）
通常情况下。网址域名前面加m(mobile)可以打开移动端，通过判断设备(手机or电脑)，如果是移动设备打开就跳转移动端，如果是pc端打开就跳转pc端 所以我们要单独制作移动端页面
2.4移动端布局-flex布局
-
背景
flex布局即弹性布局
传统的布局解决方案是基于盒模型的，依赖display属性+position属性+float属性，它对于那些特殊的布局非常不方便，比如，垂直居中就不容易实现 2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局
传统布局主要用于pc端
flex弹性布局操作简单布局方便，移动端引用广泛，但是pc端浏览器支持情况较差 IE等低版本浏览器不支持
-
flex盒子的布局原理
当我们为父盒子设为flex布局以后，子元素的float，clear和vertical-align属性将失效
原理：* 通过给父盒子添加flex属性，来控制子盒子的位置和排列方式*
<style> div { display: flex;//用flex布局后下面的span行内元素 也可以设置宽高了 不需要再转换 width: 80%; height: 300px; background-color: pink; justify-content: space-around; } div span { /* width: 150px; */ height: 100px; background-color: purple; margin-right: 5px; flex: 1;//这里让div平均分成三等分 每个span占一份 } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body> -
flex布局的常用属性
采用flex布局的元素称为flex容器，简称‘容器’。它的所有子元素自动成为容器成员，称为flex项目，简称‘项目’
-
容器（父项）的属性 （有以下六个 是设置在容器上面的）
1.flex-direction 设置主轴的方向
flex布局中默认的是x轴为主轴水平向右 y轴为侧轴水平向下 里面的项目是默认在主轴上面排列的
.box { flex-direction: row | row-reverse | column | column-reverse; } row 默认主轴是从左到右 row-reverse 默认主轴是从右到左 column 默认主轴是从上到下 column-reverse 默认主轴是从下到上2.flex-wrap 设置子元素是否换行
默认情况下，项目都排在一条线(又称‘轴线’)上。flex布局默认的是如果主轴装不开，会缩小子元素的宽度，放到父元素里面 */
.box{ flex-wrap: nowrap | wrap | wrap-reverse; } nowrap：（默认）不换行 即通过缩小子元素依然显示一条线排列 wrap:换行，第一行在上方 wrap-reverese:换行，第一行在下面3.flex-flow 复合属性：相当于同时设置了flex-direction 和 flex-wrap
flex-flow属性是flex-direction 和 flex-wrap属性的简写形式，默认值是row nowrap
.box { flex-flow: <flex-direction> || <flex-wrap>; }4.justify-content 设置主轴上的子元素排列方式
定义了项目在主轴上面的对齐方式 但是使用这个属性之前一定要确定好主轴是哪个
.box { justify-content: flex-start | flex-end | center | space-between | space-around; } flex-start:默认值 从头部开始 如果主轴是x轴则从左到右排列 flex-end:从尾部开始 如果主轴是y轴则从下到上排列 center：在主轴居中对齐(如果主轴是x轴则水平居中) space-around:平分剩余空间 space-between:先两边贴边 再平分剩余空间(重要)5.align-items 设置侧轴上的子元素排列方式（单行）
该属性是控制子项在侧轴上面的排列方式，在子项为单项的时候使用
这里我们假设x轴为主轴 那么y轴就是侧轴 下面是控制侧轴上面的排列方式
.box { align-items: flex-start | flex-end | center | baseline | stretch; } flex-start：元素在侧轴y轴是从上到下的排列方式 flex-end：元素在侧轴y轴是从下到上的排列方式 center：挤在一起居中(垂直居中) baseline:项目的第一行文字的基线对齐。 stretch:(默认值)拉伸6.align-content 设置侧轴上的子元素的排列方式(多行)
align-content只能用于子项出现换行的情况，在单行是没有效果的，搭配flex-wrap：wrap
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } -
项目（子项）的属性 （有以下六个 是设置在项目上面的）
-
order
order属性定义子项的排列顺序
-
flex-grow
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
如果所有项目的
flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。 -
flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。如果所有项目的
flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。
-
flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟
width或height属性一样的值（比如350px），则项目将占据固定空间。 -
flex
flex属性定义子项目分配剩余空间，用flex来表示子项目占的份数
flex不写的话是默认不分配剩余空间
flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。 -
align-self
控制子项在自己的侧轴的排列方式，这个属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
div { display: flex; width: 80%; height: 300px; background-color: pink; /* 让三个子盒子沿着侧轴底侧对齐 */ align-items: flex-end; /* 我们想只让3号盒子下来底侧 */ } div span { width: 150px; height: 100px; background-color: purple; margin-right: 5px; } div span:nth-child(2) { /* 默认是0 -1比0小所以在前面 */ /* order: -1; */ } div span:nth-child(3) { align-self: flex-start; } <div> <span>1</span> <span>2</span> <span>3</span> </div>
-
-
2.5网格布局grid
介绍
网格布局（Grid）是强大的CSS布局方案
它将网页划分成一个个的网格，可以任意组合不同的网格，做出各种各样的布局。以前只能通过复杂的CSS框架达到的效果，现在浏览器内置了
Grid布局和Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是它们也存在重大的区别
概念
1.容器和项目
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
上面代码中，最外层的<div>元素就是容器，内层的三个<div>元素就是项目。
注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的<p>元素就不是项目。Grid 布局只对项目生效。
2.单元格
行和列的交叉区域，称为"单元格"（cell）。
正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。
容器属性
Grid 布局的属性分成两类。一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。这部分先介绍容器属性。
1.
display 属性
2.
grid-template-columns 属性，
grid-template-rows 属性
3.
grid-row-gap 属性，
grid-column-gap 属性，
grid-gap 属性
4.
grid-template-areas 属性
5.
grid-auto-flow 属性
6.
justify-items 属性，
align-items 属性，
place-items 属性
7.
justify-content 属性，
align-content 属性，
place-content 属性
8.
grid-auto-columns 属性，
grid-auto-rows 属性
9.
grid-template 属性，
grid 属性
项目属性
4.1
grid-column-start 属性，
grid-column-end 属性，
grid-row-start 属性，
grid-row-end 属性
4.2
grid-column 属性，
grid-row 属性
4.3
grid-area 属性
4.4
justify-self 属性，
align-self 属性，
place-self 属性
2. 行和列
容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
2.6grid布局和flex布局的区别
Flex是轴线布局，只能指定‘项目’针对轴线的位置，可以看作是一维布局。Grid布局则是将容器划分成‘行’和‘列’，产生单元格，然后指定项目所在的单元格，可以看作是二维布局。Grid布局比Flex布局要强大
2.7rem适配布局
em与rem
px 绝对长度单位 最常用
em 相对长度单位 相对于父元素的字体大小来说的 不常用
rem 相对长度单位 相对于html根元素字体大小来说的 常用于响应式布局
html {
font-size: 12px;//1rem = 12px
}
div {
font-size: 20px;//1em = 20px
width: 15rem;
height: 15rem;
background-color: purple;
}
p {
/* 1. em相对于父元素div 的字体大小来说的 */
/* width: 10em;
height: 10em; */
/* 2. rem 相对于 html元素 字体大小来说的 */
width: 10rem;
height: 10rem;
background-color: pink;
/* 3.rem的优点就是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制 */
}
<body>
<div>
<p></p>
</div>
</body>
rem的优点是可以通过修改html里面的文字大小来改变页面中元素的大小 可以整体控制
媒体查询
媒体查询可以根据不同的屏幕尺寸设置不同的样式
<style>
/* max-width 小于等于800 */
/* 媒体查询可以根据不同的屏幕尺寸在改变不同的样式 */
@media screen and (max-width: 800px) {
/* 这句话的意思就是： 在我们屏幕上并且屏幕的最大的宽度是800像素 在这种情况下设置我们想要的样式 */
body {
background-color: pink;
}
}
@media screen and (max-width: 500px) {
body {
background-color: purple;
}
}
</style>
//屏幕小于等于500px时背景色为紫色 大于500px小于等于800px时背景色为粉色 超过800像素就没有样式了
媒体查询配合rem布局
不同的屏幕尺寸下显示不同的元素大小
<style>
* {
margin: 0;
padding: 0;
}
/* html {
font-size: 100px;
} */
/* 按照屏幕尺寸从小到大的顺序书写不然会不起效果 */
@media screen and (min-width: 320px) {
html {
font-size: 50px;//根据不同的屏幕尺寸设置不同的根元素下的字体大小 从而改变1rem的值
}
.top {
background-color: pink;
}
}
@media screen and (min-width: 640px) {
html {
font-size: 100px;
}
.top {
background-color: blue;
}
}
.top {
height: 1rem;
font-size: .5rem;
color: black;
text-align: center;
line-height: 1rem;
}
</style>
</head>
<body>
<div class="top">购物车</div>
</body>
less基础
为什么学习less？-为了维护css的弊端
- css是一门非程序性语言，没有变量，函数，SCOPE(作用域)
- css需要书写大量看似没有逻辑的代码，css冗余度是比较高的 不方便维护扩展和复用
- css没有很好的计算能力
less是一门css扩展语言，也成为css预处理器。作为css的一种形式的扩展，它并没有减少css的功能，而是在现有的css语法上，为css加入程序式语法的特性
他在css的基础上引入了变量，Mixin(混入)，运算以及函数等功能，大大简化了css的编写，并且降低了维护成本，就像它的名字那样less 更少的代码做更多的事情
常见的CSS预处理器：Sass,less,Stylus
less文件html不能直接使用 我们需要通过easy less插件把less转换为css文件再引入到html中
//less的使用 下面是一个.less的文件里面的内容
// 定义一个粉色的变量
@color: pink;
// 错误的变量名 @1color @color~@#数字不能写前面
// 变量名区分大小写 @color 和 @Color 是两个不同的变量
// 定义了一个 字体为14像素的变量
@font14: 14px;
body {
background-color: @color;
}
div {
color: @color;
font-size: @font14;
}
a {
font-size: @font14;
}
//less的运算 下面是一个.less的文件里面的内容
@baseFont: 50px;
html {
font-size: @baseFont;
}
@border: 5px + 5;
div {
width: 200px - 50;
height: (200px + 50px) * 2;
border: @border solid red;
background-color: #666 - #222;
}
img {
width: (82rem / @baseFont);
height: (82rem / @baseFont);//以rem单位为准
// 用除法时必须加上小括号
}
// 1. 我们运算符的左右两侧必须敲一个空格隔开
// 2. 两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准
// 3. 两个数参与运算，如果2个数都有单位，而且不一样的单位 最后的结果以第一个单位为准
<style>
/* .header {}
.header a {} */
</style>
<link rel="stylesheet" href="nest.less">//这里是一个html文件引入下面的less文件抓换为css的文件
</head>
<body>
<div class="header">
<a href="#">文字</a>
</div>
<div class="nav">
<div class="logo">传智播客</div>
</div>
</body>
//less嵌套
.header {
width: 200px;
height: 200px;
background-color: pink;
// 1. less嵌套 子元素的样式直接写到父元素里面就好了
a {
color: red;
// 2. 如果有伪类、交集选择器、 伪元素选择器 我们内层选择器的前面需要加&
&:hover {
color: blue;
}
}
}
.nav {
.logo {
color: green;
}
&::before {
content: "";
}
}
rem适配方案
我们先学了rem其可以根据html文字大小来改变页面的文字大小
然后学了媒体查询 可以根据不同的屏幕大小 设置不同的样式
又学了less 可以方便我们进行变量换算 比如rem计算
这三者一起就形成了rem适配方案
1.适配目标：让一些不能等比自适应的元素，达到设备尺寸发生改变的时候，等比例适配改变后的当前设备
2.怎么做：使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配
适配方案技术1
less+媒体查询+rem
适配方案技术2(推荐)
flexible.js+rem
2.8流式布局(百分比布局)
流式布局就是百分比布局
通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充
流式布局方式是移动web开发使用的比较常见的布局方式
<style>
*{
margin: 0;
padding: 0;
}
section {
width: 100%;
max-width: 980px;
min-width: 320px;
margin: 0 auto;
}
section div {
float:left;
width: 50%;
height: 200px;
}
section div:nth-child(1) {
background-color: pink;
}
section div:nth-child(2) {
background-color: red;
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
max-width: 980px; 调整窗口时section显示的最大宽度 min-width: 320px; 调整窗口时section显示的最小宽度
2.7响应式页面兼容移动端
原理
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的
让pc端(大屏幕设备)和移动端如手机(超小屏幕设备)，平板(小屏幕设备)以及桌面显示器(中等屏幕设备)共用一个页面
响应式布局容器
响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，在改变里面子元素的排列方式和大小，不同屏幕下，看到不同的页面布局和样式变化
Bootstrap前端开发框架
Bootstrap是流行的HTML，CSS和JS框架，用于开发响应式布局，移动设备优先的WEB项目
使用四部曲：
1.创建文件夹结构 下载官网里面的Bootstrap文件(css fonts js)
2.创建html骨架结构
3.引入相关样式文件
4.书写内容
2.9box-sizing常用的属性有哪些？分别有什么作用？
box-sizing:content-box//默认的标准盒模型(W3C盒模型)
box-sizing:border-box//怪异盒模型（IE盒模型）
box-sizing:inherit-box//继承父元素box-sizing属性的值
2.10 rgba()和opacity的透明效果有什么不同？
opacity()作用于元素以及元素内的所有内容（包括文字）的透明度
rgba()只作用于元素自己本身的颜色或其背景色，子元素不会继承透明效果
2.10 视口与vm、vh
rem的弊端：“阶梯”性
网页视口尺寸
window.screen.height // 屏幕高度
window.innerHeight // 网页视口高度 （浏览器可视区域）
document.body.clientHeight // body 高度
复制代码
vm相对于视口宽度的 1%vh相对于视口高度的 1%
视口（Viewport）= 浏览器窗口的尺寸。如果视口为 50 厘米宽，则 1vw = 0.5 厘米。
3.实际应用类
3.1如何让盒子水平居中
3.2用纯css创建一个三角形的原理？
3.3一个满屏品字布局如何设计？
3.4css多列等高如何实现
3.5三种文档流
普通流
定位流
浮动流
3.6页面布局方式
流式布局vs响应式布局
自适应布局vs响应式布局
3.7css预处理器/后处理器是什么？为什么要使用他们？
3.8link与@import的区别？
3.9css sprites是什么？如何使用？
3.10style标签写在body后与body之前有什么区别
3.11圣杯布局
3.12双飞翼布局
4.一些相关问题
简单介绍使用图片 base64 编码的优点和缺点。
png、jpg、 jpeg、 bmp、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
px % em rem vw/vh 有什么区别
px是基本单位即绝对单位（其他的单位都是相对单位）
%是相对于父元素宽度的单位（例如实现盒子垂直居中时移动父元素宽高的一半 再移动自己的一半）
em是相对于当前节点的font-size
rem是相对于根节点的font-size
vw屏幕宽度的1% vh屏幕高度的1% vmin两者的最小值 vmax两者的最大值
offsetHeight，scrollHeight，clientHeight三者的区别
offsetHeight offsetWidth:border+padding+content
clientHeight clientWidth:padding+content
scrollHeight scrollWidth:padding+实际内容
HTMLCollection和NodeList有什么区别
Node和Element
- DOM是一颗树，所有节点都是Node
- Node是Element的基类
- Element是其他HTML元素的基类，如HTMLDivElement
HTMLCollection：是Element的集合
NodeList：是Node集合
重点：
Node和Element的返回结果是不一样的
如elem.childNodes和elem.children不一样
HTMLCollection和NodeList都不是数组而是类数组
