元素显示模式就是元素（标签）以什么方式进行显示，比如
自己占一行，比如一行可以放多个HTML元素一般分为两类：块元素，行内元素
元素独占一行，一行只能放一个的元素（标签）叫块元素
常见块元素有:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>为常见块元素特点
独占一行高度，宽度，外边距及内边距都可以控制宽度是默认容器（父级宽度）的100%是一个容器及盒子，里面可以放行内或块级元素 文字类的元素内不能放其它块级元素元素不独占一行，一行可以放多个元素（标签）的HTML标签叫行内元素
常见行内元素有:<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>为常见行内元素特点
相邻行内元素在一行上，一行可以显示多个高度，宽度，设置是无效的宽度是它本身内容的宽度行内元素只能容纳稳步或者其它行内元素 链接内不能再放链接 特殊情况行内元素a里面可以放块级元素，但是需要给a转换一下为块级模式更安全同时具有块元素和行内元素特点的叫行内块元素
常见行内块元素有:<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代码按由上到下的顺序执行，所以行号越大的代码离结构就越近）
子标签会继承父标签的某些样式，如文本颜色和字号。 （text-,font-,line-这些元素开头的都可以继承，以及color属性）
行高可以跟单位也可以不跟单位。 如果子元素没有设置行高，则会继承父元素行高的1.5倍
当同一个元素指定多个选择器，就会有优先级的产生
当选择器相同，则执行层叠性；选择器不同，则根据选择器权重大小执行。复合选择器的权重会叠加
所有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属性用于创建浮动框，将其移动到一边，直到左、右边缘触及父元素或另一个浮动框的边缘
可以让块级别元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
作用：让多个块元素一行内排列显示
divdivdiv1:浮动元素会脱离标准流，移动到指定位置并且浮动的盒子不再保留原先的位置
2:浮动的元素会一行内显示并且元素顶部对齐
3:浮动的元素会具有行内块元素的特性（任何元素都可以添加浮动，并且添加后都具有行内块元素的特性）
1：浮动和标准流的父盒子搭配使用 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
2：一个元素浮动了，理论上其余的兄弟元素也要浮动 一个盒子里有多个子盒子，如果其中一个盒子浮动了。那么其他兄弟也应该浮动，以防止引起问题
当父元素的高不固定时，子元素使用浮动时父元素高度会变为0px。为了解决该问题。可以采取清除浮动的方式来解决。（相当于iOS中的动态高度问题）
在子元素后面添加一个空div，利用css提供的clear:both清除浮动，让父级div能自动获取到高度
.clear { clear:both; }给父元素添加overflow，将其属性设置为hidden ,auto或scroll。
将盒子定在某个位置，所以定位也是摆放盒子，按照定位的方式移动盒子。 定位= 定位模式 + 边偏移
定位最大特点是层叠的概念，就是可以让多个盒子前后堆叠来显示，如果元素需要自由在某个盒子内移动就用定位布局
静态定位是元素的默认定位方式，无定位的意思 语法：
选择器 { position:static; } /*静态定位按照标准流特效摆放，它没有边偏移*/元素在移动位置的时候，是相对于它原来的位置来说的。
特点： 1：它相对于自己原来位置来移动的（移动位置的时候参照点是自己原来的位置）
2：原来在标准流的位置继续占有，后面的盒子依然以标准流对待它。（不拖标，继续保留原来位置）
元素在移动位置的时候，是相对于它的祖先元素来说的。
特点： 1：如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。 2：如果祖先元素有定位（相对，绝对，固定定位），则以最近一级有定位祖先元素为参考点移动位置 3：绝对定位不再占用原来的位置（脱标）
子元素使用决定定位的时候，父元素使用相对定位。通过这种方式将子元素约束在父元素里面
使用例子：广告轮播图
固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素位置不会改变
.dj { position:fixed; top:10px; letf:50px; } <div class="dj"> <img src="images/pvp.png" alt="" /> </div>粘性定位可以被认为是相对定位和固定定位的混合（跟iOS的tableview头部悬停一样的效果）
特点： 1：以浏览器的可视窗口为参照点移动元素（固定定位特点） 2：粘性定位占有原来的位置（相对定位的特点） 3：必须添加top left right botton其中一个才生效
跟页面滚动搭配使用。兼容性差，IE不支持
浮动元素，绝对定位（固定定位）元素都不会触发外边距合并的问题
display隐藏元素后，不再占有原来的位置。
visibility隐藏元素后，继续占有原来的位置。
以上内容均整理自视频
