HTML&CSS面试题

最新推荐文章于 2024-08-25 19:24:32 发布

一枕星河丶

最新推荐文章于 2024-08-25 19:24:32 发布

阅读量137

点赞数

分类专栏： HTML& CSS 文章标签： css html5 html

本文链接：https://blog.csdn.net/yizhenxinghe/article/details/120186727

版权

HTML& CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、盒模型

1.什么是盒子模型

在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。

2.盒子模型种类

标准盒模型：总宽度 = width + margin（左右）+ padding（左右）+border

怪异盒模型：总宽度 = width + margin（左右）（ width 已经包含了 padding 和 border ）

3.标准盒模型和怪异盒模型的转换

box-sizing:content-box；标准盒模型

box-sizing:border-box；怪异盒模型

box-sizing:inherit；继承父元素的 box-sizing 属性的值

二、边距重叠——BFC

1.什么是BFC？

BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；

2.如何触发BFC

在 box 属性值为这些的情况下，都会让所属的box产生BFC。

overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

也可以用排除法

        overflow 的值不是 visible；
        position 的值不是 static 或 relative
        float 的值不是 none
        display 的值是 inline-block 或 table-cell 或 flex 或 table-caption 或 inline-flex

3. BFC 的原理

BFC 内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
BFC 就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
BFC 的区域不会与float重叠。
计算 BFC 的高度时，浮动元素也被计算在内。

三、清除浮动的方法

1.额外标签法

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

优点：通俗易懂，书写方便。

缺点：添加许多无意义的标签，结构化比较差。

2.父级添加 overflow 方法

可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

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

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。

3.使用 after 伪元素清除浮动

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

优点：符合闭合浮动思想，结构语义化正确，不容易出现怪问题

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

4.使用 before 和 after 双伪元素清除浮动

优点：代码更简洁

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</head>

<body>
    <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>
</body>

</html>

四、posititon 定位

1、position: static

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

2、position: relative

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

3、position: absolute

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

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

2. 如果并没有设置了 position 属性的祖先元素，则此时相对于body进行定位。

4、position: fixed

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

5、inherit

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

五、元素居中

方法一

父相自绝后，子分部向左向上移动本身宽度和高度的一半(也可以用 transform:translate(-50%,-50%))

#father{
    width: 400px;
    height: 400px;
    background: red;
    position: relative;
 }
#son{
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
 }

方法二

父元素设置成弹性盒，子元素横向居中，纵向居中

#father{
    width: 400px;
    height: 400px;
    background: red;
    display: flex;
    justify-content: center;
    align-items: center;
}
#son{
    width: 200px;
    height: 200px;
    background: yellow;
}

方法三

父向子绝，子元素所有定位为0，margin设置auto自适应。

#father{
    width: 400px;
    height: 400px;
    background: red;
    position: relative;
}
#son{
    width: 200px;
    height: 200px;
    background: yellow;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

六、行内元素有哪些？块级元素有哪些？空(void)元素有那些？

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。

行内元素有：span a b i img input select strong
块级元素有：div p h1-h6 table form ul ol li dl dt dd ...
空元素(没有内容)：< br > < hr > < img > < input > < link >

七、CSS Hack

1. 什么是 CSS Hack

        一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。
        CSS Hack常见的有三种形式：
                属性Hack、选择符Hack、条件注释Hack， Hack主要针对IE浏览器

条件Hack

条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。可以通过IE条件注释载入不同的CSS、JS、HTML和服务器代码等。

属性Hack

        属性级Hack：
                比如IE6能识别下划线和星号，
                IE7能识别星号，但不能识别下划线，而firefox两个都不能认识。
                background-color:red9; 9所有的ie浏览器可识别；
                background-color:yellow0; 0 是留给ie8的

选择符Hack

比如IE6能识别 *html .class{ }，IE7能识别 *+html .class{ }

2.浏览器优先级别

FF ( FireFox 火狐 ) < IE7 < IE6 , CSS hack

八、src与href的区别

href

href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。

src

src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；
在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

九、link与@import区别

应用场景

<head>
    <!-- link是标签，引入外部样式表 -->
    <link rel="stylesheet" href="./a.css">
    <style>
        /* @import 在css环境中 导入外部css */
        @import url('./b.css');
        .box{
          width: 100px;
          height: 100px;
          background: green;
        }
    </style>
</head>

区别

link属于html标签。@import在css中使用表示导入外部样式表；
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
import只在IE5以上才能识别，而link是HTML标签，无兼容问题;
link方式的样式的权重高于@import的权重；
link 支持使用javascript改变样式（document.styleSheets），后者不可

一枕星河丶

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS面试题

一、盒模型1.什么是盒子模型在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。2.盒子模型种类标准盒模型：总宽度 = width + margin（左右）+ padding（左右）+border 怪异盒模型：总宽度 = width + margin（左右）（ width 已经包含了 padding 和 border...
复制链接

扫一扫