圣杯、双飞翼布局、真假等高，图片优化，测试检查

多栏布局解决方案

  • 圣杯布局

  • <style>
        * {
            padding: 0;
            margin: 0;
        }
        .center {
            width: 100%;
            height: 400px;
            background-color: gold;
            float: left;
        }
        .left {
            width: 200px;
            height: 400px;
            background-color: red;
            float: left;
            margin-left: -100%;
            position:relative;
            left:-200px;
        }
        .right {
            width: 300px;
            height: 400px;
            background-color: blue;
            float: left;
            margin-left: -300px;
            position:relative;
            left:300px;
        }
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
        .warp {
            padding:0 300px 0 200px;
        }
</style>

<body>
    <!--center宽度小于left的时布局会错乱-->
    <div class="wrap clearfix">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
Document
center
left
right
```

  • 双飞翼布局

  • <style>
        * {
            padding: 0;
            margin: 0;
        }
        .center {
            width: 100%;
            height: 400px;
            background-color: gold;
            float: left;
        }
        .left {
            width: 200px;
            height: 400px;
            background-color: red;
            float: left;
            margin-left: -100%;
        }
        .right {
            width: 300px;
            height: 400px;
            background-color: blue;
            float: left;
            margin-left: -300px;
        }
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
        .inner {
            margin: 0 300px 0 200px;
        }
</style>

<body>
    <!-- 
        双飞翼布局实现：
            1.一个大盒子，里面有三个小盒子，左右固定，中间自适应100%，中间部分一定要先解析
            2.三个盒子加浮动，左侧部分设置margin-left:-100%;右侧部分设置margin-left:-自己本身宽度
            3.中间部分内部嵌套一个标签，加左右的外边距
            缺点：相对于圣杯布局，增加一层结构代码
     -->
    <div class="wrap clearfix">
        <div class="center">
            <div class="inner">
                center
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

  • 假等高

  • <style>
        .wrap {
            border: 5px solid #000;
            width: 900px;
            margin: 0 auto;
        }
        .box1 {
            width: 300px;
            background-color: red;
            float: left;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .box2 {
            width: 300px;
            background-color: green;
            float: left;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .box3 {
            width: 300px;
            background-color: blue;
            float: left;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
        }
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
        .wrap {
            overflow: hidden;
        }
</style>

<body>
    <!-- 内外边距相消法：内边距设置特别大，外边距设置特别小,父标签加溢出隐藏，overflow:hidden; -->
    <div class="wrap clearfix">
        <div class="box1">
            先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
        </div>
        <div class="box2">
            先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
            先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
            先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
        </div>
        <div class="box3">
            先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
            先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
        </div>
    </div>
</body>

  • 真等高

  • <style>
        .a {
            width: 900px;
            background-color: blue;
            border: 3px solid #000;
            margin: 0 auto;
            overflow: hidden;
        }

        .b {
            width: 900px;
            background-color: green;
            margin-left: -300px;
        }

        .c {
            width: 900px;
            background-color: red;
            margin-left: -300px;
        }

        .box1 {
            width: 300px;
            float: left;
            position: relative;
            left: 600px;
        }

        .box2 {
            width: 300px;
            float: left;
            position: relative;
            left: 600px;
        }

        .box3 {
            width: 300px;
            float: left;
            position: relative;
            left: 600px;
        }

        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
</style>

<body>
    <div class="a">
        <div class="b">
            <div class="c clearfix">
                <div class="box1">
                    1先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
                </div>
                <div class="box2">
                    2先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
                    先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
                    先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
                </div>
                <div class="box3">
                    3先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
                    先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
                </div>

            </div>
        </div>
    </div>


</body>

  •  

图片优化

  • 使用背景图

    • 对于页面中与页面内容无关，起修饰作用的图片，使用背景图 background-image（如页面中小图标尤其多次重复出现的，纹理性的背景）；与页面内容相关展示性的图片如（广告图、产品图）使用 img 标签。

  • 图片品质

    • 注意图片优化：在保证视觉效果的情况下，选择最小的图片格式与图片质量，以减少加载时间。
    • 注：通常颜色丰富线条复杂的图片选择 .jpg，颜色单一的小图片使用 .gif，需要更好的显示细节或需要支持半透明的图片使用 .png 等。

  • 使用精灵图

    • 运用 CSS sprites 技术集中小的背景图或图标，减少页面 http 请求。

测试检查

1、做完的页面要与设计稿进行比对，保证对设计稿 95% 以上的还原度。

（1）页面模块的完整性，保证页面不出现模块丢失 ( 尤其是悬浮的侧边栏、弹窗、下拉菜单等）；

（2）字体、字号、文字颜色的一致性；

（3）背景图片与图片是否有丢失；

（4）模块间距的还原度（通常根据页面设计排版的复杂程度，最多允许 5-10px 以内的偏差）。

2、跨浏览器的兼容测试。

做完的页面，要根据需求进行跨浏览器的兼容测试，保证不同浏览器显示结果基本一致。Pc 端通常需要测试

的浏览器有 chrome、firefox、opera、IE（IE 低版本是否兼容与需求沟通确定）。

高频面试题（笔试题）

1、简述 <!doctype> 的作用？

2、常见的浏览器及其内核？

3、b 和 strong（i 和 em）标签的区别？

4、谈谈对语义化的理解？

5、CSS 引入方式有哪些？

6、CSS 基本选择器有哪些？

7、如何合并表格单元格？

8、thead、tbody、tfoot 有什么用？

9、常见表单元素有哪些？

10、请简述一下盒模型的组成？

11、CSS 复合选择器有哪些？

12、块级标签和行内标签的区别？

13、浮动产生的问题？清除浮动的方案？

14、伪元素如何创建 ?

15、如何实现盒子水平垂直居中？

16、图片下方空白间隙如何解决？

17、请简述 等高布局、圣杯布局、双飞翼布局的实现原理。

18、简述 CSS 精灵图原理，及优缺点？

19、简述 BFC 规则及解决的问题？

20、文本溢出显示省略号如何实现？

21、为什么要初始化 CSS 样式？哪些样式需要初始化？

保证浏览器的统一性，去掉标签自带的样式

22、display:none 和 visibility：hidden 的区别？

23、你能想出几种方法让元素在页面中消失？

24、标签应该如何合理嵌套？

25、简述网页中常见图片格式及特点？

26、说说你了解的浏览器兼容问题有哪些？

27、什么是 CSSHack 技术？

28、在项目中你是如何做图片优化的？

posted @ 2020-12-27 20:51  majiancheng  阅读(79)  评论(0)    收藏  举报