前端面试知识点准备（HTML、css）_html、css知识点常面试的-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35119405/article/details/79588606

1、iframe的缺点

*iframe会阻塞页面的onload事件

*搜索引擎的检索程序无法解读这种页面，不利于SEO

*会影响页面的并行加载

（并行加载：同一时间针对同一域名下的请求）

解决方法：使用js动态给iframe的src加载页面内容

-》iframe的优点

*重载页面是不需要重载整个页面，只需重载页面中的一个框架页

*技术易于掌握，使用方便，使用者众多，主要用于不需要搜索引擎搜索的页面

*方便制作导航栏

2.盒子模型

内容（content）、填充（padding）、边框（border）、边界（margin）

a.IE盒子模型

b.w3c盒子模型

区别：IE盒子模型包括border和padding

（基于此差别，w3c盒子引入box-sizing）

other。。。。。

1.对于行级元素，margin-top和margin-bottom对于上下元素无效，margin-left和margin-right有效（<a>标签等）

2.对于相邻的块级元素margin-bottom和margin-top取值方式

1）都是正数，取最大

2）都是负数，取最小

3）一正一负，正负相加

3.position

position为元素定位属性，包含：

1）absolute绝对定位：相对位置为父元素非static的第一个父元素进行定位。如果找不到，则以窗口定位

2）fixed固定定位：相对浏览器窗口（不是body）进行定位

3）relative相对定位：相对其正常（默认定位）位置进行定位

4）static：默认定位

4.样式导入的方式

共2种：1）<link rel="stylesheet" href="index.css">

2）@import

<style type="text/css">
    @import  "index.css";
</style>

区别：1.<link>除了引用样式文件，还可以引用图片等资源文件，而import只能应用样式文件

2.兼容性不同，<link>不存在兼容性的问题，import在IE5以上支持，是css2.1新增

3.在样式文件可以使用import导入其他的样式表文件，而link不可以（是否可以嵌套导入）

4.link应用css时，在页面加载时同时加载，@import需要页面完全载入后再加载

5.link支持使用JavaScript控制DOM去改变样式，而@import不支持。

5.：before和：：before的区别

相同点：1）都可以用来表示伪类对象，用来设置对象前的内容

2）：before和：：before写法等效

不同点：1）：before是css2的写法，：：before是css3的写法

2）：before的兼容性要比：：before好，不过在H5中开发建设中使用：：before比较好

===========================================================================

*伪类对象通常会结合content属性一起使用

*为了对象会出现在DOM对象中，所以不能通过js来操作，仅仅在渲染层中加入

*为了对象的特效通常会结合:hover伪类样式一起使用，如

.test:hover ::after{
/*此时的animation和transaction才会生效*/
}

6.css样式的优先级

import>style>权重值

权重值：

1.标签权重值=1

2.class权重值=10

3.id权重值=12

ps:权重值可以累加

7.如何居中元素

7-1 行级元素：text-align:center

7-2 块级元素

.div{
    /*设置任意一个宽度后，利用margin属性居中*/
    width:200;
    margin:0 auto;
}

7-3 浮动元素

7-3-1 不定宽度

<style type="text/css">
     .outer{
	float: left;
        position:relative;
	left:50%;
      }
      .outer div{
	position: relative;
	right:50%;
	}
</style>

<div class="outer">
   <div>水平居中不定宽度的浮动元素</div>
</div>

7-3-2 固定宽度

<style type="text/css">
    .outer{                                                             
       float:left;
       position:relative;
       left:50%;
       width:200px;                                                                                                                height:200px;
       margin-left:-100px;/*width的一半*/
      background-color:pink;/*为了看到效果*/
    }
</style>

<div class="outer"></div>

7-3-4 绝对定位的div居中

.outer{
     position:absolute;
     left:50%;
     width:200px;
     height:200px;
     background-color: red;
     margin-left: -100px;
}

或者

.outer{
     position:absolute;
     left:0；
     right:0;
     width:200px;
     height:200px;
     background-color: red;
     margin:0 auto;
}

7-4 垂直居中

7-4-1 行级元素通过设置line-height:{height:300px; line-height:300px;}

7-4-2 块级元素（固定高度）

<style type="text/css">
     /*第一步  设置父元素的height与line-height一致*/
     .outer{
	height:200px;
	line-height:200px;
	background-color:pink;
     }
   /*第二步  设置居中元素的vertical-align和display属性*/
      .outer  div{
	 vertical-align: middle;
	 display: inline-block;/*inline或者inline-block*/
       }
</style>

<div class="outer">
     <div>垂直居中</div>
</div>

7-4-3 块级元素（不定高度）

父级元素的padding-top=padding-bottom

.outer{
	padding-top:100px;
	padding-bottom:100px;
	background-color: pink;
}

<div class="outer">
    <div></div>
</div>

8.display

8-1 常见属性：1.none(隐藏元素) 2.block(块级元素) 3.inline-block(内联块级元素) 4.list-item(列表项目) 5.table(<tabke>) , table-row-group , table-row(<tr>) , table-cell(<td>)

8-2 行级元素浮动以后，display属性值默认为block

8-3 flex（弹性盒子）点击打开链接

9.为什么要初始化css样式

1.因为浏览器的兼容性问题，有些标签在各个浏览器的默认值不同，因此导致不同浏览器显示的差异

2.初始化css样式对SEO有一定的影响

10.代码实现“品”字布局

<style type="text/css">
	.main{
	     position: fixed;
	     left:0;
	     top:0;
	     width:100%;
	     height:100%;
	}
	.upper{
	    position: relative;
	    top:0;
	    height:50%;
	    width: 100%;
	}
	.down{
	   position: relative;
	   bottom:0;
	   height:50%;
	   width: 100%;
	}
	.square-1,.square-2,.square-3{
	   border:2px solid black;
	}
	.square-1{
	   width:50%;
	   margin:0 auto;
	   height: 100%;
	}
	.square-2{
	   position: absolute;
	   left:0;
	   bottom:0;
	   height:95%;
	   width:46%;
	}
	.square-3{
	   position: absolute;
	   right:0;
	   bottom:0;
	   height:95%;
	   width:46%;
	}
</style>

<div class="main">
     <div class="upper"> 
	<div class="square-1"></div>
     </div>
     <div class="down">
	<div class="square-2"></div>
	<div class="square-3"></div>
     </div>
</div>

11.均分原理实现“三角形”结构

.main{
      width:0;
      height:0;
      border:100px solid red;
      border-left-color: white;
      border-right-color: white;
      border-bottom-color: white;
}

<div class="main"></div>

或者利用反向思维

.main{
      width:0;
      height:0;
      border:100px solid transparent;
      border-bottom-color:red;
}

12.清除浮动

12-1 使用clear=both清除浮动

12-1-1 在浮动元素后使用一个含有clear:both属性的块级元素

<style type="text/css">
  .main{
	margin:0 auto;
	width:200px;
	border:5px solid  red;
   }
   .float{
	height:200px;
	background-color: #000;
	float:left;
    }
    .clear{
	clear: both;
	/*确保清除浮动不占用任何空间*/
	height:0;
	font-size:0;
	overflow: hidden;
     }
</style>

<div class="main">
      <div class="float"></div><!--浮动的元素-->
      <div class="clear"></div><!--清除浮动-->
</div>

12-1-2 使用<br clear="all"/>

<div class="main">
     <div class="float"></div>
     <br  clear="all">
</div>

12-1-3 zoom:1+after

<style type="text/css">
   .main{
	margin:0 auto;
	width:200px;
	border:5px solid  red;
   }
   .float{
	height:200px;
	background-color: #000;
	float:left;
   }
   .clear{
	zoom:1;
   }
   .clear::after{
	clear: both;
	content: "";
	display: block;
	height: 0;
   }
</style>

<div class="main  clear">
      <div class="float"></div>
</div>

12-2 使用overflow

<style type="text/css">
    .main{
	margin:0 auto;
	width:200px;
	border:5px solid  red;
	overflow: hidden;/*hidden或者auto*/
     }
     .float{
	height:200px;
	background-color: #000;
	float:left;
      }
</style>

<div class="main">
      <div class="float"></div>
</div>

12-3 display:inline-block

<style type="text/css">
    .main{
	margin:0 auto;
	width:200px;
	border:5px solid  red;
	display: inline-block;
     }
     .float{
	height:200px;
	background-color: #000;
        float:left;
     }
</style>

<div class="main">
       <div class="float"></div>
</div>

缺点：元素不再居中，需要利用position、margin-left等属性调整

12-4 父级元素浮动

<style type="text/css">
     .main{
	margin:0 auto;
	width:200px;
	border:5px solid  red;
	float:left;
     }
     .float{
	height:200px;
	background-color: #000;
        float:left;
     }
</style>

<div class="main">
      <div class="float"></div>
</div>