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:服 ...
随机推荐
- （15）MOG背景减少
1.根据上一帧找出变化的东西(如行走的人),消除背景,即不变的东西 motion detection 2.存在自身移动时的噪声和周围物体缓慢移动的噪声(这里播放的视频,我不断移动,背景可能有轻微的 ...
- MAPZONE GIS SDK接入Openlayers3之三——瓦片数据集接入
瓦片数据集接入实现思路: 1.构造ol.source.TileImage数据源,构造该数据源需要以下几项: 1)空间参考,通过如下代码构造 2)TileGrid,构造需要以下几项: a)原点 b)分辨 ...
- Open Flash Chart 简介
http://www.ibm.com/developerworks/cn/opensource/os-cn-ecl-ofc/ Open Flash Chart(OFC)是一个开源的 Flash 图表绘 ...
- ZOJ 题目2859 Matrix Searching（二维RMQ）
Matrix Searching Time Limit: 10 Seconds Memory Limit: 32768 KB Given an n*n matrix A, whose ent ...
- HDUJ 2070 Fibbonacci Number
Fibbonacci Number Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others ...
- React Native 中的component 的生命周期
React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...
- 5分钟Serverless实践：构建无服务器的图片分类系统
前言 在过去“5分钟Serverless实践”系列文章中,我们介绍了如何构建无服务器API和Web应用,从本质上来说,它们都属于基于APIG触发器对外提供一个无服务器API的场景.现在本文将介绍一种新 ...
- NYOJ_58最少步数(queue+BFS)
描写叙述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1 1,0,0,1,0,0,1,0,1 1,0,0,1,1,0,0,0,1 1,0,1,0,1,1,0,1,1 ...
- oninput 中文输入
使用 input 监听 input 中文输入,会被每次输入的字母打断,下面就解决这个问题 $('input') .off() .on('input',function(){ if($(this).pr ...
- bzoj 3895 取石子 —— 博弈论
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3895 看了博客:https://blog.csdn.net/popoqqq/article/ ...