CSS学习

一、html中的容器级标签和文本级标签,
  1.容器级标签可以嵌套其它所有的标签
     常见的容器级标签:div h ul ol dl li dt dd
  2.文本级标签:只能存放文本、表单和图片、超链接
    常见的文本级标签span p buis strong em ins del
二、CSS中的块级元素和行内元素
  块级标签:在html中 ```

    1. ``` 等就是块级标签 块级标签的三个特点: 1.一个块级标签元素独占一行 2.元素的高度 宽度 行高以及顶部和底部边距都可以设置 3.元素宽度在不设置的情况下,是它本身父容器的100%(和父元素宽度一致),除非设定宽度 行内元素:在html中```
      Snip20170722_8.png
      CSS学习_第2张图片
      Snip20170722_1.png
      CSS学习_第3张图片
      Snip20170722_1.png
      CSS学习_第4张图片
      Snip20170722_4.png
      CSS学习_第5张图片
      Snip20170722_3.png
      CSS学习_第6张图片
      Snip20170722_6.png
      CSS学习_第7张图片
      Snip20170722_7.png
      四、标准文档流与浮动
          标准文档流就是一个默认的状态,标准文档流中,标签分为两种:块级元素、行内元素。
          块级元素:一定是霸占一行,能设置宽高,不设置宽度默认占满父亲。div p h li
          行内元素:和其他行内元素并排,不能设置宽高,默认宽度就是文字宽度。span、a、b 、i、u
          标准文档流做不出网页,因为能并排的不能设置宽高
           标准文档流的三个特点:
             1.空白折叠现象: 比如,如果我们想让a标签之间没有空隙,必须紧密连接。
             国内新闻国际新闻体育新闻娱乐新闻
             2.高低不齐,底边对齐
             3.自动换行,一行写不满,换行写
          
          CSS中有三种方式是一个元素脱离标准文档流:浮动、绝对定位、固定定位。
          浮动(float)是CSS里面布局用的最多的属性。
          浮动的性质:脱标 贴边 字围 收缩
            1.浮动的元素脱离标准文档流
                一旦一个元素浮动了,那么,将能够并排和设置宽高,不管这个元素是个div还是span
            2.浮动的元素相互贴靠
      
      CSS学习_第8张图片
      Snip20170722_9.png
          3.浮动的元素会有字体围绕效果
      
      CSS学习_第9张图片
      Snip20170722_10.png
         4.一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽度(这点非常像行内元素)
      关于浮动我们要强调一点,在初期一定要遵循一个原则:永远不是一个单独的东西单独浮动,要浮动大家一起浮动。
        浮动带来的问题:
        当父容器没有设置高度,里面的盒子没有设置浮动的情况下会将父容器的高度撑开.一旦父容器中的盒子设置浮动,脱离标准文档流,父容器立马没有高度,下面的盒子会跑到浮动的盒子下面出现这种情况,我们需要清除浮动(是指清除浮动带来的负面效果).
      
      CSS学习_第10张图片
      Snip20170722_12.png
      清除浮动的方式
        1.给浮动元素的祖先元素增加高度
      浮动的元素,只能被有高度的盒子关住。也就是如果盒子内部有浮动,这个盒子有高度就不会互相影响。但是,工作上,我们绝对不会给所有的盒子加高度,这是因为麻烦,并且不能适应页面的快速变化。
      
      CSS学习_第11张图片
      Snip20170722_13.png
      CSS学习_第12张图片
      Snip20170722_14.png
      2.clear:both
      clear:both的意思是清除左右浮动。表示自己内部的元素不受其他盒子的影响。
      这个方法带来一个很大的问题,就是margin失效了。
      
      CSS学习_第13张图片
      Snip20170722_15.png
      3.隔墙法:在两部分浮动元素中间,建一个墙,隔开两部分浮动,让后面浮动的元素不去追前面浮动元素。墙用自己的身体做了间隙
      我们发现隔墙法好用,但是第一个div还是没有高度,如果我们现在想让第一个div,自动的根据自己的儿子撑出高度,我们就要使用内墙法
      
      CSS学习_第14张图片
      Snip20170722_17.png
        内墙法的优点是,不仅仅能够让后部分的p不去追前部分的p,并且能够把第一个div撑出高度。这样,这个div的背景、边框就能够根据p的高度来撑开了。
      
      CSS学习_第15张图片
      Snip20170722_18.png
        4.overflow:hidden
      这个属性的本意,就是将多有溢出盒子的内容,隐藏掉。但是,我们发现这个东西能够用于浮动的清除。这个是浏览器的小偏方。并且,overflow:hidden能够让margin生效。
      一个父亲不能被自己浮动的儿子撑出高度,但是,只要给父亲加上
      overflow:hidden就可以了,这是一个偏方。
      
      CSS学习_第16张图片
      Snip20170722_19.png
      5.通过伪元素
             .clearfix:after{
                      content:"",
                      height:0;
                      line-height:0;
                      visibily:hidden;
                      clear:both;
                      display:block;
                  }
                  .clearfix{
                      zoom:1; //为了兼容IE浏览器
                  }
      
      五、定位:
              1.静态定位(static):就是按照标准流的方式显示
              2.相对定位(relative)就是微调元素位置的。让元素相对自己原来的位置,进行位置调整。相对定位不脱离标准文档流。
            相对定位一般有两个作用: 
                  微调元素
                  做绝对定位的参考,子绝父相
      
      CSS学习_第17张图片
      Snip20170722_20.png
           3.绝对定位(absolute):
              绝对定位的盒子是脱离标准文档流的,所以,所有的标准文档流的性质,绝对定位之后都不遵守了。绝对定位之后,标签就不区分所谓的行内元素、块级元素。
          绝对定位的参考点:
          绝对定位的参考点,如果用top描述,那么定位参考点就是页面的左上角,而不是浏览器的左上角:
      
      CSS学习_第18张图片
      Snip20170722_22.png
      如果用bottom描述,那么就是浏览器首屏窗口尺寸,对应的页面的左下角。
      
      CSS学习_第19张图片
      Snip20170722_23.png
      一个绝对定位的元素,如果父辈元素中出现了定位的元素,那么以这个父辈元素为参考点,绝对定位的儿子,无视参考的那个盒子的padding
      
      绝对定位的盒子居中:
      
      CSS学习_第20张图片
      Snip20170722_24.png
        4.固定定位(fixed):就是相对于浏览器窗口定位。页面如何滚动,这个盒子显示位置不变。固定定位脱标。IE6不兼容
      
      六、z-index  
      z-index表示谁压着谁。数值大的压盖数值小的。
      只有定位的元素,才能有z-index值。
      如果大家都没有z-index值,或z-index值一样,那么谁写在HTML后面,谁在上面能压住别人。定位的元素永远压着没有定位的元素。
      父亲怂了,儿子再牛逼也没用。
      
      七、CSS中的隐藏
          overflow:hidden 将超出的部分隐藏
          display:none 元素隐藏以后不占原来的位置
          visibility:hidden 元素隐藏以后占原来的位置
      

      你可能感兴趣的:(CSS学习)