面试知识点总结

最新推荐文章于 2022-01-21 09:51:42 发布

WeiflR10

最新推荐文章于 2022-01-21 09:51:42 发布

阅读量354

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/WeiflR10/article/details/106335449

版权

html+css

行内标签和块级标签

行内标签：span u img input select i b...（占满一行）多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化

块级标签：div p h ul li...（独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父级宽度）

可以通过以下方式转换

{
    display: inline;               //具有行内标签特性
    display: inline-block;         //使其按行内元素排列,却可以定义宽高
    display: block;                //具有块级标签特性
}

垂直居中的实现

方法一：text-align 和 line-height
//必须是行内元素
<div class="block">
	<span class="nav">span标签</span>
</div>

.block{
	text-align: center;
	width: 100%;
	height: 800px;
	background-color: aquamarine;
}
.nav{			
	line-height: 300px;
	width: 300px;
	height: 300px;
	background-color: pink;
}

方法二：position+负margin
//固定宽高
<div class="block">
	<div class="nav">div标签</div>
</div>
.block{
		position: relative;
		width: 100%;
		height: 800px;
		background-color: aquamarine;
}
.nav{
		position: absolute;
		top: 50%;
		margin-top: -150px;
		left: 50%;
		margin-left: -150px;
		width: 300px;
		height: 300px;
		background-color: pink;
}

方法三：position+margin auto
//固定宽高
.block{
	position: relative;
	width: 100%;
	height: 800px;
	background-color: aquamarine;
}
.nav{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin:auto;
	width: 300px;
	height: 300px;
    background-color: pink;
}

方法四：position+transform
//无宽高
.block{
	position: relative;
	width: 100%;
	height: 800px;
	background-color: aquamarine;
}
.nav{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
    background-color: pink;
}
方法五：flex
//无宽高
.block{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 800px;
	background-color: aquamarine;
}
.nav{
    background-color: pink;
}

清除浮动

原因：css在设置浮动的时候，会脱离文档流，使父元素div宽度高度不能撑开。

解决方式：①父元素使用overflow：hidden

② 在浮动元素的最后面添加一个新元素，应用clear:both

③给父元素定义一个固定高度

html语义化

语义化是html结构更清晰，便于浏览器解析，利于SEO搜素，使代码更好理解，便于维护。（header、footer、nav...）

文档流

行内元素从左至右排列，块级元素从上至下的排列,即为文档流

HTML5 的新特性和css3新特性

标签： nav、header、footer、article 、section等。ideo、audio、canvas、localStorage、sessionStorage

颜色rgba、border-radius、box-shadow、transform等

盒模型: 标准模型与IE模型

盒模型都包含4个部分：content、padding、border、margin。标准盒模型与IE盒模型的区别在于设置width/height的范围不同。标准盒模型的width = content ; 而IE盒模型的width = content + padding + border

权重问题

!important > 内联样式 > id选择器 > class选择器/属性选择器/伪类选择器 > 标签选择器/伪元素选择器 > 通配符

link与@import区别

①link 是基于XHML标签的，无兼容性；@import是css提供的，只用IE5以上才兼容
②link 标签引入的css是同步加载的； @import 引入的css只有等页面加载完毕后，才开始加载
③link 标签不仅可以加载css文件，还可以定义RSS、rel连接属性。
④可以使用js操作DOM，插入link标签；而无法使用操作DOM的方式插入@import。

BFC、触发条件、可解决的问题

BFC：块级格式上下文，是css的一个布局的概念，是一块独立于外界的一个区域。触发条件：根元素(html)、float不为none、position设置为absolute或者fixed、overflow值不为visible、display值为inline-block/table-cell/tabel-caption。可解决的问题：清除浮动、margin塌陷问题、可做两栏布局自适应。

BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。

px、em、rem的区别

px 是绝对长度单位。em 是相对长度单位，相对于父元素。rem 是相对长度单位，相对于根元素。vw：视窗宽度，1vw等于视窗宽度的1%。

<img>标签的alt和title区别

①alt：加载失败时显示 ②title：鼠标进入到图片时会显示

cookie，sessionStorage 和 localStorage的区别

①cookie 一般用来存储验证客户端身份的数据。存储大小不超过4k，并且在第一次请求之后，浏览器都会在请求头上添加cookie字段带上cookie，发到服务端。过期之前一直有效

②localStorage 是永久存储，大小为5M，只有手动清除数据才会失效。

③sessionStorage 是会话存储，大小为5M，当浏览器窗口关闭时数据失效。

圣杯布局和双飞翼布局

都是三栏布局，即两边宽度固定，中间宽度自适应。

圣杯布局：中间元素的大小就是屏幕总宽减去left和right宽度值
双飞翼：中间元素的宽度依然是全屏宽的100%，只不过将显示内容用一个小div包起来，再用margin值将左右顶开
两者出来的页面效果是一样的

Doctype是什么

<!DOCTYPE>声明位于文档中最前面的位置，在<html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。（注：在 HTML 中某些元素可以彼此不正确地嵌套，在 XHTML 中，所有的元素必须正确地嵌套。在XHTML中元素必须被嵌套于 <html> 根元素中。在HTML中允许一些不规范的写copy法，但是在XHTML则式不可以的。）