目 录CONTENT

文章目录

从零开始学习CSS盒子模型

萧瑟
2023-04-25 / 0 评论 / 17 点赞 / 255 阅读 / 2,401 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-08-04,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

在网页设计中,css中的盒子模型是一种用来描述元素如何布局和定位的概念。盒子模型将每个元素看作一个由内容、内边距、边框和外边距组成的矩形盒子。这些部分可以通过css属性来控制它们的大小、颜色、样式和位置。

1、盒模型结构

下面图片是盒模型的组成结构:

image-1682402146064

1.1 内容

内容(content)是元素的实际内容,比如文本、图片或其他元素。内容的宽度和高度可以通过 width 和 height 属性来设置,也可以根据内容的自然大小来自适应。

1.2 内边距

内边距(padding)是内容和边框之间的空白区域,可以通过padding属性来设置。内边距会影响元素的总大小,因为它会增加内容的宽度和高度。

属性值的4种方式:
四个值:上 右 下 左 {padding:0px 0px 0px 40px;} 从上方向开始,顺时针定义
三个值:上 左右 下 {padding:10px 20px 30px ;} 从上方向开始,先两边,再下边
二个值:上下 左右 {padding:10px 20px ;} 上下左右这个好记
一个值:四个方向 padding:2px; 定义元素四周填充为2px

说明:
可单独设置一方向填充,如:上方向:padding-top:10px; 右方向:padding-right:10px; 下方向:padding-bottom:10px; 左方向:padding-left:10px;

1.3 边框

边框(border)是元素的可见边界,可以通过border属性来设置。边框也会影响元素的总大小,因为它会增加内边距的宽度和高度。

属性值定义的4个方式:
四个值:上 右 下 左 从上方向开始,顺时针定义
三个值:上 左右 下 从上方向开始,先两边,再下边
二个值:上下 左右上下左右这个好记
一个值:四个方向 定义元素四周边框

1.4 外边距

外边距(margin)是元素和其他元素之间的空白区域,可以通过margin属性来设置。外边距不会影响元素的总大小,但会影响元素的位置和排列。

属性值定义的4个方式:
四个值:上 右 下 左 从上方向开始,顺时针定义
三个值:上 左右 下 从上方向开始,先两边,再下边
二个值:上下 左右上下左右这个好记
一个值:四个方向 定义元素四周统一外边距

2、元素宽高

当我们指定元素的宽高的时候,只是设置的content中的宽高,此外我们还可以对padding、border、margin进行配置

div{
	width: 100px;
	height: 100px;
	border: 20px solid skyblue;
	padding: 10px;
	margin: 25px;
	background: lightblue;
}

效果图:

image-1682403083707

元素最终占用的总宽度的计算公式是这样的:
元素的宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距

元素最终占用的总高度的计算公式是这样的:
元素的高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

那div这个元素现在总共占用多少像素空间呢?
宽度 = 高度 = 100px(宽) + 10px(内边距) * 2 + 20px(边框) * 2 + 25px(外边距) * 2 = 210px

假如我们只有150px * 150px的空间该如何放下这个元素呢?
在不考虑将div进行缩放的情况下,可以修改元素的样式:

div{
	width: 90px;
	height: 90px;
	border: 10px solid skyblue;
	padding: 5px;
	margin: 15px;
	background: lightblue;
}

3、文本溢出相关的属性

3.1 溢出属性(容器的)

  • overflow:visible/hidden(隐藏)/scroll(滚动)/auto(自动)/inherit(继承);

  • visible:默认值,内容不会被修剪,会成现在元素框之外;

  • hidden:内容会被修剪,并且其余内容是不可见的;

  • scroll:内容会被修剪,但是浏览器会显示滚动条,以便查看其余的内容;

  • auto:如果内容被修剪,则浏览器会显示滚动条,以便查看其他的内容;

  • inherit:规定应该从父元素继承overflow属性的值。

3.2 空余空间

  • white-space:normal/nowrap/pre/pre-wrap /pre-line /inherit 该属性用来设置如何处理元素内的空白;

  • normal:默认值,空白会被浏览器忽略,

  • nowrap:文本不会换行,文本会在同一行上继续,直到遇到

  • 标签为止;

  • pre:空白会被浏览器保留,其行为方式类似HTML中的pre标签;

  • pre-wrap:保留空白符序列,但是正常的进行换行;

  • pre-line:合并空白符序列,但是保留换行符;

  • inherit:规定应该从父元素继承White-space属性的值;(ie浏览器不支持此属性值)

3.3 省略号显示

  • text-overflow:clip/ellipsis

    • clip:不显示省略号(…),而是简单的裁切;
    • ellipsis:当对象内文本溢出时,显示省略标记;

    text-overflow属性仅是…,当单行文本溢出时是否显示省略标记,并不具备其它的样式属性定义,要实现溢出时产生省略号的效果还需定义:
    1、容器宽度:width:value;
    2、强制文本在一行内显示:white-space:nowrap;
    3、溢出内容为隐藏:overflow:hidden;
    4、溢出文本显示省略号:text-overflow:ellipsis;

//单行文字显示不全以省略号的形式进行展现
white-space:nowrap;
overflow: hidden;
text-overflow: ellipsis;

//多行文字显示不全以文字形式进行展现
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

了解css中的盒子模型对于网页设计非常重要,因为它可以帮助我们控制元素的布局和定位,以及实现各种视觉效果。


weixin

17

评论区