CSS 定位机制 (第七、八天)

最新推荐文章于 2024-10-09 14:44:12 发布

zjgm_jlw

最新推荐文章于 2024-10-09 14:44:12 发布

阅读量237

点赞数

分类专栏： HTML 文章标签： css

本文链接：https://blog.csdn.net/zjgm_jlw/article/details/101023851

版权

本文详细介绍了CSS的定位机制，包括普通流、浮动以及定位。重点讲解了浮动的属性、清除浮动的多种方法，以及定位模式如静态、相对、绝对和固定定位。此外，还提到了定位元素的叠放次序和显示隐藏的策略。

摘要由CSDN通过智能技术生成

css定位机制（第七、八天）

定位机制(float)
版心和布局流程
- 两列左窄右宽型
- 通栏平均分布型
CSS高级技巧

定位机制(float)

CSS的定位机制有3种：普通流（标准流）、浮动和定位。

普通流(normal flow)

这个单词很多人翻译为文档流，字面翻译普通流或者标准流都可以。
行内元素会按顺序依次前后排列；按照这种大前提的布局排列之下绝对不会出现例外的情况叫做普通流布局。

浮动(float)

属性

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

浮动理解：

            可以把背景看出一个房子，
            页面上有浮动属性的div可以看出一个个气球，
            背景内的所有div往右上浮

基本语法格式如下：

选择器{float:属性值;}

属性值	描述
left	元素向左浮动
right	元素向右浮动
none	元素不浮动（默认值）

注意：

        按宽度来决定是否换下一行，2个div加起来宽度超过100%，
        第二个个div就换一行输出

代码：

<!DOCTYPE html>
<!--  
    @Author jinliwei
    @Date 2019/9/18 08:52
 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS浮动</title>
    <style type="text/css">
        /*
        浮动理解：
            可以把背景看出一个房子，
            页面上有浮动属性的div可以看出一个个气球，
            背景内的所有div往右上浮
        注意：
            按宽度来决定是否换下一行，2个div加起来宽度超过100%，第二个个div就换一行输出
        */
        .d1{
   
            border: 2px red solid ;
            height: 1000px;
            width: 100%;
            /* overflow:窗口，有滑轮 */
            overflow: scroll;
        }
        /*.d2{*/
            /*border: pink solid 2px;*/
            /*height: 100px;*/
            /*width: 50%;*/
        /*}*/
        .d3{
   
            border: black solid 2px;
            height: 500px;
            width: 80%;
        }

        .d2{
   
            border: pink solid 2px;
            height: 100px;
            width: 50%;
            float: left;
        }
        .d4{
   
            border: red solid 2px;
            height: 100px;
            width: 60%;
            float: left;
        }
        .s1{
   
            background-color: yellow;
            border: black solid 1px;
            height: 200px;
            width: 60%;
            float: left;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2"></div>
        <div class="d3"></div>