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)

内容区:标签中的文本内容,子标签

可以通过width和height来设置内容区的大小(块标签)

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

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

可以通过 padding 属性来设置内边距

padding-left:
padding-right:
padding-top:
padding-bottom:
padding:上 右 下 左

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

可以通过 border 属性来设置边框

border:1px red solid;
      宽度 颜色 样式

边框样式:

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

border-radius 设置圆角边框

例如:border-top-left-radius 设置左上圆角边框

外边距:标签边框与周围标签相距的空间(不会影响盒子的整体大小,但是会影响盒子的位置,会影响盒子的实际控制范围)

可以通过 margin 属性来设置外边距

margin-top
margin-bottom
margin-left
margin-right

margin还可以设置为负值,设置auto时,设置外边距为最大值,左右外边距设置为auto时,左右外边距设置为相同.

水平居中可以简写为 margin:0 auto

清除游览器的默认样式

*{
margin:0;
padding:0;
}

文档流

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

浮动

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

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

none:不浮动

left: 向左浮动

right: 向右浮动

当一个块级标签浮动以后,宽度会默认是内容的宽度,所有都会为其指定一个宽度

当一个标签浮动以后,其下方的标签会上移.浮动标签不会撑开父标签.

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

清除浮动

用 clear 属性来设置清除浮动

left :忽略左侧浮动

right :忽略右侧浮动

both :忽略全部浮动