1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>Title</title>
  6.      <style>
  7.          *{
  8.              padding: 0;
  9.              margin: 0;
  10.          }
  11.          .items{
  12.              width:100%;
  13.              text-align: center;
  14.              margin-top: 100px;
  15.          }
  16.          .item{
  17.              width: 316px;
  18.              height: 170px;
  19.              display: inline-block;
  20.              margin:0 10px;
  21.              overflow: hidden;
  22.              /*添加盒模型*/
  23.              box-sizing: border-box;
  24.          }
  25.          .b1{
  26.              background-image: url("../images/1.jpg");
  27.              background-origin: border-box;
  28.          }
  29.          .b2{
  30.              background-image: url("../images/2.jpg");
  31.          }
  32.          .b3{
  33.              background-image: url("../images/3.jpg");
  34.          }
  35.  
  36.          /*鼠标上 移时添加边框*/
  37.          .item:hover{
  38.              border: 10px solid red;
  39.          }
  40.          .box{
  41.              width: 400px;
  42.              height: 200px;
  43.              background-color: #ccc;
  44.          }
  45.          .left{
  46.              width: 199px;
  47.              height: 200px;
  48.              background-color: red;
  49.              float: left;
  50.              /*一个元素所真正占据空间是：width + padding + border + margin*/
  51.              border-right:1px solid orange;
  52.              padding: 10px;
  53.              /*
  54.              box-sizing:设置盒模型
  55.                   content-box：默认值，说明当前元素的总宽度 = width + padding + border
  56.                   border-box:说明当前元素的总宽度 = width. 意味着如果添加border或padding会造成真正放置内容的区域变小。但是它的优点是能够提供更稳固的结构
  57.              */
  58.              box-sizing: border-box;
  59.          }
  60.          .right{
  61.              width: 200px;
  62.              height: 200px;
  63.              background-color: blue;
  64.              float: left;
  65.          }
  66.      </style>
  67.  </head>
  68.  <body>
  69.  <div class="box">
  70.      <div class="left">asdfaasdf</div>
  71.      <div class="right"></div>
  72.  </div>
  73.  <div class="items">
  74.      <div class="item b1"></div>
  75.      <div class="item b2"></div>
  76.      <div class="item b3"></div>
  77.  </div>
  78.  </body>
  79.  </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. golang的表格驱动测试

    一.leetcode的算法题 package main import ( "fmt" "strings" ) func lengthOfNonRepeating ...

  2. Hystrix容错处理

    如果服务提供者响应非常缓慢,那么消费者对提供者的请求就会被强制等待,直接提供者响应或超时.在高负载场景下,如果不做任何处理,此类问题可能会导致服务消费者的资源耗竭甚至整个系统的崩溃.这时,就需要进行容 ...

  3. filebeat+redis+logstash+elasticsearch+kibana搭建日志分析系统

    filebeat+redis+elk搭建日志分析系统 官网下载地址:https://www.elastic.co/downloads 1.下载安装filebeat wget https://artif ...

  4. js获取网页屏高 屏宽

    <SCRIPT LANGUAGE="JavaScript"> <!-- //document.body.scrollTop 滚动条的上端距离 //document ...

  5. 2018-8-10-win10-uwp-手把手教你使用-asp-dotnet-core-做-cs-程序

    title author date CreateTime categories win10 uwp 手把手教你使用 asp dotnet core 做 cs 程序 lindexi 2018-08-10 ...

  6. Leetcode961. N-Repeated Element in Size 2N Array重复N次的元素

    在大小为 2N 的数组 A 中有 N+1 个不同的元素,其中有一个元素重复了 N 次. 返回重复了 N 次的那个元素. 示例 1: 输入:[1,2,3,3] 输出:3 示例 2: 输入:[2,1,2, ...

  7. 【核心核心】5.Spring【DI】注解方式

    使用注解的方式依赖注入不用提供set方法 1.普通类型的注解 @Value @Value(value="春天") private String name; 2.对象类型的注解 @A ...

  8. 如何将Map键值的下划线转为驼峰

    本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:如何将Map键值的下划线转为驼峰: 例,将HashMap实例extMap键值下划线转为驼峰: 代码: HashMap<String ...

  9. UVA - 1230

    https://vjudge.net/problem/UVA-1230 费马小定理优化快速幂 #include <iostream> #include <cstdio> #in ...

  10. cannot be cast to javax.servlet.Servlet 解决

    使用maven创建web项目的时候,通过添加依赖的方式来添加servlet-api,如下 通过maven的命令(tomcat:run)来启动项目,发现访问的时候报错,错误如下: 错误排查: 首先查看s ...