让元素看不见的方法

display:none
会让元素完全从渲染树中消失，渲染的时候不占据任何空间
是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点无法显示
会造成回流
visibility:hidden
不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见
是继承属性，子孙节点消失由于继承了hidden
通过设置visibility: visible;可以让子孙节点显式
opacity：0
透明化 作用于元素，以及元素内的所有内容的透明度
//与rgba()不同 
rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
height: 0
 将元素高度设为 0 ，并消除边框
filter: blur(0)
 CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

文字在水平和垂直方向重叠

  • 垂直方向：line-height
  • 水平方向：letter-spacing

BFC汇总

触发条件
  • float的值不为none
  • overflow的值不为visible
  • display的值为table-cell、tabble-caption和inline-block之一
  • position的值为absolute或fixed的任何一个
.BFC布局与普通文档流布局区别
普通文档：
  • 浮动的元素是不会被父级计算高度
  • 非浮动元素会覆盖浮动元素的位置
  • margin会传递给父级元素
  • 两个相邻元素上下的margin会重叠
BFC：
  • 浮动的元素会被父级计算高度(父级元素触发了BFC)
  • 非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC)
  • margin不会传递给父级(父级触发BFC)
  • 属于同一个BFC的两个相邻元素上下margin会重叠
BFC应用
  • 阻止margin重叠
  • 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个 div都位于同一个 BFC 区域之中)
  • 自适应两栏布局
  • 可以阻止元素被浮动元素覆盖
对BFC的理解
  • 一个页面是由很多个 Box 组成的,元素的类型和 display 属性,决定了这个 Box 的类型
  • 不同类型的 Box,会参与不同的 Formatting Context（决定如何渲染文档的容器）,因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响

清除浮动的方法

父级元素



  • 父级div定义height


  • 父级div定义伪类:after和zoom

  • 父级div定义overflow:hidden
  • 父级div也浮动，需要定义宽度
结尾处
  • 结尾处加br标签clear:both
  • 结尾处加空div标签clear:both

CSS3简单动画

  • 依靠CSS3中提出的三个属性：transition、transform、animation
  • transition：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。
  • transform：定义元素的变化结果，包含rotate、scale、skew、translate。
  • animation：动画定义了动作的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction

自适应布局

  • 左侧浮动或者绝对定位，然后右侧margin撑开
  • 使用<div>包含，然后靠负margin形成bfc
  • 使用flex
 rgba()和opacity的透明效果 区别：
  • rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
  • 而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

重绘和回流


  • 重绘：当渲染树中的元素外观（如：颜色）发生改变，不影响布局时，产生重绘
  • 回流：当渲染树中的元素的布局（如：尺寸、位置、隐藏/状态状态）发生改变时，产生重绘回流
  • 注意：JS获取Layout属性值（如：offsetLeft、scrollTop、getComputedStyle等）也会引起回流。因为浏览器需要通过回流计算最新值
  • 回流必将引起重绘，而重绘不一定会引起回流
如何避免重绘和回流 进行优化：
  • 需要要对元素进行复杂的操作时，可以先隐藏(display:"none")，操作完成后再显示
  • 需要创建多个DOM节点时，使用DocumentFragment创建完后一次性的加入document
  • 缓存Layout属性值，如：var left = elem.offsetLeft; 这样，多次使用 left 只产生一次回流
  • 尽量避免用table布局（table元素一旦触发回流就会导致table里所有的其它元素回流）
  • 避免使用css表达式(expression)，因为每次调用都会重新计算值（包括加载页面）
  • 尽量使用 css 属性简写，如：用 border 代替 border-width, border-style, border-color
  • 批量修改元素样式：elem.className 和 elem.style.cssText 代替 elem.style.xxx

闻所未闻的一道题

元素竖向的百分比设定是相对于容器的高度吗
元素竖向的百分比设定是相对于容器的宽度，而不是高度

全屏滚动问题

  • 原理类似图片轮播原理，超出隐藏部分，滚动时显示
  • 可能用到的CSS属性：overflow:hidden; transform:translate(100%, 100%); display:none;

a标签上伪类执行顺序

link > visited > hover > active

如何理解line-height

  • line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
  • 如果一个标签没有定义 height 属性，那么其最终表现的高度是由 line-height 决定的
  • 一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容
  • 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
  • line-height 和 height 都能撑开一个高度，height 会触发 haslayout，而 line-height 不会

inline-block 间隙问题

  • 相邻的 inline-block 元素之间有换行或空格分隔的情况下会产生间距
  • 非 inline-block 水平元素设置为 inline-block 也会有水平间距
  • 可以在父级加 font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙
  • 把标签写到同一行可以消除垂直间隙，但代码可读性差


圣杯布局

圣杯布局要点 html中要把center部分最先渲染 因为center最重要
通过设置整体的padding来确保center不会被重叠
三个div都要float:left
left：通过设置margin-left:-100% 被拉到第一行 通过relative left:-width 来靠最左
right：通过设置margin-right:-width 来被拉到第一行 
设置margin-right为负值，从原理上来说是#right元素不动，其右边的元素的向左移动，但由于#right右边无元素，
 因此 从效果上来说，margin-right设置为负值后，#right元素的宽度被掩盖，没有宽度，就能够挤到第一行 
<style>
.header{
    width: 100%;
    text-align: center;
    background-color: blanchedalmond;
}
.container{
    padding-left:200px ;
    padding-right:150px ;
}
.main{
    float: left;
    height: 300px;
    background-color: blue;
    width: 100%;
}
.left{
    float:left;
    background-color: blueviolet;
    width: 200px;
    height: 300px;
    margin-left: -100%;
    position: relative;
    left:-200px;
}
.right{
    float:left;
    background-color:brown;
    width: 150px;
    height: 300px;
    margin-right: -150px;
}
.footer{
    width: 100%;
    text-align: center;
    background-color: blanchedalmond;
    clear: both;
}

</style>

<body>
    <div class="header">header</div>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="footer">footer</div>
</body>

双飞翼布局

对圣杯布局进行改进，不再使用相对定位布局 
通过margin设置两侧留白
同样是向左浮动 但通过设置margin负值 就将left和right拉上去了
最重要main部分被套了两层 
<style>
        .main{
            width: 100%;
            height: 200px;
            background-color: #ccc;
            float:left
        }
        .main-wrap{
            margin: 0 190px 0 190px
        }
        .left{
            float: left;
            width: 190px;
            height: 200px;
            margin-left: -100%;
            background-color: brown;
        }
        .right{
            float: left;
            width: 190px;
            height: 200px;
            background-color: chartreuse;
            margin-right: -190px;
        }
</style>

<body>
    <div class="main">
        <div class="main-wrap"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</body>


css实现幻灯片动画



水平居中

inline（行内元素） 给父元素设置 text-align:center
定宽的块状元素
1.通过设置“左右margin”值为“auto”
2.父元素设置relative  待居中元素设置absolute  left:50%  margin-left:-(width/2)
(先向右移，再往左拽）
不定宽的块状元素
1.flex-box 在父元素上设置justify-content:center
2.在父元素上设置   float: left; position: relative; left: 50%
   在子元素上设置：position: relative;   left: -50%;

垂直居中

inline（行内元素）
 设置父元素的 height 和line-height高度一致来实现的
定高的absolute块状元素 父元素设置relative  待居中元素设置absolute  top:50%  margin-top:-(height/2)
不定高的absolute块状元素
1.flex align-items:center
2.绝对定位 配合css3位移： 
  position: absolute;
  top:50%;  /*父元素高度50%*/
  transform:translate(0, -50%);
3.父元素设置relative
子元素设置 absolute  top right left bottom都为0 最后设置margin:auto

整体居中

就是又垂直又水平
方法1：
先通过绝对定位 把元素拉到容器的50%处 再通过设置margin负值  把他拉到最中间 
    .div1 {
        float: left;
        background-color:red
        width: 200px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -100px;
        margin-left: -100px;
    }
方法2：
通过绝对定位 把元素撑开 再设置margin 为auto 
    .div1 {
        float: left;
        width: 200px;
        height: 200px;
        background-color:blueviolet;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
                margin: auto;

    }
方法3： 
    .div1 {
        background-color: brown;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

垂直居中一张图片

通过设置父元素为table就可以实现 
#container     /**<img>的容器设置如下**/
{
    display:table-cell;
    text-align:center;
    vertical-align:middle;
}

两栏布局

左边宽度固定 右边自适应
1.左侧浮动 右侧会自适应 
.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
}
.right {
    height: 200px;
    background-color: blue;
}
2.右侧绝对定位 并设置right=0 left=固定宽度
这是由于——绝对定位元素的第一个高级特性就是其具有自动伸缩的功能，当我们将 width设置为 auto 的时候（或者不设置，默认为 auto ），绝对定位元素会根据其 left 和 right 自动伸缩其大小 
    .outer {
        width: 100%;
        height: 500px;
        background-color: yellow;
        position: relative;
    }

    .left {
        width: 200px;
        height: 200px;
        background-color: red;

    }

    .right {
        position: absolute;
        right: 0;
        left:200px;
        height: 200px;
        background-color: blue;
    }
3.左侧绝对定位 右侧设置margin-left
    .outer {
        width: 100%;
        height: 500px;
        background-color: yellow;
        position: relative;
    }

    .left {
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: red;
    }

    .right {
        margin-left: 200px;
        height: 200px;
        background-color: blue;
    }
4.最简单的flex 
.outer {
    width: 100%;
    height: 500px;
    background-color: yellow;
    display: flex;
    flex-direction: row;
}
.left {
    width: 200px;
    height: 200px;
    background-color: red;
}
.right {
    height: 200px;
    background-color: blue;
    flex: 1;
}
同理，若想要实现高度自适应
则可以通过flex 设置flex-direction:column 来实现
或者 通过absolute的自适应拉伸实现 
.container { position:relative; }
.sub { position: absolute; top: 100px; bottom: 0; }

画三角形

就是把上、左、右三条边隐藏掉（颜色设为 transparent） 
#demo {
  width: 0;
  height: 0;
  border-width: 20px;
  border-style: solid;
  border-color: transparent transparent red transparent;
}

等高布局

  • 在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像
  • 模仿表格布局等高列效果：兼容性不好，在ie6-7无法正常运行
  • css3 flexbox 布局： .container{display: flex; align-items: stretch;}

伪元素和伪类

伪元素 ::
在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成
也就是说，它们只在外部显示可见，但不会在文档的源代码中找到它们
伪类 : 将特殊的效果添加到特定选择器上。它是已有元素上添加类别的

line-height相关问题

line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
如果一个容器没有设置高度，那么撑开容器高度的是 line-height 而不是容器内的文字内容

不同的赋值方式结果不同：
带单位时 px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
纯数字时
会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18p
x则子元素行高为 1.5 * 18 = 27px
百分比
 将计算后的值传递给后代