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. VScode输出中文乱码的解决方法------测试过可以用

    用python写个爬虫,配置个VScode环境,发现输出都是乱码,翻阅网站后发现一个简单有效的方法,在此谢过网络上的大牛们的无私分享,我也在此记录一下,以备后用: 文件---->首选项----& ...

  2. rpm 命令的使用

    rpm -ivh    xv-3.10a-13.i386.rpm 在Terminal中,基本的安装指令如下: rpm -i    xv-3.10a-13.i386.rpm 如果你的连网速度足够快,也可 ...

  3. 使用C#执行PowerShell命令

    按照网上的教程配置会发生SSL链接错误 该文章的最后使用了SSL来保证账户在连接服务器的时候不发生账户认证错误,但是我经过测试发现这个是不可行的,有一种更为简单的方法 首先要对服务器进行winrm设置 ...

  4. ECMAScript 6 入门学习笔记（二）——变量的解构赋值

    一.数组的解构赋值 let [foo, [[bar], baz]] = [1, [[2], 3]]; ①可多不可少,等号的右边是数组 let [x, y] = [1, 2, 3]; //可以 let ...

  5. 洛谷（cogs 1293/bzoj 1212） P2292 [HNOI2004]L语言

    1293. [HNOI2004] L语言 ★★★   输入文件:language.in   输出文件:language.out   简单对比时间限制:1 s   内存限制:162 MB [题目描述] ...

  6. SiteMesh2-sitemesh.xml的其它映射器的用法

    在sitemesh.xml中做常用的三个映射器,总结如下: 映射器元素的顺序确定优先级.良好的应用程序应使用以下顺序, Parameter query = ParameterDecoratorMapp ...

  7. 解DBA之惑：数据库承载能力评估及优化手段

    原创 2016-08-29 韩锋 DBAplus社群   作者介绍 韩锋,宜信技术研发中心数据库架构师.精通多种关系型数据库,曾任职于当当网.TOM在线等公司,曾任多家公司首席DBA.数据库架构师等职 ...

  8. docker: useful commands

    docker build -t stock_data_repo_instance24 . docker run -v /opt/log:/opt/log -d -it stock_data_repo_ ...

  9. scikit-learn： isotonic regression（保序回归，非常有意思，仅做知识点了解，但差点儿没用到过）

    http://scikit-learn.org/stable/auto_examples/plot_isotonic_regression.html#example-plot-isotonic-reg ...

  10. SuperSocket中的Server的初始化和启动

    一.初始化的过程 static void Main(string[] args) { var bootstrap = BootstrapFactory.CreateBootstrap(); if (! ...