CSS（六）：盒子模型
一、什么是盒子模型
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。
从上图可以看到标准的盒子模型范围包括margin(外边距)、border(边框)、padding(内边距)、content(网页内容)。
网页内容就是盒子里面装的东西。在网页设计中，内容常指文字、图片等元素。
内边距(PADDING)可以理解为盒子里装的东西和边框的距离。
边框(BORDER)就是盒子本身。
外边距(MARGIN)就是边框外面自动留出的一段空白。
注意：
每个HTML元素都可以看做是一个盒子。
1、外边距(margin)
2、边框(border)
3、内边距(padding)
4、小结
4、1 盒子模型总尺度
盒子模型总尺度=margin*2+border*2+padding*2+内容尺寸（宽/高）。
例如、一个盒子的margin为25px，border为2px，padding为10px，content的宽为200px、高为50px，假如用标准盒子模型解释，那么这个盒子需要占据的位置为：宽25*2+2*2+10*2+200=274px、高25*2+2*2*10*2+50=124px，盒子的实际大小为：宽 2*2+10*2+200=224px、高 2*2+10*2+50=74px；
4、2 外边距可以用于设置网页水平居中
margin-left:auto;
margin-right:auto;
例如：margin 0px auto;
4、3 块元素才能完全适用于盒子模型
使用display属性来相互转化
none：元素隐藏，不可见，不占据空间。
visibility:hidden 元素隐藏，但是占据空间。
block：转为块元素，独占一行。
inline：转为内联元素，不换行。
inline-block：行内块元素。
下面的例子演示如何将行内元素转换为块级元素。
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>块级元素</title>
<style type="text/css">
.div-style a{
width: 500px;
border: 1px solid red;
margin: 0 10px;
}
</style>
</head>
<body>
<div class="div-style">
<p>
<a>超链接1</a>
<a>超链接2</a>
</p>
</div> </body>
</html>
效果：
因为<a>标签是行级元素，所以设置的width属性对<a>标签不起作用。下面使用display属性进行转换：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>块级元素</title>
<style type="text/css">
.div-style a{
display: block;/*将行级元素转换为块级元素*/
width: 500px;
border: 1px solid red;
margin: 10px;
}
</style>
</head>
<body>
<div class="div-style">
<p>
<a>超链接1</a>
<a>超链接2</a>
</p>
</div>
</body>
</html>
效果：
下面的例子演示如何将块级元素转换为行级元素，先看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>块级元素</title>
<style type="text/css">
/* .div-style a{
display: block;/*将行级元素转换为块级元素*/
/* width: 500px;
border: 1px solid red;
margin: 10px;
} */
.div-style p{
width: 500px;
border: 1px solid red;
margin: 10px;
}
</style>
</head>
<body>
<div class="div-style">
<p>
<a>超链接1</a>
<a>超链接2</a>
</p>
<p>
<a>超链接3</a>
<a>超链接4</a>
</p>
</div> </body>
</html>
效果：
因为<p>标签是块级元素，所以两个<p>标签会分两行显示。
在看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>块级元素</title>
<style type="text/css">
/* .div-style a{
display: block;/*将行级元素转换为块级元素*/
/* width: 500px;
border: 1px solid red;
margin: 10px;
} */
.div-style p{
display: inline;/*inline表示将块级元素转换成行级元素*/
/* width: 500px; */ /*因为对行级元素设置width属性无效，所以这里去掉width属性*/
border: 1px solid red;
margin: 10px;
}
</style>
</head>
<body>
<div class="div-style">
<p>
<a>超链接1</a>
<a>超链接2</a>
</p>
<p>
<a>超链接3</a>
<a>超链接4</a>
</p>
</div> </body>
</html>
效果：
这是两个<p>标签会在一行显示。
下面演示display的none属性，先看下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>display的none属性</title>
</head>
<body>
<div>我是第一个DIV</div>
<p>我是p段落</p>
<div>我是第二个DIV</div>
</body>
</html>
效果：
在看下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>display的none属性</title>
<style type="text/css">
p{
display: none;/*设置p标签隐藏*/
}
</style>
</head>
<body>
<div>我是第一个DIV</div>
<p>我是p段落</p>
<div>我是第二个DIV</div>
</body>
</html>
效果：
从上面的截图中可以看出：display的none属性可以使元素隐藏，并且隐藏的元素不占据空间。
下面在看看visibility属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>display的none属性</title>
<style type="text/css">
/* p{
display: none;/*设置p标签隐藏*/
/* } */
p{
visibility: hidden;
}
</style>
</head>
<body>
<div>我是第一个DIV</div>
<p>我是p段落</p>
<div>我是第二个DIV</div>
</body>
</html>
效果：
从上面的截图中可以看出：visibility属性也可以将元素隐藏，但是会占据元素原来的空间。
在看inline-block属性。
先看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>line-block属性</title>
<style type="text/css">
.div-style a{
display: block;
width: 500px;
border: 1px solid red;
margin: 10px;
}
</style>
</head>
<body>
<div class="div-style">
<p>我是第一个段落
<a>超链接1</a>
<a>超链接2</a>
</p>
<p>我是第二个段落
<a>超链接3</a>
<a>超链接4</a>
</p>
</div>
</body>
</html>
效果：
从截图中可以看出：<a>标签可以设置宽度了，而且是单独占一行显示，那么能不能让<a>标签既能设置宽度又能在一行显示呢？答案是肯定的，看下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>line-block属性</title>
<style type="text/css">
.div-style a{
display: inline-block;
width: 300px;
border: 1px solid red;
margin: 10px;
}
</style>
</head>
<body>
<div class="div-style">
<p>我是第一个段落
<a>超链接1</a>
<a>超链接2</a>
</p>
<p>我是第二个段落
<a>超链接3</a>
<a>超链接4</a>
</p>
</div>
</body>
</html>
效果：
使用display:inline-block属性就可以使<a>标签既能设置宽度，又能在一行显示了。
盒子模型的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>盒子模型</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
.main{
width: 300px;
height: 160px;
border: 1px solid #3a6587;
margin:0 auto;
padding: 0 auto;
}
div h3{
color: white;
background-color: gray;
padding-left: 20px;
height: 30px;
line-height: 30px;/*垂直居中显示*/
}
.td-left{
text-align: right;
}
.bottom{
margin:20px 10px;
}
</style>
</head>
<body>
<div class="main">
<div class="top">
<h3>会员登录</h3>
</div>
<div class="bottom">
<table cellspacint="0" cellpadding="0">
<tr>
<td class="td-left">姓名:</td>
<td><input type="text"></td>
</tr>
<tr>
<td class="td-left">邮箱:</td>
<td><input type="text"></td>
</tr>
<tr>
<td class="td-left">联系电话:</td>
<td><input type="text"></td>
</tr>
<tr>
<td class="td-left"></td>
<td><input type="submit" value="登录"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
效果：
CSS（六）：盒子模型的更多相关文章
- 深入理解CSS系列（一）：理解CSS的盒子模型
接触前端也有好几个年头了,但是,讲实话,对于CSS的理解真的是不敢恭维,相信很多同行也有类似的感受吧!这是为什么呢?因为我们都认为CSS太简单了,没有必要深入学习,果真如此?其实,只不过是自己图样图森 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No1-No4（知识点：HTML、CSS、盒子模型、内容布局）
这些HTML.CSS知识点,面试和平时开发都需要 No1-No4 系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) ...
- 使用css弹性盒子模型
提示: 当期内容不充实, 修改后再来看吧 以下称:弹性子元素: 子元素, 弹性容器: 容器 弹性盒子的属性 1. css弹性盒子模型规定了弹性元素如何在弹性容器内展示 2. 弹性元素默认显示在弹性容器 ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- 深入了解CSS中盒子模型
CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...
- CSS 弹性盒子模型
CSS 弹性盒子模型 https://www.w3.org/TR/2016/CR-css-flexbox-1-20160526/ CSS Flexible Box Layout Module Leve ...
- 认识CSS中盒子模型
前端之HTML,CSS(六) CSS 盒子模型 CSS中的重点,理解盒子模型对于CSS才能有更清晰的认识.网页说简单一点其实就是一块一块的拼接出来的,可以想象成拼图,所有图块拼接在一起就成了一幅图像. ...
- css 大话盒子模型
什么是盒子模型? CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content).内边距(padding).边框(border) 和 ...
- CSS系列：CSS中盒子模型
盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构 在CSS中, ...
- CSS之盒子模型及常见布局
盒子模型的综合应用 CSS提高1 Div ul li 的综合应用很多的网页布局现在都用到这种模式 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...
随机推荐
- 开发自己的One Page Scroll插件（二）
开发自己的One Page Scroll插件(一) 5. 在其他浏览器中的特性 我经常会不停地发布当前的版本,从而可以在GitHub上得到不断的反馈.我的开发模式是不断的迭代.在开始的时候,我不会太关 ...
- .NET破解之爱奇迪（一）
今天无意中看到了wuhuacong(伍华聪)的专栏,界面写得还是很炫的感觉,于是在广州爱奇迪官网下载一个来试一下——客户关系管理系统.下面是成果: 00.总体把握 里面有Logon窗口(为什么不是Lo ...
- FLV视频播放：对未缓冲进度条实现拖动
FLV视频播放:对未缓冲进度条实现拖动 流媒体开发 Add comments 八282010 一.文件准备 1.转码:ffmpeg 2.添加元数据:yamdi 二.网页播放器:jw player 使 ...
- 算法笔记_043:最大连续子数组和（Java）
目录 1 问题描述 2 解决方案 2.1 蛮力枚举法 2.2 动态规划法 1 问题描述 给定一个整数数组,数组里可能有正数.负数和零.数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和 ...
- SQL Server 性能调优（方法论）【转】
目录 确定思路 wait event的基本troubleshooting 虚拟文件信息(virtual file Statistics) 性能指标 执行计划缓冲的使用 总结 性能调优很难有一个固定的理 ...
- js 判断进入可视区域
js 判断进入可视区域 CreateTime--2018年4月14日08:17:41 Author:Marydon 1.使用场景 图片懒加载时候需要用到,其他情况暂时没有遇到,欢迎留言补充! 2. ...
- chrome更改缓存位置
更改chrome浏览器缓存位置 CreateTime--2017年7月20日08:33:14Author:Marydon 一.参考链接 http://jingyan.baidu.com/artic ...
- 老生常谈，HashMap的死循环（转）
本文转自掘金占小狼:用于理解HashMap为什么线程不安全,不能用于并发. 地址就在下文: 问题 由于HashMap并非是线程安全的,所以在高并发的情况下必然会出现问题,这是一个普遍的问题,虽然网上分 ...
- 配置tomcat映射jsp
<servlet> <servlet-name>jfjf</servlet-name> <jsp-file>/14.jsp</jsp-fi ...
- VC、OpenGL、ArcGIS Engine开发的二维三维结合的GIS系统
一.前言 众所周知,二维GIS技术发展了近四十年,伴随着计算机软硬件以及关系型数据库的飞速发展,二维GIS技术已日臻完善.在对地理信息的分析功能上有着无可比拟的优势.一些宏观的地理信息,一维的地理信息 ...