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:服 ...
随机推荐
- 试来试去，WIN下最简单的WIN API开发工具，Pelles C就好啦
昨晚试过N个,不是太大,就是不容易和WIN API集成. 今早一试就灵了个.... Pelles C. Pelles C是一款windows下的C IDE,支持调试,且为免费.它有一个高效率的链接器, ...
- 武大OJ 613. Count in Sama’s triangle
Description Today, the math teacher taught Alice Hui Yang’s triangle. However, the teacher came up w ...
- [bzoj 2463]谁能赢呢？（博弈论）
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=2463 分析:因为都是按最优策略,所以棋盘肯定都能走满,于是胜负关系就是判断n*n的奇偶 ...
- VCS 一次使用。
One database was down today. So I login the server try to check and fix it. I found the Oracle home ...
- Handling PnP Paging Request
The following explains why the DO_POWER_PAGABLE bit must be set on the way down and not on the way u ...
- JAVA实现RSA加密解密 非对称算法
首先RSA是一个非对称的加密算法.所以在使用该算法加密解密之前,必须先行生成密钥对.包含公钥和私钥 JDK中提供了生成密钥对的类KeyPairGenerator,实比例如以下: public stat ...
- ZOJ2599：Graduated Lexicographical Ordering(很经典的数位DP)
Consider integer numbers from 1 to n. Let us call the sum of digits of an integer number its weight. ...
- hdu 5950 Recursive sequence
题意:告诉你数列的递推公式为f(n+1)=f(n)+2*f(n-1)+(n+1)^4 以及前两项a,b:问第n项为多少,结果对2147493647取模. 题解:有递推公式,马上应该就能想到矩阵快速幂: ...
- cc2540 usbdongle 安装驱动失败的终极解决方法 【原创，多图】
Ghost winxp win7系统安装CC2540 usbdongle CDC驱动程序 [重要提示] 因为非常多朋友使用Ghost系统.导致安装cdc驱动时安装不成功,出现 "INF中的服 ...
- SVN提交代码冲突解决方法总结
在近期svn提交代码时遇到多种情况的问题,现做一个解决办法的总结如下: 插播一条:idea下被svn版本控制各类文件的颜色区分,红棕色,未加入版本控制:绿色,已经加入控制暂未提交:蓝色,加入,已提交, ...