前端常见笔试题二

HTML、CSS部分

1.行内元素有哪些？块级元素有哪些？

行内元素：a、span、b、em、strong…
块级元素： div、ul、ol、p、h1-h6、table、from…

2.css选择符有哪些？哪些属性可以继承？优先级计算？

id（#）、class(.)、标签（div）、
同级相邻（div+p）、子代选择器（ul>li）、后代选择器（ul li）、
属性（div[class=“container”]）、伪类（a:hover）;

可以继承的属性：color、font-size、background-color…
优先级计算：！important>行内>id>class>标签

css3新增伪类

属性以…开头：[attr^=value]
在元素前添加内容 :before
在元素后面添加内容 :after
指定元素第一个子代:first-child
最后一个子代:last-child
指定元素的奇数子代:nth-child(odd)
偶数子代:nth-child(even)
指定元素的符合3n表达式的子代:nth-child(3n)
匹配指定元素的子元素在同类元素中的第n个:nth-of-type(n)

flex布局

我的常用属性：flex：<flex-grow>||<flex_shrink>||<flex-basis>
flex布局可看阮一峰老师的笔记阮一峰老师的flex布局教程

1、两列布局

左侧栏固定宽度200px;右侧填满屏幕

*{margin: 0;padding: 0;}
.container{
	width: 100%;
	height: 200px;
	display: flex;
}
.left{
	background-color: darkblue;
	flex: 0 0 200px;
}
.right{
	background-color: orange;
	flex: 1 0 auto;
}

2、弹性三列布局

左右两边固定宽度，中间缩放

*{margin: 0;padding: 0;}
.container{
	width: 100%;
	height: 200px;
	display: flex;
}
.left{
	background-color: darkblue;
	flex: 0 0 200px;
}
.right{
	ackground-color: darkblue;
	flex: 0 0 300px;
}
.center{
	background-color: orange;
	flex: 1 0 auto;
}

3、组合布局

<div class="container">
	<div class="header">header</div>
	<div class="content">
		<div class="left">left</div>
		<div class="center">center</div>
		<div class="right">right</div>
	</div>
	<div class="footer">footer</div>
</div>

.container{
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	text-align: center;
}
.header{
	background-color: seagreen;
	flex: 0 0 10vh;
}
.footer{
	background-color: seagreen;
	flex: 0 0 8vh;
}
.content{
	background-color: #e0e0e0;
	flex: 1 0 auto;
	display: flex;
}
.left,.right{
	background-color: skyblue;
	flex:0 0 200px;
}
.center{
	flex:1 0 auto;
}