box-sizing属性

box-sizing: border-box;/*内减模式*/

box-sizing: content-box;/*外加模式(默认值)*/

box-sizing: padding-box;/*内减模式*/
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        div {

            margin: 150px auto;

            width: 512px;

            height: 341px;

            box-sizing: border-box;

        }

        div:hover {

            border: 12px solid #ccc;

        }

        img {

            width: 100%;

            height: 100%;

        }

    </style>

</head>

<body>

<div>

    <img src="data:images/shanshui.jpg">

</div>

</body>

</html>

html5——盒子模式的更多相关文章

  1. nginx 配置支持URL HTML5 History 模式 与 设置代理

    拾人牙慧:https://segmentfault.com/q/1010000007140360 nginx 配置支持URL HTML5 History 模式 location / { try_fil ...

  2. vue,一路走来（11）--HTML5 History模式

    HTML5 History模式 项目中我用的是history模式. 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不 ...

  3. HTML5 History 模式

    vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  4. CSS学习之盒子模式

    从CSS角度来看,页面上每个元素都是一个盒子,不管是块元素还是内敛元素等.而这个盒子由四个部分组成.内容区,补白,边框,边界,下面来介绍下这四种元素. 1 内容 每个元素都是以某些内容开始的,比如文本 ...

  5. 前端学习 -- Css -- 盒子模式

    框模型: CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里. 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.我们只需要将相应的盒子摆放到网页 ...

  6. HTML5盒子模型。

    盒子模型. 盒子由 margin.border.padding.content 四部分组成. margin :外边距 border:边框 padding:内边距 (内容与边框的距离) content: ...

  7. Vue HTML5 History 模式

    vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  8. vue-router HTML5 History 模式(转自官网)

    vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...

  9. Vue之八 HTML5 History模式

    nginx配置 location / { root /webroot/www/ShopMall3; try_files $uri $uri/ /index.html; } /:访问路径: root:服 ...

随机推荐

  1. 14、Java并发性和多线程-Java ThreadLocal

    以下内容转自http://ifeve.com/java-theadlocal/: Java中的ThreadLocal类可以让你创建的变量只被同一个线程进行读和写操作.因此,尽管有两个线程同时执行一段相 ...

  2. C++学习之多重继承与虚继承

    一.多重继承 我们知道,在单继承中,派生类的对象中包含了基类部分 和 派生类自定义部分.同样的,在多重继承(multiple inheritance)关系中,派生类的对象包含了每个基类的子对象和自定义 ...

  3. Android Zxing框架扫描解决扫描框大小，图片压缩问题

    在我们是Zxing框架进行二维码扫描的时候,会发现,如今手机随着分辨率的添加.那个扫描框会越来越小,在1920*1280和1280*720还算比較正常.可是三星的几款手机note4,5.S6,等几款手 ...

  4. 用JavaScript截图

    用JavaScript截图   使用JavaScript截图,这里我要推荐两款开源组件:一个是Canvas2Image,它可以将Canvas绘图编程PNG/JPEG/BMP的图像:但是光有它还不够,我 ...

  5. 带你装B,带你飞的大数据时代

    我接触过的大数据有: 1.美国棱镜计划 2.前几天新闻报道的,苹果公司窃取用户隐私 3.百度的用户搜素习惯统计分析 4.淘宝的用户购物习惯分析,智能推荐宝贝 5.浏览器的智能标签页 ... 最想了解的 ...

  6. 【bzoj1015】[JSOI2008]星球大战starwar

    给定一个无向图,求联通块个数,以及k次每次摧毁一个点后的联通块个数 将边和摧毁的点全记录下来,反着做即可 注意被摧毁的点不能算作联通块 #include<algorithm> #inclu ...

  7. 产品架构model

  8. 0x0118消息就是WM_SYSTIMER

    http://social.msdn.microsoft.com/Forums/vstudio/en-US/c0f9bac9-d211-4b8b-ba99-f5a0ed0d2e0a/what-is-w ...

  9. java.lang.NoClassDefFoundError: org/apache/commons/lang/xwork/StringUtils

    java.lang.NoClassDefFoundError: org/apache/commons/lang/xwork/StringUtils Struts2框架下使用JSON插件时.程序保存找不 ...

  10. Codeforces--14D--Two Paths（树的直径）

     Two Paths Time Limit: 2000MS   Memory Limit: 65536KB   64bit IO Format: %I64d & %I64u Submit ...