前端基础之HTML + css（持续更新中）

最新推荐文章于 2024-02-21 18:02:20 发布

蜗牛ha

最新推荐文章于 2024-02-21 18:02:20 发布

阅读量105

点赞数

分类专栏：前端基础文章标签： html css 面试

本文链接：https://blog.csdn.net/tan9374/article/details/107760377

版权

前端基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1. 什么是标签语义化?

html语义化让页面的结构化，结构更清晰，便于对浏览器，搜索引擎解析；
即使没有css样式的情况下也已文档的格式显示，并且容易阅读；
搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键词的权重，利于SEO；
使于都源代码的对网站更容易分块，便于阅读维护，理解；
合理的标签做合理的事情，就叫标签语义化。

都有哪些标签？什么意思？

有块状标签，行内标签，行内-块状标签；
块状标签:h1-h6,div,p,ul,ol,li,dl,dd,header,footer,article,nav,section...
行内标签:span,a,b,i,em,strong,sup,sub...
行内-块状标签:input,image...表单元素

行内元素、块级元素和行内块元素的区别？

行内元素：不独占一行，不能设置宽高
块级元素：独占一行，能设置宽高
行内块元素：不独占一行，但可以设置宽高

如何转化？

display:block,inline,inline-block

display还有那些？

none，table，flex

display：none？还有那些方法能让元素隐藏？

display:none；元素不存在
visibility:hidden；元素存在
opacity:0；元素存在
opacity的兼容：
.opacity{
 filter:alpha(opacity=50);       /* IE */
 -moz-opacity:0.5;              /* 老版Mozilla */
 -khtml-opacity:0.5;              /* 老版Safari */
 opacity: 0.5;           /* 支持opacity的浏览器*/
}
CSS3 filter(滤镜) 属性：opacity是其中一种

display：flex？盒模型？

标准盒模型
怪异盒模型:解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
弹性盒模型:flex--浏览器兼容性比较差，只能兼容到ie9及以上
flex处理div上下左右居中很好使?
justify-content:center;align-items:center;
上下左右居中?还有那些办法?
定位position/js/display:table-cell;text-align:center;table-cell;要求父级有固定宽高
还能做响应式布局,响应式布局还有啥办法？
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
rem,百分比，@meida screen (min-width)/(max-width)媒体查询；
// 字体大小:定义响应式字体
html{font-size:100%;}
@media (min-width:640px){body{font-size:1rem;}}

2. z-index原理？文档流？定位？

文档流：内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。
脱离文档流的方法：
1. float:left; 2.  position: absolute; 3.  position:fixed

3. 不考虑其他因素，下面哪种的渲染性能比较高?

.box a{} 多查
a{} 少查
css渲染机制是从右向左查询

4. css经典布局方案？

//左定右定中间自适应
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			html,body{width: 100%;height: 100%;}
			/* .box{height: 100%;padding:0 400px;position: relative;}
			.left{background: #111;height: 100%;position: absolute;left: 0;width: 200px;}
			.center{width:100%;}
			.right{background: #ccc;height: 100%;position: absolute;right: 0;width: 200px;} */
			
			/* .box{width: 100%;height: 100%;display: flex;justify-content: space-between;}
			.left{width: 200px;background: #111;}
			.right{width: 200px;background: #ccc;} */
			
			.box{width: 100%;height: 100%;display: flex;}
			.left{width: 200px;background: #111;}
			.right{width: 200px;background: #ccc;}
			.center{flex: 1;}
			
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left"></div>
			<div class="center"></div>
			<div class="right"></div>
		</div>
	</body>
</html>

//瀑布流

<style>
			body,html{
				width: 100%;
			}
			#app{
				width: 100%;
				column-count: 2;
				column-gap: 5px;
			}
			.column img{
				width: 100%;
			}
		</style>
<div id="app">
			<div class="column" v-for="(item,index) in list" :key='index'>
				<img :src="item"/>
			</div>
		</div>

蜗牛ha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基础之HTML + css（持续更新中）

1. 什么是标签语义化?合理的标签做合理的事情，就叫标签语义化。都有哪些标签？什么意思？有块状标签，行内标签，行内-块状标签；块状标签:h1-h6,div,p,ul,ol,li,dl,dd,header,footer,article,nav,section...行内标签:span,a,b,i,em,strong,sup,sub...行内-块状标签:input,image...表单元素行内元素、块级元素和行内块元素的区别？行内元素：不独占一行，不能设置宽高块级...
复制链接

扫一扫

专栏目录