一、CSS盒模型及浮动、定位布局详解

hikankan

已于 2022-02-26 20:47:15 修改

阅读量489

点赞数

分类专栏：前端主流布局文章标签： css css3 html

于 2022-02-26 19:48:08 首次发布

本文链接：https://blog.csdn.net/hikankan/article/details/123154499

版权

前端主流布局专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、CSS盒模型及浮动、定位布局详解

1.1 CSS盒模型的组成

在css中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用css实现准确布局、处理元素排列的关键
盒子的组成：content内容、padding内填充、border边框、margin外边距

1.1.1 css盒模型的注意点

padding不能为负值，而margin可以为负值
背景色会平铺到非margin的区域
margin-top传递的现象及解决方案

.box1{
    width:200px;
    height:200px;
    background:pink;
}
.box2{
    width:100px;
    height:100px;
    background:skyblue;
    margin-top:30px;
}

<div class='box1'>
    <div class='box2'></div>
</div>

解决方案：

比较特别的一种：给box1添加边框，就可以解决这个问题
在这里插入图片描述

margin上下叠加的现象及解决方案

.box1{
    width:200px;
    height:200px;
    background:pink;
    margin-bottom:40px;
}
.box2{
    width:100px;
    height:100px;
    background:skyblue;
    margin-top:30px;
}

<div class='box1'></div>
<div class='box2'></div>

上下两个盒子距离为最大的，并不会累加；左右没有这个问题

1.2 块级盒子与内联盒子

在css中我们广泛地使用两种“盒子”————块级盒子（block box）和内联盒子（inline box）。这两种盒子会在页面中表现出不同的行为方式

块级盒子：div、p、h1…
内联盒子：span、a、strong…

1.2.1 块级盒子的特性

独占一行
支持所有样式
不写宽度的时候，跟父容器的宽度相同
所占区域是一个矩形

1.2.2 内联盒子的特性

盒子不会产生换行
有些样式不支持，例如：width、height等
不写宽度的时候，宽度由内容决定
所占的区域不一定是矩形
内联标签之间会有空隙

1.3 自适应盒模型的特性

自适应盒模型指的是，当盒子不设置宽度时，盒模型相关组成部分的处理方式是如何的

1.4 标注盒模型于怪异盒模型

在标准模型中，如果你给盒设置width和height，实际上设置的是content box。padding和border再加上设置的宽高一起决定整个盒子的大小

当设置为box-sizing:content-box时，将采用标准模式解析计算，也是默认模式；
标准模式下总宽度=width+margin（左右）+padding（左右）+border（左右）

在怪异模型中，所有宽度都是可见宽度，所以内容宽度是该宽度减去边框和填充部分
当设置为box-sizing:border-box时，将采用怪异模式解析计算；
怪异模式下总宽度=width+margin（左右）（就是说width已经包含了padding和border值）

1.4.1 box-sizing属性

content-box:width、height --> content
border-box：width、height --> content + padding + border
应用1：量取尺寸时不用再去计算一些值
应用2：解决一些需要设置百分比和盒模型值

1.5 浮动样式详解

当元素被浮动时，会脱离文档流，根据float的值向左或向右移动，直到它的外边界碰到父元素的内边界或另一个浮动元素外边界为止，是css布局中实现左右布局的一种方式

文档流：文档流是元素在web页面上的一种呈现方式，按照出现的先后顺序进行排列

1.5.1 清除浮动的方案

clear属性

<div class='box1'></div>
<div class='box2'></div>
<style>
    .box1{
        width:100px;
        height:100px;
        background:pink;
        float:left;
    }
    .box2{
        width:100px;
        height:100px;
        background:skyleblue;
        clear:both;
    }
</style>

BFC
空标签

<div>
    <div class='box2'></div>
    <div style='clear:both;'>bbbb</div>
</div>

.clearfix::after{}

.clearfix::after{
    content:'bbbb'; 
    clear:both;
    display:block;
}

注意：after伪类是填充的内容为内联盒子，而clear:both;是适用于块级盒子的，所以这里需要进行转换

在这里插入图片描述

1.5.2 浮动特性注意点

只会影响后面的元素
文本不会被浮动元素覆盖
具备内联盒子特性：宽度由内容决定

<style>
    .box{
        background:red;
        float:left;
    }
</style>
<body>
    <div class="box">aaaaaaaaa</div>
</body>

在这里插入图片描述

具备块级盒子特性：支持所有样式

<style>
    .inline{
        width:100px;
        height:100px;
        background:red;
        float:left;
    }
</style>
<body>
    <span class="inline">bbbbbbbbbb</span>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ezx9OfIr-1645874515320)(C:/Users/86137/AppData/Roaming/Typora/typora-user-images/image-20220213134656566.png)]

浮动放不下，会自动换行

1.6 定位样式详解

CSS position属性用于指定一个元素在文档中的定位方式，其中top,right,bottom 和left属性则决定了该元素的最终位置
在这里插入图片描述

1.6.1 相对定位及特性

相对定位的元素是在文档中的正常位置偏移给定的值
不影响其他元素布局
相对于自身进行偏移

1.6.2 绝对定位及特性

绝对定位的元素脱离了文档流，绝对定位元素不占据空间
具备内联盒子特性：宽度由内容决定
具备块级盒子特性：支持所有样式
绝对定位元素相对于最近的非static祖先元素定位。当这样的祖先元素不存在时，则相对于可视区定位

1.6.3 固定定位及特性

固定定位与绝对定位相似，但是会固定在可视区中
具备内联盒子特性：宽度由内容决定
具备块级盒子特性：支持所有样式
固定定位元素不受祖先元素影响

1.6.4 粘性定位及特性

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位

<style>
    div{
        position:sticky;
        top:0;//这是一个阈值
    }
</style>

1.6.5 z-index

z-index层级关系，没有设定时默认为0.
若存在父元素，则先跟父元素的z-index进行比较。若不存在父元素，则直接进行比较。

hikankan

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
一、CSS盒模型及浮动、定位布局详解

CSS盒模型及浮动、定位布局详解
复制链接

扫一扫

专栏目录

一、CSS盒模型及浮动、定位布局详解

一、CSS盒模型及浮动、定位布局详解

1.1 CSS盒模型的组成

1.1.1 css盒模型的注意点

1.2 块级盒子与内联盒子

1.2.1 块级盒子的特性

1.2.2 内联盒子的特性

1.3 自适应盒模型的特性

1.4 标注盒模型于怪异盒模型

1.4.1 box-sizing属性

1.5 浮动样式详解

1.5.1 清除浮动的方案

1.5.2 浮动特性注意点

1.6 定位样式详解

1.6.1 相对定位及特性

1.6.2 绝对定位及特性

1.6.3 固定定位及特性

1.6.4 粘性定位及特性

1.6.5 z-index

“相关推荐”对你有帮助么？