2.CSS面试题
2021-03-03 14:31
标签：add 应用 定位元素 距离 item nsf center line inner offsetWidth = ( 内容宽度width + 内边距padding + 边框border) ，无外边距margin offsetWidth = 122px； 如果让 offsetWidth 等于100px，不修改width、padding 、border等，应该怎么做？ 使用box-sizing: border-box; 答案：15px 相邻元素的 margin-top 和 margin-bottom 会发生重叠。 空白内容的
也会重叠。布局
1.盒子模型的宽度如何计算？
style>
#item{
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
style>
div id="item">
div>
script>
let itemOffSetWidth = document.getElementById(‘item‘).offsetWidth
console.log("itemOffSetWidth",itemOffSetWidth)
script>
style>
#item{
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
box-sizing: border-box;
}
style>
2.margin纵向重叠的问题
style>
p {
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}
style>
p>AAAp>
p>p>
p>p>
p>p>
p>BBBp>
3.margin负值的问题
-
margin-top 和 margin-left 负值，元素向上、向左移动。
-
margin-right负值，右侧元素左移，自身不受影响。
-
margin-bottom负值，下方元素上移，自身不受影响。
4.BFC理解和应用
BFC：一块独立渲染的区域，内部元素的渲染不会影响边界以外的元素。
形成BFC的常见条件：
-
float 不是none
-
position 是 absolute 或 fixed
-
overflow 不是 visible
-
display 是 flex inline-block 等
使用BFC清除浮动
style>
.container {
background-color: #F1F1F1;
}
.left {
float: left;
margin-right: 10px;
}
style>
div class="container">
img src="https://asset.ibanquan.com/image/5f8184831b2b5f003372f1e2/s.jpeg?v=1602323587" class="left">
p>使用BFC清除浮动p>
div>
style>
.container {
background-color: #F1F1F1;
}
.left {
float: left;
margin-right: 10px;
}
.bfc {
overflow: hidden; /* 触发BFC */
}
style>
div class="container bfc">
img src="https://asset.ibanquan.com/image/5f8184831b2b5f003372f1e2/s.jpeg?v=1602323587" class="left">
p class="bfc">使用BFC清除浮动p>
div>
5.float布局的问题，以及clearfix
如何实现双飞翼布局
style type="text/css">
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
font: 20px/40px "microsoft yahei";
color: white;
}
#container {
width: 90%;
margin: 0 auto;
height: 100%;
}
#header,
#footer {
height: 12.5%;
background: deepskyblue;
}
#main {
height: 75%;
}
#center,
#left,
#right {
height: 100%;
float: left;
}
#center {
width: 100%;
background: lightgreen;
}
#right {
background: lightblue;
width: 20%;
margin-left: -20%;
}
#left {
background: lightcoral;
width: 20%;
margin-left: -100%;
}
#main-inner {
padding-left: 20%;
}
style>
body>
div id="container">
div id="header">
header
div>
div id="main">
div id="center">
div id="main-inner">
center
div>
div>
div id="left">
left
div>
div id="right">
right
div>
div>
div id="footer">
footer
div>
div>
body>
双飞翼布局的目的
-
三栏布局，中间一栏最先加载和渲染（内容最重要）
-
两侧内容固定，中间内容随着宽度自适应
-
允许任意列的高度最高；
双飞翼布局的技术总结
-
使用float布局
-
两侧使用margin负值，以便和中间内容横向重叠
-
防止中间内容被两侧覆盖，一个用padding，一个用margin
clearfix
style type="text/css">
.clearfix:after{
content: ‘‘;
display: table;
clear: both;
}
.clearfix{
*zoom:1; /* 兼容IE */
}
style>
6.flex画色子
style type="text/css">
.box{
width: 200px;
height: 200px;
border: 2px solid #CCC;
border-radius: 10px;
padding: 20px;
display: flex;
justify-content: space-between;
}
.item{
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #666;
}
.item:nth-child(2){
align-self: center;
}
.item:nth-child(3){
align-self: flex-end;
}
style>
div class="box">
span class="item">span>
span class="item">span>
span class="item">span>
div>
定位
1.absolute 和 relative 分别依据什么定位？
absolute 依据最近一层的定位元素定位
relative 依据自身定位
2.居中对齐有哪些实现方式？
水平居中
-
inline 元素：text-align: center
-
block 元素：margin: 0 auto
-
absolute 元素：left: 50% + margin-left 负值
-
元素为行内元素，设置父元素 text-align:center
-
使用 flex-box 布局，指定 justify-content 属性为center
垂直居中
-
inline 元素：line-height 的值等于 height 值
-
absolute 元素：top: 50% + margin-top 负值
-
absolute 元素：transform(-50%,-50%)
-
absolute 元素：top,left,bottom,right = 0 + margin: auto
-
使用 flex 布局，设置为 align-item：center
图文样式
1.line-height的继承问题
-- p标签的行高是多少? -->
style type="text/css">
* {
margin: 0;
padding: 0;
}
body{
font-size: 20px;
line-height: 200%;
}
p{
font-size: 16px;
}
style>
body>
p>AAAp>
body>
答案：40px = font-size * line-height。
line-height如何继承？
具体数值，如50px，继承该具体数值
比例，如果2/1.5，继承该比例
百分比，如200%，继承计算出来的值（font-size * line-height）
响应式
1.rem是什么？
rem是一个长度单位
-
px：绝对长度单位
-
em：相对于父元素的长度单位
-
rem：相对于根元素（根元素：没有父节点的 dom 节点，在HTML中，根元素是html元素）的长度单位
2.如何实现响应式？
-
media-query，根据不同的屏幕宽度设置根元素font-size
-
rem，基于根元素的相对单位
2.CSS面试题
标签：add 应用 定位元素 距离 item nsf center line inner
原文地址：https://www.cnblogs.com/manhuai/p/14260141.html
上一篇：JS字符串方法
下一篇：docker中 运行httpd