面试个人摸底测试总结（第二天）HTML/.CSS
01，如何将下面的代码改得更有语义化？
<div>
<h1>这是一个标题</h2>
<p>这是一个文字</p>
<ul>
<li>列表一</li>
<li>列表二</li>
</ul>
</div>语义化：更合理，方便阅读，有利于SEO
02、哪些标签是块标签？有哪些是行内标签？
块级标签：div，p，h，header，footer，nav，main，aside、section、article
行内标签：span，i，b，a
行内块标签：img。input
03、行内标签与块标签有什么区别？
块标签：不设宽高跟随父级，能设宽高，独占一行，可设padding，margin，能嵌套标签（p除外）
行内标签： 跟随自己是被撑开得，不能设宽高，共享一行，只能设置padding，margin左右，不能嵌套
行内块：共享一行，能设宽高，padding，margin
如何转换，用display:block， display:inline，display:inline-block
04、阅读下面的代码，div的offsetWidth是多少？
offsetWidth：width/height + border + padding
box-sizing : border-block 盒子模型等于 = width/height
05、阅读下面的代码，“文字”与“标题”的间距是多少？
margin 上下塌陷，左右是叠加
塌陷谁大听谁得
06、margin设置top、left、right、bottom负值后，会发生什么？
top left 会影响自身向相反得方向移动 right bottom 形象别人向相反得方向移动
07、什么是BFC？如何应用？
block format context 块级格式上下文，一个独立渲染的区域，内部元素的渲染不会影响边界外的元素
形成bfc得条件是 float，position，overflow，dispaly：inline-blcok，flex
08、如何实现圣杯布局
方法一：
<style>
*{
margin:0;
padding: 0;
}
.box div{
height: 200px;
float: left;
}
.box{
margin-left: 300px;
margin-right: 300px;
}
.content{
width: 100%;
min-width: 400px;
background-color: aqua
}
.left{
width: 300px;
position: absolute;
top: 0;
left: 0;
background-color: red;
}
.right{
margin-right: -300px;
width: 300px;
background-color: blue
}
</style>
</head>
<body>
<div class="box">
<div class="content">123</div>
<div class="left">1</div>
<div class="right">2</div>
</div>
</body>方法二：
<style>
*{
margin: 0;
padding: 0;
}
.box{
height:50px;
background-color: red;
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>09、如何清除浮动？手写clearfix
一，overflow：hidden
二，display：inline-block
三，父级也float，四父级定位（不用）
五，手写clearfix
clearfix：alter{
content："";
clear:both;
display:block
} 10、div垂直水平居中？
方法一，
div{
widows: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom:0;
margin: auto
}方法二，
div{
width:200px;
height:200px;
position:absolute;
left: 50%;
top:50%;
margin-left: -100px;
margin-top: -100px;
}方法三，
div{
width:200px;
height:200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%)
}方法四，
.box{
height: 500px;
display: flex;
justify-content: center;
align-items:center;
}
.box > div{
width: 200px;
height: 200px;
}方法五，
div{
width: 200px;
height: 200px;
display: flex;
}
div>div{
width: 100px;
height: 100px;
margin: auto;
}方法六，
div {
width: 200px;
height: 200px;
display: flex;
}
div>div{
width: 100px;
height: 100px;
margin: auto;
align-self: center;
}11、px/%/em/rem/vw/vh有什么区别？
px 是固定，像素
%根据父级计算
1em等于1fontsize大小
1rem 等于 html fontsize
1vw=整个视窗宽度的1% 1vh=整个可视窗口高度的1%
14、CSS选择器优先级
!important > 行间样式 > id > class > 标签 > *
15、定位
position:absloute
fixed
relative
static-
目录导航
或点击复制连接
2022-10-24 09:33:31 1个人觉得很赞
公告
昵称：六扇有伊人
园龄：3年8天
注册时间：2021-11-16
当前在第：1页
总共：1条
搜索
精品文章 48小时阅读排行
优秀文章 7天获赞排行