H5C3--盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.items{
width:100%;
text-align: center;
margin-top: 100px;
}
.item{
width: 316px;
height: 170px;
display: inline-block;
margin:0 10px;
overflow: hidden;
/*添加盒模型*/
box-sizing: border-box;
}
.b1{
background-image: url("../images/1.jpg");
background-origin: border-box;
}
.b2{
background-image: url("../images/2.jpg");
}
.b3{
background-image: url("../images/3.jpg");
} /*鼠标上 移时添加边框*/
.item:hover{
border: 10px solid red;
}
.box{
width: 400px;
height: 200px;
background-color: #ccc;
}
.left{
width: 199px;
height: 200px;
background-color: red;
float: left;
/*一个元素所真正占据空间是：width + padding + border + margin*/
border-right:1px solid orange;
padding: 10px;
/*
box-sizing:设置盒模型
content-box：默认值，说明当前元素的总宽度 = width + padding + border
border-box:说明当前元素的总宽度 = width. 意味着如果添加border或padding会造成真正放置内容的区域变小。但是它的优点是能够提供更稳固的结构
*/
box-sizing: border-box;
}
.right{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="left">asdfaasdf</div>
<div class="right"></div>
</div>
<div class="items">
<div class="item b1"></div>
<div class="item b2"></div>
<div class="item b3"></div>
</div>
</body>
</html>
从下图 可以看出这个盒子的稳固程度：
H5C3--盒子模型的更多相关文章
- 谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型
开本系列,讨论一些有趣的 CSS 题目,抛开实用性而言,一些题目为了拓宽一下解决问题的思路,此外,涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题中有你感觉 ...
- JS学习：第二周——NO.3盒子模型
1.CSS盒子模型包括四个部分组成:设定的宽高+padding+border+margin: 2.JS盒子模型:通过系统提供的属性和方法,来获取当前元素的样式值 JS提供的属性和方法: clien ...
- html学习第三天—— 第11章 盒子模型 div
盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...
- css 大话盒子模型
什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...
- padding标准盒模型和怪异盒子模型
我们都知道padding是为块级元素设置内边距 但是在使用过程中,我们却会遇到一些问题.padding的标准盒模型和怪异盒模型 padding盒子模型 我们通过demo来讲这个问题,用文字干讲第一没意 ...
- CSS系列：CSS中盒子模型
盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...
- 深入理解CSS盒子模型
在CSS中浮动.定位和盒子模型,都是很核心的东西,其中盒子模型是CSS很重要基石之一,感觉还是很有必要把CSS盒子模型相关知识更新一下...... CSS盒子模型<BoxModel>示意图 ...
- jQuery CSS操作及jQuery的盒子模型
jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型
- 盒子模型(W3C盒子模型、IE盒子模型)
盒子模型:一个物体在页面中所占据的位置 盒子模型包含以下几种元素: padding:margin:content:border 这是大家都知道的,也是书本上定义说明的,但是在ie的情况下是有点区别的; ...
- 标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型(转)
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版.其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...
随机推荐
- 【2011集训贾志鹏】Crash 的数字表格
题面 题目分析 (默认\(n<m\)) 题目要求\(\sum\limits_{i=1}^n\sum\limits_{j=1}^mlcm(i,j)\). 由\(lcm(i,j)=\frac{i\c ...
- LoadRunner内部结构(1)
LoadRunner内部结构(1) 根据http://www.wilsonmar.com/1loadrun.htm 翻译: LoadRunner内部结构 1, 被测系统是由驱动 ...
- HTML值改变事件
1.动态拼接html[表格中,如bootstrap grid] return '<input type="text" name="bjce" onchan ...
- Python学习day11-函数基础(1)
figure:last-child { margin-bottom: 0.5rem; } #write ol, #write ul { position: relative; } img { max- ...
- HtmlHelper1
<div> @using(Html.BeginForm("Test","Default")) { 4 @Html.TextBox("nam ...
- Sqoop学习笔记_Sqoop的基本使用一
Sqoop 关系DB与Hive/HDFS/HBase导入导出的Mapreduce框架. http://archive.cloudera.com/cdh5/cdh/5/sqoop-1.4.4-cdh ...
- CSS元素隐藏方法总结
display:none; visibility:hidden; opacity:0三者的区别 display:none; 该属性会让元素完全从DOM中消失,浏览器不渲染设置该属性的元素,不占据DOM ...
- 使用 top instance 命令查看运行中 MaxCompute 作业
我们都知道,在 MaxCompute Console 里,可以使用下面的命令来列出运行完成的 instance 列表. show p|proc|processlist [from <yyyy-M ...
- JavaSE_03_Thread类02
1.1 线程状态概述 当线程被创建并启动以后,它既不是一启动就进入了执行状态,也不是一直处于执行状态.在线程的生命周期中, 有几种状态呢?在API中 java.lang.Thread.State 这个 ...
- git 命令行（二）-创建合并分支
1. 创建和合并分支 1. 我们创建 xu 分支,然后切换到 xu 分支: 2. 用 git branch 命令查看当前分支: git branch命令会列出所有分支,当前分支前面会标一个*号. ...