总结一下这四天学到的CSS相关知识
- 层叠样式表指的是样式层叠、选择器层叠、文件层叠。目前CSS使用最广泛的版本是CSS2.1，它在2004-2011年之间，持续更新。
normal flow 文档流
- 文档流指的是文档中元素的流动方向：三种不同元素的区别为
- inline元素从左到右排列，到达最右边才会换行
- block元素从上到下排列，每一个都会另起一行
- inline-block也是从做到右
- inline宽度为内部inline元素的和，不接受指定width宽度
- block默认自动计算宽度，可以用width指定
- inline-block结合前两者特点，可以指定width
- inline高度由行高line-height间接确定，跟height无关
- block高度由内部文档流元素决定，可以设置height
- inline-block跟block类似，可以设置height
overflow(溢出)
- overflow属性可以控制是否显示滚动条
- 它有五个属性：
- visible（默认），表示溢出就溢出
- hidden（裁切），表示将溢出的部分裁切掉，不显示
- scroll（滚动条），表示内容会被修剪，但是浏览器会显示滚动条（一直显示）以便查看其余的内容
- auto，表示如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
- inherit，表示从父元素继承overflow的值
- overflow: hidden;可以搭配实现溢出的文字显示省略号
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
- overflow可以分为overflow-x和overflow-y
盒模型
- 盒模型分为两种，border-box和content-box。两者的区别是content-box的宽度只包含内容content，border-box的宽度包含border、padding、和content。
float布局
- 子元素上加float:left;(float: right;)和width
- 清除浮动带来的影响
.clearFix::after {
content: "";
display: block;
clear: both;
}
flex布局常用属性
- display: flex;或 display: inline-flex;
- container容器属性：
- 设置主轴：flex-direction: row; 或flex-direction: column;
- 主轴上的元素是否换行：flex-wrap: warp; | nowarp;
- 主轴上的元素对齐方式：justify-content: flex-start; | center; | flex-end; | space-between; | space-around; | space-eveny;
- 次轴对齐方式：align-items: flex-start; | center; | flex-end; | stretch;
- 多行内容： align-content: flex-start; | center; | flex-end; | stretch; | space-between; | space-around;
- items属性：
- items顺序： order: n; n越大，越往后
- items空间分配： flex-grow: n; n代表item占几份。flex-shrink：n; 当空间不够（items需要缩放）时，n越大，缩放的越快。缩写：flex：grow shrink 宽度;（缩写必须要有宽度）
- 单个item的次轴对齐方式：align-self：flex-start | center | flex-end;
grid布局常用属性
- display: grid; | display: inline-grid;
-
.container {
display: grid;
grid-template-columns: 100px 100px auto;
grid-template-rows: 100px 100px auto;
}
-
.items {
grid-row-start: 1;
grid-row-end: 4;
grid-column-start: 1;
grid-column-end: 4;
}
可以使用缩写写法：
.items {
grid-row: 1 / 4;
grid-column: 1 / 4;
}
- container可以不使用具体宽高分割，而使用单位 fr ,1fr意思占一份。
- gird-template-areas属性可以快速定义分割布局
.container {
grid-template-areas:
"header header header"
"aside main ad"
"footer footer footer";
}
header {
grid-area: header;
}
aside {
grid-area: aside;
}
main {
grid-area: main;
}
.ad {
grid-area: ad;
}
footer {
grid-area: footer;
}
- items也可以直接安装网格线划分布局，省去容器的grid-template-areas属性
.items {
grid-area: 1 / 1 / 4 / 4;
}
顺序：grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end
.container {
grid-gap: 10px;
或者单独设置：
grid-column-gap: 10px;
grid-row-gap: 10px;
}
定位position
- static 默认值
- relative 相对定位，相对于自身原来的位置
- absolute 绝对定位，相对于最近的拥有定位属性的父元素
- fixed 固定定位，相对于浏览器的视口
- sticky 粘性定位
- 所谓层叠上下文就是，创建一个封闭的区域(作用域),在这个区域里的z-index和外界无关，处在同一个封闭区域里的z-index才能比较。
- 常见的产生层叠上下文的属性有：z-index(不为auto)、flex(不为auto)、opacity(小于1)、transform(不为none)、html
浏览器的渲染原理
- 根据HTML构建HTML树(DOM)
- 根据CSS构建CSS树(CSSOM)
- 将两棵树合并为一个渲染树(render tree)
- layout布局(文档流、盒模型、计算大小和位置)
- paint绘制(把边框颜色、文字颜色、阴影等画出来)
- composite合成(根据层叠关系展示画面)
CSS 动画的两种做法（transition 和 animation）
- 跳动的红心transition实现
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
display: inline-block;
margin: 200px;
transition: all 1s;
}
.container:hover {
transform: scale(2);
}
.container div {
position: absolute;
width: 88px;
height: 88px;
background-color: red;
}
.bottom {
width: 88px;
height: 88px;
transform: rotate(45deg);
border-radius: 0 0 6px 0;
background-color: red;
}
.left {
bottom: 100%;
right: 100%;
transform: rotate(45deg) translateX(75px);
border-radius: 50% 0 0 50%;
}
.right {
bottom: 100%;
left: 100%;
transform: rotate(45deg) translateY(75px);
border-radius: 50% 50% 0 0;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<section class="bottom"></section>
</div>
</body>
- 跳动的红心animation实现
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
display: inline-block;
margin: 200px;
animation: heart 1s infinite alternate;
}
@keyframes heart {
0% {
transform: none;
}
100% {
transform: scale(1.4);
}
}
.container div {
position: absolute;
width: 88px;
height: 88px;
background-color: red;
}
.bottom {
width: 88px;
height: 88px;
transform: rotate(45deg);
border-radius: 0 0 6px 0;
background-color: red;
}
.left {
bottom: 100%;
right: 100%;
transform: rotate(45deg) translateX(75px);
border-radius: 50% 0 0 50%;
}
.right {
bottom: 100%;
left: 100%;
transform: rotate(45deg) translateY(75px);
border-radius: 50% 50% 0 0;
}
</style>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<section class="bottom"></section>
</div>
</body>
