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. 【BZOJ4514】数字配对（费用流）

    题意: 有 n 种数字,第 i 种数字是 ai.有 bi 个,权值是 ci. 若两个数字 ai.aj 满足,ai 是 aj 的倍数,且 ai/aj 是一个质数, 那么这两个数字可以配对,并获得 ci× ...

  2. CF578D. LCS Again

    n<=100000个字符的小写字母串,问用前m<=26个小写字母能拼出多少个和原串lcs=n-1的字符串. 首先把字符串划分成若干个连续相同的段,如aaa|bb|c|dd,然后题目即要求从 ...

  3. HTML表单数据转JSON

    问题描述 后端使用如下方式接收前端传入参数: @PostMapping(value = "/test", produces = MediaType.APPLICATION_JSON ...

  4. 分析helo1项目中的 Web.xml

    web.xml文件位于hello1 中target/WEB-INF/classes/javaeetutorial目录下. 这个web.xml文件包含Facelets应用程序所需的几个元素: 其中(1) ...

  5. Ubuntu下非常规方法安装绿色软件（压缩包）

    继上一篇http://www.cnblogs.com/EasonJim/p/7117567.html文章中说的常规方式安装的软件,都会自动在命令行及Dash Home中体现. 但是如果是使用压缩包进行 ...

  6. new出来的对象无法调用@Autowired注入的Spring Bean

    @Autowired注入Spring Bean,则当前类必须也是Spring Bean才能调用它,不能用new xxx()来获得对象,这种方式获得的对象无法调用@Autowired注入的Bean. 1 ...

  7. WebView与JavaScript交互--Android

    转载请注明出处:  http://blog.csdn.net/forwardyzk/article/details/46819925 在工作中,有一个这种需求,须要用到WebView与javascri ...

  8. tiny4412学习(四)之移植linux-设备树（1）设备树基础知识及GPIO中断【转】

    本文转载自:http://blog.csdn.net/fengyuwuzu0519/article/details/74177978 版权声明:本文为博主原创文章,转载请注明http://blog.c ...

  9. document.getElementById方法在火狐和谷歌浏览器兼容

    转自:http://www.office68.com/computer/6505.html 对于前台设计,浏览不兼容是一个很头晕的事情,为此记录下来与大家分享,并供日后自己参考. 例:有一个名为pwd ...

  10. hebernate基础学习2---属性

    ---------------------------------------------------------------------------------------------------- ...