css面经笔记

css3有哪些新特性

新增选择器 p:nth-child（n）{color: rgba（255, 0, 0, 0.75）}

弹性盒模型 display: flex;

多列布局 column-count: 5;

媒体查询 @media （max-width: 480px） {.box: {column-count: 1;}}

个性化字体 @font-face{font-family:BorderWeb;src:url（BORDERW0.eot）；}

颜色透明度 color: rgba（255, 0, 0, 0.75）；

圆角 border-radius: 5px;

渐变 background:linear-gradient（red, green, blue）；

阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；

倒影 box-reflect: below 2px;

文字装饰 text-stroke-color: red;

文字溢出 text-overflow:ellipsis;

背景效果 background-size: 100px 100px;

边框效果 border-image:url（bt_blue.png） 0 10;

旋转 transform: rotate（20deg）；

倾斜 transform: skew（150deg, -10deg）；

位移 transform:translate（20px, 20px）；

缩放 transform: scale（。5）；

平滑过渡 transition: all .3s ease-in .1s;

动画 @keyframes anim-1 {50% {border-radius: 50%;}} animation: anim-1 1s;

什么是文档流

网页在解析时，遵循从上向下，从左向右的顺序。

1、从上至上，从左至右的布局。
2、符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。

css的BFC

BFC(Block Formatting Context）格式化上下文，指一个独立的渲染区域或者说是一个隔离的独立容器。
形成BFC的条件：

1. 浮动元素，float 除 none 以外的值；
2. 定位元素，position（absolute，fixed）；
3. display 为以下其中之一的值 inline-block，table-cell，table-caption；
4. overflow 除了 visible 以外的值（hidden，auto，scroll）；

BFC的特性：

1. 内部的Box会在垂直方向上一个接一个的放置；
2. 垂直方向上的距离由margin决定；
3. bfc的区域不会与float的元素区域重叠；
4. 计算bfc的高度时，浮动元素也参与计算；
5. bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素；

css 盒模型

css的盒模型有两种：IE盒模型和标准盒模型。
标准盒子模型(content-box)：width=content
IE盒子模型(border-box)：width = content + padding + border

/* 标准模型 */ 不设置box-sizing默认content-box
box-sizing:content-box;
​
 /*IE模型*/
box-sizing:border-box;

margin合并

• 父子margin合并
  子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距。父元素变成BFC时不会随子元素产生外边距，但是父元素的高会变化。

• 兄弟margin合并
  同级（兄弟）元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个

解决浮动高度塌陷问题

不给父元素设置高度，子元素设置了浮动的时候，会发生高度塌陷
解决方法：在父元素添加overflow：hidden

flex属性

1. flex-direction属性 row | row-reverse | column | column-reverse;
   
2. flex-wrap属性: nowrap（默认不换行）; wrap：换行，第一行在上方。wrap-reverse：换行，第一行在下方。
3. flex-flow 是flex-direction属性和flex-wrap属性的简写形式
4. justify-content属性定义了项目在主轴上的对齐方式。
5. align-items属性定义项目在交叉轴上如何对齐。
6. align-content属性定义了多根轴线的对齐方式。
   

防抖节流，场景

block、inline和inline-block区别

block块级元素
常见的块元素$<p>、<div>、<ol>、<li>、<h1h6>$等。
特点：

• 独占一行
• 可以设置宽高
• 不设置宽的情况下，默认父元素内容宽

inline内联（行内）元素
常见的内联元素：$<a>、<strong>、<span>、<i>$
特点：

• 相邻的行内元素会显示在一行，放不下会换行显示
• 设置宽高无效，内容撑开
• 行内元素只能放文本或者其他行内元素
• a标签里不能放a标签，但是可以放块级元素（实际开发中，某些情况下会把a标签会转化为块元素）

inline-block行内块元素
常见的行内块元素：$<img>、表单类元素、<video>、<audio>$
特点：

• 相邻的行内块元素会显示在一行，放不下会换行显示
• 相邻的行内块元素之间会有空白间隙
• 元素默认宽高为它本身内容宽高
• 可以设置宽高

去掉inline-block行内块元素默认空白间隙

产生间隙的原因
元素被当成行内元素排版，元素之间的空白符（空格、回车换行等）都会被浏览器处理，根据white-space的处理方式（默认是normal，合并多余空白），原来HTML代码中的回车换行被转成一个空白符，所以元素之间就出现了空白间隙。

解决办法：

• 移除标签间的空格回车换行
• 给父元素添加font-size:0px；同时子元素重写font-size
• 给元素添加float
• 单图片和父盒子下面有间隙，给图片添加display:block;
• 多图片和父盒子下面旁边有间隙，给图片添加float

隐藏元素方法

display:none;// 父元素隐藏，子孙不可见；隐藏不占用空间。
visibility:hidden; //父元素隐藏，子孙（visibility:visble; ）时候可见；隐藏占用空间。

relative和absolute区别

行内元素、块级元素，二者的转换

图片垂直水平居中、文字垂直水平居中

css实现文字超出部分…显示

position有哪些，针对每一个都深挖 static absolute relative fixed

如何实现两栏布局，结合盒模型考察width:100%会出现什么问题

flex：1 、flex：2……有什么区别

css权重计算

css会不会阻塞页面加载，css动画会不会阻塞，animation

清除浮动

左中右布局，左右固定，中级自适应怎么是实现

px rem em vw vh区别

一个未知宽高的元素，如何实现垂直水平居中

垂直水平居中

两栏布局

一栏固定宽度，一栏自适应。
方法一：左侧 float:left，右侧 margin-left

// 浮动的元素脱离文档流，没有了自己的位置，后面的元素会被浮动的元素覆盖，通过margin或者padding撑开。
.left {
      float: left;
      width: 200px;
    }
    .right {
      margin-left: 200px;
    }

方法二：左侧 float:left，右侧 overflow:hidden

// 还可以通过 overflow: hidden; 清除浮动。
 .left {
      float: left;
      width: 200px;
    }
    .right {
      overflow: hidden;
    }

方法三：利用定位 position

   .main {
      position: relative;
    }
    .left {
      width: 200px;
    }
    .right {
      position: absolute;
      top: 0;
      left: 200px;
    }

方法四：利用弹性布局 flex

.main {
      display: flex;
      height: 100px;
      width: 300px;
      background: red;
    }
    .left {
      width: 200px;
      background: blue;
    }
    .right {
      flex: 1;
    }

css长度单位

绝对单位：cm mm px pt等
相对单位：em ex vm vh等

css实现一个高度随着宽度的变化而变化的正方形

视口（viewport）:代表当前可见的计算机图形区域。使用相对于视口的长度单位 vh 和 vw。1vh 意味着值为视口高度的 1%，同理 1vw 即值为视口宽度的 1%。
答: vw vh