CSS面试题

CSS面试题

1. 盒子模型的宽度如何计算？

    <!-- 如下代码，请问div1 的 offsetWidth 是多大？ -->
    <style>
        #div1 {
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 10px;
        }
    </style>
    <div id="div1"></div>
    <script>
        console.log(document.getElementById('div1').offsetWidth)
    </script>

offsetWidth = (内容宽度 + 内边距 + 边框), 无外边距
offsetWidth = 100 + 10 + 10 + 1 + 1 = 122px

如果让offsetWidth等于100px,该如何做？

    <!-- 如下代码，请问div1 的 offsetWidth 是多大？ -->
    <style>
        #div1 {
            width: 100px;
            padding: 10px;
            border: 1px solid #ccc;
            margin: 10px;
            box-sizing: border-box;
        }
    </style>
    <div id="div1"></div>
    <script>
        console.log(document.getElementById('div1').offsetWidth)
    </script>

2. margin纵向重叠的问题

    <!-- 如下代码， AAA 和 BBB 之间的距离是多少? -->
    <style>
        p {
            font-size: 16px;
            line-height: 1;
            margin-top: 10px;
            margin-bottom: 15px;
        }
    </style>
    <p>AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p>BBB</p>

	相邻元素的margin-top和margin-bottom会发生重叠
	空白内容的<p></p>也会重叠
	AAA 和 BBB 之间的距离是15px

3. margin负值的问题

对margin的top left right bottom 设置负值，有何效果？
margin-top和 margin-left 负值，元素向上、向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不收影响

4. BFC理解和应用

什么是BFC?如何应用？

		Block format context 块级格式化上下文
		一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
		形成BFC的常见条件
		float不是none
		position是absolute或fixed
		overflow不是visible
		display事flex inline-block等
		BFC的常见应用
		清除浮动

5. float布局的问题，以及clearfix

如何实现圣杯布局和双飞翼布局
圣杯布局和双飞翼布局的目的
三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于PC网页
手写clearfix
圣杯布局和双飞翼布局的技术总结
使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding一个用margin

6. flex布局的问题

 flex实现一个三点的骰子