<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             .boxmodel{

                 /*盒子模型*/

                 /*盒子在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中的盒子来做比喻*/

                 /*把元素叫做盒子,设置对应的样式分别为:

                  *               盒子的边框(border),

                                                   盒子内的内容和边框之间的间距(padding),

                                                   盒子与盒子之间的间距(margin)*/

                 /*盒子真实尺寸

                 盒子宽度 = width + padding左右 + border左右;

                 盒子高度 = height + padding上下 + border上下;*/

                 /*在布局中,如果只想增大内容和边框的距离,又不想改变盒子显示的尺寸*/

                 /*box-sizing:content-box|border-box*/

                width: 50px;

                height: 50px;

                 padding: 100px;

                border: 100px;

                color: skyblue;

                background: yellow;

                margin: auto;

                border-style: solid;

                border-color: yellowgreen;

             }

             .boxmodel1{

                width: 50px;

                height: 50px;

                padding: 100px;

                border: 100px;

                color: skyblue;

                background: yellow;

                margin: auto;

                border-style: solid;

                border-color: yellowgreen;

                box-sizing: border-box;

             }

         </style>

     </head>

     <body>

         <div class="boxmodel"></div>

         <div class="boxmodel1">

         </div>

     </body>

 </html>

CSS-12-盒子模型的更多相关文章

  1. 深入理解CSS系列（一）：理解CSS的盒子模型

    接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...

  2. 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）

    这些HTML.CSS知识点,面试和平时开发都需要 No1-No4   系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...

  3. 使用css弹性盒子模型

    提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...

  4. #CSS的盒子模型、元素类型

    CSS的盒子模型.元素类型   本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...

  5. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

  6. CSS 弹性盒子模型

    CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...

  7. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  8. CSS样式----盒子模型（图文详解）

    盒子模型 盒子中的区域 一个盒子中主要的属性就5个:width.height.padding.border.margin.如下: width:内容的宽度.CSS中 width 指的是内容的宽度,而不是 ...

  9. css 大话盒子模型

    什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...

  10. CSS系列：CSS中盒子模型

    盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...

随机推荐

  1. Visual Studio Team Services使用教程【4】：默认团队checkin权限修改

    2017.4.23之后建议朋友看下面的帖子 TFS2017 & VSTS 实战(繁体中文视频) Visual Studio Team Services(VSTS)与敏捷开发ALM实战关键报告( ...

  2. Python1_Python的目录结构、执行顺序、__name__ == __main__

    Python执行顺序 python属于脚本语言,不像编译型的语言那样先将程序编译成二进制后再运行,而是动态地逐行解释运行: 也就是从脚本的第一行开始运行,没有统一的入口. python会从文件的第一行 ...

  3. JMeter分布式负载测试（吞吐量控制器）

    在本节中,我们将学习如何使用吞吐量控制器在JMeter中创建分布式负载测试计划. 出于测试目的,我们将在我们网站 www.yiibai.com 的URL下的某些网页上创建分布式负载.这些网页包括: 主 ...

  4. 13.python基础试题(二)

    借鉴:https://www.cnblogs.com/shengyang17/p/8543712.html https://www.cnblogs.com/you-wei1/p/9693254.htm ...

  5. 010 Ceph RGW对象存储

    一.对象存储 1.1 介绍 通过对象存储,将数据存储为对象,每个对象除了包含数据,还包含数据自身的元数据 对象通过Object ID来检索,无法通过普通文件系统操作来直接访问对象,只能通过API来访问 ...

  6. win10开启我的第一个32位汇编程序

    遥想当年,上学期间,汇编程序,从未成功.今又试之,终成功,遂记录. Hello.asm文件如下: . .model flat,stdcall option casemap:none include w ...

  7. 我与Git的那些破事--代码管理实践

    1. Git是什么? 作为一名程序猿,我相信大家都或多或少接触过git--分布式版本控制软件. 有人说,它是目前世界上最先进的分布式版本控制系统,我想说,是否最先进不知道,但确实好用,实用. 作为一款 ...

  8. 22.Python安装和卸载第三方模块方法

    安装和卸载第三方开源模块的步骤:下例,安装urllib3模块的步骤. 1.安装开源模块步骤: 按键盘windows键+r键,输出cmd回车.或开始->windows系统->命令提示符: 输 ...

  9. 一起来立Flag吧！超炫的数据图表分析 2020 年 Java 技术趋势

    引言 2020 来了,第一批 00 后已经 20 岁了,95 后也到了晚婚的年龄,员外的头发也越来越少了,新的一年大家有立下了哪些 Flag ?小伙伴们别急着立 Flag,让员外帮你分析一下哪些技术正 ...

  10. cassandra中的ACID,与RDBMS中的事务有何不同?

    Cassandra中的ACID标准 Apache Cassandra不遵循具有回滚或锁定机制的ACID(原子性,一致性,隔离性,持久性)事务,而是提供原子,隔离和持久的事务,并具有最终和可调的一致性, ...