前端面试中关于HTML和CSS的一些基础题笔记整理

最新推荐文章于 2024-09-03 21:43:51 发布

Mr.小智丶

最新推荐文章于 2024-09-03 21:43:51 发布

阅读量164

点赞数 1

分类专栏：前端学习学习笔记文章标签： css html 面试强化学习

本文链接：https://blog.csdn.net/weixin_43520364/article/details/115411342

版权

前端学习同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

学习笔记

4 篇文章 0 订阅

订阅专栏

1、CSS的优先级
①通配和继承：0000
②元素选择器：0001
③类、伪类： 0010
④ID选择器： 0100
⑤行内样式： 1000
（加了 ‘！important’ 的优先级为无穷大）

2、外边距塌陷（外边距合并）
①、上下元素之间的外边距塌陷
当一个元素出现在另外一个元素的上面时，第一个元素的下外边距与第二个元素的上外边距将发生合并。合并的结果是外边距变成上述两者中大的一个。

②包含元素之间的外边距塌陷
当一个元素包含在另一个元素中，父元素没有内边距和边框且子元素没有外边距时，父元素与子元素的上外边距（或下外边距）会发生合并。
包含元素之间的外边距合并
解决外边距塌陷的办法：

可以为父元素定义上边框。
可以为父元素定义上内边距
可以为父元素添加overflow:hidden。

3、box-shadow属性的参数问题
box-shadow ：h-shadow v-shadow [blur] [spread] [color] [inset]
前两个参数必需、后四个为可选
第一个/第二个参数分别为水平阴影位置、垂直阴影位置；
第三个参数用于决定模糊距离
第四个参数用于指定阴影尺寸
第五个参数用于指定阴影颜色
第六个参数用于指定阴影的内外部（inset内部、outset外部）默认为inset
4、浮动
特性：浮动元素不保留原来位置，脱离标准流，具有行内块元素特性。
浮动产生的问题：
下面展示一些 产生了浮动问题的代码。

// A code block
var foo = 'bar';

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动</title>
		<style type="text/css">
			.clear {
				clear: both;
			}
			.father {
				width: 500px;
				
				border: 1px solid red;
			}
			.son1 {
				float: left;
				width: 100px;
				height: 100px;
				border: 1px solid blue;
			}
			.son2 {
				float: left;
				width: 200px;
				height: 200px;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son1"></div>
			<div class="son2"></div>
		</div>
		<div style="background-color: pink;">后面的内容</div>
	</body>
</html>

上面代码的执行结果
从上图可以看到，当父级盒子没有设置高度、子盒子浮动了、就会影响到后面的内容布局。此时就需要用到清除浮动。

清除浮动方法：
①额外标签法
在父元素father后面添加一个标签（必须是块级的）给该添加的标签加上上述代码中的clear这个类。
下面展示 额外标签法清除浮动。

// A code block
var foo = 'bar';

<div class="father">
			<div class="son1"></div>
			<div class="son2"></div>
			<div class="clear">这是用来清除浮动的标签</div>
		</div>
		<div style="background-color: pink;">后面的内容</div>

加上清除浮动的标签后运行结果为：
在这里插入图片描述

可以看到，加了清除浮动的标签后，“后面的内容”能正确的布局。
②给父级元素添加overflow属性
在father选择器里添加overflow ：hidden；
③给父级元素添加after伪元素
下面展示一些 after伪元素清除浮动。

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
		        content: "";
		        display: block;
		        height: 0;
		        clear:both;
		        visibility: hidden;
		    }
		    .clearfix{
		        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
		    }
	<body>
		<div class="father clearfix">
			<div class="son1"></div>
			<div class="son2"></div>
			<!--<div class="clear">这是用来清除浮动的额外标签</div>-->
		</div>
		<div style="background-color: pink;">后面的内容</div>
	</body>

④添加双伪元素
下面展示一些 双伪元素清除浮动。

			.clearfix2:after,.clearfix2:before {
		        content: "";
		        display: table;
		    }
		    .clearfix2:after {
		        clear: both;
		    }
		    .clearfix2 { /*解决低版本浏览器的适配问题*/
		        *zoom: 1;
		    }
	<body>
		<div class="father clearfix2">
			<div class="son1"></div>
			<div class="son2"></div>
			<!--<div class="clear">这是用来清除浮动的额外标签</div>-->
		</div>
		<div style="background-color: pink;">后面的内容</div>
	</body>

Mr.小智丶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端面试中关于HTML和CSS的一些基础题笔记整理

1、CSS的优先级①通配和继承：0000②元素选择器：0001③类、伪类： 0010④ID选择器： 0100⑤行内样式： 1000（加了 ‘！important’ 的优先级为无穷大）2、外边距塌陷（外边距合并）①、上下元素之间的外边距塌陷当一个元素出现在另外一个元素的上面时，第一个元素的下外边距与第二个元素的上外边距将发生合并。合并的结果是外边距变成上述两者中大的一个。②包含元素之间的外边距塌陷当一个元素包含在另一个元素中，父元素没有内边距和边框且子元素没有外边距时
复制链接

扫一扫

专栏目录