web布局学习笔记06

最新推荐文章于 2024-09-12 16:43:23 发布

EIHH

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量159

点赞数

文章标签：前端学习

本文链接：https://blog.csdn.net/weixin_47281509/article/details/127103345

版权

本文详细解读了CSS中的常规流布局原理，包括块级元素的规则、浮动、定位以及盒模型的概念。通过实例演示了如何利用auto属性实现自适应布局，并介绍了百分比宽度和高度的使用技巧。重点讲解了包含块的概念和外边距合并现象。

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

常规流

常规流布局

常规流

盒模型：规定单个盒子的规则

视觉格式化模型（布局规则）：页面中多个盒子的排列规则

常规流
浮动
定位

常规流布局

常规流、文档流、普通文档流、常规文档流

所有元素：默认情况下都属于常规流布局

总体规则：块盒独占一行，行盒水平依次排列

包含块：每个盒子都有它的包含块，包含块决定了盒子的排列区域

绝大部分情况下：盒子的包含块，为其父元素的内容盒

块盒

每个块盒的总宽度,必须等于包含块的宽度

宽度默认值是auto

margin:的取值也可以是auto 默认值0

auto:将剩余空间吸收掉

width吸收能力强于margin

若宽度边框内边距外边距计算后仍然有剩余空间,该剩余空间被margin-right全部吸收.

在常规流中块盒在其包含块中居中可以定宽,然后左右margin设置为auto

每个块盒垂直方向上的auto值

height:auto适应内容的高度
margin:auto,表示0

百分比取值

padding 宽 margin可以取值为百分比

以上的所有百分比都是相当于包含块的宽度

高度百分比:

包含块的高度是否取决于子元素的高度设置百分比无效
包含快的高度不取决于子元素的高度,百分比相对于父元素的高度
上下外边距的合并

两个常规流块盒,上下两个外边距相邻,会进行合并
两个外边距取最大值

//测试代码
<!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>
        .parent{
            background: lightblue;
            width: 600px;
            height: 1000px;
            border: 2px solid;
            padding: 30px;
            margin: 30px;
        }
        .child{
            border: 2px solid;
            background: red;
            height: 50%;
            width: 100px;
            margin-left: auto;
            margin-right: auto;
        } 
        body{
           margin: auto;
        }
        div{
            padding: 20px;
            border: 3px solid;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam nemo blanditiis itaque suscipit, ut, reprehenderit, eveniet quo dicta beatae dolorem quis quam rem pariatur excepturi tenetur libero distinctio ratione ipsam.</div>
    </div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et veniam dolores ratione cumque sunt voluptatibus illo a sapiente cupiditate iusto, asperiores at maxime? Et, impedit hic! Dolore odio atque libero.</div>
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto assumenda ut nobis fugiat, inventore error quaerat quibusdam porro, natus temporibus ad vitae delectus sint. Laudantium dolor quae reiciendis nihil inventore!</div> -->
</body>
</html>