CSS：盒子模型，布局

最新推荐文章于 2024-05-13 19:06:49 发布

赛博末影猫

最新推荐文章于 2024-05-13 19:06:49 发布

阅读量1.4k

点赞数 39

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/new_light123/article/details/136992358

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

盒子模型

菜鸟教程的盒子模型讲解
我觉得讲的非常好，推荐阅读

概念理解

盒子模型： CSS为了对HTML元素进行排版布局，从而抽象出的一个模型

CSS元素的分类（HTML中对应CSS的标签）

块级元素：独占一行，对宽度，高度支持 display:block 举例：div，h1~h6，ul，li
内联元素：不独占一行，对宽度高度不支持；内容多长占据多大的空间 diaplay:inline 举例：a，span
内联块级元素：不独占一行，但是对宽度高度支持 display:inline-block 举例：img，table

盒子模型，存在默认值
块级元素自带属性display:block
内联元素自带属性display:inline
内联级元素自带属性diaplay:inline

但是可以通过display属性修改

如果修改display属性为inline，div也会具备内联级元素(比如span)的特征

在这里插入图片描述

说白了，盒子模型就是display属性的修改

盒子模型的内部结构

盒子模型的构成
来源自https://www.runoob.com/css/css-boxmodel.html
content：内容区，主要放置我们想要的内容，比如文字，图片等
padding：填充区，边框区以里，内容区以外的部分；填充区的内边距，内容与内容边界的间距，可以让内容变好看
border：边框区，可以设置边框的样式
margin：外边框区，可以设置上下左右的居中

填充区，边框区，外边框区默认宽度都是0

不同区域相关的属性

content:

width，height，一般就是修改这两个指标
重点：width，height默认只对内容区起作用

padding

在这里插入图片描述
通过外围增加区域形成内容填充，不是内容缩了

padding元素用法：以上为开始，顺时针旋转，不够4个的直接对称

.div{
    padding:10px// 上下左右
    padding:10px 20px// 上下，左右
    padding:10px 20px 30px// 上，右，下，左
    padding:10px 20px 30px 40px// 上，下，左，右
}

border

还可以单独设置某个方向
在这里插入图片描述

三个方面，四个方向，排列组合就是12种设置方式

// 可以分开使用
.div{
    border-width: 10px
    border-color: red
    border-style: solid
}
// 也可以组合使用，三个变量的顺序无所谓

.div{
    border: 10px blue solid
}
// 加上方位可以单独设置某一个方向的边框属性

.div{
    border-top: 10px blue solid
    border-bottom: none # 表示没有下边框
    border-left: 10px blue solid
    border-right: 10px blue solid
}
// 甚至可以分地更细

.div{
    border-top-color: blue
    border-bottom-style: solid
}

border也是通过向padding外围增加区域形成边框

所以，盒子的实际宽高，是content，padding，border三者相加的结果

在这里插入图片描述

margin

margin属性，设置盒子整体(content，padding，border的整体)与外部的间距

用法同padding区的用法

可以单独设置某个方向的外边距

.div{
   margin:10px auto 
   // 上下外边距10px，左右自动居中，只能左右用，上下不能用。
   // 纵向上无法居中（因为纵向上一般不会给高度限制，电脑不知道哪里是中间位置）
  
}

可以设置左右居中
padding无auto的用法

box-sizing

如果想设置整个盒子的大小，就需要用到box-sizing属性
box-sizing：设置width和height的作用范围，默认值是content-box（内容区），也可以设置成border-box（内容+填充+边框），
为了保留填充和边框的设置值，会将内容压缩，与content-box扩充内容区截然相反

CSS布局

html标签，很多都是默认占据一整行（块级元素），所以我们不必考虑竖向如何排版

但是我们实际看到的网站，往往有大量的横向布局
在这里插入图片描述
这是如何做到的呢？

此时就涉及到了布局的概念，以下是几种可能的横向布局的方法

1. float普通盒子模型

一种横着的布局：float普通盒子模型
常用的就两种：左浮动和右浮动
在这里插入图片描述

问题①

用了float之后，所在的父级元素无高度的情况下，会导致下方的元素向上移动（本身靠孩子支撑高度，现在孩子飘起来了，就没高度了）
在这里插入图片描述
父元素是黄色背景，此时我们看不到了已经，因为高度变成0了

解决①：给父元素赋一个高度

在这里插入图片描述

但是这样容易导致父元素多一部分/少一部分的问题

解决②：用overflow：hidden

在这里插入图片描述

父元素的高度，随着子元素的最高高度变化

问题②

在这里插入图片描述
分布需要手动计算；

无法实现元素均摊;

分别给子元素赋值计算好的高度和宽度，书写及其繁琐;

问题②无法解决

2. 内联级元素

实际布局管理时，不用span，因为无法调整宽高

3. 内联块级元素

也不用内联块级元素，因为元素之间会产生html代码回车的导致的空白，
在这里插入图片描述

而且同普通盒子模型的问题，元素之间的等空间隔开，子元素的均分也都无法做到，可能最后数字除不开

解决办法①

元素之间不换行，首尾相接（代码可读性太差，不推荐）

解决办法②

父级元素大小设置为0，子级元素大小另外设置（子元素需要分别另外设置，很繁琐）

3. 弹性盒子模型（推荐）

弹性盒子模型是最完美的布局模型

弹性盒子模型，理论上可以设置任意的布局

千万注意，弹性盒子模型的属性，有的是作用到父盒子元素上，有的是作用到子元素上

只要设置父元素display:flex
就可以让父元素自动随着子元素的高度变化

所以最终我们横着排列，使用弹性盒子模型
以后想要元素达到什么特性，就要记住元素的display名字，设置就完了，这就是盒子模型

子元素始终横着布局，就是不换行，甚至不惜压缩子元素，这也是弹性盒子模型弹性的体现

控制子元素横向排列的排列方式：flex-direction

flex-direction 设置弹性盒子内子元素的排列方向，默认row（横着从左到右），row-reverse(横着从右到左), column(靠左从上到下)，column-reverse(靠左从下到上)

控制子元素换行：flex-warp

flex-warp 设置弹性盒子内子元素换行方式（横着的时候才能讨论是否换行），默认nowarp(不换行） warp（换行）（作用到弹性盒子上）
在这里插入图片描述

控制子元素顺序：flex-order

order 设置弹性盒子内，子元素的排列顺序，设置值越小，优先级越高（作用到弹性盒子子元素上）
在这里插入图片描述

控制子元素的拉伸/压缩比例：flex

flex 设置弹性盒子内子元素的压缩比例/拉伸比例（作用到弹性盒子子元素上）
flex是复合属性，由flex-grow（拉伸因子）,flex-shrink（压缩因子）,flex-basis（基准宽度）三个属性组成
复合属性可以简写

.container{
    flex-grow:1
    flex-shrink:2
}
等价于
.container{
    flex:1 2
}


.container{
    flex-grow:2
    flex-shrink:2
}
等价于
.container{
    flex:2
}