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

古城微笑少年丶 2023-03-04 09:27 10阅读 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>

//瀑布流