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. 个人常用git命令

    最近开始使用git,将自己常用git命令做一个简单归纳,便于记忆. 初始化及配置 git init:初始化资料库 git config --global user.name 'xxx':配置用户名 g ...

  2. spark之scala快速入门

    scala和java都是在jvm之上的语言,相对来讲,scala热度比较低,其实并不是一个特别好的语言选择. 原因倒不是因为scala本身的缺点,而是使用人群不够多,论坛和社区不够活跃.这就跟社交软件 ...

  3. TortoiseGit推送失败的问题

    网络的SSH修改为使用git默认的ssh客户端,而不是tortosieGit提供的客户端 修改成这样 下面的本机凭证修改为当前用户 然后直接使用右键->git同步 在推送url上填写远程的url ...

  4. 非常适合新手的jq/zepto源码分析01

    (function(global, factory) { // 查看这里是不是定义成模块,如果定义模块就返回 一个模块 if (typeof define === 'function' &&a ...

  5. LintCode-分糖果

    有 N 个小孩站成一列.每一个小孩有一个评级. 依照下面要求.给小孩分糖果: 每一个小孩至少得到一颗糖果. 评级越高的小孩能够得到很多其它的糖果. 需最少准备多少糖果? 您在真实的面试中是否遇到过这个 ...

  6. JQuery之操作array

    1:split 函数将字符串按某个字符分割,将分割后的结果存入字符串数组中 function SplitUsersInformation(users) { var usersArray = users ...

  7. starUML 2.5.1 for mac

    http://www.macupdate.com/app/mac/55571/staruml/download 一直在windows下使用 star UML,占用资源少,简洁易用. Mac下也能够用了 ...

  8. Codeforces Round #327 (Div. 2)C. Median Smoothing 构造

    C. Median Smoothing   A schoolboy named Vasya loves reading books on programming and mathematics. He ...

  9. shell 字符串拼接 获取自身文件名 日志记录

    shell  字符串拼接 获取自身文件名 日志记录 [root@hadoop2 xiaole_chk_url]# sh a.sh123.loga.sh[root@hadoop2 xiaole_chk_ ...

  10. 继承自TWinControl的控件不能在设计期间接受子控件，用代码设置子控件却可以（它的自绘是直接改写PaintWindow虚函数，而不是覆盖Paint函数——对TWinControl.WMPaint又有新解了）

    这个控件直接继承自TWinControl,因此不是改写Paint;函数,而是直接改写PaintWindow虚函数,它在VCL框架里被直接调用,直接就把自己画好了(不用走给控件Perform(WM_Pa ...