CSS基础知识(4)

 页面上所有元素都可以显示为框：

 块级元素显示为一块内容，即“块框” 
内联元素/行内元素：内容显示在行中  

display:none（元素没有框了）/block（元素变成块框，实现行内元素变成块级元素，有宽和高的属性，独占一行）/inline（实现块级元素变成内联元素，一行可以有多个，无宽高）/inline-block（可以像块级元素一样属性，也能实现一行放多个该元素，一行可以有多个，有宽高）;  

visibility：规定元素是否可见，属性值有visible（可见），hidden（不可见），collapse（用在表格，可删除一行或一列，且不影响表格布局） 
visibility和display属性都可以隐藏元素，但是display隐藏元素是不占空间的，但是visibility仍然占空间的。  

opacity：设置元素的不透明级别，取值是从0.0~1.0,0是完全透明，1是完全不透明.元素一旦半透明里面的内容也会跟着半透明。opacity:0.8=透明度80%  

vertical-align：设置单元格的垂直对齐方式，只能用在td属性，不能用在单元格里面的元素。实现的是微调，不能精确定位。对于行内块级元素，如<img>可设置垂直对齐方式,在vertical-align中设置为middle后，影响到的是他左右的元素会middle，而不是他本身middle。如果直接行内元素上使用vertical-align，是没有宽和高，无法实现想要的效果，需要设置display:block就可以了。 
vertical-align：top 
vertical-align：bottom 
vertical-align：middle 
vertical-align：baseline,相对于基线对齐，会比bottom还要低  

光标：默认情况下是根据用户当前的操作发生改变。鼠标悬停在一个链接上时，光标从指针变成手状，悬停在文本区域是会显示I形状，鼠标悬停在一个按钮上时，光标会显示为箭头。可使用cursor属性制定属性悬停在的类型。 
cursor：default（默认，箭头）/pointer（手形指针）/crosshair（十字形）/text（文本I）/wait（转圈图标）/help(问号)等。  

列表样式：针对<ul>和<ol>的 
list-style-type:控制列表项前面标志的样式，无序值有none，disc,circle,square，有序列表值有none，decimal（数字，默认的），lower-roman（小写罗马数字），upper-roman（大写罗马数字）等 
list-style-image:使用图像来代替默认的项目列表标记，取值为url() 
list-style-position:inside/outside（默认在外），定义项目列表标记的位置 
简写方式：list-style:type url(图像url) position;，一般情况下直接将list-style属性设置为none，然后用background来实现列表项目符合，原因是background更好控制，且可以使用拼在一起的图片，list-style则不行  

项目列表做导航栏的时候，去掉列表标志，仍然会有个距离，设置margin:0;padding:0;就可以了  

定位属性：position：static（默认）/relative（相对定位）/absolute（绝对定位）/fixed（绝对定位） 
偏移属性：top、bottom、left、right，定义元素框的偏移位置 
z-index:设置元素的堆叠顺序 
float/clear：浮动定位属性  

相对定位：元素会保持默认情况下的形状，元素会把占据的空间仍保留，元素框会相对于它原来的位置偏移某个距离。 
position:relative; 
left:20px;表示距离left有20像素 
top:20px;表示距离top有20像素  

绝对定位：将元素的内容从普通流中完全移除，不占据空间，里面的文字会盖住其他的文字。相对于最近的已定位的祖先元素来定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，如body元素。  

固定定位：将元素的内容固定在页面的某个位置，,永远相对于body定位，元素从普通流中完全移除，不占用页面空间，当用户向下滚动页面时元素框并不随着移动。position:fixed.  

堆叠顺序：z-index值越大，元素就靠上，值越小元素就靠下。z-index为负值，表示在所有内容的底下，包括父级元素底下。z-index失效可能有下原因：父级元素需要定位为absolute或者relative，两个调整z-index的元素也必须定位为absolute或者relative。  

定位： 
    position 改变元素默认的标准流的定位方式 
    1、需要将元素进行偏移，并且不影响周边元素 
        position：relative   left/right 
                             top/right 
    2、如果需要制作重叠的效果 
         position：absolute 
         父级元素要有定位属性（relative/absolute），然后用left、right等设置偏移 
    3、需要手动调整元素的上下层叠顺序 
        position：absolute/relative 
        用z-index属性设置 
        要求: 
             1、父级元素要定位 
             2、所有用z-index调整顺序的元素要定位 
position方式：static、relative、absolute、fixed 
              static默认 
              relative相对（相对父级元素，元素依然是标准流，元素依然占页面空间，框的位置保持不变） 
              absolute绝对（元素会跳出标准流并不再占页面空间），如果位置偏移，会相对于最近的已定位的祖先元素进行偏移，如果没有已定位的祖先元素，则相对body进行偏移 
              fixed 固定，元素会跳出标准流并不再占页面空间，元素相对于body进行定位，不会随着页面滚动而滚动，一般用于制作页面中固定位置的元素 
            z-index调整元素的上下层迭顺序。可以为正值、负值、零。值越大越靠上，z-index为负值时，会位于所有元素的下方。z-index如果要生效，要求： 
             1、父级元素已定位 
             2、所有需要调整层叠顺序的元素已定位