html5——盒子模式
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——盒子模式的更多相关文章
- nginx 配置支持URL HTML5 History 模式 与 设置代理
拾人牙慧:https://segmentfault.com/q/1010000007140360 nginx 配置支持URL HTML5 History 模式 location / { try_fil ...
- vue,一路走来（11）--HTML5 History模式
HTML5 History模式 项目中我用的是history模式. 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不 ...
- HTML5 History 模式
vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- CSS学习之盒子模式
从CSS角度来看,页面上每个元素都是一个盒子,不管是块元素还是内敛元素等.而这个盒子由四个部分组成.内容区,补白,边框,边界,下面来介绍下这四种元素. 1 内容 每个元素都是以某些内容开始的,比如文本 ...
- 前端学习 -- Css -- 盒子模式
框模型: CSS处理网页时,它认为每个元素都包含在一个不可见的盒子里. 为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相当于是摆放盒子.我们只需要将相应的盒子摆放到网页 ...
- HTML5盒子模型。
盒子模型. 盒子由 margin.border.padding.content 四部分组成. margin :外边距 border:边框 padding:内边距 (内容与边框的距离) content: ...
- Vue HTML5 History 模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- vue-router HTML5 History 模式(转自官网)
vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
- Vue之八 HTML5 History模式
nginx配置 location / { root /webroot/www/ShopMall3; try_files $uri $uri/ /index.html; } /:访问路径: root:服 ...
随机推荐
- 矩形面积求并（codevs 3044）
题目描述 Description 输入n个矩形,求他们总共占地面积(也就是求一下面积的并) 输入描述 Input Description 可能有多组数据,读到n=0为止(不超过15组) 每组数据第一行 ...
- canvas裁剪之后的base64转换为上传文件blob对象
function convertBase64UrlToBlob(urlData){ var bytes=window.atob(urlData.split(',')[1]); //去掉url的头,并转 ...
- nodejs 安装express
在命令行中执行 "npm install -g express"等待下载并且自动完成安装.测试express完成安装的一个方法就是查看其版本号,执行命令 “express -V”正 ...
- 【翻译自mos文章】rman 标准版和企业版的兼容性
rman 标准版和企业版的兼容性 来源于: RMAN Standard and Enterprise Edition Compatibility (文档 ID 730193.1) 适用于: Oracl ...
- bootstrap-table方法之：expandRow-collapseRow，展开或关闭当前行数据
官方演示地址:http://issues.wenzhixin.net.cn/bootstrap-table/methods/expandRow-collapseRow.html <!DOCTYP ...
- j2se回想
执行Java程序． Java程序有两种方式一种是jar包.一种是class. 执行jar,Java -jar XXX.jar执行的时候,Java.exe调用GetMainClassName函数,该函数 ...
- docker（1）：virtualbox 安装CoreOS系统，配置registry-mirror
本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/51093850 未经博主同意不得转载. 博主地址是:http://blog.csd ...
- linux /proc/stat 文件说明
/proc/stat 文件内容 # cat /proc/stat cpu 1411 1322 3070 1193539 2790 0 268 0 0 0 cpu0 472 658 787 297933 ...
- unity3D游戏开发实战原创视频讲座系列11之相扑游戏开发并公布到Win\WP8
解说文件夹 第一讲 游戏的演示和资源介绍 第二讲 场景的建设 第三讲 玩家的移动 第四讲 对手的AI(让对手动起来) 第五讲 游戏的管理(上) 第六讲 游戏的管理(下) 第七讲 公布到Win8系 ...
- BNU 13064 Dice (I) 前缀和优化DP
Dice (I) You have N dices; each of them has K faces numbered from 1 to K. Now you have arranged th ...