如何理解HTML语义化
1:使人更容易理解(增强代码可读性)
2:使机器更容易理解(利于搜索引擎SEO)
默认情况下,哪些HTML标签是块级元素,哪些是内联元素
块级元素:
h1~h6
p
div
body
table
ol
ul
article
footer
等
行内元素:
span
img
input
button
等
块级元素的特点是独占一行,且宽高可以被设置,而行内元素不能独占一行,且宽高无法设置
使用display:block
可以将行内元素转换为块级元素,使用display:inline
可以将行内元素转化为块级元素,使用display:inline-block
将元素转化为行内块元素(也即是不能够换行,但可以设置宽高)
如下代码,div1的offersetWidth是多大
.div1{
width:100px;
padding:10px;
border:1px solid #ccc;
margin:10px;
}
<div class="div1"></div>
该题考察盒模型的宽度如何计算;首先要知道的是offsetWidth = 内边距+内容宽度+边框
,当我们不对元素设置box-sizing
的时候,box-sizing
的值默认为content-box
,给元素设置的width只是内容的宽度,此时offsetWidth的值为100 + 10*2 + 1*2
;当box-sizing
为border-box
时,此时给元素设置的width的值包括元素内边距,内容宽度,边框的width之和,此时offsetWidth的值为100
如下代码,AAA和BBB的距离是多少
p{
font-size:10px;
line-height:1;
margin-top:10px;
margin-bottom:15px;
}
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
该题考察margin纵向重叠问题,中间的3个p标签因为没有内容,所以可以直接忽略,接着第一个p标签的margin-bottom
会和最后一个p标签的margin-top
进行重叠,因此结果为15px
描述一下margin负值的情况
首先当我们对元素设置margin-left
和margin-top
为负值的时候,元素自身发生移动,并分别往左或往上移动
接着,当我们对元素设置margin-bottom
和margin-right
设置值为负值的时候,元素自身不会发生移动,元素下方的元素会往上移动或元素右边的元素往左移动
讲一下BFC
定义:
BFC也即是块级格式化上下文,也就是创建一个空间,使空间内部元素的渲染不影响外部
形成块级作用域的条件:
1:float的值不为none
2:overflow的值不为visible
3:position的值为absolute或fixed等
4:display的值为flex,inline-block等
作用:
清除浮动
手写clearfix
.clear:after{
content:'',
display:table;
clear:both;
}
.clearfix{
*zoom:1;/*兼容IE低版本*/
}
居中有哪些实现方式
水平居中
对于行内元素,直接对其使用text-align:center
即可
对于块级元素,可以直接使用margin:auto
,也可以position:absolute;left:50%;margin-left:-元素宽度的1/2
垂直居中
对于行内元素,对元素设置line-height:父级元素的高度
即可
对于块级元素,可以
position:absolute;
top:50%;
margin-top:-自身元素高度的一半
也可以
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto
或者
position:absolute;
transform:translate(-50%,-50%);
left:50%;
top:50%;
当然,其实我们实际项目开发最常用到的还是弹性布局来实现水平垂直居中
display:flex;
justify-content:center;
align-items:center
如果不考虑浏览器兼容性,还可以使用栅格布局
display:grid;
place-item:center;
下列代码,p标签的line-height的值是多少
body{
font-size:20px;
line-height:200%;
}
p{
font-size:16px;
background-color:#ccc;
}
答案是20*200%
;
如果body属性的line-height的值为一个小数的话,比如1.5,那么此时p标签的line-height值为16*1.5
如果body属性的line-height的值为一个整数的话,比如30,那么此时p标签的line-height值为30
rem是什么
rem是一个相对于根元素(html)节点的相对长度单位
响应式布局的常见方案
1:媒体查询media-query
,接着在根节点(html)上设置不同的font-size,配合rem使用
2:vm,vh
vm表示网页视口高度的1/100,也即是window.innerWidth
,浏览器内容高度,vh同理
window.screen.height
表示屏幕高度(屏幕亮起的区域)
document.body.clientHeight
body的高度