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 盒子模型.他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型: 从上 ...
随机推荐
- (转)常用的三种修改mysql最大连接数的方法
MYSQL数据库安装完成后,默认最大连接数是100,一般流量稍微大一点的论坛或网站这个连接数是远远不够的,增加默认MYSQL连接数的方法有两个 方法一:进入MYSQL安装目录 打开MYSQL配置文件 ...
- grep 强大的文本搜索工具
1.grep -r "History folder does't exist:" * :中间是要搜索的文本,* 表示全部显示出来
- react中使用屏保
1,默认路由路径为屏保组件 <HashRouter history={hashHistory}> <Switch> <Route exact path="/&q ...
- 使用了@Slf4j log没有info的方法 .info()方法爆红或者log爆红
在springboot项目中,使用注解@Slf4j时,log变量不能用. 导包用的是 import lombok.extern.slf4j.Slf4j; <dependency> < ...
- Java虚拟机性能管理神器 - VisualVM（5） 监控远程主机上的JAVA应用程序【转】
Java虚拟机性能管理神器 - VisualVM(5) 监控远程主机上的JAVA应用程序[转] 标签: javajvm监控工具性能优化 2015-03-11 18:37 1394人阅读 评论(0) 收 ...
- 洛谷 P1941 飞扬的小鸟 （NOIP 2014）
题面 题解 背包细节题,wa了一片,上升的过程我们可以看做一个完全背包(多重背包好像跑不过去),下降 过程是一个0/1背包,为了避免冲突应该先跑多重,先跑0/1就有可能产生这个点又上升又下降的 非法情 ...
- pytorch基础2
下面是常见函数的代码例子 import torch import numpy as np print("分割线---------------------------------------- ...
- NSLayoutConstraint 开源框架
https://github.com/cloudkite/Masonry Masonry is a light-weight layout framework which wraps AutoLayo ...
- memcache课程---1、memcache介绍及安装（memcache作用）
memcache课程---1.memcache介绍及安装(memcache作用) 一.总结 一句话总结: 减少对数据库的访问,因为数据库的访问比较花费时间 1.memcache为什么比操作数据库快的多 ...
- 报错C1189 #error: "No Target Architecture"
根本原因: 是因为单独包含了一些windows.h已经包含了的头文件如"fileapi.h","WinUser.h",但是却没有包含windows.h 或者先包 ...