PC端静态网页开发-拓展

PC端静态网页开发-拓展

文章来源：拉勾教育大前端就业急训营

IE兼容

html 兼容写法

• html中可以使用条件注释写法

其中：书写时，两个标签前面都要加！，中括号内的每个单词必须用空格分隔。

CSS hack

• 为了保证所有用户浏览器加载效果相同，需要在同一份代码中书写不同的结构给不同的浏览器，这种方法就叫做hack方法。
• hack方法就是在同一份代码中给不同的浏览器书写不同的 css，保证最终加载效果一致
• 由于IE浏览器的兼容问题，IE浏览器具有自己的一套方法。使用了以下的这些方法，那么其所设置的样式只有特定的IE浏览器才能识别出来。
  

面试可能会考

两列自适应布局：一列由内容撑开，另一列撑满剩余宽度

• 方法：利用BFC的特点，一列设定float属性使其浮动，另一列出发BFC从而不被浮动元素所覆盖

    

        
盒子宽度由内容撑满
        

    

        .content {
            width: 540px;
            height: 800px;
            background-color: antiquewhite;
        }
        /* box1 脱离标准流 */
        .box1 {
            float: left;
            background-color: aqua;
        }
        /* box2自动撑满剩余宽度 */
        .box2 {
            height: 540px;
            background-color: aquamarine;
            /* 触发 BFC ，不会与浮动的元素重叠 */
            overflow: hidden;
        }

圣杯布局、双飞翼布局：两边固定宽度，中间自适应

• 方法：利用定位，将center当作普通标准流元素，给父元素设定padding-left和padding-right将位置留给两边两个子元素，两边设定绝对定位

    

        

            
圣杯布局，中间自适应
        
        
左侧固定宽度
        
右侧固定宽度
    

        .container {
            position: relative;
            box-sizing: border-box;
            max-width: 1500px;
            height: 500px;
            /* 利用内边距为左右固定的两个子元素留取空位 */
            padding-left: 200px;
            padding-right: 200px;
            margin: 0 auto;
            background: lightblue;
        }
        .left {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 300px;
            background-color: lightcoral;
        }
        .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 300px;
            background-color: lightgoldenrodyellow;
        }
        .center {
            width: 100%;
            height: 300px;
            background-color: lightseagreen;
        }

等高布局：子元素在父元素中高度相等

• 方法：由中间的center决定高度，即由center决定父级，然后父级决定left和right两个子盒子。center作为标准流，会自动将父盒子撑高。然后left和right两个设定绝对定位，height设定为100%，就会获得父级盒子的高度。

    

        

            
等高布局，中间自适应宽度，自身高度决定父级高度
        
        
左侧固定宽度，高度自动等于中间内容高度
        
右侧固定宽度，高度自动等于中间内容高度
    

        .container {
            position: relative;
            box-sizing: border-box;
            /* 利用内边距为左右固定的两个子元素留取空位 */
            padding-left: 200px;
            padding-right: 200px;
            margin: 0 auto;
            background: lightblue;
        }
        .left {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 100%;
            background-color: lightcoral;
        }
        .right {
            position: absolute;
            top: 0;
            right: 0;
            width: 200px;
            height: 100%;
            background-color: lightgoldenrodyellow;
        }
        .center {
            width: 100%;
            height: 400px;
            background-color: lightseagreen;
        }

粘连布局：垂直方向，后面的元素在前面元素足够高时，紧跟在前面元素底部，前面元素高度不够时，后面的元素自动加载到页面的底部

    

        

            
主体内容
            
主体内容
            
主体内容
        
    
    
底部

        * {
            margin: 0;
            padding: 0;
        }
        html,
        body {
            height: 100%;
        }
        .wrapper {
            /* 设置最低高度为100%，那么当前面元素高度不足时，底部能够加载在页面的底部 */
            min-height: 100%;
            /* 挤出100px的位置留给底部.footer */
            padding-bottom: 100px;
            box-sizing: border-box;
            background-color: lightyellow;
            text-align: center;
            overflow: hidden;
        }
        .wrapper .main {
            background-color: skyblue;
        }
        .wrapper .main p {
            height: 100px;
        }
        .footer {
            height: 100px;
            /* 向上移动其高度，使其和上面的元素连在一起 */
            margin-top: -100px;
            line-height: 50px;
            background-color: pink;
            text-align: center;
        }