CSS高阶一点的知识

css的盒模型

  • HTML对元素进行分类:块级元素、内联元素(行内元素)、内联状块级元素

块级元素:

...

      、 、

      内联元素:
      • 块级元素的特点

      (1)每一个块级元素都是新的一行,其后的元素也要重新另起一行
      (2)元素的高度、宽度、行高、以及顶和底边距都可以设置
      (3)元素在高度不设置的情况下。是他本身元素的父容器的100%

      • 内联元素的特点

      (1)和其他的元素在一行上面
      (2)元素的高度、宽度以及 顶部和底部边距不可设置
      (3)元素的宽度就是他包含的文字或是图片的宽度,不可以更改

      • 内联块级元素的特点

      (1)和其他元素在一行
      (2)元素的高度、宽度、行高、以及顶和底边距都可以设置

      • 盒模型中的边框
      border:2px solid red;
      //相当于
      div{ border-width:2px; border-style:solid; border-color:red;}
      
      • 盒模型的宽度和高度之间的关系


        盒模型和宽度高度的关系

      css的基本布局模型

      • 分类:流动模型(Flow)、浮动模型(Float)、层模型(Layer)
      • 流动模型

      (1)为默认的网页布局模式
      (2)特点:
      a、块级元素都会值所处的包含元素里面自上向下的进行延展分布、实际上块级元素都会以行的模式占据该位置
      b、内联元素的分布一般是从左到右的水平分布显示

      • 浮动模型
        2个块级元素可以并排显示。首先对样式进行设置、然后将两个div进行并行的安放
      div{
                          width: 200px;
                          height: 200px;
                          border:2px red solid;
                          float: left;
                  }
                  
      浮动模型效果图
      • 层模型
        层模型有三种 :
        (1)绝对定位(position:absolute)
        (2)相对定位(position:realtive)
        (3)固定定位(position:fixed)
        绝对定位:
        针对于父类进行绝对定位,如果没有指定父类的话,就针对于body进行绝对定位
      div{
             width: 200px;
              height: 200px;
              border:2px red solid;
              position: absolute;
              left: 100px;
              top:50px;
           }
      

      绝对定位的效果图

      相对定位:

      div{
             width: 200px;
              height: 200px;
              border:2px red solid;
              position: position;
              left: 100px;
              top:50px;
           }
      

      相对定位的效果图

      固定定位:
      fixed:表示固定的定位,于absolute定位很相似,但是它的相对移动的坐标是视图本本身,也就是说该布局不会随着浏览窗口的滚动条滚动而发生变化

      你可能感兴趣的:(CSS高阶一点的知识)