<!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. ES6类的继承

    ES6 引入了关键字class来定义一个类,constructor是构造方法,this代表实例对象. constructor相当于python的init 而this 则相当于self 类之间通过ext ...

  2. 第三阶段：3.Web端产品设计：3.产品设计的层次

    一般淘宝购物的五个流程:浏览对应表现层,搜索对应框架层,产品页面对应架构层,确认对应范围层,付款对应战略层. 从具象到抽象.但是我们做产品都是从抽象到具象,而用户使用产品是从具象到抽象. 各个层次之间 ...

  3. HTTP中GET与POST的区别 99%的错误认识

    @[TOC本篇文章分两部分,第一部分可以列为初为新人的装逼失败模式,第二部分列为修炼低调模式. 装逼失败模式:99%的人对GET和POST的认识 修炼低调模式:1%不知道的进阶认识 GET和POST, ...

  4. 【温故知新】Java web 开发（四）JSTL 与 JDBC 的增删改查

    本篇开始使用 jstl 这个 jsp 的标签库,在同一个 Servlet 中实现处理 CRUD 请求,以及使用 jdbc 数据库基本操作.然后你会发现 Servlet 和 jdbc 还是有很多不方便之 ...

  5. 解决模糊查询问题 element UI 从服务器搜索数据，输入关键字进行查找

    做项目是遇见下拉框的形式,后台返回来3万多条,用element UI中的select选择器中的搜索还是会造成页面卡顿和系统崩溃,因此用了它的远程搜索功能,发现还不错,解决了这个问题. 代码1 < ...

  6. 关于KMP的一点思考

    关于KMP的一点思考 KMP的\(next\)数组的性质很精妙,有必要开一个坑学习一下 Part 1 啥是next \(next[i]\)表示对于\(pre_i\)这个字符串,这个抠出来的字符串本身后 ...

  7. 洛谷$P4768\ [NOI2018]$归程 $kruscal$重构树

    正解:$kruscal$重构树 解题报告: 传送门$QwQ$ 语文不好选手没有人权$TT$连题目都看不懂真的要哭了$kk$ 所以先放个题目大意?就说给定一个$n$个点,$m$条边的图,每条边有长度和海 ...

  8. 牛客挑战赛17E 跳格子 计数dp

    !!!学长做过的题 正解:计数dp 解题报告: 传送门 首先思考,这题和普通的走台阶有什么区别嘛(跳格子其实和走台阶都一样的嘛quq因为走台阶比较经典所以就说的走台阶) 那显然最大的区别就是它有限制 ...

  9. 啊哈！C语言课后参考答案上

    最近看到一本好评量很高的的C语言入门书,课本真的很好,入门的话.专业性没有那么强,但入门足够了!!好评!看着看着就想把这本书的题课后习题都写出来,最后就有了这个小结.可能有的不是最好,不那么专业,但主 ...

  10. Kubernetes 会不会“杀死” DevOps？

    作者丨孙健波(天元)  阿里巴巴技术专家 导读:DevOps 这个概念最早是在 2007 年提出的,那时云计算基础设施的概念也才刚刚提出没多久,而随着互联网的逐渐普及,应用软件的需求爆发式增长,软件开 ...