<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             padding: 0;

             margin: 0;

         }

         .items{

             width:100%;

             text-align: center;

             margin-top: 100px;

         }

         .item{

             width: 316px;

             height: 170px;

             display: inline-block;

             margin:0 10px;

             overflow: hidden;

             /*添加盒模型*/

             box-sizing: border-box;

         }

         .b1{

             background-image: url("../images/1.jpg");

             background-origin: border-box;

         }

         .b2{

             background-image: url("../images/2.jpg");

         }

         .b3{

             background-image: url("../images/3.jpg");

         }

         /*鼠标上 移时添加边框*/

         .item:hover{

             border: 10px solid red;

         }

         .box{

             width: 400px;

             height: 200px;

             background-color: #ccc;

         }

         .left{

             width: 199px;

             height: 200px;

             background-color: red;

             float: left;

             /*一个元素所真正占据空间是：width + padding + border + margin*/

             border-right:1px solid orange;

             padding: 10px;

             /*

             box-sizing:设置盒模型

                  content-box：默认值，说明当前元素的总宽度 = width + padding + border

                  border-box:说明当前元素的总宽度 = width. 意味着如果添加border或padding会造成真正放置内容的区域变小。但是它的优点是能够提供更稳固的结构

             */

             box-sizing: border-box;

         }

         .right{

             width: 200px;

             height: 200px;

             background-color: blue;

             float: left;

         }

     </style>

 </head>

 <body>

 <div class="box">

     <div class="left">asdfaasdf</div>

     <div class="right"></div>

 </div>

 <div class="items">

     <div class="item b1"></div>

     <div class="item b2"></div>

     <div class="item b3"></div>

 </div>

 </body>

 </html>

从下图 可以看出这个盒子的稳固程度：

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

  1. 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型

    开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...

  2. JS学习：第二周——NO.3盒子模型

    1.CSS盒子模型包括四个部分组成:设定的宽高+padding+border+margin: 2.JS盒子模型:通过系统提供的属性和方法,来获取当前元素的样式值   JS提供的属性和方法: clien ...

  3. html学习第三天—— 第11章 盒子模型 div

    盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...

  4. css 大话盒子模型

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

  5. padding标准盒模型和怪异盒子模型

    我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...

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

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

  7. 深入理解CSS盒子模型

    在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...

  8. jQuery CSS操作及jQuery的盒子模型

    jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型

  9. 盒子模型(W3C盒子模型、IE盒子模型)

    盒子模型:一个物体在页面中所占据的位置 盒子模型包含以下几种元素: padding:margin:content:border 这是大家都知道的,也是书本上定义说明的,但是在ie的情况下是有点区别的; ...

  10. 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)

    盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...

随机推荐

  1. 2019-9-23-asp-dotnet-core-3.0-接口返回-json-使用-PascalCase-格式

    title author date CreateTime categories asp dotnet core 3.0 接口返回 json 使用 PascalCase 格式 lindexi 2019- ...

  2. JConsole&VisualVM监控总结

    简介JConsole(以下写作jconsole),VisualVM(以下写作jvisualvm ) 都是比较好的JVM调优工具,且都为JDK自带,可在命令行直接启动. 监控示例Server端(需要监控 ...

  3. AndroidStudio 添加翻译插件

    添加方式 第一步 在AndroidStudio的菜单栏里找到 File > Settings > 点击 . 第二步 点击Plugins > 在点击Marketplace 等待插件列表 ...

  4. JUC 一 Callable

    java.util.concurrent.Callable是一个泛型接口,只有一个call()方法 Callable和Runnable的区别 Callable使用call()方法,Runnable使用 ...

  5. duilib教程之duilib入门简明教程4.响应按钮事件

    上一个Hello World的教程里有一句代码是这样的:CControlUI *pWnd = new CButtonUI;    也就是说,其实那整块绿色背景区域都是按钮的区域.(这里简要介绍下,CC ...

  6. springboot让内置tomcat失效

    一.POM(去除内嵌tomcat后,需要添加servlet依赖) <dependency> <groupId>org.springframework.boot</grou ...

  7. js遍历获取表格内数据方法

    1.一般的表格结构如下 <table> <tr> <td>id</td> <td>name</td> </tr> & ...

  8. JEECG-Boot 项目介绍——基于代码生成器的快速开发平台(Springboot前后端分离)

    Jeecg-Boot 是一款基于代码生成器的智能开发平台!采用前后端分离架构:SpringBoot,Mybatis,Shiro,JWT,Vue&Ant Design.强大的代码生成器让前端和后 ...

  9. JEECMS 自定义标签

    CMS 是”Content Management System” 的缩写,意为” 内容管理系统”. 内容管理系统是企业信息化建设和电子政务的新宠,也是一个相对较新的市场.对于内容管理,业界还没有一个统 ...

  10. PAT甲级——A1076 Forwards on Weibo

    Weibo is known as the Chinese version of Twitter. One user on Weibo may have many followers, and may ...