CSS【复习2】

写在前面 主要包含CSS的使用部分

web中文字的高度默认是16，就是font-size的默认值
单行文本高度是 line-height

em
1 em = 1 * font-size 即，1em==一个文本的宽度，所以在段落开头可以用2em来表示当前文本的两个文本宽度，作为自然段开头。

伪累选择器：比如 “当鼠标移动到标签上时修改样式，移出标签时恢复样式”，这是伪类选择器之一。
eg： 标签名:hover{…} 如下：

行级元素(inline 内联元素)：span strong em a del
特点：内容决定元素所占位置，不可以通过CSS改变宽高

块级元素(block)：div p ul li ol form address
特点：独占一行，可以通过CSS改变宽高

行级块元素(inline-block)：img
特点：内容决定大小，CSS可以修改宽高

img标签 可以只设置宽、或只设置高、这样它会等比例缩放。如果都设置的话，可能会导致图片显示不正常。

凡是带有inline的元素，都有文本特性，例如文本和文本之间的间距。
由于img标签是属于inline-block的，所以img也具有文本特性，当多个图片相连展示的时候，如果在代码中使用空格或者会车分隔img标签，那么就会使图片之间产生空格，如下：

可以通过取消回车的方式避免图片之间的空格。
如下：

可以通过 display来修改元素级别
例如：
display:inline; 行级元素
display:block; 块级元素
display:inline-block; 行级块元素

**

盒子模型

**
盒子的组成部分

盒子壁 border
内边距 padding
外边距 margin
盒子的内容 width + height

任何一个元素都是一个盒子，它都包含盒子模型的四部分。


当一个css样式是复合样式时
如padding
padding: x [上右下左]
padding:x y [左右，上下]
padding: x y z [上，左右，下]
padding:w x y z [上右下左]

定位：position
在CSS中通过设置 position 的值 配合 top、bottom、right、left来实现定位。

absolute:绝对定位，脱离原来位置进行定位。特点是出现不同的层级。
相对于最近的有定位(position)的父级进行定位，如果没有，那么相对于文档进行定位。

relative：相对定位，特点是保留原来位置进行定位。
相对于自己原来的位置进行定位。

下面截图是bfc 即 block format context，也就是使用：
position或dispaly或float或overflow 可以解决一些CSS的bug，比如 “margin塌陷”，
margin塌陷：意思是子容器在父容器中时，垂直方向的marigin<父容器垂直方向的margin时，子容器的margin将会失效，要生效可以使用【bfc】方式解决。这就是一个bug。

浮动模型【三大模型：盒模型、层模型、浮动模型】
float:left/right
会引发很多问题：
1.浮动元素产生了浮动流
所有产生了浮动流的元素，块级元素看不到他们，
产生了bfc的元素和文本类属性(inline)的元素以及文本都能看到浮动元素

清除浮动流的影响 可以使用 clear:both

待续…[2019-4-4]