您当前的位置: 站长圈 > 网页前端

阿Q老师CSS基础课程第三课 可视化格式模型

来源:站长圈|0 作者:adminzzq 点击: 0
可视化格式模型(配套视频教程见路航网站视频栏目)

第二课补充内容:
 层叠:样式表不同位置定义的属性,包括继承的属性,会根据优先级,重叠对元素取作用。同一个属性,优先级低的不取作用。
 继承:有些属性,下级元素会自动继承上级定义的属性,比如字体大小,颜色等(会影响到页面布局的属性不会继承。如width,height等)

第三课:可视化格式模型
 块级元素:默认占据一整行,具有宽,高的属性。
   常用的块级标签有:div,p,h1-h6,form,ul,ol,dl,li,dt,dd

 行内元素:占据的一行里面一部分,没有宽高的属性。
   常用的行内元素标签有:span,a,input,b,strong,u,i,img.
 
 块级元素和行内元素可以通过display:相互转换
 
   div{display:inline;} 将div转换为行内元素,常用
   span{display:block;}将span转换为块级元素,常用
   div,span{display:inline-block;} 将span元素用行内元素来传递,用块级元素来呈现。常用。ie6中块级元素转换为inline-block有个bug,可以消除掉。讲实例的时候会讲到怎么消除ie6的这个bug.
   div{display:none;} 隐藏元素,不占据页面的空间。常用。

 一,盒模型:

  盒模型是CSS的基石。

  1,标准盒模型:width,height,padding,border,margin
      padding-top,padding-right,padding-bottom,padding-left;
      margin-top,margin-right,margin-bottom,margin-left;
      border-top:
    2,ie的盒模型:
      ie6在诡异模式下,100px;(记住:永远要浏览器用标准模式解析页面即可。知道有这回事就行,不需要下功夫研究。几乎用不上)

    3,空白边叠加的规则:水平相加,垂直取大。自己和自己的上下空白边如果相遇也会叠加

    注意:空白边叠加只发生在普通流中。行内元素,浮动元素,绝对定位的元素,空白边是不会叠加的。


后续见路航培训网站。。。。。。