盒子模型知识

最新推荐文章于 2022-05-12 17:29:24 发布

m0_50484391

最新推荐文章于 2022-05-12 17:29:24 发布

阅读量92

点赞数

本文链接：https://blog.csdn.net/m0_50484391/article/details/117550189

版权

本文深入探讨了CSS布局中的关键概念：盒子模型，包括内容区、边框、内边距和外边距；浮动布局，介绍了浮动元素的特性及其在网页菜单设计中的应用；以及定位，讲解了相对定位、绝对定位的概念和偏移量的使用。通过这些知识，可以更好地理解和控制网页元素的布局与位置。

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

盒子模型：方块盒子
用于CSS布局，在CSS中将所有元素设计为一个矩形的方块
盒子模型（box model）：用于布局

    内容区（content）：由盒子的宽高决定
    边框（border）:盒子边框的长度、样式、颜色
    内边距（padding）:指内容区与边框的距离
    以上三要素会改变盒子的大小

    外边距（margin）：盒子边框以外都叫外边距，决定盒子的位置
    
    **浮动**：用于元素“水平”方向的布局
     可选值：
        none：默认值，不开启浮动
        left：元素向左浮动
        right：元素向右浮动
     浮动元素的特点：
        1.浮动元素会脱离文档流，不会占用文档流中的位置
        2.元素浮动之后，浮动元素下的块元素会自动向上移动
        3.浮动元素只能向左侧或右侧移动
        4.浮动元素左浮或右浮时不会超过父元素的边界
        5.浮动元素不会超过其相邻的浮动元素
        6.如果浮动元素上边有块元素，浮动元素不会上移
        7.浮动元素不会覆盖文字，用于文字环绕图片

     浮动应用：多应用于网页菜单

        文档流：CSS把网页分为了很多层
        文档流为网页的基层，如果不设置一些特殊属性，所有的网页元素都在文档流中

定位（position）：是一种更高级、更方便、更灵活的布局手段
可选值：
static：静止定位，表示不开启定位
relative：相对定位，表示开启定位
absolute：绝对定位
fixed：固定定位

        相对定位特点：
        1.当元素开启定位后，如果不设置偏移量，元素不会有任何变换
        2.开启了相对定位的元素参照与元素自身在文档流的位置进行偏移

        偏移量：元素与参照物上下左右的偏移距离
            top：上偏移量
            bottom：下偏移量
            这两个值规定了元素在垂直方向的位置
            left：左偏移量
            right：右偏移量
            这两个值规定了元素在水平方向的位置

        绝对定位：
            当给元素的position属性设置为absolute时，元素就开启了绝对定位
            如果当前元素没有祖先元素，就参照于根元素<html>进行定位；
            如果当前元素有祖先元素，就参照于最近一个开启了定位元素的祖先元素
        绝对定位特点：
            1.当元素设置为绝对定位后，没有设置偏移量，元素不会有任何变化
            2.当元素设置为绝对定位后，元素会脱离文档流，不占用文档流的位置

        元素脱离文档流的特点：
            块元素：块元素脱离文档流后不会独占一行
                如果未给块元素设置宽高，默认宽高被内容撑开
            行内元素：
                效果和脱离文档流的块元素一样