3 - HTML CSS面试题- 盒子模型的宽度如何计算？ - margin纵向重叠的问题 - margin负值的问题

HTML面试题

如何理解HTML语义化？

<!-- HTML语义化 -->
<h1>标题</h1>
<div>
    <p>一段文字</p>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
    </ul>
</div>


<!-- 对比非语义化情况 -->
<div>标题</div>
<div>
    <div>一段文字</div>
    <div>
        <div>列表1</div>
        <div>列表2</div>
    </div>
</div>

语义化优点：
- 让人更容易读懂（增加代码可读性）
- 让搜索引擎更容易读懂（SEO）
默认情况下，哪些HTML标签是块级元素、哪些是内联元素？
- display: block/table; 有div h1 h2 table ul ol p 等
- display: inline/inline-block; 有 span img input button等

CSS面试题

布局
- 盒子模型的宽度如何计算？
- margin纵向重叠的问题
- margin负值的问题
- BFC理解和应用
- float布局的问题，以及clearfix清除浮动
- flex画色子
定位
- absolute和relative分别依据什么定位？
- 居中对齐有哪些实现方式？
图文样式
- line-height的继承问题
响应式
- rem是什么？
- 如何实现响应式？
CSS3
- 关于CSS3动画

盒模型宽度计算

<!-- 如下代码，请问div1的offsetWidth是多大? -->
<style>
    #div1{
        width:100px;
        padding:10px;
        border:1px solid #ccc;
        margin:10px;
    }
</style>
<div id="div1"></div>

offsetWidth = (内容宽度 + 内边距 + 边框), 无外边距
因此答案是122px
补充：如果让offsetWidth等于100px,该如何做？如下，添加box-sizing:border-box,使offsetWidth=100px;

#div{
    width:100px;
    padding:10px;
    border:1px solid #ccc;
    margin:10px;
    box-sizing:border-box;
}

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>也会重叠
答案：15px

margin负值问题

对margin的top left right bottom设置负值，有何效果？

答案：

margin-top 和 margin-left负值，元素向上、向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响

BFC理解与应用

什么是BFC?如何应用？

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

代码演示

<!DICTYPE html>
<html lang="en">
<head>
<style>
	.container{
		background-color:#f1f1f1;
	}
	img{
		width:100px;
	}
	.left{
		float:left;
	}
	.bfc{
		overflow:hidden;/*触发元素BFC*/
	}
</style>
</head>
<body>
	<div class="container bfc">
		<img src="./1.jpg" class="left"/>
		<p class="bfc">图片浮动会脱离容器，加了bfc后不会脱离容器，反而把容器撑大</p>
	</div>
	
</body>
</html>

float布局

如何实现圣杯布局和双飞翼布局？
手写clearfix

圣杯布局和双飞翼布局的目的

三栏布局，中间一栏最先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于PC网页

圣杯布局和双飞翼布局的技术总结

使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，圣杯布局用padding来为两边留白，双飞翼布局用margin来为两边留白

圣杯布局代码演示

左右两边宽度固定，中间自适应

<!DICTYPE html>
<html lang="en">
<head>
<title>圣杯布局</title>
<style>
	body{
		min-width:550px;
	}
	#header{
		text-align:center;
		background-color:#f1f1f1;
	}
	#center{
		background-color:green;
		width:100%;
	}
	#left{
		background-color:yellow;
		width:200px;
	}
	#right{
		background-color:red;
		width:150px;
	}
	#footer{
		text-align:center;
		background-color:#f1f1f1;
	}
</style>
</head>
<body>
	<div id="header">this is header</div>
	<div id="container">	
		<div id="center">this is center</div>
		<div id="left">this is left</div>
		<div id="right">this is right</div>
	</div>
	<div id="footer">this is footer</div>	
</body>

</html>

实现

<!DICTYPE html>
<html lang="en">
<head>
<title>圣杯布局</title>
<style>
	body{
		min-width:550px;
	}
	#header{
		text-align:center;
		background-color:#f1f1f1;
	}
	#container{
		padding-left:200px;
		padding-right:150px;
	}
	#center{
		background-color:green;
		width:100%;
	}
	#left{
		position:relative;
		background-color:yellow;
		width:200px;
		margin-left:-100%;
		right:200px;
	}
	#right{
		background-color:red;
		width:150px;
		margin-right:-150px;
	}
	#footer{
		text-align:center;
		background-color:#f1f1f1;
		/*clear:both;*/
	}
	#container .column{
		float:left;
	}
        /*手写清除浮动clearfix*/
        .clearfix:after{
            content:'';
            display:table;
            clear:both;
        }
</style>
</head>
<body>
	<div id="header">this is header</div>
	<div id="container" class="clearfix">	
		<div id="center" class="column">this is center</div>
		<div id="left" class="column">this is left</div>
		<div id="right" class="column">this is right</div>
	</div>
	<div id="footer">this is footer</div>	
</body>

</html>

双飞翼布局

<!DICTYPE html>
<html lang="en">
<head>
<title>双飞翼布局</title>
<style>
	body{
		min-width:550px;
	}
	#main{
		width:100%;
		height:200px;
		background-color:#ccc;
	}
	.column{
		float:left;
	}
	#main-wrap{
		margin:0 190px 0 190px;
	}
	#left{
		width:190px;
		height:200px;
		background-color:#0000ff;		
		margin-left: -100%;
	}
	#right{
		width:190px;
		height:200px;
		background-color:#ff0000;
		margin-left: -190px;
	}
</style>
</head>
<body>
	<div id="main" class="column">	
		<div id="main-wrap">this is main</div>
	</div>
	<div id="left" class="column">this is left</div>
	<div id="right" class="column">this is right</div>
</body>

</html>

float布局

/*手写clear fix*/
.clearfix:after{
    content:'';
    display:table;
    clear:both;
}
.clearfix{
    *zoom:1/*兼容IE低版本*/
}

flex布局

flex实现一个三点的色子（一个面是三点的色子）

常用语法（需熟练掌握）

flex-direction
justify-content
align-items
flex-wrap
align-self

/*flex 画三个点的色子 */
.box{
    display:flex;/*flex布局*/
    justify-content:space-between;/*两端对齐*/
}
.item{
    /*背景色，大小，边框等*/
}
.item:nth-child(2){
    align-self:center;/*第二项居中对齐*/
}
.item:nth-child(3){
    align-self:flex-end;/*第三项尾对齐*/
}

代码演示


<!DICTYPE html>
<html lang="en">
<head>
<title>三点色子</title>
<style>
	.box{
		width:200px;
		height:200px;
		border:2px solid #ccc;
		border-radius:10px;
		padding:20px;
		
		display:flex;
		justify-content:space-between;
	}
	.item{
		display:block;
		width:40px;
		height:40px;
		border-radius:50%;
		background-color:#666;
	}
	.item:nth-child(2){
		align-self:center;/*第二项居中对齐*/
	}
	.item:nth-child(3){
		align-self:flex-end;/*第三项尾对齐*/
	}
</style>
</head>
<body>
	<div class="box">	
		<span class="item"></span>
		<span class="item"></span>
		<span class="item"></span>
	</div>
</body>

</html>

CSS定位

- absolute 和 relative分别依据什么定位？
- 居中对齐有哪些实现方式？

absolute 和 relative分别依据什么定位？
- relative依据自身定位
- absolute依据最近一层的定位元素定位
  - 定位元素：absolute relative fixed body

<!DICTYPE html>
<html lang="en">
<head>
<title>absolute和relative定位问题</title>
<style>
	body{
		margin:20px;
	}
	.relative{
		position:relative;/*如果删除这个定位，absolute则会向上找到body去定位*/
		width:400px;
		height:200px;
		border:1px solid #ccc;
		top:20px;
		left:50px;
	}
	.absolute{
		position:absolute;
		width:200px;
		height:100px;
		border:1px solid blue;
		top:20px;
		left:50px;
	}
	
</style>
</head>
<body>
	<p>absolute和relative定位问题</p>
	<div class="relative">
		<div class="absolute">
			this is absolute
		</div>
	</div>
</body>

</html>

居中对齐有哪些实现方式？
- 居中对齐的实现方式：水平居中，垂直居中
水平居中
- inline元素：text-align:center
- block元素：margin:auto
- absolute元素：left:50% + margin-left负值
垂直居中
- inline元素：line-height的值等于height值
- absolute元素：top:50% + margin-top负值
- absolute元素：transform(-50%,-50%)
- absolute元素：top,left bottom ,right = 0 + margin:auto

代码演示水平居中

<!DICTYPE html>
<html lang="en">
<head>
<title>水平居中</title>
<style>
	.container{
		border:1px solid #ccc;
		margin:10px;
		padding:10px;
	}
	.item{
		background-color:#ccc;
	}
	.container-1{
		text-align:center;
	}
	.container-2 .item{
		width:500px;
		margin:auto;
	}
	.container-3{
		position:relative;
		height:100px;
	}
	.container-3 .item{
		width:300px;
		height:100px;
		position:absolute;
		left:50%;
		margin-left:-150px;		
	}
	
</style>
</head>
<body>
	<div class="container container-1">		
		<span>一段文字</span>
	</div>
	<div class="container container-2">		
		<div class="item">this is block item</div>
	</div>
	<div class="container container-3">		
		<div class="item">this is absolute item</div>
	</div>
</body>

</html>

代码演示垂直居中

<!DICTYPE html>
<html lang="en">
<head>
<title>水平垂直对齐</title>
<style>
	.container{
		border:1px solid #ccc;
		margin:10px;
		padding:10px;
		height:150px;
	}
	.item{
		background-color:#ccc;
	}
	.container-1{
		text-align:center;
		height:150px;/*height和line-height一致便可垂直居中*/
		line-height:150px;
	}
	.container-2{
		position:relative; 
	}
	.container-2 .item{
		width:300px;
		height:100px;
		position:absolute;
		left:50%;
		margin-left:-150px;	/*缺点：必须知道子元素宽度高度*/
		top:50%;
		margin-top:-50px;	
	}
	.container-3{
		position:relative;
	}
	.container-3 .item{
		width:200px;
		height:80px;
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);/*CSS3特性，需考虑兼容性*/
	}
	.container-4{
		position:relative;
	}
	.container-4 .item{
		width:100px;
		height:50px;
		position:absolute;/*终极解决方案*/
		top:0;
		left:0;
		bottom:0;
		right:0;
		margin:auto;
	}
	
</style>
</head>
<body>
	<div class="container container-1">		
		<span>一段文字</span>
	</div>
	<div class="container container-2">		
		<div class="item">this is  item</div>
	</div>
	<div class="container container-3">		
		<div class="item">this is  item</div>
	</div>
	<div class="container container-4">		
		<div class="item">this is  item</div>
	</div>
</body>

</html>

CSS-图文样式

line-height如何继承

写具体数值，如30px,则继承该值
写比例，如2/1.5,则继承该比例
写百分比，如200%,则继承计算出来的值（考点）

<!-- 如下代码，p标签的行高将会是多少？ -->
<style>
    body{
        font-size:20px;
        line-height:200%;
    }
    p{
        font-size:16px;
    }
</style>
<body>
    <p>AAA</p>
</body>

答案：40px;(继承body20*200% = 40px)

<!-- 如下代码，p标签的行高将会是多少？ -->
<style>
    body{
        font-size:20px;
        line-height:50px;
    }
    p{
        font-size:16px;
    }
</style>
<body>
    <p>AAA</p>
</body>

答案：50px;(继承body的50px)

<!-- 如下代码，p标签的行高将会是多少？ -->
<style>
    body{
        font-size:20px;
        line-height:1.5;
    }
    p{
        font-size:16px;
    }
</style>
<body>
    <p>AAA</p>
</body>

答案：24px;(1.5*16px = 24px)

CSS-响应式

- rem是什么？
- 响应式布局的常见方案？

rem是什么？
- rem是一个长度单位
  - px,绝对长度单位，最常用
  - em,相对长度单位，相对于父元素，不常用
  - rem,相对长度单位，相对于根元素，常用于响应式布局

rem演示

<!DICTYPE html>
<html lang="en">
<head>
<title>rem演示</title>
<style>
	html{
		font-size:100px;
	}
	div{
		background-color:#ccc;
		margin-top:10px;
		font-size:0.16rem;/*相对根元素html，这里对应16px*/
	}
	
</style>
</head>
<body>
	<p style="font-size:0.1rem">rem0.1 相当于10px</p>
	<p style="font-size:0.2rem">rem0.2 相当于20px</p>
	<p style="font-size:0.3rem">rem0.3 相当于30px</p>
	<div style="width:1rem">width:1rem 相当于100px</div>
	<div style="width:2rem">width:2rem 相当于200px</div>
	<div style="width:3rem">width:3rem 相当于300px</div>
</body>

</html>

响应式布局的常见方案？
- media-query ,根据不同的屏幕宽度设置根元素font-size
- rem,基于根元素的相对单位

<style>
	@media only screen and (max-width:374px){
		/*iphone5或者更小的尺寸，以iphone5的宽度(320px)比例设置font-size*/
		html{
			font-size:86px;
		}
	}
	@media only screen and (min-width:375px) and (max-width:413px){
		/*iphone6/7/8 和 iphone6x*/
		html{
			font-size:100px;
		}
	}
	@media only screen and (max-width:374px){
		/*iphone6或者更大的尺寸，以iphone6的宽度(414px)比例设置font-size*/
		html{
			font-size:110px;
		}
	}
</style>

网页视口尺寸

window.screen.height //屏幕高度
window.innerHeight //网页视口高度
document.body.clientHeight //body高度

vw/vh

vh 网页视口高度的1/100
vw 网页视口宽度的1/100
vmax取两者最大值，vmin取两者最小值

<!DICTYPE html>
<html lang="en">
<head>
<title>vh  vw</title>
<style>
	body{
		margin:0;
		padding:0;
	}
	#container{
		background-color:#ff2;
		width:10vmax;
		height:10vmin;
	}
	#container2{
		background-color:#f22;
		width:10vw;
		height:10vh;
	}
</style>
</head>
<body>
    <p>vw vh测试</p>
	<div id="container"></div>
	<div id="container2"></div>
	<script>
		//window.innerHeight === 100vh
		//window.innerWidth === 100vw
	</script>
</body>
</html>