初学CSS-浮动、盒子模型、伪类、伪元素、定位———Day4学习笔记



1.浮动
    float可以控制块级元素浮动
 (1)#d1
    {
      float:left;/*左浮动*/
     }
     #d2
    {
      float:left;
     }
     两个块级元素可以改变默认占一行情况，并排在一行。
 (2)上下块的浮动会影响块的布局，可以用
     clear：left;/*清除左浮动的影响。*/
2.盒子模型*****
  块内间距：
       padding：1px；上下左右撑开1px
     写四个值得话是按上、右、下、左的顺序设置。

     即： padding：10px 15px 20px 25px
    外间距（块之间）：
     用margin设置
    行内元素：
     padding和margin都起作用。
3.伪类
  (1)p:first-child/*父标签的第一个孩子且是p元素*/
      p:last-child/*父标签的第一个孩子且是p元素*/
      p:first-of-type/*父标签的第一个p标签*/
      p:last-of-type/*父标签的最后一个p标签*/
      p:nth-child(2)/*父标签的第二个孩子且是p元素*/
      p:nth-last-child(2)/*父标签的倒数第二个孩子且是p元素*/
      p:nth-of-type(2)/*父标签的第二个p标签*/
      p:nth-last-of-type(2)/*父标签的倒数第二个p标签*/
  (2)超链接类
      a:link{} a:visited{} a:hover{} a:active{}

      遵循love hate 原则（l->link;v->visited;h->hover;a->active)
  (3)所有禁用
    所有禁用标签  :disabled{}
    所有可用（input）标签 （input）:enable{}
    所有被选中的标签 :checked{}
    所有获取标签 :foucus {}                        
    所有只读标签 :read-only{}
    所有的可读可写:read-write{}                      
4.伪元素
    用两个冒号表示
    p::before{}/*之前设置内容*/
    p::after{} /*之后设置内容*/  
    .c1::first-letter/*获取第一个字符*/
    ::first-line/*获取第一行*/
    ::selection/*改变鼠标选中时效果*/            
5.CSS定位
  (1)绝对定位（absolute）
     脱离文档流，不会单独占满一行，方位只受到top、left

、buttom、right的影响;
  一个块的top、left、buttom、right相对于什么？
     如果父元素做了定位，相对于最近的一个父元素。父元素

无定位，相对于body。
  (2)相对定位（relative）
     没有脱离文档流，会单独占满一行。
     top、left、buttom、right相对于最近的一个父元素
  (3)固定定位（fixed）
     脱离文档流，不会单独占满一行
     top、left、buttom、righ始终相对于body           

  (4)默认定位（static）
     没有脱离文档流，会单独占满一行。
     top、left、buttom、right不起作用。
  总：top、left、buttom、right只有在设置了定位（绝对、相对、固定）的情况才有用。