CSS 布局-垂直居中-盒模型

CSS知识点总结

文档流

文档流是元素中文档流向，从上往下分成一行行的，块级元素从上至下、行内元素在每行中从左到右依次排放。

• 块元素（block）独占一行，设置宽高生效，margin和padding的上下左右均对其有效
  • 常见块元素div、p、h1
• 行内元素不独占一行,设置宽高不生效,margin上下无效
  • 常见行内元素span，img是行内元素，但具有行内块的属性,可以自由设置宽高。

div和p的使用场景

• 一般来说块级元素可以包含行内元素和块级元素，但是h1~h6、p 内部只能包含行内元素，不能包含块级元素
• 语义上，div表示一个容器，p是表示段落(两行之前默认有间隔)

CSS盒模型是什么

把每个元素看成一个盒子，一个盒子由content+padding+border+padding+margin组成。

CSS盒模型分为2种

• 标准盒模型: width、height只包含内容的content
• IE盒模型: width、height 包含content + padding + border

/*标准盒模型*/
box-sizing: content-box 
/*IE盒模型*/
box-sizing:border-box
box-sizing:padding-box  /*width/height设置的是  padding+content*/

水平方向布局 -过渡约束

前提:元素在其父元素中水平方向的位置
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度
以上等式必须满足，如果等式不成立，称为过渡约束，等式会自动调整

1. 如果没有auto，自动调整margin-right,所以一般margin-right设置没有用
2. width(默认是auto)，如果宽度为auto，优先调整宽度
3. 如果两个外边距设置auto，宽度固定，则会将外边距设置为相同的值。可以利用这个特点实现一个元素在其父元素水平居中。

垂直方向布局问题 -外边距重叠

说明: 默认情况下父元素的高度会被内容撑开
overflow:设置父元素如何处理溢出的子元素,该属性设置在父元素上

overflow:visible 默认值,溢出可见
overflow:hidden 溢出内容将会裁剪不会显示
overflow:scroll 生成两个滚动条，通过滚动条来查看完整的内容
overflow:auto 根据需要生成滚动条，需要n个生成n个

外边距重叠：垂直方向的相邻外边距会发生重叠

• 兄弟元素之间的相邻外边距会取两者之间绝对值的较大值，若一正一负取和。
  兄弟元素之间的外边距重叠对开发有利，不需要处理。
• 父子元素间的相邻上外边距会取两者之间的绝对值较大值，若一正一负取和。
  父子外边距重叠会影响到页面的布局，必须要进行处理

解决办法
给父元素开启BFC，会有副作用。
可以选择给父元素的开头位置开启BFC。

.box1::before{
content:"";
display:table
}
<div class="box1">
    <!-- 在这个位置隔开 -->
    <div class="box2"></div>
</div>

什么是BFC

相当于是一个独立的布局环境，容器里面的元素不会影响到外面的元素的布局。反之也如此。

规则
1.BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
2.BFC 的区域不会与浮动盒子重叠（清除浮动原理）
3.内部的 Box 会在垂直方向上一个接一个的放置，垂直方向上的距离由 margin 决定

元素开启BFC后的特点/可以解决的问题

1. 开启BFC的元素不会被浮动元素所覆盖。到浮动元素的旁边
2. 开启BFC的元素子元素和父元素外边距不会重叠。
3. 开启BFC的元素可以包含浮动的子元素，使其不会发生高度塌陷。

怎么触发BFC

• float:不为none
  副作用:会从文档中脱离
• position:absolute或者fixed
• overflow: 不为visible，一般用hidden
• display:flex， inline-block、table、table-cell、table-caption、inline-- flex、grid、inline-grid、flow-root
• HTML根元素

高度塌陷

问题描述
一般父元素的高度不会写死，父元素的高度默认被子元素撑开。当子元素浮动后，完全脱离文档流，子元素将无法撑起父元素的高度，导致父元素的高度丢失。

父元素高度丢失后，其下的元素会自动上移，影响布局。

//style
.box1{
 border:10px red solid;
}
.box2{
width:100px;
height:100px;
background-color:green;
float:left
}
//html
<div class="box1">
   <div class="box2"></div>
</div>

解决办法

1. 给父元素开启BFC
2. 清除浮动，使用after伪元素

清除浮动

清除浮动是指该元素恢复浮动元素没有浮动之前的位置

给受影响的盒子添加clear属性，clear元素的原理是设置清除浮动以后，浏览器会自动为元素添加上外边距，所以添加了clear的属性不可以手动添加margin-top。上外边距的大小 : 如果浮动元素没浮动，此元素所在的位置

clear:left //清除左侧浮动元素对当前元素的影响
clear:right //清除右侧浮动元素对当前元素的影响
clear:both //清除两侧中最大影响外边距大的的那侧

高度塌陷的最终解决方案：使用after伪元素
在父元素的后面添加一个空标签(行内元素)，清除浮动对其的影响并使其为块元素，浏览器自动改变margin-top使其可以撑开父元素。

设置块元素的原因: 行内元素【如span】的padding-top,padding-bottom,margin-top,margin-bottom（垂直方向）属性设置无效
需要一个子元素占位，清除浮动的影响，回到应该从撑起来的状态。

.box1::after{
content:"";
display:block;
clear:both;
}

clearfix 样式解决高度塌陷和外边距重叠问题
clearfix解决外边距重叠与高度塌陷的问题，谁塌陷这个类名加在谁的身上。

.clearfix::before,
.clearfix::aftee{
content:"";
display:table;
clear:both;
}

布局

position定位

当元素开启了定位以后，可以通过偏移量(top bottom left right 仅对开启定位的元素有用)来设置元素的位置。

属性值	定位基点	是否会脱离文档流	描述
static	默认值,出现在正常文档流中	×
relative	相对于该元素在文档中的原始位置进行定位	×	相对定位会提升元素的层次,会盖在别人上面
absolute	相对于距该元素最近的已定位的祖先元素	√	绝对定位的元素会提升层级 脱离文档流，元素性质发生变化，可以设置宽高，不独占一行，默认会被内容撑开(行内块元素性质)
fixed	相对于浏览器窗口(可视窗口)进行定位	√ 相对定位的一种	存在固定定位偏移问题
sticky	相对于最近的滚动元素进行定位的，如果没有可滚动元素，则表示浏览器视窗	×	当粘性元素大于偏移量时，表现的像relative，反之为fixed

z-index只对有定位属性的元素有效，用于改变元素的层级

面试题

• position 有哪几个值，说一下他们对应的基点是什么?
• absolute和relative同时设置top值效果一样吗?
• relative定位中 top和 margin-top区别
• position干什么，属性值，left是负数是什么意思
• position:relative 是相对于谁定位的
• sticky定位作用
• fixed定位的元素设置left:0; top:0;一定会在左上角吗？

绝对定位absolute

水平布局等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容的宽度

当开启了绝对定位之后的水平布局等式增加了left+right变成了
left + margin-left + border-left + padding-left + width + padding-right + border-right + margin-right + right = 包含块的宽度

1. 如果发生过渡约束(等式不满足)，等式会自动调整，宽度优先，right/left其次(优先调整right)，左右外边距平分。
2. 当我们开启绝对定位后，垂直方向也需要满足垂直方向的等式也需要满足（正常的不会）,其规则类似水平布局。

可以利用这个特性进行垂直居中布局。

//垂直居中的元素
width:xxx;
height:xxx;
position:absolute; //父相子绝,在谁中间就给谁相对定位
margin:auto
left:0;
right:0;
top:0;
bottom:0;

固定定位fixed

固定定位类似于相对定位，只是永远相对于浏览器的可视区域进行定位

固定定位偏移问题
当父级元素设置transform后，fixed元素变成了相对父元素进行定位。

问题产生的原因
对于布局受 CSS 盒模型控制的元素，拥有 transform 属性的元素，其值除 none 以外的任何值为其所有后代建立一个包含块,用于 absolute 定位后代、fixed 定位后代的包含块。

如果祖先元素拥有下列属性，会被作为 absolute 和 fixed 的包含块。

• transform/perspective 属性值不为 none
• will-change 属性值为 transform/perspective
• filter 属性值不为 none

absolute和fixed 本质都是相对于包含块定位，只不过默认情况absolute的包含块为最近的已定位的祖先元素，fixed为窗口可视区域（viewport）定位

粘滞定位sticky

两个概念

• 流盒: 粘性定位元素最近的可滚动元素的尺寸盒子，如果没有可滚动元素，则表示浏览器视窗盒子。
• 粘性约束矩形: 粘性布局元素的父级元素矩形，position:sticky的元素，活动范围只能在粘性约束矩形之间

特点

1. 当粘性元素大于偏移量时，表现的像relative，反之为fixed
2. 如果父元素的overflow属性设置了scroll，auto,hidden值，粘性定位将会失效 （父元素开启BFC？）
3. 必需添加边偏移（top、bottom、left、right）才会起效

案例
红色部分为流盒，蓝色部分粘性约束矩阵，黄色部分为粘性定位元素

<style type="text/css">
body{
    height: 2000px;
    width: 100%;
    background-color: red;
}
div {
    height: 400px;
    margin-top: 50px;
    border: solid deepskyblue;
    width: 400px;
    background-color: deepskyblue;
}
nav {
    position: sticky;
    top: 30px;
    background: yellow;
    height: 60px;
    line-height: 60px;
}
</style>

<body>
        <div>
            <nav>导航</nav>
        </div>
</body>

垂直居中布局

1. 父相子绝 子元素宽高已知

原理：利用absolute开启垂直方向的等式
等式调整顺序: 宽度优先，right/left(top/bottom)其次，最后左右外边距平分

水平居中:长度必须已知
垂直居中:高度必须已知
top和bottom需要设置为0 不然会优先调整top或者bottom
margin 设置为auto，外边距会平分
right/left设置同理

.box1{
background-color: red;
 width: 200px;
 height: 200px;
 position: relative;
}
.box2{
width:50px;
height:50px;
position: absolute;
margin:auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink;
}

2. position:absolute+transform

宽高已知未知都可以

.box1{
background-color: red;
 width: 200px;
 height: 200px;
 position: relative;
}

.box2{
/*width:50px;*/
/*height:50px;*/
position: absolute;
top:50%;
left:50%;
transform: translateX(-50%) translateY(-50%);
background-color: pink;
}

3. display:flex + margin

父元素设置dispaly:flex
子元素使用margin:auto

.box1{
background-color: red;
 width: 200px;
 height: 200px;
 display: flex;
}

.box2{
margin:auto;
background-color: pink;
}

4. display: flex + align-items: center + justify-content

宽高已知未知都可以

.box1{
     width: 400px;
     height: 400px;
     background-color: blue;
     display: flex;
     align-items: center;
     justify-content: center;
 }

.box2{
   background: pink;
}

5. display: grid + place-content

宽高已知未知都可以

.box1{
    width: 300px;
    height: 300px;
    display: grid;
    place-content: center;
    background-color: red;
}
.box2{
    background-color: pink;
}

flex布局

笔记链接

grid布局

笔记链接

---

todo

CSS动画

animation和transition

属性	描述
animation	动画的效果，有多个中间帧，可以在任意一个中间帧设置状态，不需要设置触发事件就能执行。
transition(过渡)	过渡的效果，没有中间状态，需要设置触发事件（如hover等）才能执行 是一次性的，不能重复发生，除非再次触发 一条transition规则，只能定义一个属性的变化，不能涉及多个属性。（还可以all）

transition的使用

• transition-property：设置过渡效果的属性名称（默认值是all）；
• transition-duration：设置过渡完成所需要的时间（默认值是0）；
• transition-timing-function：设置过渡速度效果曲线（默认值是ease）；
• transition-delay：设置过渡的开始时间（默认值是0）；

语法：transition: property duration timing-function delay;

div {
    height: 100px;
    transition: height 1s linear;
}

div:hover {
    height: 200px;
}

animation动画的使用
animations :用于设置动画属性,描述元素变化的过程，主要通过定义多个关键帧以及每个关键帧中元素的属性值

• animation-name：设置绑定的@keyframes名称（默认值是none）
• animation-duration: 设置完成动画所花费的时间(默认值是0)
• animation-timing-function:设置动画的速度曲线(默认值是ease)
• animation-delay:设置动画延迟几秒开始(默认值是0)
• animation-iteration-count: 设置动画播放的次数(默认值是1)
• animation-direction: 设置轮流反向播放动画(默认值是normal)
• animation-play-state:running/paused：控制元素动画的播放状态，控制动画的暂停和继续
• animation-fill-mode 控制动画结束
  语法:animation: name duration timing-function delay iteration-count direction play-state fill-mode

div {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: change 3s;
}
@keyframes change {
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}
</style>

<body>
<div></div>
</body>

css常见使用

rem单位

rem(root em)是一个相对单位，相对于html元素的字体大小
em是一个相对单位，是相对父元素的字体大小
vw/vh css新单位与视图有关，vw表示相对于视图窗口的宽度，vh表示相对于视图窗口高度（类似百分比单位占视口的百分比）

rem适配方案原理
1.使用媒体媒体查询根据不同设备设置html字体大小
2.页面元素使用rem做尺寸单位

隐藏元素的方法及区别

-	opacity:100%	visibility: hidden	display:none
是否影响布局	× 元素隐藏占据空间	× 元素隐藏会占据空间	√
性能	最好，提升为合成层，不会触发回流和重绘	导致重绘	导致页面的回流和重绘
是否可以进行DOM事件监听	√	×	×
子元素设置可见是否可见	不会	会	不会

移动端适配方案

学习笔记