前端学习的09天-cpu干烧了

最新推荐文章于 2025-06-06 13:14:10 发布

好好学前端的欣欣同学

最新推荐文章于 2025-06-06 13:14:10 发布

阅读量144

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_59418570/article/details/129309780

版权

1. 雪碧图

css精灵图 css sprite

1.1 概念

雪碧图是一项图片整个技术，把许多小图整合到一张大图上面。

1.2 优点

1）减少图片的大小

2）减少网络请求，减少服务端的压力

3）减少UI人员的命名困扰

1.3 原理

background-image:url();

background-position:;

默认显示图片左上角移动背景图片到左上角

1.4 步骤

1）准备一个容器

2）设置容器大小

3）引入背景图片

4）移动背景图片的位置

2. BFC

2.1 介绍

块级格式上下文，元素变为独立的一块，布局不受子元素的影响，反之也行。

2.2 开启BFC的属性

1）overflow的值不是visible

2）float取值left和right

3）position取值fixed和absolute

4）display取值inline-block，table-cell、flex等

3.居中问题

3.1 元素内容水平居中

text-align:center;

3.2 一行文字垂直居中

line-height:;

3.3 块级元素水平居中

margin:0 auto;

3.4 子元素在父元素中水平和垂直居中（面试题常问之一）

    <html>

        <body>

            <div class="box1">

                <div class="box2"></div>

            </div>

        </body>

    </html>

1)子元素宽高已知

①父元素设置padding(四周距离相同)

 <style>

                    .box1{

                        width: 500px;

                        height: 500px;

                        background-color:red;

                        padding:150px;

                        box-sizing: border-box;

                    }

                    .box2{

                        width: 200px;

                        height: 200px;

                        background-color: pink;

                    }

                </style>

②子绝父相

<style>

                        .box1{

                            position:relative;

                            width: 500px;

                            height: 500px;

                            background-color: red;

                        }

                        .box2{

                            position:absolute;

                            width: 200px;

                            height: 200px;

                            background-color: pink;

                            /* 相对于父元素往右下移动150px */

                            top: 150px;

                            left: 150px;

                        }

                    </style>

【推荐使用】 ③子元素设置margin

 <style>

                         .box1{

                            width: 500px;

                            height: 500px;

                            background-color: red;

                            overflow: hidden;

                        }

                        .box2{

                            margin: 150px;

                            width: 200px;

                            height: 200px;

                            background-color: pink;

                        }

                    </style>

④子元素相对定位

<style>

                     .box1{

                            width: 500px;

                            height: 500px;

                            background-color: red;

                        }

                        .box2{

                            position:relative;

                            top: 150px;

                            left: 150px;

                            width: 200px;

                            height: 200px;

                            background-color: pink;

                        }

                </style>

【推荐使用】 ⑤子绝父相

   <style>

                     .box1{

                            position:relative;

                            width: 500px;

                            height: 500px;

                            background-color: red;

                        }

                    .box2{

                        position: absolute;

                        /* 子元素相对父元素往右下移动了父元素的一半 */

                        top:50%;

                        left:50%;

                        /* 子元素往左上移动自己宽高的一半 */

                        margin-top: -100px;

                        margin-left: -100px;

                            width: 200px;

                            height: 200px;

                            background-color: pink;

                        }

                </style>

【推荐使用】 ⑥绝对定位配合margin

 <style>

                       .box1{

                        position: relative;

                            width: 500px;

                            height: 500px;

                            background-color: red;

                        }

                        .box2{

                            position: absolute;

                            left: 0;

                            top: 0;

                            right: 0;

                            bottom: 0;

                            margin: auto;

                            width: 200px;

                            height: 200px;

                            background-color: pink;

                        }

                    </style>

2)子元素宽高未知

①表格法

 <style>

                .box1{

                    /* 转换为单元格 */

                    display: table-cell;

                    /* 设置单元格内容水平居中 */

                    text-align: center;

                    /* 设置单元格内容垂直居中 */

                    vertical-align: middle;

                    width: 500px;

                    height: 500px;

                    background-color: red;

                }

                .box2{

                    width: 200px;

                            height: 200px;

                    display: inline-block;

                    background-color: pink ;

                }

            </style>