前端面试题[多栏布局、flex布局、常见的块级/行内/空元素、css Hack、src与href区别]

深擁殘夢

于 2023-09-19 19:28:44 发布

阅读量75

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/qq_56511926/article/details/133037628

版权

一、多栏式布局

1.两栏布局,左边固定宽,右边自适应

首先,左边左浮动,右边加overflow:hidden;(变成BFC清除左侧浮动元素的影响)

2.三栏式布局,例:圣杯布局、双飞翼布局

功能是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局(中间先加载渲染)

①圣杯布局

首先,定义Dom结构,主体为 container 包裹的center、left、right三列,其中center定义在最前面,footer跟随其后

其次,在css中,设置left和right的固定宽度,在container中设置center、left、right浮动,并对footer设置清除浮动[clear:both]

[由于浮动特性,并且center宽为100%,left和right被'挤到'下一行]

然后,将left放置到之前预留的位置,[margin-left:100%;position:relative]

放置right,margin-right:-固定宽度

[布局完毕后,考虑页面最小宽度左侧固定宽度*2+右侧固定宽度]

效果如图

<style>
    #container {
        padding-left: 200px;
        padding-right: 150px;
        background-color: palevioletred;
    }
    
    #container .column {
        float: left;
    }
    
    #center {
        height: 800px;
        width: 100%;
        background-color: paleturquoise;
    }
    
    #left {
        height: 800px;
        width: 200px;
        margin-left: -100%;
        position: relative;
        right: 200px;
        background-color: red;
    }
    
    #right {
        height: 800px;
        width: 150px;
        margin-right: -150px;
        background-color: green;
    }
    
    #footer {
        clear: both;
    }
    
    body {
        min-width: 550px;
    }
</style>

<body>
    <div id="header"></div>
    <div id="container">
        <div id="center" class="column"></div>
        <div id="left" class="column"></div>
        <div id="right" class="column"></div>
    </div>
    <div id="footer"></div>
</body>

②双飞翼布局

首先,定义Dom结构,container仅包裹center, 并且left、right与container同级

其次,在css中,首先设置各列的宽度与浮动,在两侧预留出空间,并为footer设置清除浮动

[将contatiner,left,right设置为 float:left,container内部的center没有浮动;center设置margin- left、margin-right 预留两侧空间]

然后,将left放置到之前预留的位置,[margin-left:100%] [没有position定位属性]

放置right,margin-right:-固定宽度

[布局完毕后,考虑页面最小宽度左侧固定宽度+右侧固定宽度+预留中间最小宽度]

<body>
    <div id="header"></div>
    <div id="container" class="column">
        <div id="center"></div>
    </div>
    <div id="left" class="column"></div>
    <div id="right" class="column"></div>
    <div id="footer"></div>

    <body>

<style>
    #container {
        width: 100%;
        height: 800px;
    }
    
    .column {
        float: left;
    }
    
    #center {
        margin-left: 200px;
        margin-right: 150px;
        height: 800px;
        background-color: palegoldenrod;
    }
    
    #left {
        width: 200px;
        margin-left: -100%;
        height: 800px;
        background-color: palegreen;
    }
    
    #right {
        width: 150px;
        margin-left: -150px;
        height: 800px;
        background-color: paleturquoise;
    }
    
    #footer {
        clear: both;
    }
    
    body {
        min-width: 500px;
    }

③flex布局

与圣杯布局结构相同

<div id="container">
        <div id="center"></div>
        <div id="left"></div>
        <div id="right"></div>
    </div>

<style>
    #container {
        display: flex;
    }
    
    #center {
        flex: 1;
        height: 800px;
        background-color: red;
    }
    
    #left {
        flex: 0 0 200px;
        order: -1;
        height: 800px;
        background-color: blue;
    }
    
    #right {
        flex: 0 0 150px;
        height: 800px;
        background-color: green;
    }
</style>

二、常见的块级/行内/空元素

1.属性 display

2.属性值:block块级元素 inline行内元素

行内元素:

span a b i img input select strong 等

块级元素:

div p H1-H6 ul ol li dl dt dd table form .....

空元素:

br hr img input link meta

三、css Hack

不同浏览器写不同的css , css Hack 类似于规范

常见三种

①属性Hack

IE6能识别下划线和星号 firefox两个都不识别

red9 所有的IE浏览器可识别 yellow0 IE8可识别

.test{ color:#090\09; /*  For IE8+、FF */ 
*color:#f00; / * For IE7 * / 
_color:#ff0; /*  For IE6  */ }

②选择符Hack

浏览器优先级 FF(firefox)<IE7<IE6

* html .test{color:#090;} /* For IE6 and earlier */
*+html .test{color:#ff0;} /* For IE7 */
.test{color:#f00;} /* For IE8+ and not IE */

③条件注释Hack

条件注释只有在IE浏览器下才能执行,在非IE浏览器下被当做注释,可通过IE条件注释载入不同的CSS,JS,HTML和服务器代码等

<!--[if IE]>
    <p>你在非IE中将看不到我的身影</p>
<![endif]-->

<!--[if IE]>
<style>
    .test{color:red;}
</style>
<![endif]-->
 
<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

Hack主要是针对IE浏览器