文章第一句话为“这是我参与「第四届青训营 」笔记创作活动的的第2天
今天学习了css，在我个人看来这些都是很好理解的，我也另外学习并总结了一些关于css的知识。
CSS的盒子模型
- 标准盒子模型（
box-sizing：content-box）：包括margin、border、padding、content - IE盒子模型（
box-sizing：border-box）：包括margin、content(border+padding+content)content已经包括边框、内边距和内容
line-height与height的区别
height：元素的高度值，是一个固定值，盒子高度不会随文字换行而增大line-height：每一行文字的高度，如果文字换行，则整个盒子高度增大
CSS选择符有哪些？哪些CSS的属性可以实现继承？
-
CSS选择符：
- 通配符（
*） - id选择器（
#） - 类选择器（
.） - 标签选择器（
div、p、h1...） - 相邻选择器（
+）（下一个） - 后代选择器（
空格） - 子元素选择器（
>） - 属性选择器（
a[href]） - 伪类选择器（
:first、:last）
- 通配符（
-
可以继承的CSS属性：
- 文字系列：font-size、color、line-height、text-align、、、
-
不可继承的：
- border，padding、margin、、、
CSS优先级算法
-
优先级比较：!important > 内联样式 > id > class > 标签 > 通配符
-
CSS权重计算：相加
- !important：无限大
- 内联样式：1000
- id：100
- class：10
- 标签&伪元素：1
- 通配、+、>：0
用CSS样式画一个三角形
使用边框border
div{
width:0;
height:0;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-top:100px solid transparent;
border-buttom:100px solid #000000;
}
给div的宽高都为0，在给各个方向一个边框，其中三个方向的边框为透明。
一个盒子不给宽高怎么水平垂直居中
-
父元素设置弹性布局
.father{ display:flex; justify-content:center; align-items:center; } -
使用定位
div{ position：absolute; left:50%; top:50%; transform:translate(-50%.-50%); }
display有哪些值？有什么作用？
none：隐藏元素block：将元素转化为块元素inline：将元素转化为行内元素inline-block：将元素转化为行内块元素
对BFC规范的理解
BFC规范：块级格式化上下文（block formatting context）
-
BFC就是页面上一个隔离的独立容器，容器里的子元素不会影响到外边的元素。
-
BFC的原则：如果一个元素具有BFC，则内部元素不管怎样，也不会影响到外部的元素。
-
如何触发BFC：
float的值非noneoverflow的值非visibledisplay的值为：inline-block、table-cell、、、position的值为：absoute，fixed
清除浮动有哪些方式
- 触发BFC
- 多创建一个盒子，添加样式clear:both；
- 父元素：after{content:"";display:block;clear:both;}
position有哪些值？分别是根据什么定位的？
static[默认]：没有定位。fixed固定定位：相对于浏览器窗口进行定位。relative：相对自身定位，不脱离文档流；当left、right、top、bottom同时存在时，只有left、top生效。absolute：相对于第一个relative的父元素定位，脱离文档流；当left、right、top、bottom同时存在时，都会生效。
写一个左中右布局占满屏幕，其中左右两块固定200，中间自适应宽度，要求先加载中间块，请写出结构及样式。（双飞翼布局）
<div class='container'>
<div class='c'>
<div class='main'>中</div>
</div>
<div class='l'>左</div>
<div class='r'>右</div>
</div>
.container > div{
float:left;
}
.l{
margin-left:-100%;
width:200px;
height:100vh;
background-color:#f00;
}
.c{
width:100%;
height:100vh;
background-color:#0f0;
}
.r{
margin-left:-200px;
width:200px;
height:100vh;
background-color:#00f;
}
.main{
padding:0 200px;
}
什么是CSS reset？
reset.css：是一个css文件，用来重置css样式的。normalize.css：为了增强跨浏览器渲染的一致性的层叠样式表。
display:none;与visiblity:hidden;有什么区别
-
display:none;不占用位置；visiblity:hidden;会占用位置。
-
重绘与回流的问题：
- display:none;与visiblity:hidden;都会产生重绘
- display:none;还会产生一次回流
-
产生回流一定会造成重绘，但是重绘不一定会产生回流。
-
产生回流的情况：改变元素的位置（left，top ...）、显示影藏元素...
-
产生重绘的情况：样式细微改变（换颜色background，color）
opacity和rgba的区别
- 都能实现透明效果
- opacity：取值范围0-1，0表示完全透明，1表示不透明，子元素会继承父元素的opacity
- rgba：r、g、b取值整数或百分数，子元素不会继承
怎么让Chrome支持小于12px的文字？
使用缩放
- Chrome默认字体大小16px
- 使用缩放：-webkit-transform:scale();
单位rem和em区别
- 都是相对于font-size属性
- em相对于父元素的font-size
- rem是相对于根元素（html）的font-size
萌新上路，相互帮助。
