CSS{块级,行级,行级块标签 Display 盒子模型 div和span 浮动 文档流}

块级,行级,行级块:

    块级标签：无论内容多少都会独自占据一行，可以设置宽高。

    例如<p>、<h1>、<ul>、<ol>、<hr/>等。

    行级标签：只占自身大小的标签，不会占一行。

    例如<font>、<b>、<i>、<a>等。

    行级块标签（可以设置宽高，但不独占一行）

    例如 <input/> <img>等。

Display ：可以通过display样式可以修改标签的类型。

    可选值：

     block ：设置标签为块标签。

     inline ：设置标签为行级标签。

     inline-block ：设置标签为行级块标签。

     none ：隐藏标签（标签将在页面中完全消失）。

div和span ：

div标签： 块级标签，可以放置任何标签，无附加功能，设置什么属性就能变成什么样子，主要用来布局网页。

span标签： 行级标签，无附加功能，设置什么属性就能变成什么样子，用来选中文档中的文字。

 盒子模型 （box-model)

        CSS处理网页时，它认为每个标签都包含在一 个不可见的盒子里,如果把所有标签都想象成盒子，那么我们对网页的布局就相当于摆放盒子。

  一个盒子我们会分成以下几个部分：

–内容区(content)                                   

–内边距(padding) 

–边框(border)   –外边距(margin)     

         

盒子 模型-内容区：盒子中放置内容的区域

通过width和height两个属性可以设置内容区的大小（不是盒子的大小）

内边距：标签内容区与边框以内的空间。

● 内边距会影响整个盒子的大小。

● 使用padding 属性来设置标签的内边距。

        padding-left 
        padding-right 
        padding-top
        padding-bottom
        padding:上右下左（只输入padding时）

边框：标签可见框的最外部

        border:1px red solid

                      宽度 颜色 样式     

边框样式：

dotted点线  dashed虚线  solid实线  double双线  groove槽线

border-radius 设置圆角边框

eg.border-radius设置四个角为圆角边框

border-top-left-radius设置左上为圆角边框

外边距:

● 外边距是标签边框与周围标签相距的空间。

     

使用margin属性可以设置外边距。

margin-top

margin-right

margin-bottom

margin-left

margin还可以设置为负值,设置auto时,设置外边距为最大值,左右外边距设置为auto时,左右外边距设置为相同,水平居中可以简写为：margin: 0 auto

清除浏览器的默认样式:

*{
margin:0;
padding:0;
}

文档流:

指文档中的标签在排列时所占用的位置.将窗体自上而下分成一行行,并在每行中按从左至右的顺序排放标签.

浮动:

动指的是使标签脱离原来的文档流，在父标签中浮动起来。

可以使用 float 属性来设置浮动

none ：不浮动

left ：向左浮动

right ：向右浮动

当一个块级标签浮动以后，宽度会默认是内容的宽度，所以当漂浮一个块级标签时我们都会为其指定一个宽度

当一个标签浮动以后，其下方的标签会上移。

可以通过<div style="clear:left;"></div>来撑开父标签

清除浮动

  clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不

发生变化。

可选值：

left ： 忽略左侧浮动

right ：忽略右侧浮动

both ：忽略全部浮动