scc浮动的概念

最新推荐文章于 2024-04-29 21:14:52 发布

向可爱低头～卍

最新推荐文章于 2024-04-29 21:14:52 发布

阅读量143

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_73310187/article/details/126930919

版权

一、CSS 浮动

概述

网页中有很多布局效果，标准流没有办法完成，使用可以利用浮动改变元素默认的排列方式，

浮动的概念

浮动可以使元素【脱离文档流】，【按照指定方向排列】，直到遇到父元素的边界或另一个浮动元素【停止】

标准流（普通文档流）

文档中可以显示的对象在排列时所占的位置，实际上就是一个网页内标签正常从上到下，从左到右的排列，比如，块级标签会独占一行，行级标签会在一行显示

浮动
        float: left; 左浮动，标签向左浮动
        float: right;右浮动，标签向右浮动
        float: none;不浮动，默认值，并且会显示在其文本中出现的位置

        浮动特性：
        1.浮动元素脱离正常标准流不脱离文本流
        2.浮动元素不占位，父级盒高度为零
        3.如果浮动元素的宽度之和大于父元素，则浮动盒会被挤到下一行
        4.使行级标签支持宽高
        5.提升层级


 注意：元素浮动后类似于行内块标签（没有行内块的间隙问题），在一行内展示，可以设置宽高。

浮动产生的问题（为什么要清浮动）

子元素浮动会脱离正常标准流，会导致父元素高度塌陷（背景、边框无法正常显示）
影响之后元素的布局

清浮动的方法

清除浮动的方法
        1.给浮动元素的父级盒子设置一个固定的高度
          优缺点：不够灵活，适用于高度固定的布局中

        2.为浮动元素的父级盒子设置浮动
          优缺点：会产生新的浮动问题

        3.为浮动元素的父盒子添加overflow属性；overflow的属性值可以为hidden,scroll,auto
          优缺点：可能会隐藏内容或触发不需要的滚动条；代码简洁

        4.在浮动元素之后，与浮动元素呈并列关系的位置，加一个不浮动块元素（空的div标签（div本身不浮动，没有尺寸）），在空的div标签上加上属性：clear：both;
          优缺点：代码冗余，通俗易懂，书写方便

            clear: left; 清除左侧浮动带来的影响
            clear: right;清除右侧浮动带来的影响
            clear: both;清除两侧浮动带来的影响

        5.推荐方式：用伪元素清除浮动，给浮动元素的父级盒加类名.clearfix，并在.clearfix中添加样式：
       
           .clearfix::after{
                 content:'';
                 display:block;
                 clear:both;
            }
            优缺点：不会再结构上产生冗余代码，可以重复使用，结构语义化正确

1）什么是伪元素

用css语言创造出来的标签

伪元素创造的标签是行级标签

2）如何创建伪元素

element::before{ content:"伪元素的文本内容"; 属性名: 属性值; } element元素内部，内容之前，添加“伪元素的文本内容”
element::after{ content:"伪元素的文本内容"; 属性名: 属性值; } element元素内部，内容之后，添加“伪元素

浮动特性应用实例

应用实例—图文绕排

总结：浮动脱离文档流不脱离文本流
最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐要想图文环绕需要给图片设置浮动

<!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>
        .box{
            width: 500px;
            height: 500px;
            border:1px solid #333
        }
        img{
            float: left;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/pic_4.jpg" alt="">
      我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图片的介绍我是图介
    </div>
</body>
</html>

应用实例—两列自适应

实现要点：单列定宽，单列自适应
浮动实现
- 左边的盒子固定宽度，添加float:left
- 右边盒子宽度自适应, 添加margin-left:左盒子宽度。

<!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>
        .box{
            border: 1px solid #333;
        }
        .left{
            width: 300px;
            height: 300px;
            background: red;
            float: left;
        }
        .right{
            height:350px ;
            background: yellow;
            margin-left: 300px;
        }
    </style>
</head>
<body>
  
     <div class="box">
         <div class="left"></div>
         <div class="right"> 我是文本内容</div>
     </div>
</body>
</html>

二、CSS 精灵（雪碧图、精灵图）

学习目标

能够说出什么是CSS精灵
掌握CSS精灵在实际示案例中的应用

概述

css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”， “background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置

精灵图的原理

将页面中的背景图合并成一张图片
利用背景属性，使不同元素显示图片的不同部分

实现步骤：

(1)通常要限定容器大小

(2)图片拼合

(3)背景定位

2、css sprites的优缺点

优点：

1.减少网页的http请求，提高页面的性能

2.减少在图片上的命名困扰

3.更换网页风格方便

缺点：

1.必须要限定容器的大小

2.背景图位置需要计算

3、适用场景

适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。

向可爱低头～卍

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
scc浮动的概念

css精灵英文叫法 css sprites，通常被解释为“CSS 图像拼合”或“CSS 贴图定位”；其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”， “background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。
复制链接

扫一扫