好程序员web前端技术分享css盒模型

深碍√TFBOYSˉ_ 2022-01-15 07:37 363阅读 0赞

[为什么80%的码农都做不了架构师？>>> ][80_]  ![hot3.png][]

**web前端技术分享****css盒模型**

**学习目标**

*  1、认识盒子模型
 *  2、盒子模型的组成部分
 *  3、学习盒子模型的相关元素 margin padding

**一、css盒模型的概念及组成**

概念：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间.

盒模型的组成：边框、边界/边距、补白/填充、内容区。

**二、盒子模型的相关元素**

*   *  **1、padding的使用方法**

**说明：**

填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白或填充。

**用法：**

1）用来调整子元素在父元素中的位置。

注：padding属性需要添加在父元素上。

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;

*   *  **2、margin的使用方法**

**说明：**

边界：margin,在元素外边的空白区域，被称为边距/边界。      “属性值的用法同上”

margin-left:左边界

margin-right:右边界

margin-top:上边界

margin-bottom:下边界

**属性值的4种方式**：

四个值：上 右 下 左

三个值：上 左右 下

二个值：上下 左右

一个值：四个方向 margin:2px;/\*定义元素四边边界为2px\*/

margin:0 auto;/\*一个有宽度的元素在浏览器中横向居中。

定义元素上、下边界为2px，

说明：可单独设置一方向边界，如：margin-top:10px;

注：/\*上下边距重叠，左右边距相加\*/

**三、标准盒子大小计算方式**

宽 =左右border+左右padding+width，

高 =上下border+上下padding+height，

例如：一个盒子的border 为 1px，padding 为 10px，content 的宽为 200px、高为 50px，

宽= border\*2 + padding\*2 + content.width = 1\*2 + 10\*2 +200 = 262px，

高= border\*2 + padding\*2 + content.height = 1\*2 +10\*2 + 50 = 112px，

怪异盒模型/IE盒子模型组成：margin+内容区

宽：width;

高:height;

**四、盒模型注意事项**

\*margin值的解析：左右边界累加，正常文档流的上下边界重合。

\*在正常文档流下，子元素（块）直接写margin-top时，会将margin-top属性值加上父元素身上,(子元素或父元素不设置任何浮动及定位的属性，或父元素不设置边框的情况下。)

** **

一个标记可以设置多个class名

语法：<标记 class="名称1   名称2   名称3 " ></标记>

© 版权（圈C）

转载于:https://my.oschina.net/530504/blog/3044407

[80_]: https://my.oschina.net/u/2663968/blog/3051541
[hot3.png]: /images/20220115/5a8f172dc2d249ea9eba9b5d1230a9b0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，363人围观）

还没有评论，来说两句吧...

相关阅读

相关【前端】CSS3盒模型

CSS3盒模型 CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

忘是亡心i/ 2023年10月09日 10:36/ 0 赞/ 43 阅读

相关 web前端之 CSS盒模型

CSS盒模型题目：谈谈你对CSS盒模型的认识基本概念：标准模型+IE模型这两者的区别（计算高度和宽度的不同） CSS如

女爷i/ 2023年05月29日 05:14/ 0 赞/ 75 阅读

相关好程序员web前端分享JavaScript学习指南

　　JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本

秒速五厘米/ 2022年04月24日 14:18/ 0 赞/ 329 阅读

相关好程序员Web前端分享前端CSS篇

　　今天好程序员跟大家分享的文章是CSS篇。Web前端技术由html、css和javascript三大部分构成，而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习

布满荆棘的人生/ 2022年02月14日 16:53/ 0 赞/ 411 阅读

相关好程序员web前端分享CSS属性组成及作用

CSS属性组成及作用学习目标 1、css属性和属性值的定义 2、css文本属性 3、css列表属性 4、css背景属性 5、css边

缺乏、安全感/ 2022年01月20日 13:57/ 0 赞/ 279 阅读

相关好程序员web前端技术分享css盒模型

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] web前端技术分享css盒模型学习目标 1、认识盒子模型 2、盒子模

深碍√TFBOYSˉ_/ 2022年01月15日 07:37/ 0 赞/ 364 阅读

相关好程序员web前端分享CSS属性组成及作用

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] 好程序员web前端分享CSS属性组成及作用学习目标 1、css属性

怼烎@/ 2022年01月15日 07:37/ 0 赞/ 262 阅读

相关好程序员web前端教程分享Date对象

好程序员web前端教程分享Date对象，什么是Date对象一个内置对象Date：类型使用自 UTC（Coordinated Universal Time，国际协调时间）19

忘是亡心i/ 2022年01月12日 04:27/ 0 赞/ 319 阅读

相关好程序员web前端技术之CSS3过渡

好程序员web前端技术之CSS3过渡，css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触

本是古典何须时尚/ 2022年01月11日 14:21/ 0 赞/ 318 阅读

相关好程序员web前端分享css初始化代码

　好程序员web前端分享css初始化代码，CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同，所以开发时的第一件事可能就是如何把它们统一。

ゝ一纸荒年。/ 2022年01月11日 14:21/ 0 赞/ 422 阅读