续前端面试题（html）

最新推荐文章于 2024-10-17 15:53:46 发布

ProGrammerXu

最新推荐文章于 2024-10-17 15:53:46 发布

阅读量92

点赞数

分类专栏：面试文章标签： html css html5

本文链接：https://blog.csdn.net/ProGrammerXu/article/details/120186755

版权

面试专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.清除浮动的四种方式

为什么要清除浮动？

为了解决父级元素因为子集元素引起的高度为0.

第一种额外标签法：

给谁清除浮动，就在其后额外添加一个空白标签。

优点：简便方便理解

缺点：添加没有意义的标签，结构差

<div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
</div>

.clear{
        clear:both;
    }

第二种overflow的方法：

优点：简单代码少浏览器支持好

缺点：内容较多的时候不会自动换行无法显示溢出的元素不能配和position(定位)使用

.fahter{
    width: 400px;
    border: 1px solid deeppink;
    overflow: hidden;
}

注意：要给父元素加！！！

第三种使用after伪元素清除浮动 :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）

优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用）

缺点： 由于IE6-7不支持：after，使用zoom：1

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

第四种：使用before和after双伪元素清除浮动

<style>
            .father{
                border: 1px solid black;
                *zoom: 1;
            }
            .clearfix:after,.clearfix:before{
                   content: "";
                   display: block;
                   clear: both;
               }
               .big ,.small{
                width: 200px;
                height: 200px;
                float: left;
               }
               .big{
                background-color: red;
               }
               .small{
                background-color: blue;
               }
        </style>
   <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
   </div>
    <div class="footer"></div>

</div>

2.postiton的定位属性值有几种？

我们常用的属性值有三种 :relative (相对定位)、 absolute（绝对定位）、 fixed（粘性定位）

position :relative

定义：relative(相对定位)是指给元素设置相对于原来位置的定位，元素并不脱离文档流，因此元素原来的位置会被保留，其他的元素不会受到影响！

position:absolute

定义：absolute(绝对定位)是指元素设置绝对的定位，相对定位的对象可以分为两种情况：

1.设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置positi的祖先元素。

position:fixed

定义：可以简单说fixed是特殊版的absolute，fixed元素总是相对于body的定位

下面介绍两种不常见的属性值：

position static

定义：static（没有定位）是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和 z-index属性

inherit

定义：继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。

3.元素居中的三种方式：

如何让一个元素在父元素中上下左右居中？

1.利⽤定位+margin:auto

<style>
 .father{
 width:500px;
 height:300px;
 border:1px solid #0a3b98;
 position: relative;
 }
 .son{
 width:100px;
 height:40px;
 background: #f0a238;
 position: absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 margin:auto;
 }
</style> <div class="father">
 <div class="son"></div>
</div>

2.利用定位+transform（translate-50%,-50%）

<style>
 .father {
 position: relative;
 width: 200px;
 height: 200px;
 background: skyblue;
 }
 .son {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 width: 100px;
 height: 100px;
 background: red;
 }
</style> <div class="father">
 <div class="son"></div>
</div>

3.利用margin ：负值


<style>
 .father {
 position: relative;
 width: 200px;
 height: 200px;
 background: skyblue;
 }
 .son {
 position: absolute;
 top: 50%; 
 left: 50%;
 margin-left:-50px;
 margin-top:-50px;
 width: 100px;
 height: 100px;
 background: red;
 }
</style> <div class="father">
 <div class="son"></div>
</div>

4.flex布局：

<style>
 .father {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 200px;
 height: 200px;
 background: skyblue;
 }
 .son {
 width: 100px;
 height: 100px;
 background: red;
 }
</style> <div class="father">
 <div class="son"></div>
</div>

4.如何实现两栏布局，右侧⾃适应？三栏布局中间⾃适应呢？

两栏布局

两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满，

实现思路也非常的简单：

使用 float 左浮左边栏
右边模块使用 margin-left 撑出内容块做内容展示
为父级元素添加BFC，防止下方元素飞到上方内容
还有一种更为简单的使用则是采取：flex弹性布局

左侧盒子设固定宽度，右侧设flex ：1

三栏布局

三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之

实现三栏布局中间自适应的布局方式有：

两边使用 float，中间使用 margin

两边固定宽度，中间宽度自适应。
利用中间元素的margin值控制两边的间距
宽度小于左右部分宽度之和时，右侧部分会被挤下去

两边使用 absolute，中间使用 margin

实现流程：
- 左右两边使用绝对定位，固定在两侧。
- 中间占满一行，但通过 margin和左右两边留出10px的间隔

flex实现

左右两侧的盒子给一个固定宽高，中间盒子flex ：1

ProGrammerXu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录