一、盒子模型（Box Model）

盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。当设置一个元素的样式如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>盒子模型</title><style type="text/css">#box{width:100px;height:100px;margin:20px;padding:20px;border:10px solid blue;}</style></head><body><div id="box">Box Model</div></body>
</html>

运行结果：

1.1、宽度测试

计算最大宽度，示例如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>盒子模型</title><style type="text/css">#box{width: 800px;padding: 10px;border: 5px solid blue;margin: 10px;}.sbox{display: inline-block;padding: 10px;  margin: 10px;   border: solid 10px coral;background: lightblue;width: ?;}</style></head><body><div id="box"><div class="sbox">Left</div><div class="sbox">Right</div></div></body>
</html>

要达到如下效果，请问?处最大可以设置为多少像素？

1.2、溢出测试

代码如下：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>盒子模型</title><style type="text/css">#box{width:800px;padding:10px;border:5px solid blue;margin:10px;height:100px;}#box #innerBox{background:lightblue;height:50px;width:100%;padding:10px;margin:10px;border:10px solid lightcoral;}</style></head><body><div id="box"><div id="innerBox">innerBox</div></div></body>
</html>

结果：

可见部分=850-815=35，还有10个margin不可见，45px

1.3、利用CSS画图

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>盒子模型 - 三角形</title><style type="text/css">#box{width:0;height:0;border:100px solid blue;border-color:blue transparent transparent transparent;/*设置边线的颜色，transparent表示透明的颜色，按上右下左的顺时钟方向*/}</style></head><body><div id="box"></div></body>
</html>

View Code

运行结果：

心形：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#heart {position: relative;width: 100px;height: 90px;}#heart:after,#heart:before {position: absolute;content: "";left: 50px;top: 0;width: 50px;height: 80px;background: red;border-radius: 50px 50px 0px 0px;transform: rotate(-45deg);transform-origin: 0 100%;}#heart:after {left: 0;transform: rotate(45deg);transform-origin: 100% 100%;}</style></head><body><div id="heart"></div></body>
</html>

运行结果：

效果二：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>画心</title><style type="text/css">#heart{width:100px;height:80px;margin:0 auto;position:relative;}#heart:before,#heart:after{content:'';width:50px;height:80px;background:red;display:block;position:absolute;left:50%;border-radius:25px 25px 0 0;transform:rotate(-45deg);/*向左旋转45度*/transform-origin:0 100%;/*旋转的支点，左边0，上边100%（元素的高度）*/}#heart:after{left:0;transform:rotate(45deg);/*向右旋转45度*/transform-origin:100% 100%;}</style></head><body><div id="heart"></div></body></html>

View Code

二、边距折叠

2.1、概要

外边距折叠：相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）
相邻：没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系，如：

示例代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#div1{border:3px solid blue;height:200px;background:lightcoral;}#div2{height:100px;background:lightgreen;margin-top:20px;}#div3{height:50px;width:50%;background:lightblue;margin-top:20px;}</style></head><body><div id="div1"><div id="div2"><div id="div3"></div></div></div></body>
</html>

运行结果：

2.2、垂直方向外边距合并计算

a)、参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。

示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>边距折叠</title></head><body><div style="height:90px; margin-bottom:99px; width:90px; ">X</div><div style="height:90px; margin-top:100px; width:90px; ">Y</div></body>
</html>

运行结果：

b)、参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。
示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>边距折叠</title></head><body><div style="height:90px; margin-bottom:-10px; width:90px; ">X</div><div style="height:90px; margin-top:-30px;width:70px; ">Y</div></body>
</html>

结果：

c)、参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>参与折叠的 margin 中有正值，有负值</title></head><body><div style="height:90px; margin-bottom:-30px; width:90px; ">X</div><div style="height:90px; margin-top:30px;width:70px; ">Y</div></body>
</html>

运行结果：

2.3、边距折叠简单应用

示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#div0 {width: 490px;height: 90px;border: 5px solid dodgerblue;margin: 0 auto;padding: 10px;}#div0 .subItem {float: left;width: 90px;height: 90px;background: orangered;margin-right: 10px;}</style></head><body><div id="div0"><div style="margin-right: -10px;"><div class="subItem">1</div><div class="subItem">2</div><div class="subItem">3</div><div class="subItem">4</div><div class="subItem">5</div></div></div></body></html>

效果：

三、内联与块级标签

3.1、行内标签与块标签区别

html中的标签默认主要分为两大类型，一类为块级元素，另一类是行内元素，许多人也把行内称为内联，所以叫内联元素，其实就是一个意思。为了很好的布局，必须理解它们间的区别，区别如下：

常用的块级有：div,p,h1~h6,ul,li,dl,dt,dd...  常用的行内有：span，font,b,u,i,strong,em,a,img,input，其中img和input为行内块元素。

更多块级与内联元素：

内联元素（行内元素）内联元素(inline element)a - 超链接abbr - 缩写acronym - 首字bdo - bidi overridebig - 大字体br - 换行cite - 引用code - 计算机代码(在引用源码的时候需要)dfn - 定义字段em - 强调i - 斜体img - 图片input - 输入框kbd - 定义键盘文本label - 表格标签q - 短引用samp - 定义范例计算机代码select - 项目选择small - 小字体文本span - 常用内联容器，定义文本内区块strike - 中划线strong - 粗体强调sub - 下标sup - 上标textarea - 多行文本输入框tt - 电传文本u - 下划线var - 定义变量块元素(block element)address - 地址blockquote - 块引用center - 举中对齐块dir - 目录列表div - 常用块级容易，也是css layout的主要标签dl - 定义列表fieldset - form控制组form - 交互表单h1 - 大标题h2 - 副标题h3 - 3级标题h4 - 4级标题h5 - 5级标题h6 - 6级标题hr - 水平分隔线isindex - input promptmenu - 菜单列表noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）ol - 排序表单p - 段落pre - 格式化文本table - 表格ul - 非排序列表可变元素，可变元素为根据上下文语境决定该元素为块元素或者内联元素。applet - java appletbutton - 按钮del - 删除文本iframe - inline frameins - 插入的文本map - 图片区块(map)object - object对象script - 客户端脚本

View Code

行内标签与块标签特性示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>块级标签与行内标签</title><style type="text/css">#div1,#div2{background:lightblue;}span{width:100px;/*无效*/height:20px;/*无效*/margin:20px;/*水平方向有效，垂直方向无效*/padding:20px;/*水平方向有效，垂直方向无效*/}#div3{width:500px;border:1px solid #ADD8E6;word-break:break-all;}</style></head><body><h2>块级标签与行内标签</h2><div id="div1">div1</div><div id="div2">div2</div><div id="div3"><span id="span1">span1</span><span id="span2">span2</span><span id="span3">span3</span><span id="span4">spanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspan4</span></div></body>
</html>

View Code

运行结果：

语法如下：

display：none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex
默认值：inline

none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
inline： 指定对象为内联元素。 
block： 指定对象为块元素。 
list-item： 指定对象为列表项目。 
inline-block： 指定对象为内联块元素。（CSS2） 
table： 指定对象作为块元素级的表格。类同于html标签<table>（CSS2） 
inline-table： 指定对象作为内联元素级的表格。类同于html标签<table>（CSS2） 
table-caption： 指定对象作为表格标题。类同于html标签<caption>（CSS2） 
table-cell： 指定对象作为表格单元格。类同于html标签<td>（CSS2） 
table-row： 指定对象作为表格行。类同于html标签<tr>（CSS2） 
table-row-group： 指定对象作为表格行组。类同于html标签<tbody>（CSS2） 
table-column： 指定对象作为表格列。类同于html标签<col>（CSS2） 
table-column-group： 指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2） 
table-header-group： 指定对象作为表格标题组。类同于html标签<thead>（CSS2） 
table-footer-group： 指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2） 
run-in： 根据上下文决定对象是内联对象还是块级对象。（CSS3） 
box： 将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
inline-box： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3） 
flexbox： 将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
inline-flexbox： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3） 
flex： 将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3） 
inline-flex： 将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

  • 如果display设置为none，float及position属性定义将不生效；
  • 如果position既不是static也不是relative或者float不是none或者元素是根元素，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值；

  • IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果；你可以这样：

  • 全兼容的inline-block：

    div {
    display: inline-block;
    *display: inline;
    *zoom: 1;
    }

Basic Support包含值：none | inline | block | list-item | inline-block 
table系包含值：table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group 
IE6,7只支持inline元素设置为inline-block，其它类型元素均不可以

3.2、隐藏

可以使用3种办法让元素隐藏：

a)、使用CSS的display:none，不会占有原来的位置

b)、使用CSS的visibility:hidden，会占有原来的位置

c)、使用HTML5中的新增属性hidden="hidden"，不会占有原来的位置

示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>隐藏</title><style type="text/css">div{width:100px;height:100px;border:2px solid blue;margin:10px;font-size:30px;}#div1{display:none;}#div2{visibility:hidden;}</style></head><body><div id="div0">div0</div><div id="div1">div1</div><div id="div2">div2</div><div id="div3" hidden="hidden">div3</div><div id="div4">div4</div></body></html>

View Code

运行结果：

3.3、行内块标签

当元素的样式display为inline-block属性时就被设置成了行内块标签，同时拥有行内标签与块标签的特性，不再占整行；可以设置宽度，高度；padding与margin都有效。

示例：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>inline-block</title><style type="text/css">div,span{width: 100px;height: 100px;border: 2px solid blue;font-size: 30px;display: inline-block;margin: 10px;padding: 10px;}</style></head><body><div id="div0">div0</div><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><div id="div4">div4</div><p><span>span1</span><span>span2</span><span>span3</span></p></body>
</html>

运行结果：

3.4、菜单示例

使用display属性结合图片实现网页中的图片菜单：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>menu</title><style type="text/css">*{margin:0;padding:0;}#menu{width:1004px;margin:0 auto;margin:10px;background:#348200;font-size:0px;background:url(img/menubg.jpg) repeat-x;height:49px;line-height:49px;}#menu a{display:inline-block;width:96px;height:49px;line-height:49px;background:url(img/menu.jpg) no-repeat;color:white;font-size:13px;text-decoration:none;text-align:center;margin-right:1px;}#menu a:hover{background-image:url(img/menunow.jpg);}#divLeft{width:25px;height:49px;line-height:49px;background:url(img/menuleft.jpg) no-repeat;float:left;}#divRight{width:25px;height:49px;background:url(img/menuright.jpg) no-repeat;float:right;}#divTime{width:260px;height:49px;font-size:14px;text-align:center;float:left;}#divMenu{float:right;}</style></head><body><div id="menu"><div id="divLeft" class="iDiv"></div><div id="divTime" class="iDiv"><div>时间：2016/11/24 下午2:49:56</div></div><div id="divRight" class="iDiv"></div><div class="iDiv" id="divMenu"><a href='index.html'>网站首页</a><a href='articleList/15.html'>公司简介</a><a href='productList/11.html'>产品展示</a><a href='articleList/17.html'>养殖技术</a><a href='articleList/18.html'>娃娃鱼介绍</a><a href='productList/18.html'>企业资质</a><a href='productList/19.html'>友情链接</a></div></div></body></html>

View Code

运行效果：

转载于:https://www.cnblogs.com/huafang/p/10647735.html

CSS3与页面布局——Box Model、边距折叠、内联与块标签、CSSReset相关推荐

  1. CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset...

    CSS3与页面布局学习总结(二)--Box Model.边距折叠.内联与块标签.CSSReset 目录 一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizi ...

  2. CSS3与页面布局学习笔记（二）——盒子模型(Box Model)、边距折叠、内联与块标签、CSSReset

    一.盒子模型(Box Model) 盒子模型也有人称为框模型,HTML中的多数元素都会在浏览器中生成一个矩形的区域,每个区域包含四个组成部分,从外向内依次是:外边距(Margin).边框(Border ...

  3. Box Model,边距折叠，内联和块标签，CSSReset

    一.盒子模型(Box Model) 1.1.宽度测试 1.2.溢出测试 1.3.box-sizing属性 1.4.利用CSS画图 二.边距折叠 2.1.概要 2.2.垂直方向外边距合并计算 三.内联与 ...

  4. CSS3与页面布局学习笔记（八）——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  5. CSS3与页面布局学习笔记（四）——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  6. CSS3与页面布局学习总结（四）——页面布局大全BFC、定位、浮动、7种垂直居中方法...

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

  7. CSS3与页面布局学习总结（八）——浏览器兼容与前端性能优化

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  8. CSS3与页面布局学习总结（五）——Web Font与Sprite

    CSS3与页面布局学习总结(五)--Web Font与Sprite 目录 一.web font 1.1.什么是font-face 1.2.font-face优点 1.3.字体格式 1.4.使用@fon ...

  9. CSS3与页面布局学习笔记（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即"块级格式化上下文", IFC(Inline Formatting Co ...

最新文章

  1. 十年“老司机”的私家锦囊：10个编程技巧、5个纠错步骤，让你的编程之路少点坎坷
  2. filazilla搭建ftp_Windows7下利用FileZilla Server搭建ftp
  3. SQL UNION 操作符
  4. ubuntu镜像添加jdk_Ubuntu16.0.4安装jdk8
  5. 震惊！上手就是快，GitHub18.5K标星,超实用的Python资源
  6. php 设置页面内容具有缓存性,php header()设置页面Cache缓存
  7. Spring Data 起步
  8. iOS黑魔法－Method Swizzling
  9. 学计算机买小米air可以么,Mi 小米 Air13.3 笔记本电脑 三个月使用体验
  10. 一个简单的微信小程序支付demo
  11. 7种不同的数据标准化(归一化)方法总结
  12. 小程序专题：14款活动报名小程序
  13. Windows 平台上使用 cwRsync做文件同步
  14. Cesium中的primitive竖立流光飞线
  15. win10右键文件夹转圈卡死
  16. sdn的用处_SDN原来如此简单？三分钟轻松掌握！
  17. 台湾文化记忆库网站现已正式上线
  18. DASH Nginx Webrtc Quic学习资料超链
  19. Hibernate 的检索策略
  20. 推荐一款稳定快速免费的前端开源项目 CDN 加速服务

热门文章

  1. 如颖随行 这款笔记本竟然承载着这样的赵丽颖
  2. Markdown编辑器使用概览
  3. [python]-日志记录之logging
  4. java objectid_关于MongoDB ObjectId
  5. elementUI遍历给表头设置多个背景色，设置不同class时，出现单元格内容区背景色也被一起修改的问题
  6. 数组转换为json输出
  7. 方舟染色文件用在服务器,方舟恐龙染色文件 | 手游网游页游攻略大全
  8. linux检验dns的命令,使用dig、nslookup、host命令在Linux中检查反向DNS查找（rDNS）
  9. MATLAB设计钻柱组合
  10. 火车售票系统c语言编程,基于C语言实现简单的12306火车售票系统.pdf