<!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. Amazon AWS

  2. Nand flash 芯片工作原理

    Nand flash 芯片型号为 Samsung K9F1208U0B,数据存储容量为 64MB,采用块页式存储管理.8 个 I/O 引脚充当数据.地址.命令的复用端口. 芯片内部存储布局及存储操作特 ...

  3. LINUX常用操作命令和命令行编辑快捷键

    终端快捷键: Ctrl + a/Home 切换到命令行开始 Ctrl + e/End 切换到命令行末尾 Ctrl + l 清除屏幕内容,效果等同于clear Ctrl + u 清除剪切光标之前的内容 ...

  4. Codeigniter 获取当前的控制器名称和方法名称

    在Codeigniter 可以通过下面两个方法获取当前的控制器名称和方法名称 $this->router->fetch_class(); $this->router->fetc ...

  5. [转]C#操作Excel初探

    近期一段时间正好在做winform导出Excel报表的问题,学习了一下C#操作Excel的一些方法(如:向Excel中插入图片:删除Excel指定sheet中的某行或某列,在Excel指定的单元格中画 ...

  6. SpringBoot_Mybatis MyBatisPlus

    一.SpringBoot中使用Mybatis springBoot中使用mybatis跟以前spring中使用方法一样. 1.mybatis配置: spring: datasource: url: j ...

  7. vim的个性化配置(方便编程)

    在用户主目录下新建vimrc即可.例如: vim ~/.vimrc 然后复制进去即可.   配置如下: "关闭vim一致性原则 set nocompatible "显示行号 set ...

  8. HDU - 6128

    题意略: 题解:二次剩余板子题 //#pragma GCC optimize(2) //#pragma GCC optimize(3) //#pragma GCC optimize(4) //#pra ...

  9. Android之FrameLayout帧布局

    1.简介 这个布局直接在屏幕上开辟出一块空白的区域,当我们往里面添加控件的时候,会默认把他们放到这块区域的左上角; 帧布局的大小由控件中最大的子控件决定,如果控件的大小一样大的话,那么同一时刻就只能看 ...

  10. Python - 基本数据类型及其常用的方法之数字与字符串

    数字(int): 1.int()(将字符串换为数字) a = " print(type(a), a) b = int(a) print(type(b), b) num = "a&q ...