CSS进阶

CSS样式进阶

0.显示(display)

/*
首先理解什么是块级元素和行内元素
块级元素：块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）
行内元素：内联元素不从新行开始，仅占用所需的宽度。
*/
/*

*/
display: ;

）

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 ），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 ），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似
table-header-group	此元素会作为一个或多个行的分组来显示（类似
table-footer-group	此元素会作为一个或多个行的分组来显示（类似
table-row	此元素会作为一个表格行显示（类似
table-column-group	此元素会作为一个或多个列的分组来显示（类似
table-column	此元素会作为一个单元格列显示（类似
table-cell	此元素会作为一个表格单元格显示（类似	和	）
table-caption	此元素会作为一个表格标题显示（类似
inherit	规定应该从父元素继承 display 属性的值。

）。）。）。）。）。）

对比displa:none和visibility:hidden

display: none;/*该元素将被隐藏，并且页面将显示为好像该元素不在其中*/
visibility: hidden;/*元素将被隐藏，但仍会影响布局*/

display: inline-block
与 display: inline 相比，主要区别在于 
1.display: inline-block 允许在元素上设置宽度和高度。
2.同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。

与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。

1.定位(position)

/*
position 属性规定应用于元素的定位方法的类型。
有五个不同的位置值：
    static:
        HTML 元素默认情况下的定位方式为 static（静态）。
        静态定位的元素不受 top、bottom、left 和 right 属性的影响。
        position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位
    relative:
        元素相对于其正常位置进行定位。
        设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。
	    不会对其余内容进行调整来适应元素留下的任何空间。
    fixed:
        元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 
        top、right、bottom 和 left 属性用于定位此元素。
        固定定位的元素不会在页面中通常应放置的位置上留出空隙
    absolute:
        元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
        然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
        注意：“被定位的”元素是其位置除 static 以外的任何元素。
    sticky:
		素根据用户的滚动位置进行定位。
         粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为		 止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）
*/

属性	描述
bottom	设置定位框的底部外边距边缘。
clip	剪裁绝对定位的元素。
left	设置定位框的左侧外边距边缘。
position	规定元素的定位类型。
right	设置定位框的右侧外边距边缘。
top	设置定位框的顶部外边距边缘。
z-index	设置元素的堆叠顺序。

clip: ;
/*
clip 属性剪裁绝对定位元素。
*/

值	描述
shape	设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)
auto	默认值。不应用任何剪裁。
inherit	规定应该从父元素继承 clip 属性的值。

/*
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。
元素可以设置正或负的堆叠顺序
具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。
注意：如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部
*/
z-index:10;/*值为数字*/

2.溢出(overflow)

/*
overflow 属性指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：
    visible - 默认。溢出没有被剪裁。内容在元素框外渲染
    hidden - 溢出被剪裁，其余内容将不可见
    scroll - 溢出被剪裁，同时添加滚动条以查看其余内容
    auto - 与 scroll 类似，但仅在必要时添加滚动条
 */

1.Overflow 属性

属性	描述
overflow	规定如果内容溢出元素框会发生什么情况。
overflow-x	规定在元素的内容区域溢出时如何处理内容的左/右边缘。
overflow-y	指定在元素的内容区域溢出时如何处理内容的上/下边缘。

2.overflow:hidden的用法

/*
overflow:hidden  溢出隐藏
给一个元素中设置overflow:hidden，那么该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。

 overflow:hidden  清除浮动
一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应。
为了让兼容性更好的话，如果需要使用overflow:hidden来清除浮动，那么最好加上zoom:1;

overflow:hidden  解决外边距塌陷
父级元素内部有子元素，如果给子元素添加margin-top样式，那么父级元素也会跟着下来，造成外边距塌陷，
给父级元素添加overflow:hidden，就可以解决这个问题了
*/

3.浮动(float)和清除(clear)

浮动和清除
CSS float 属性规定元素如何浮动。
CSS clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。
/*
float 属性用于定位和格式化内容，例如让图像向左浮动到容器中的文本那里。
float 属性可以设置以下值之一：	
    left - 元素浮动到其容器的左侧
    right - 元素浮动在其容器的右侧
    none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
    inherit - 元素继承其父级的 float 值
*/

/*
clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一：
    none - 允许两侧都有浮动元素。默认值
    left - 左侧不允许浮动元素
    right- 右侧不允许浮动元素
    both - 左侧或右侧均不允许浮动元素
    inherit - 元素继承其父级的 clear 值
使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时，应该对清除与浮动进行匹配：如果某个元素浮动到左侧，则应清除左侧。您的浮动元素会继续浮动，但是被清除的元素将显示在其下方
*/

4.对齐方式

/*
居中对齐元素
要使块元素（例如 <div> ）水平居中，请使用 margin: auto;。
设置元素的宽度将防止其延伸到容器的边缘。
然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配
注意：如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。

居中对齐文本
	如果