本文详细解析了HTML元素的三种显示模式——块元素、行内元素和行内块元素的区别，包括它们的特征、排列方式、样式设置和默认宽度。此外，还介绍了如何进行元素模式转换，以及CSS盒模型、定位、浮动布局等关键概念。
元素显示模式（display）
元素显示模式就是元素（标签）以什么方式进行显示，比如
自己占一行，比如一行可以放多个
HTML元素一般分为两类：块元素，行内元素
块元素（display:blcok）
元素独占一行，一行只能放一个的元素（标签）叫块元素
常见块元素有:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>为常见块元素
特点
- 独占一行
- 高度，宽度，外边距及内边距都可以控制
- 宽度是默认容器（父级宽度）的100%
- 是一个容器及盒子，里面可以放行内或块级元素
文字类的元素内不能放其它块级元素
行内元素（display:inline）
元素不独占一行，一行可以放多个元素（标签）的HTML标签叫行内元素
常见行内元素有:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>为常见行内元素
特点
- 相邻行内元素在一行上，一行可以显示多个
- 高度，宽度，设置是无效的
- 宽度是它本身内容的宽度
- 行内元素只能容纳稳步或者其它行内元素
链接内不能再放链接
特殊情况行内元素a里面可以放块级元素，但是需要给a转换一下为块级模式更安全
行内块元素（display:inline-block）
同时具有块元素和行内元素特点的叫行内块元素
常见行内块元素有:<img/>、<input/>、<td>
特点
- 和相邻行内元素（行内块）在一行上，但他们之间会有空白间隙。一行可以显示多个（行内元素特点）
- 高度，宽度，外边距及内边距都可以控制（块元素特点）
- 宽度是它本身内容的宽度（行内元素特点）
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块元素 | 一行放一个快元素 | 可以设置宽高 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行放多个行内元素 | 不可以设置宽高 | 本身内容的宽度 | 容纳文本或者其它行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽高 | 本身内容的宽度 |
元素显示模式的转换
特殊情况我们需要元素模式的转换，简单理解：一个元素需要另一个模式的特性。
比如想要增加标签a的触发范围，a本身为行内元素不能设置宽高。但是我们通过模式转换，将a转为行内块元素。这时我们就可以设置a标签的宽高了。
<style>
.sildr-a {
color:grey;
text-decoration: none;/*移除链接怼下划线*/
height: 56px;
width: 100px;
font-size: 13px;
display: block;/*把行内元素a 转为块元素*/
}
</style>
<a href="#" class="sildr-a"> 系统管理</a>
CSS三大特性
层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式。那个样式离结构近就显示哪个样式，不冲突的样式不会层叠并且同时起作用。（CSS代码按由上到下的顺序执行，所以行号越大的代码离结构就越近）
继承性
子标签会继承父标签的某些样式，如文本颜色和字号。
（text-,font-,line-这些元素开头的都可以继承，以及color属性）
行高的继承
<style>
body {
font:12px/1.5 Micorsoft YaHi;
}
div{
font-size:14px;/*这个1.5就是当前元素文字大小font-size的1.5倍*/
}
</style>
<body>
<p>文字的行高</p>
<body>
行高可以跟单位也可以不跟单位。
如果子元素没有设置行高，则会继承父元素行高的1.5倍
优先级
当同一个元素指定多个选择器，就会有优先级的产生
当选择器相同，则执行层叠性；选择器不同，则根据选择器权重大小执行。复合选择器的权重会叠加
盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
不同部分的说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
给盒子指定padding值后，内容和边框就有了距离。同时会撑大盒子；
但是如果盒子本身没有指定宽高属性，padding就不会撑大盒子
水平居中显示
盒子水平居中显示：盒子必须指定宽度，合作左右的外边距都设置为auto
.center{width:100px;margin:0 auto;}
以上方法是让块元素水平居中，行内元素或者行内块元素水平居中给其父元素添加text-aligen:center即可。
外边距合并问题
相邻块元素垂直外边距的合并
当上下相邻的两个块元素（兄弟关系）相遇时。如果上面的元素有下外边距margin-botton,下面的块元素有上边距margin-top.则他们之间的垂直间距不是margin-botton+margin-top的和。而是取两个值之间的最大值。
嵌套块元素坍塌
对于两个嵌套关系（父子关系）的块元素，父元素上有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。（表现为子元素的上外边距值设置不起作用，而父元素的上外边距值变大）
解决方案：
1:为父元素定义上边框 border-top: 1px solid rgb(184, 184, 167)。（撑大盒子1PX）
2:为父元素定义内边距 padding-top: 1px。（撑大盒子1PX）
3:为父元素添加overflow：hidden。（触发bfc ,不会撑大盒子）
清除内外边距
网页元素很多都带有默认的内外边距，而且不同的浏览器默认的也不一致。因此我们布局前，首先要清楚下网页元素的内外边距
*{
padding:0; /*清除内边距*/
margin:0; /*清除外边距*/
}
网页布局准则：多个块元素纵向排列找标准流，多个块元素横向排列找浮动
标准流
1:块元素会独占一行，从上往下顺序排列
2:行内元素会按顺序排列，从左向右顺序排列，碰到父元素边缘则自动换行
可用让盒子上下或者左右排列，垂直的块级盒子显示就用标准流布局
浮动(float:laft)
float属性用于创建浮动框，将其移动到一边，直到左、右边缘触及父元素或另一个浮动框的边缘
可以让块级别元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
作用：让多个块元素一行内排列显示
| div | div | div |
|---|
特点
1:浮动元素会脱离标准流，移动到指定位置并且浮动的盒子不再保留原先的位置
2:浮动的元素会一行内显示并且元素顶部对齐
3:浮动的元素会具有行内块元素的特性（任何元素都可以添加浮动，并且添加后都具有行内块元素的特性）
浮动布局注意点
1：浮动和标准流的父盒子搭配使用
先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2：一个元素浮动了，理论上其余的兄弟元素也要浮动
一个盒子里有多个子盒子，如果其中一个盒子浮动了。那么其他兄弟也应该浮动，以防止引起问题
清除浮动（clear：both）
当父元素的高不固定时，子元素使用浮动时父元素高度会变为0px。为了解决该问题。可以采取清除浮动的方式来解决。（相当于iOS中的动态高度问题）
额外标签法
在子元素后面添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度
.clear {
clear:both;
}
父级添加overflow属性
给父元素添加overflow，将其属性设置为hidden ,auto或scroll。
父级添加after伪元素
.clearfix:after {
display:block;
clear:both;
content:"";
visibility:hidden;
height:0
}
.clearfix{
zoom:1
}
父级添加双伪元素
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfloat{
zoom:1
}
定位（position）
将盒子定在某个位置，所以定位也是摆放盒子，按照定位的方式移动盒子。
定位= 定位模式 + 边偏移
定位最大特点是层叠的概念，就是可以让多个盒子前后堆叠来显示，如果元素需要自由在某个盒子内移动就用定位布局
静态定位：static
静态定位是元素的默认定位方式，无定位的意思
语法：
选择器 { position:static; }
/*静态定位按照标准流特效摆放，它没有边偏移*/
相对定位：relative
元素在移动位置的时候，是相对于它原来的位置来说的。
特点：
1：它相对于自己原来位置来移动的（移动位置的时候参照点是自己原来的位置）
2：原来在标准流的位置继续占有，后面的盒子依然以标准流对待它。（不拖标，继续保留原来位置）
绝对定位：absolute
元素在移动位置的时候，是相对于它的祖先元素来说的。
特点：
1：如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。
2：如果祖先元素有定位（相对，绝对，固定定位），则以最近一级有定位祖先元素为参考点移动位置
3：绝对定位不再占用原来的位置（脱标）
子绝父相
子元素使用决定定位的时候，父元素使用相对定位。通过这种方式将子元素约束在父元素里面
使用例子：广告轮播图
固定定位：fixed
固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素位置不会改变
.dj {
position:fixed;
top:10px;
letf:50px;
}
<div class="dj">
<img src="images/pvp.png" alt="" />
</div>
粘性定位：sticky
粘性定位可以被认为是相对定位和固定定位的混合（跟iOS的tableview头部悬停一样的效果）
特点：
1：以浏览器的可视窗口为参照点移动元素（固定定位特点）
2：粘性定位占有原来的位置（相对定位的特点）
3：必须添加top left right botton其中一个才生效
跟页面滚动搭配使用。兼容性差，IE不支持
定位叠放次序：z-index
定位特殊性：
1： 行内元素添加绝对或固定定位，可以直接设置宽度和高度
2：块级元素添加绝对定位或固定定位。如果不给宽度或者高度，默认大小是内容的大小。
3：脱标的盒子不会触发外边距塌陷
浮动元素，绝对定位（固定定位）元素都不会触发外边距合并的问题
元素的显示和隐藏
display显示隐藏元素
display:none;隐藏对象
display:block;除了转换为块级元素之外，同时还有显示元素的意思
display隐藏元素后，不再占有原来的位置。
visibility显示隐藏元素
visibility:hidden;元素隐藏
visibility:visible;元素可视
visibility隐藏元素后，继续占有原来的位置。
overflow溢出显示隐藏
overflow:hidden;不显示超出对象尺寸的内容，超出部分隐藏掉
overflow:visible;不剪裁内容也不添加滚动条
overflow:scroll;不管内容是否超出，总是显示滚动条
overflow:auto;超出自动显示滚动条，不超出不显示滚动条
295
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
