HTML5和css3网页设计 html5css3网页设计补考题

目录

• 1.[如何让一个div垂直水平居中，分别用css和css3的多种方法实现]()（可点击查看详细）
• 2.浮动如何清除
• 3.固定高度的列表，如何让内容垂直居中，css和css3实现
• 4.一个div内有上下两个字div，其中一个div固定高度，另一个div如何铺满剩下的高度
• 5.请解释什么是重绘，什么是回流
• 6.HTML5主要增加了什么元素
• 7.CSS如何实现文字渐变
• 8.BFC 和 IFC 的区别
• 9.如何实现文字平铺
• 10.css如何实现斑马线
• 11.ElemeUI 如何设置默认组件内部样式
• 12.Flex布局中，如何实现一个横向列表滚动布局
• 13.如何让文字纵向排列
• 14.如何实现整个网站灰色调 （比如纪念全国疫情）
• 15.前端页面由哪三层构成，作用是？
• 16.css的基本语句构成？css选择器有哪些？优先级如何计算？
• 17.行内元素有哪些？块状元素有哪些？css的盒子模型？
• 18.< DOCTYPE html >的作用
• 19.css引入的方式有哪些？link和@important有什么区别？
• 19.flex实现横向滚动
• 20.实现文字平铺

1.如何让一个div垂直水平居中，分别用css和css3的多种方法实现（可点击查看详细）

2.浮动如何清除

3.固定高度的列表，如何让内容垂直居中，css和css3实现

4.一个div内有上下两个字div，其中一个div固定高度，另一个div如何铺满剩下的高度

5.请解释什么是重绘，什么是回流

6.HTML5主要增加了什么元素

7.CSS如何实现文字渐变

8.BFC 和 IFC 的区别

9.如何实现文字平铺

10.css如何实现斑马线

11.ElemeUI 如何设置默认组件内部样式

v-deep

12.Flex布局中，如何实现一个横向列表滚动布局

13.如何让文字纵向排列

14.如何实现整个网站灰色调 （比如纪念全国疫情）

15.前端页面由哪三层构成，作用是？

结构层（HTML），实现页面结构
表示层（CSS），完成页面的表现与风格
行为层（JavaScript），实现客户端的功能与交互

16.css的基本语句构成？css选择器有哪些？优先级如何计算？

// 选择器 { 属性：属性值 }   整个{}是一个声明
div { color:red }

css选择器有：元素选择器、id选择器、类选择器、属性选择器、组合选择器、后代选择器、子元素选择器、相邻兄弟选择器、伪类选择器、伪元素选择器

元素选择器：html{ margin:0;padding:0; }  div{ font-size:12px; }
id选择器：#app{ color:red }
类选择器：.item{ width:200px }
属性选择器：
*[title]{color:red}   //把所有带标题的元素颜色设置为红色
a[href] {color:red;}   //把带有href属性的a标签设置为红色
a[href][title] {color:red;}    //把同时带有href属性和title属性的a标签设置为红色
组合选择器：h2,p{ color:red }    //把h2和p的颜色都设置为红色
后代选择器：div p{color:red}     //div下的p标签设置为红色
子元素选择器：div>p{color:red}    //div的子元素设置为红色，孙元素不会被设置
相邻兄弟选择器：h1 + p{color:red} //选择紧接在h1后面的p，h1和p属于同一个父级
伪类选择器：a:active{color:red}  //选定的链接为红色
伪元素选择器：
h3:before { background:url() }
h1:first-letter{color:red}    //向文本第一个字母设置红色

优先级：!importent > 行内样式 > id选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
同一级别css，后写的会覆盖先写的

引入方式不同，优先级不同：行内样式 > 内部样式表 > 外部样式表 > 导入样式（@import）
参考大佬的总结：css优先级总结

17.行内元素有哪些？块状元素有哪些？css的盒子模型？

行内：b, big, i, small, tt，abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var，a, bdo, br, img, map, object, q, script, span, sub, sup，button, input, label, select, textarea
块元素：address、div、video、audio、p、footer、header、form
盒子模型包括：padding、margin、border、content
W3C标准盒模型：只包含content
IE盒模型：content+padding+border
box-sizing：border-box/content-box/inherit
border-box：在已设定好的宽高内绘制 内 边距和边框
content-box（默认）：在已设定好的宽高 外 绘制内边距和边框
inherit：继承父级box-sizing属性

18.< DOCTYPE html >的作用

声明文档的解析类型，使浏览器统一使用W3C标准渲染页面

19.css引入的方式有哪些？link和@important有什么区别？

css引入的方式：①外部样式表②内联样式表③行内样式
link和@important的区别：
A.语法不同：
link写在HTML中

<link href="./url" rel="stylesheet" type="text/css" >
//rel 属性指示被链接的文档是一个样式表

@import url 多用于css文件中，把多个样式表导入到一个样式表中，在页面里面只需要导入一个样式表即可，便于修改和扩展

1.在html中
　　<style>
　　　　@import url
　　</style>
2.在css中
@import url

B.本质不同
属于标签，只能放入html源码里进行使用，而@import可以看作为css样式，可以引入css样式（link属于html标签，而@import是css提供的）
C.加载顺序不同
页面加载时，link会被同时被加载，而@import引用的css会等到页面被加载完的时候再加载
D.兼容性
@import只有在IE5以上才能被识别，而link是html标签，无兼容问题

19.flex实现横向滚动

<style>
.parent{
	display:flex;
}
.child{
	width:300px;
	height:300px;
	background-color:aquamarine;
	flex-shrink:0;
}
</style>
<div class="parent">
	<div class='child'></div>
	<div class='child'></div>
	<div class='child'></div>
	<div class='child'></div>
	<div class='child'></div>
	<div class='child'></div>
	<div class='child'></div>
</div>

20.实现文字平铺

<style>
p{
	text-align:justify;
	text-align-last:justify;
}
</style>
<p>哈哈哈哈</p>