css相关知识点
1、盒子水平垂直居中的方案
2、盒模型
3、经典布局-圣杯布局
4、经典布局-双飞翼布局
5、使用css，让元素div消失在视野中
6、z-index的工作原理及适用范围
7、css 移动端自适应一个正方形
8、如何做到rem自适应
9、positon都有哪些属性？
10、如何清除浮动
11、什么是BFC 、哪些地方用到了BFC
1、盒子水平垂直居中的方案
这种需求在我项目中是非常常见的，刚开始的话我只用的xxxx，然后后期随着新技术xx的兴起，参考了一些资料，我开始用xxxx，虽然兼容性一般但确实也是一种很好的处理方式。
先写下基本的样式和页面
<style>
html,body{
height: 100%;
overflow: hidden;
}
.box{
box-sizing: border-box;
width: 100px;
height: 50px;
line-height: 48px;
text-align: center;
font-size: 16px;
border: 1px solid lightblue;
background: lightcyan;
}
style>
<body>
<div class="box">
查看
div>
body>
1、定位
<style>
body{
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -50px;
}
style>
top left 为50% 是box左上角相对父元素 所以要往上和左移动盒子一半的位置才是相对居中，也就是为什么要写margin处理
缺点：这种方式的限制是 必须知道元素的具体宽高才行
2、定位
<style>
body{
position: relative;
}
.box{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
style>
这种方式只是不需要考虑宽高，不需要用margin来取中计算，但是一定要有宽高才行，没有任意一方定位后盒子相对父元素都是100%
3、定位
<style>
body{
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
style>
css3的transform实现 ,这种方式不需要考虑元素的宽高，缺点就是兼容性问题
4、flex
<style>
body{
display: flex;
justify-content: center;
align-items: center;
}
style>
css3 flex 让子元素水平轴和垂直轴方面居中，无需考虑子元素的宽高 缺点就是兼容性问题
5、display:table-cell 不常用
<style>
body{
display: table-cell;
vertical-align: middle;
text-align: center;
background: lightcoral;
width:500px;
height: 500px;
}
.box{
display: inline-block;
}
style>
本身是控制文本的居中 要是盒子的话 可以设置为inline / inline-block
缺点很明显 需要父元素有固定宽高 需要子元素为行内/行内块 但子元素可以不设置宽高
2、盒模型
标准盒模型
box-sizing:content-box 这就是标准盒模型
盒子大小：content+padding+border
我们设置的width、height是content，要是添加了padding和border的话 需要重新定义content的值，保证盒子的大小是始终不变的，这种方式较为麻烦。
ie（怪异）盒模型
后来css3中给我们提供了一个新的值 box-sizing:border-box 这也是我们所谓的ie(怪异)盒模型
盒子大小：content（包括 content+padding+border）
这种盒模型有种好处就是 我们写的width和height 是盒子的大小 并不单纯是content的大小 ，
content=content+padding+border ,所以说不管怎么调padding和border 它会自己通过缩放内容来使盒子的大小始终是不变的
现在包括 各大ui组件 boostrap element-ui的源码里面 公共样式大部分都是默认采用border-box的
3、经典布局-圣杯布局
圣杯布局、双飞翼布局 ===》左右固定，中间自适应 也都是通过 浮动+负margin
<style>
html,body{
height: 100%;
overflow: hidden;
}
.container{
height: 100%;
padding: 0 200px; 给左右留出空间
}
.left,.right{
width: 200px;
min-height: 200px;
background: lightblue;
}
.center{
width: 100%;
min-height: 400px;
background: lightcoral;
}
.left,.right,.center{
float: left;
}
.left{
margin-left: -100%;
position: relative;
left: -200px;
}
.right{
margin-right: -200px;
}
style>
<div class="container clearfix">
<div class="center">div>
<div class="left">div>
<div class="right">div>
div>
4、经典布局–双飞翼布局
圣杯布局、双飞翼布局 ===》左右固定，中间自适应 也都是通过 浮动+负margin
<style>
html,body{
height: 100%;
overflow: hidden;
}
.left,.right,.container{
float: left;
}
.container{
width: 100%;
}
.left,.right{
width: 200px;
min-height: 200px;
background: lightblue;
}
.container .center{
margin: 0 200px;
min-height: 400px;
background: lightgreen
}
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}
style>
<body class="clearfix">
<div class="container">
<div class="center">div>
div>
<div class="left">div>
<div class="right">div>
body>
5、使用css，让元素div消失在视野中
- position:absolute/relative/fixed + 方位 top/bottom/left/right: -9999px
- display:none
- visibility:hidden
- width:0 + overflow:hidden
height:0 + overflow:hidden - margin-top/bottom/left/right:-9999px;
- background-color:transparent
- opacity:0
- transform: translateX(-9999px)/translateY(-9999px)/translate(-9999px,-9999px)
- transform: scale(0)
6、z-index的工作原理及适用范围
- z-index这个属性控制着元素在z轴上的表现形式。
- 适用范围:仅适用于定位元素，即拥有relative,absolute,fixed属性的position元素。
- 堆叠顺序是当前元素位于z轴上的值，数值越大说明元素的堆叠1顺序越高，越靠近屏幕。
- 未定义时，后来居上，未定义z-index的属性，元素的堆叠顺序基于它所在的文档树。默认情况下，后来的元素的z-index的值越大。
7、css 移动端自适应一个正方形
1、padding
在 CSS 盒模型中，一个比较容易被忽略的就是 margin, padding 的百分比数值计算。按照规定，margin, padding 的百分比数值是相对 父元素 的宽度计算的。由此可以发现只需将元素垂直方向的一个 padding 值设定为与 width 相同的百分比就可以制作出自适应正方形了
.reat {
background-color: lightgreen;
width: 20%;
height: 0; 高度等于0 即使有内容也不会撑开
padding-bottom: 20%;
}
"reat">
但要注意，仅仅设置padding-bottom是不够的，若向容器添加内容，内容会占据一定高度，为了解决这个问题，需要设置height: 0。
优点：简洁明了，且兼容性好。
缺点：会导致在元素上设置的max-width属性失效（max-height不收缩）。
2、vw
vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）。1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。
.reat{
width: 20vw;
height: 20vw;
background-color: lightgreen;
}
height不能设置成vh，移动端是长方形的 20vw != 20vh，宽高都设置成vw就好了
优点：简洁方便。
缺点：浏览器兼容不好。
3、利用伪元素的 margin(padding)-top 撑开容器
伪类都是相对父元素的宽高的 本身margin/padding的百分比就是相对父元素的宽度计算的， 所以设置100% 就是跟父元素的宽度是一样的 都是相对于页面50% 就是一个正方形了
<style>
#squarre{
width:500px;
background:lightblue;
}
#squarre:after{
content:'';
display: block;
padding-top: 100%;
}
style>
<div id="squarre">div>
如果使用margin来实现的话 需要出发父元素的BFC:设置overflow:hidden。 ，因为会出现垂直方向上方的边距合并问题
<style>
#squarre{
width:500px;
background:lightblue;
overflow:hidden;
}
#squarre:after{
content:'';
display: block;
margin-top: 100%;
}
style>
<div id="squarre">div>
4、利用rem布局
动态设置根元素的font-size，然后利用rem对元素的width、height进行布局
总结:
- vw和vh相对于视口的单位，1vw就相当于1%视口的宽度
- margin、padding的百分比计算是相对于父元素的宽度、宽度、宽度！
- 伪类继承于实现伪类的本身元素，就相当于伪类的父元素
8、如何做到rem自适应
em相对与父元素 1em就是父元素的fontsize大小
rem 相对于根元素的大小 1rem = 16px ， 动态设置根元素fontsize就可以达到rem动态自适应
如果想要不管屏幕大小 始终保持 1rem = 100px，那么就是让根元素fontsize始终是100px，如果设计图是750px，手机调试是375px，那么我们需要保持在750px下为100px，在375px的时候就应该是一半50px
得出：font-size:（页面宽度/设计图宽度）* 100 ==> (375/750)*100 = 50px
如果手机是750px，那么 (750/750)*100 = 100px;
initSize();
function initSize(setwidth){
var win = document.body.offsetWidth;
var rem = (win * 100) / 750;
document.documentElement.style.fontSize = rem+'px';
}
window.onresize = initSize
9、positon都有哪些属性？
- static 默认值 - - - 不脱离文档流，top，right，bottom，left等属性不生效。（可以快速取消定位 让top，right，bottom，left等无效）
- relative 相对定位- - - 不脱离文档流，左右 margin为auto仍然有效，元素偏移前位置
- absolute 绝对定位 - - - 脱离文档流,左右margin为auto将会失效
- fixed 固定定位 - - - 脱离文档流
- sticky 粘性定位 - - - 相当于relative和fixed的结合，它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
- 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
- 父元素的高度不能低于sticky元素的高度
- sticky元素仅在其父元素内生效 ，滚动超过父元素就会变成relative
- inherit - - - 规定应该从父元素继承 position 属性的值。
- initial - - - 设置positon的值为默认值(static) ,有了static为什么还会存在此属性，不是多此一举？,initial 关键字可用于任何 HTML 元素上的任何 CSS 属性，不是postion特有的
- unset设置positon的值为不设置
- 如果该属性的默认属性是 继承属性(例如字体相关的默认属性基本都是继承)，该值等同于 inherit
- 如果该属性的默认属性 不是继承属性(例如pisition的默认属性为static)，该值等同于 initial
10、如何清除浮动
clear:both
<style>
.clearfix:after{
/*START 真正起到清除浮动的代码*/
content: '';
display: block;
clear: both;
/*END 真正起到清除浮动的代码*/
height:0;
}
.clearfix{display: inline-block;} /* for IE/Mac */
style>
<div class="clearfix">
<div style="float: left;">clear:both ;son divdiv>
div>
父元素 overflow:hidden
必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。
不能和position配合使用，因为超出的尺寸的会被隐藏。
父元素固定height
只适合高度固定的布局，要给出精确的高度，其实没有清除浮动，只是让浮动不影响到其他元素。
11、什么是BFC 、哪些地方用到了BFC
BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响
可以通过一些条件触发BFC，从而实现布局上的需求或解决一些问题
BFC的触发条件
1、根元素（）
2、float值非none
3、overflow值非visible
4、display值为inline-block、table-cell、table-caption、flex、inline-flex
5、position值为absolute、fixed
BFC的特性
1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
2、计算BFC高度时浮动元素也参于计算（重点）
3、BFC的区域不会与浮动容器发生重叠（重点）
4、BFC内的容器在垂直方向依次排列
5、元素的margin-left与其包含块的border-left相接触
6、BFC是独立容器，容器内部元素不会影响容器外部元素
属于同一个BFC的两个相邻容器的上下margin会重叠
<style type="text/css">
.top {
width: 200px;
height: 200px;
background: red;
margin-bottom: 40px;
}
.bottom {
width: 200px;
height: 200px;
background: blue;
margin-top: 60px;
}
style>
<div class="top">div>
<div class="bottom">div>
上面的情况，top、bottom元素的间隔不是100px，而是60px，两个元素的外边距重叠并且取了较大的值。
原因：
此时红色块和蓝色块属于同一个BFC，即根元素（）。BFC的特性1规定 “属于同一个BFC的两个相邻容器的上下margin会重叠”，故两者上下边距发生重叠。
解决：
可以设置任意一方为 display: inline-block;，让任意一方触发BFC，那么彼此就不处于同一个BFC了，彼此之前布局相互不影响。
计算BFC高度时浮动元素也参于计算
<style>
.outside {
border: 10px solid blue;
}
.inside {
width: 200px;
height: 200px;
background: yellowgreen;
float: left;
}
style>
<div class="outside">
<div class="inside">div>
div>
当父元素.outside没有设置高度且子元素.inside都浮动时，父元素.outside会出现高度塌陷。
原因：
子元素.inside设置浮动后脱离文档流，而父元素.outside又没有设置高度，故父元素.outside会出现高度塌陷。
解决:
父元素设置 overflow: hidden;,使得父元素.outside触发了BFC（见BFC触发条件3），而BFC特性规定“计算BFC高度时浮动元素也参于计算”，此时子元素.inside虽然设置了浮动，但其高度仍计算至父元素内，从而解决了高度塌陷问题。
BFC的区域不会与浮动容器发生重叠
<style type="text/css">
.left{
width: 100px;
height: 200px;
background: yellowgreen;
float: left;
}
.right{
height: 300px;
background: blue;
}
style>
<div class="left">div>
<div class="right">div>
正常情况下，左侧元素.left浮动时，会与右侧元素.right发生重叠，不能实现自适应两栏效果。
原因：
左侧元素浮动，脱离文档流。
.right{
height: 300px;
background: blue;
overflow: hidden;
}
解决
给右侧元素.right添加声明overflow: hidden;，左右侧元素重叠消失，实现自适应两栏效果。使得右侧元素触发了BFC（见BFC触发条件3），而BFC特性规定“BFC的区域不会与浮动容器发生重叠”，从而解决了重叠问题，实现自适应两栏效果。
BFC功能总结
1、可以利用BFC解决两个相邻元素的上下margin重叠问题；
2、可以利用BFC解决高度塌陷问题；
3、可以利用BFC实现多栏布局（两栏、三栏、圣杯、双飞翼等）。