编程笔记 html5&css&js 040 CSS盒子模型

这篇具有很好参考价值的文章主要介绍了编程笔记 html5&css&js 040 CSS盒子模型。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


网页是靠分成不同的块,再赋予这些块各不相同的属性来布局的。所以这个“块”是一个基础。先看块本身的构造。

一、CSS 盒子模型

CSS 盒子模型(Box Model)。所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model):
编程笔记 html5&css&js 040 CSS盒子模型,# HTML&CSS&JS,html5,css,javascript,少年工程师
CSS box-model
不同部分的说明:
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度,你需要知道的盒模型是如何工作的。

二、元素的宽度和高度

Remark重要: 当您指定一个 CSS 元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完整大小的元素,你还必须添加内边距,边框和外边距。
下面的例子中的元素的总宽度为 450px:

div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

三、最终元素的总宽度

计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

四、元素的总高度

最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

五、练习

<!DOCTYPE html>
<html lang="zh-cn">
   <head>
      <title>编程笔记 html5&css&js CSS盒子模型</title>
      <meta charset="utf-8" />
      <style>
         body {
            margin: 0 auto;
            padding: 0;
            height: 100%;
            display: block;
            justify-content: center;
            align-items: center;
            color: greenyellow;
            background: #000;
         }
         .box1 {
            width: 800px;
            height: 800px;
            background-color: black;
            border-color: white;
            border-width: 2px;
            border-style: solid;
            padding: 0px;
            margin: 50px auto;
         }

         .box2 {
            width: 300px;
            height: 300px;
            background-color: green;
            border-color: yellow;
            border-width: 10px;
            border-style: solid;
            padding: 50px;
            margin: 50px;
         }
      </style>
   </head>
   <body>
      <div class="box1">
         <div class="box2">这里是盒子内的实际内容。有 50px 内间距,50px 外间距、5px 绿色边框。</div>
         <p>CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。</p>
         外面盒子内外间距为0,边框宽度为2px
         <h2>盒子模型演示</h2>
      </div>
   </body>
</html>

小结

多多练习。文章来源地址https://www.toymoban.com/news/detail-796716.html

到了这里,关于编程笔记 html5&css&js 040 CSS盒子模型的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 编程笔记 html5&css&js 037 CSS选择器

    CSS用于处理网页的样式,就像一个人的装扮,拿来一个衣物或饰品,你得知道穿着在什么部位,不能把袜子当成口罩,CSS里面是一些属性和值,用在网页的哪个地方,就叫选择器。 CSS 选择器用于“查找”(或选取)要设置样式的 HTML 元素。 我们可以将 CSS 选择器分为五类:

    2024年01月21日
    浏览(28)
  • 编程笔记 html5&css&js 054 CSS默认值

    css属性在没有设置的时候,也是有值的,这就是默认值。列在下面,方便查看。 元素 默认的 CSS 值 a:link color: (internal value); text-decoration: underline; cursor: auto; a:visited color: (internal value); text-decoration: underline; cursor: auto; a:link:active color: (internal value); a:visited:active color: (internal value

    2024年01月25日
    浏览(21)
  • 编程笔记 html5&css&js 039 CSS背景示例

    网页上只有三个水平并列大小相同的的DIV,大小为300p*200,如何使用CSS让它们整体水平和垂直都居中,并使用不同的背景色? 要在网页上实现三个水平并列且大小相同的div元素,每个尺寸为300像素宽和200像素高,整体居中显示且具有不同的背景颜色,你可以通过以下CSS来完成:

    2024年01月20日
    浏览(28)
  • 编程笔记 html5&css&js 043 CSS尺寸属性

    块的宽度和高度,决定了块的大小,也就是尺寸。 height 和 width 属性用于设置元素的高度和宽度。height 和 width 属性不包括内边距、边框或外边距。它设置的是元素内边距、边框以及外边距内的区域的高度或宽度。 height 和 width 属性可设置如下值: auto - 默认。浏览器计算高度

    2024年01月21日
    浏览(26)
  • 编程笔记 html5&css&js 041 CSS边框属性

    盒子是由四周的边框组成,边框的属性就构成了盒子的大部分样式。 CSS border 属性允许您指定元素边框的样式、宽度和颜色。 border-style 属性指定要显示的边框类型。 允许以下值: border-style 属性可以设置一到四个值(用于上边框、右边框、下边框和左边框)。 注意:除非设

    2024年01月19日
    浏览(26)
  • 编程笔记 html5&css&js 053 CSS伪元素

    CSS 伪元素用于设置元素指定部分的样式。 什么是伪元素? 设置元素的首字母、首行的样式 在元素的内容之前或之后插入内容 语法 伪元素的语法: ::first-line 伪元素用于向文本的首行添加特殊样式。 下面的例子为所有 p 元素中的首行添加样式: ::first-line 伪元素只能应用于

    2024年01月23日
    浏览(43)
  • 编程笔记 html5&css&js 055 CSS颜色表

    重新做了颜色表,前面讲HTML时已经有了一个,重新整理了一个,方便查用。将代码复制本地使用。这个内容既用于颜色的了解,也是一个网页的综合练习。将下面内容复制,弄懂每个内容,并按照自己喜好进行改进。 颜色的合理使用是网页设计效果的基本保证。 使用颜色值

    2024年01月25日
    浏览(26)
  • 编程笔记 html5&css&js 050 CSS表格2-1

    使用 CSS 可以极大地改善 HTML 表格的外观。 如需在 CSS 中设置表格边框,请使用 border 属性。 下例为 table、th 和 td 元素规定了黑色边框: 在某些情况下,上表似乎很小。如果您需要一个可以覆盖整个屏幕(全宽)的表格,请为 table 元素添加 width: 100% : 双边框 请注意上面的

    2024年01月22日
    浏览(36)
  • 编程笔记 html5&css&js 051 CSS表格2-2

    多数时候是按列设计表格样式的。 在HTML表格中,可以通过CSS来按列设置样式。以下是一个简单的例子: 在这个例子中,我们使用了CSS伪类选择器first-child和nth-child(n)来分别选择表格的每一列,并分别为它们设置了不同的样式。 按列设置样式列具实用性。

    2024年01月22日
    浏览(31)
  • 编程笔记 html5&css&js 032 HTML Canvas

    Canvas画布,就是可以用来画画的地方,不是用户在浏览器上画图,而是会javascript画图。这区别于直接载入一张图片,是可以根据需要进行绘制。 HTML canvas 元素用于通过脚本(通常是 JavaScript)动态地绘制图形。 canvas 元素只是图形的容器。您必须使用脚本来绘制实际的图形。

    2024年01月23日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包