css基础知识

一.块级,行级,行级块标签

行级标签
无论行级标签中的内容有多少都只会占据自身的大小，不会霸道的直接占据一行，但是它也有点小固执，它只想顾好自己的一亩三分地，即使你给它设置更大的宽、高值它都不变。

块级标签
块级标签就像是一个需要人哄着的孩子。不管它有多少内容都会牢牢的占据一行，雷打不动。但是它不倔强，只要你劝他，给他设置宽width、高height值它就会改变。

行级块标签

行级块标签算是三兄弟当中最最听话的了，它既不会霸道的占据一行，又可以给它设置大小。

二.display

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

可选值：

block ：设置标签为块标签

inline ：设置标签为行级标签

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

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

三.div和span

div标签

div是块级标签，可以放置任何标签。

div没有任何附加功能，给了什么属性就能变成什么样。

div主要的作用是被用来布局网页。

span标签

span是行级标签

span 没有任何附加功能，给了什么属性就能变成什么样。

span标签被用来选中文档中的文字

四.盒子模型

一个盒子模型（标签）是由四个部分组成：

内容区（content)

内边距（padding）

边 框（border）

外边距(margin）

 

内容区

内容区指的是盒子中放置内容的区域，也就是标签 中的文本内容，子标 签都是存在于内容区中的。

如果没有为标签设置内边距和边框，则内容区大小 默认和盒子大小是一 致的。

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

width和height属性只适用于块标签(包含行级块)

内边距

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

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

例如： padding-left:10px; padding-right:10px; padding:10px 20px 30px 40px 这样会设置标签的上、右、下、左四个方向的内边距。

外边距

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

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

用法和padding类似，同样也提供了四个方向的 。 margin-top/right/bottom/left。 margin的值可以为负值。 margin的值还可以auto，设置外边距为最大值，当将左右外边距设置为 auto时，浏览器会将左右外边距设置为相等. 垂直设置为auto时值为0，所以水平居中也可以简写为margin:0 auto。

边框

可以在标签周围创建边框，边框是标签可见框的最外部。

可以使用border属性来设置盒子的边框： border:1px red solid; 上边的样式分别指定了边框的宽度、颜色和样式。 也可以使用border-top/left/right/bottom分别指定上右下左四个方向的边框。

边框可以设置样式： dotted （点线） dashed （虚线） solid （实线） double （双线） groove （槽线） border-radius设置四个角为圆角边框 border-top-left-radius设置左上为圆角边框。

五.清除浏览器默认模式

*{
	margin：0px；
	padding：0px；
}

六.浮动

所谓浮动指的是使标签脱离原来的文档流，在父标签中浮动起来。 浮动使用float属性。 可选值： none ：不浮动 left ：向左浮动 right ：向右浮动.

当一个标签浮动以后，其下方的标签会上移。 浮动会使标签完全脱离文档流，也就是不再在文档中在占用位置标签浮 动以后即完全脱离文档流，这时不会再影响父标签的高度。也就是浮动 标签不会撑开父标签.

清除浮动

clear属性可以用于清除标签周围的浮动对标签的影响,其他标签的位置不 发生变化。 可选值： left ： 忽略左侧浮动 right ：忽略右侧浮动 both ：忽略全部浮.

七.定位

1.相对定位

相对定位是一个非常容易掌握的概念. 相对于它 的起点进行移动，移动后原来的位置还被占用。 可以通过position:relative; 开启相对定位， left right top bottom四个属性来设置标签的偏移量。

2.绝对定位

绝对定位 绝对定位是不占空间的，运用了 绝对定位的标签会脱离原来的文档 流，浮动起来，因此视觉上会其他 的标签重叠。可以通过position: absolute; 开启 绝对定位， left right top bottom四个属性来 设置标签的偏移量.