css面试总结

盒模型

盒模型：由里向外content,padding,border,margin。
标准盒模型：
怪异盒（ie）：
box-sizing:border-box 转换成怪异盒。
box-sizing:content-box 标准盒模型。

BFC 块级格式化上下文

说白了就是块级元素的布局渲染规范，可以理解成一个大箱子，箱子内部的元素无论如何乱，都不会影响外部
只要元素满足下面任一条件即可触发
float 除了none以外的值
overflow 除了visible 以外的值（hidden，auto，scroll ）
display (table-cell，table-caption，inline-block, flex, inline-flex)
position值为（absolute，fixed）
fieldset元素

Flex（弹性盒）

flex-direction 属性

flex-wrap 属性

flex-flow 属性
align-items属性

justify-content属性

使用弹性盒进行水平垂直居中

display:flex
display:-webkit-flex:兼容
align-items:center
justify-content:center

行内元素、块级元素、空元素

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea
块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote
空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img
行内元素不可以设置宽高，不独占一行
块级元素可以设置宽高，独占一行
display:inline 转换为行内元素
display:block 转换为块状元素
display:inline-block 转换为行内块状元素

元素居中的方法

text-align:center 适用于内联元素
margin:0 auto 适用于块级元素
定位+偏移、定位（四个方向都为0）+margin：auto
弹性盒 display:flex

布局的方式

定位position

浮动float
flex布局

css3新特性

1、过渡 transition(属性，时间，效果曲线，延时时间)
2、动画 animation(动画名称，一个周期时间，运动曲线，动画延迟，播放次数)
3、transform 适用于2d 3d 转换的元素
4、阴影 box-shadow
5、颜色 rgba
7、弹性布局 display flex/none

h5新增语义化标签

标签语义化:在合适的地方放合适的标签 利于seo优化
语义化的标签，旨在让标签有自己的含义

1. 代码结构清晰，方便阅读，有利于团队合作开发。
2. 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
3. 有利于搜索引擎优化（SEO）。

`<header>头部</header> 
<nav>导航</nav> 
<section> 
<aside>侧边栏</aside> 
<article>文章</article> 
</section> 
<footer>底部</footer>`

px、em、rem的区别

px：绝对单位，页面按精确像素展示。
em：相对单位，基准点为父节点字体的大小。
rem：相对单位，相对根节点html的字体大小来计算。

css选择器以及权重

标签选择器、类选择器、id选择器、子选择器、包含选择器、兄弟选择器、相邻选择器、全局选择器、群选择器、属性选择器、伪类选择器

实现三角形

with:0;
height:0
border-left:50px solid transparent
border-right:50px solid transparent
border-bottom:100px solid red