前端复习（前端基础 CSS）一

最新推荐文章于 2024-09-07 19:05:57 发布

kinjaze

最新推荐文章于 2024-09-07 19:05:57 发布

阅读量279

点赞数

分类专栏：前端复习笔记文章标签： css

本文链接：https://blog.csdn.net/qq_41591368/article/details/108206206

版权

前端复习笔记专栏收录该内容

6 篇文章 2 订阅

订阅专栏

CSS(一)

说一下css盒模型

用来装页面上的元素的矩形区域。CSS中的盒子模型包括IE盒子模型和标准的W3C盒子模型。

IE盒子模型和标准的W3C盒子模型的区别

主要区别就是width的包含范围
标准的盒子模型中，width指content部分的宽度
在IE盒子模型中，width表示content+padding+border这三个部分的宽度

计算盒子的宽度上

标准盒子模型的盒子宽度：左右border+左右padding+width
IE盒子模型的盒子宽度：width

CSS3中引入了box-sizing属性，box-sizing:content-box;表示标准的盒子模型，box-sizing:border-box表示的是IE盒子模型

link标签和import标签的区别

link属于html标签，而@import是css提供的
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。
link方式样式的权重高于@import的。

transition和animation的区别

transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况下才会随时间改变属性值，并且transition为2帧，从from … to，而animation可以一帧一帧的。

BFC（块级格式化上下文，用于清除浮动，防止margin重叠等）

定义：块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。
特性：
1、BFC区域不会与float box重叠
2、BFC是页面上的一个独立容器，子元素不会影响到外面
3、计算BFC的高度时，浮动元素也会参与计算
生成BFC的元素
1、根元素
2、float不为none的元素
3、position为fixed和absolute的元素
4、display为inline-block、table-cell、table-caption，flex，inline-flex的元素
5、overflow不为visible的元素

关于js动画和css3动画的差异性

功能涵盖面，js比css大
实现/重构难度不一，css3比js更加简单，性能跳优方向固定
对帧速表现不好的低版本浏览器，css3可以做到自然降级
css3动画有天然事件支持
css3有兼容性问题

说一下块元素和行元素

块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度
行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效。

多行元素的文本省略号

display: -webkit-box
-webkit-box-orient:vertical
-webkit-line-clamp:3
overflow:hidden

visibility=hidden, opacity=0，display:none之间的区别

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件
visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

双边距重叠问题（外边距折叠）

定义：多个相邻（兄弟或者父子关系）普通流的块元素垂直方向marigin会重叠
结果：
1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3、两个外边距一正一负时，折叠结果是两者的相加的和。

浮动清除的方式

使用带clear属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用<br class="clear" />或<hr class="clear" />来进行清理。
使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动，另外在 IE6 中还需要触发 hasLayout ，例如为父元素设置容器宽高或设置 zoom:1。
使用CSS的:after伪元素

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .top {
            width: 400px;
            background-color: red;
        }

        .foonter {
            width: 400px;
            height: 400px;
            background-color: rgb(136, 130, 130);
        }

        .top div {
            float: left;
            background-color: pink;
            width: 190px;
            height: 200px;
            margin-right: 20px;
            text-align: center;

        }

        .top .last {
            margin-right: 0;
        }

        .clear {
            clear: both;
        }

        /* 父级元素添加overflow属性 */
        .top1 {
            overflow: hidden;
            width: 400px;
            background-color: red;
        }

        .top1 div {
            float: left;
            background-color: pink;
            width: 190px;
            height: 200px;
            margin-right: 20px;
            text-align: center;

        }

        .top1 .last {
            margin-right: 0;
        }

        /* 3、父级添加after伪属性*/
        .clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        /* IE6、7专有 */
        .clearfix {
            *zoom: 1;
        }

        .top2 {

            width: 400px;
            background-color: red;
        }

        .top2 div {
            float: left;
            background-color: pink;
            width: 190px;
            height: 200px;
            margin-right: 20px;
            text-align: center;

        }

        .top2 .last {
            margin-right: 0;
        }

        /*  4、父级添加双伪属性*/
        .clearfix1::before,
        .clearfix1::after {
            content: "";
            display: table;
        }

        .clearfix1::after {
            clear: both;
        }

        .clearfix1 {
            *zoom: 1;
        }

        .top3 {

            width: 400px;
            background-color: red;
        }

        .top3 div {
            float: left;
            background-color: pink;
            width: 190px;
            height: 200px;
            margin-right: 20px;
            text-align: center;

        }

        .top3 .last {
            margin-right: 0;
        }
    </style>
</head>

<body>
    <!-- 额外标签法去除浮动 -->
    <div class="top">
        <div>1</div>
        <div class="last">2</div>
    </div>
    <div class="clear"></div>
    <div class="foonter"></div>
    <!-- 父级元素添加overflow属性 -->
    <div class="top1">
        <div>1</div>
        <div class="last">2</div>
    </div>
    <div class="foonter"></div>
    <!-- 3、父级添加after伪属性 -->
    <div class="top2 clearfix">
        <div>1</div>
        <div class="last">2</div>
    </div>
    <div class="foonter"></div>
    <!-- 4、父级添加双伪属性 -->
    <div class="top3 clearfix1">
        <div>1</div>
        <div class="last">2</div>
    </div>
    <div class="foonter"></div>
 </body>