css注意点

占据内容：opacity: 0; 透明度为0 
不占据内容：display: none;隐藏不占位
（display: block;显示)
占据内容:visibility: hidden;(隐藏占位)
em 是根据祖先元素的 font-size
rem 根据html这个根元素的font-size的大小
colspan="跨列（并列行）" rowspan="跨行（并列列）"

伪类

a:link {color:#FF0000;} 未访问的链接 link\
a:visited {color:#00FF00;} 已访问的链接 visited\
a:hover {color:#FF00FF;} 鼠标在链接上（鼠标悬停）hover\
a:active {color:#0000FF;} 已选中的链接（激活）active

列表

ul li : 无序列表
ol li : 有序列表
dl dt（放图片） dd（放内容）: 自定义列表

<//div> 和 <//span> 元素

html元素不同:
    块级元素: div  p  h1 - h6  宽度占满父元素盒子的100%  display: block;
    内联元素: span  strong  i em  宽度只占满自己元素盒子的内容  
    宽高设置无用  display: inline; 
    元素之间的间距 怎么解决  float
    (清除浮动：父元素加
    .clearfix{
             content: "";
             display: table;
             clear: both;
           })
    内联块级元素:   display: inline-block;  
    空元素:<br/> <hr/> <img/> <input/> <meta>

盒子模型

  padding 不能负值  margin 能负值
  负值假设会把自己的宽度和高度变小，实际上内容不变
  
  标准盒子模型 width = width + padding * 2 + border * 2 + margin * 2 
  默认  box-sizing: content-box;
   
  怪异盒子模型 width = width(border * 2 + padding * 2 + content的宽度) + margin * 2   
  在使用paddine的时候  盒子变形 box-sizing: border-box;

outline

outline（轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

outline简写属性在一个声明中设置所有的轮廓属性。

可以设置的属性分别是（按顺序）：outline-color, outline-style, outline-width

如果不设置其中的某个值，也不会出问题，比如 outline:solid #ff0000; 也是允许的。
  p {
	border:1px solid red;
	outline:green dotted 10px;
    边框线：颜色 形状样式 宽
    }

定位position

static 默认无定位

position: relative;相对定位脱离了普通文档流成为定位文档流占位相对于自身位移

position: fixed;固定定位，脱离了普通文档流，成为定位文档流，相对于窗口进行位移

position: absolute;绝对定位脱离了普通文档流成为定位文档流相对于文档进行位移

position: sticky;粘性定位当div没有滚动出窗口的时候 relative 一样脱离了普通文档流成为定位文档流占位

压盖：绝对定位的祖先元素拥有相对定位的时候那么就会相对于祖先元素进行位移
子绝父相（儿子设置绝对定位，父亲设置相对定位）

z-index属性

1、默认压盖顺序
①有定位的元素压盖没有定位的元素。
②都有定位的元素，html结构在后面的压盖在前面的。
2、自定义压盖顺序
自定义压盖顺序：需要使用一个属性z-index
①z-index属性值是数字，没有单位。
②只有有定位的元素可以使用z-index。即使是浮动也不能使用z-index属性。
③z-index属性值越大压盖顺序就越靠上。
④如果z-index值相同，html结果在后面的压盖住在前面的。
⑤父子都有z-index，父亲z-index数值小时，儿子数值再大没用。

web-4 html+css总结