html学习 二、

css属性：

1、line-height:字体单行文本高度

2、text-indent:2em;首行缩进

      em：单位，1em表示所在元素的 1 font-size

3、html中元素的分类：

      行级元素（内联元素）inline：内容决定元素所占位置，不可通过CSS改变宽高

      span、strong、em、a、del等

      块级元素 block : 独占一行，可以通过CSS改变宽高

       div、p、ul、li、ol、form、address等

      行级块元素 inline-block:内容决定大小，可以通过CSS改变宽高

      inline，block，inline-block  可以通过css的display 进行修改

      凡是带有inline的元素，都带有文字特性（行间距）

开发过程中，可以先写CSS，封装成CSS库，元素指定class，来引用css,完成CSS的复用

 

padding: top right bottom left

面试盒模型可视区大小 width + padding + border

body默认margin 8px

 

定位：position

position需要配合 top、 right、bottom、left使用

absolude:绝对定位，脱离原来位置进行定位（可以理解为元素存在于新的一层，不与原来层影响）。left、top、bottom、right相对于最近的元素进行定位，如果没有，相对于文档进行定位

relative:相对定位。保留原来位置进行定位（元素可以通过 top等改变位置，与其他元素重合，但是原来的位置保留，其他元素不会自动占用）。设置left、top、bottom、right相对于原来位置进行定位。

fixed：固定定位，相对于窗口定位，不会随着页面滚动而改变位置。常用来做侧边快捷键，广告等

注：使用技巧。用relative作为参照物，用absolude进行定位

 

margin塌陷问题：当两个父子div同时设置margin-top的时候，只有数值比较大的margin-top有效，且效果作用于父元素。

例如：父div  margin-top: 100px;  子 div margin-top: 50px;此时子级元素，margin-top无效。

           子 div margin-top: 150px;此时父级元素效果为记录文档顶部150px,子级元素相对父级位置不变。

解决办法：

           触发父级元素的bfc.

           具体方法：1、设置position;  2、设置display:inline; 3、设置overflow:hidden;  4、设置float:left | right

margin合并问题：两个同级元素，分别设置margin-top,margin-bottom时，上下距离不是两者之和，而是最大的那个值。

           解决办法同样是触发父级的bfc。给其中一个元素，或者两个元素，添加父级元素，触发父级元素的bfc。但是开发中一般不这么解决（不能为了改BUG而改变html结构），开发中通过设置一个元素的margin值变大，达到效果。

 

元素设置float属性以后，部分元素错位问题。

元素设置了float以后会产生浮动流。块级元素（block）无法看到响应。产生了bfc的元素和文本类属性（inline）的元素可以看到响应。

清除浮动流，只需要添加在最后一个不需要浮动的元素上添加css: clear: both;也可以解决父级元素无法撑开的问题（clear只对块级元素有效）。但是开发中不推荐这么写，而是推荐使用伪元素设置clear来清除浮动。

//对div后面的伪元素进行操作
.div::after{
    content:"";//只有设置了content为元素才会生效
    clear:both;
    display:block;//clear只对块级元素有效
}

//对div前面的伪元素进行操作
.div::befor{
    content:"";//只有设置了content为元素才会生效
}

浮动最早的设计初衷是为了在网页上实现报纸的效果（文字环绕图片）

知识点：元素设置了position，float之后，display会变成inline-block