CSS---核心模块

CSS核心内容

7、盒子模型（content \border）

   两个元素间的距离称为margin；  margin：0 auto；上下边距为0，左右居中

   内外两元素之间的距离称为padding（填充）；

   border：9px solid color；指定了宽度，样式，颜色

 

   a、html中元素都可以看成是一个盒子

   b、盒子模型参照物不一样，则使用的CSS属性也就不一样

   c、如果不希望破坏外观，则尽量使用margin，因为padding会撑大盒子，margin如果过大，盒子内容会被挤到外面去，但是盒子大小不变

 

8、list-style-type： none 用于去除ul中的列表项的圆点

9、浮动

   浮动必要性：因为默认情况下div是纵向排列的，如果想改变方向，则浮动就很重要了

   float: left/right让元素尽量向某个方向浮动，直到碰到他的父元素的边框为止

 

   特别注意：如果一行不够排下所有元素，会自动换行，如果某个div过大，则会卡住别的div

10、清除浮动

    clear：left/right/both  

 

11、定位 

    position属性：static（默认）/relative/absolute/fixed/inherit

 

    ******先实践后回头看理论******

 

    relative：相对原来的位置移动

   元素框偏移某个距离，元素本身形状不变化，它本身的所占空间仍保留

    例如： #s{  position:relative;  left:50px;top:10px;}

 

    absolute:绝对定位，参照物变为离自己最近的非标准流的元素

       元素从文档流完全删除，并相对于其包含块定位，元素原来所占空间会关闭

        元素从原来位置脱离，并让出自己的空间，后面的空间补上

    fixed：其包含块固定为body，视窗本身

    inherit：继承父类属性

小作品