HTML与CSS常见的面试题（一）

小屁孩你滑稽掉了

于 2023-11-20 17:50:19 发布

阅读量56

点赞数 4

分类专栏： HTML与CSS面试题文章标签： html5 css 前端面试

本文链接：https://blog.csdn.net/qq_49698477/article/details/134513383

版权

HTML与CSS面试题专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.怎样解决高度塌陷问题？

其实所谓高度塌陷问题，也就是float的问题，当给元素添加浮动之后会导致该元素脱离文档流，变成行内块元素的特点,导致该元素没有高度，它的解决方法有三种：

(1)在浮动的元素后面添加一个空的div并设置类名为clear，并给这个div设置唯一的样式

.clear{
    clear:both;
}

(2)给浮动的父元素添加类名clearfix,并添加样式 (最常用)

.clearfix::after{
    content:'';
    display:block;
    clear:both;
    height:0;
}

(3)给浮动的父元素添加样式overflow:hiddden

2.设置单行文本溢出为省略号

设置宽度：width:*px;

设置强制换行：white-space:nowrap;

设置溢出：overflow:hidden;

设置文本溢出为省略号：text-overflow:ellipsis;

3.你是怎样理解BFC的？

BFC是英文Black Formatting Context的缩写，意为块级格式化上下文，每一个BFC都是一块独立的区域，区域与区域之间互不影响

它的形成方式有：(1)overflow的值不为visible,即为hidden | auto | scroll

(2)display的值为inline-block/flex/inline-flex

(3)绝对定位和固定定位，即position:absolute | fixed

(4)浮动

它可以用来解决以下的问题：

(1)margin在垂直方向上的高度塌陷和粘连问题

(2)浮动的问题

(3)实现两列自适应布局

4.margin的问题

(1)垂直方向的塌陷问题：在一个元素身上添加足够的间隔

(2)垂直方向的粘连问题：

方案1：给父元素设置padding实现。

方案2：给父元素添加 border-top: 1px solid transparent;

方案3：给父元素添加 overflow:hidden

5.两列自适应布局的实现（左边宽度固定，右边宽度自适应）

方法：

1.左边设置固定宽度加浮动

2.右边不设置宽度，加overflow:hidden;

或者右边不设置宽度，加margin-left:左边盒子的宽度;

或者右边设置浮动，加 width:calc(100% - 左边盒子的宽度);

3.用flex,给body设置display:flex,左边设置宽度,右边设置flex-grow:1

拓展：品字布局的实现（上边高度固定，下边高度占满剩余空间，下边再做成两列自适应布局）

布局： [上边高度固定，下边高度占满剩余空间，下边再做成两列自适应布局]

方案1：上边设置固定高度，下边设置height:calc(100% - 上边的高度)，

且设置html,body{ height:100% }

方案2：上边设置高度固定，下边设置position:fixed| absolute; top:上边的高度;

bottom:0;left:0;right:0;

　　　方案3：用flex

<body>
    <div class="top"></div>
    <div class="bottom">
        <div class="left"></div>
        <div class="left"></div>
    </div>
</body>

body{
　　　display:flex;
　　　flex-direction:column;
　　　height:100vh;
}
.bottom{
　　　	flex-grow:1;
　　　	display:flex;
}
.left{
　　　	width:100px;
　　　	height:100%;
}
.right{
　　　	height:100%;
　　　	flex-grow:1;
}

6.Form当中method的post和get的区别？

　　(1) get是从服务器上获取数据，post是向服务器传送数据。
　　(2) get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
　　(3) 对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。
　　(4) get传送的数据量较小，不能大于2KB。post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4（Internet Information Service 互联网信息服务）中最大量为80KB，IIS5中为100KB
　　(5)get安全性非常低，post安全性较高。但是执行效率却比Post方法好。

7.css选择器优先级的判定规则

判定选择器的权重之和，和越大，越优先。和一致。后者覆盖前者。
!important > 行内样式 > id > class > 标签 > *
无穷 1000 100 10 1 0

8.盒子模型的两种模式

概念:他们都是盒子模型，只是是不同的模式而已。
默认情况下，有文档声明，就是标准模式，没有在低版本就是怪异模式。

语法：
box-sizing：border-box怪异模式 | content-box标准模式;

区别：元素实际占据的宽高的计算方式不一致
标准模式元素实际占据的宽度 = width + margin + padding + border;
怪异模式元素实际占据的宽度 = width + margin

9.继承

概念：具有上下级关系得元素之间，上级元素得样式被下级元素拥有，就是继承。
只有文本和列表相关的属性会被继承！

注意：继承的优先级低于*,高于默认。

但是a标签得默认样式高于继承，所以如果要让a也是继承得样式，要设置color:

文本和列表相关的属性:

font-family font-weight font-size font-style

color line-height text-align text-indent text-transform text-decoration letter-spacing word-spacing

List-style list-style-type list-style-position list-style-image

10.元素分类

(1)常规分类
块级元素:独占整行，可以设置宽高等
行级元素/内联元素：内容有多宽占据多宽，不可以设置宽高和垂直方向的内外边距。
行内块元素：内容有多宽占据多宽，可以设置宽高等. [input button img]
可变元素:根据周围元素决定元素类型。

注意：行级和行内块元素水平方向上有空白
解决方案：1.去掉代码之间的空白
2.给元素加浮动。

(2)非常规分类
置换元素：浏览器需要解析元素的属性和属性值，才能确定渲染什么效果。 [input / button ]
非置换元素:不是置换元素就是非置换

11.两种显示与隐藏的区别

display:none;隐藏，不会占据原位置 [display:block显示]
visibility:hidden隐藏，会占据原来的位置 [visibility:visible显示]

12.元素完全居中于未知大小的盒子

方案1：
position: fixed;
top: 50%;
margin-top:负高度的一半;
left: 50% ;
margin-left:负宽度的一半;

方案2： [符号前后有空格！]
position: fixed;
left: calc(50% - 宽度的一半 );
top: calc(50% - 高度的一半);

方案3：
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;