<!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. 如何在安装了Owin 2.X版本的项目中正确安装SignalR 2.2.1

    以安装了Owin2.1.0版本为例 1打开NuGet程序包管理控制台 2输入 Install-Package Microsoft.AspNet.SignalR -Version 2.2.1 2输入 I ...

  2. 【默默努力】h5-game-heroVSmonster

    先放下作者大大的项目地址:https://github.com/yangyunhe369/h5-game-heroVSmonster 然后游戏的效果为 截动图的按键与游戏按键应该冲突,我就截几张图片了 ...

  3. 关于Android 的网址

    Android 官方API查询网址 https://developer.android.google.cn/ 第三方镜像Android API查询网址 (比官方浏览速度快一些,缺点现有API较低) h ...

  4. naptime

    naptime 有一个长度为n的序列\(a_i\),首尾相接组成了一个环,现在要在这个环上选出若干个区间,使区间长度之和恰好为b,然后忽略区间的顺时针开头元素,权值累加区间中所有的数字,问权值的最大值 ...

  5. IDA*算法——骑士精神

    例题 骑士精神 Description 在一个5×5的棋盘上有12个白色的骑士和12个黑色的骑士, 且有一个空位.在任何时候一个骑士都能按照骑士的走法(它可以走到和它横坐标相差为1,纵坐标相差为2或者 ...

  6. 【9.14NOIP模拟pj】wtaxi 题解——搜索

    [9.14NOIP模拟pj]wtaxi 题目简化 有K辆车,N个人,上车给D元,只有S分钟.上车后无论多少人都要给D元,原地等多少分钟就没了多少元.求最小花费的钱. 我的思路 毫无疑问,此题可以用搜索 ...

  7. 用C++Builder在Windows开始按钮上绘图制作方法

    熟悉Windows操作系统的软件设计人员知道,在Win95/98/NT/2000中有一任务栏(Task Bar)程序,路径为:C:\WINDOWS\SYSTEM\SYSTRAY.EXE(假设你的Win ...

  8. python 编程 一次错误记录 -1073740791

    原因是发生在我错把类当做实例化对象使用了

  9. Vue生命周期的执行过程(面试必备) 极简版

    最近准备面试,临时抱佛脚的来回顾一下vue相关的面试题,当然这是不对的,平时还是要努力呀,走起: 1.创建vue实例,Vue(); 2.在创建Vue实例的时候,执行了init(),在init过程中首先 ...

  10. 转：进程上下文VS中断上下文

    源地址:http://www.cnblogs.com/zzx1045917067/archive/2012/12/19/2824552.html 内核空间和用户空间是现代操作系统的两种工作模式,内核模 ...