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:服 ...
随机推荐
- 在Myeclipse中拷贝一个web项目，但是tomcat文件夹中没有更新，需要进行修改才能更新。
1.在Myeclipse中拷贝一个web项目,但是tocat文件夹中没有更新,需要进行修改才能更新. 2.方法:右键这个工程,然后Properties->MyEclipse->Projec ...
- [codevs 1961]躲避大龙（dfs)
题目:http://dev.codevs.cn/problem/1961/ 分析: 被“SPFA”的标签骗了…… 看了hzwer的博客才知道可以用f[i][0..60]表示每个点每个秒是否可以到.至于 ...
- BZOJ(2) 1041: [HAOI2008]圆上的整点
1041: [HAOI2008]圆上的整点 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 4966 Solved: 2258[Submit][Sta ...
- 1048 石子归并codevs
1048 石子归并codevs 题目描述 Description 有n堆石子排成一列,每堆石子有一个重量w[i], 每次合并可以合并相邻的两堆石子,一次合并的代价为两堆石子的重量和w[i]+w[i+1 ...
- Ubuntu 16.04安装Adobe AIR
安装: wget -O adobe-air.sh http://drive.noobslab.com/data/apps/AdobeAir/adobe-air.sh chmod +x adobe-ai ...
- some notes about ADDM and AWR
Use the sophisticated management and monitoring features of the Oracle DatabaseDiagnostic and Tuning ...
- Android系统编译时遇到的几个.mk的疑惑。
在Android4.2的源代码Build/prduct_config.mk里面遇到几个疑惑: # Convert a short name like "sooner" into t ...
- swift 2.0 语法 字符串
//: Playground - noun: a place where people can play import UIKit /*: 字符串 * OC中的字符串是一个对象, Swift中的字符串 ...
- 【C语言】编写函数实现库函数atof
//编写函数实现库函数atof #include <stdio.h> #include <assert.h> #include <ctype.h> #include ...
- Java与设计模式-适配器模式
适配器模式是开发中常常会用到的模式,Android开发中常常常使用到的各种adapter就属于适配器模式,连接各种数据库时也要用到适配器模式. 适配器模式在生活中的实例也随处可见,你托人在日本买了个电 ...