HTML-CSS相关（1）

一  浮动

1、标准流中的块级盒子，宽度将会自动伸展为100%而浮动的块级盒子，宽度不会自动伸展，而是由内容撑开。

2、当一个盒子浮动，标准流中未浮动的其他盒子，将视浮动盒子不存在而占据浮动盒子原来的位置（浮动盒子，会盖在这个盒子的上方） 但是，未浮动盒子中的文字内容，将会受到浮动盒子的宽度的影响（未浮动盒子中的内容，不会被浮动盒子盖住）。

3、

由于第二条的原因，可以给受影响的盒子添加clear属性，清除掉浮动盒子对自身的影响。
clear:left-清除左浮动影响
right-清除右浮动影响
both-同时清除左右浮动影响。

4、父盒子没有指定高度。如果子盒子没有浮动，则父盒子的高度可以被子盒子撑开。
如果父盒子中的所有子盒子都浮动，则父盒子高度将变为0.
[解决所有子盒子浮动，父盒子高度塌陷的问题]
① 给父盒子也添加浮动；
② 给父盒子添加overflow属性。推荐使用！！
③ 在父盒子最后添加一个高度为0的空div 给这个div添加clear: both；属性，清除掉浮动效果。
④ 可以将第三条的div用伪对象选择器：：after实现：
#div::after{
display: block;
content: "";
height: 0px;
clear: both;

}

[盒子模型分类]
1、标准盒子（w3c盒子）：我们设置的宽度和高度，仅仅包含content部分，再添加padding和border会导致盒子变大
2、IE盒子（怪异盒子）：我们设置宽度和高度，包含content+padding+border；再添加padding或border，会压缩content
区域，但盒子总大小不变
[手动设置盒子类型]
box-sizing: border-box ：怪异盒子
box-sizing: centent-box:标准盒子

 

二、定位

定位分为相对定位、绝对定位、

[相对定位relative]
1、使用position: relative;设置元素为相对定位元素
2、使用top right bottom left调整元素的位置
当left和right同时存在时left生效，top和bottom同时存在是top生效
3、定位机制：
① 相对定位是相对于自己原来的位置定位，当top等属性不指定时，元素位置不会发生改变
② 相对定位不会释放掉元素在原有文档流中的位置，不会影响其他文档元素流的位置
4、关于元素z轴重叠
① 定位元素，默认的z轴高于普通文档流元素
② 同为定位元素，后来者居上。后面的盖住前面的。
③ 可以使用z-index:手动调节定位元素的上下层z轴关系
z-index:默认为0，而且只能作用于定位元素，非定位元素不能使用

 

[绝对定位]
1、 使用position:absolute;设置元素为绝对定位
2、 定位机制：
① 相对于第一个非static定位的祖先元素进行定位。
（即，相对于使用了relative absolute fixed 定位的祖先元素进行定位）
② 如果所有的祖先元素都未定位，则相对于浏览器左上角进行定位
③ 使用absolute的元素会从文档流中完全删除，原有空间会被释放。
[固定定位 fixed]
1、使用position：fixed;设置固定定位
固定定位，是一种特殊的绝对定位，只是祖先元素无法使用定位锁住。
2、定位机制：
永远相对于浏览器的左上角进行定位，不随滚动条的滚动而滚动。

[z-index属性]

1、作用根据z-index属性设置的数值，决定元素在z轴方向上的层叠次序。
2、使用要求：
① z-index:只能给定位元素调整层叠次序。
relative absolute fixed
② 元素的z-index属性要考虑父容器z-index的约束
>>>如果父容器设置了z-index属性，则子容器的所有元素将不能
脱离父容器层次的约束，
（即,父容器设置了z-index，则子容器只能以父容器的数值为准.再给子容器设置z-index，只能调整子容器在父容器的层叠次序）
>>> 如果父容器没有设置z-index，或者设置为z-index：auto则子容器调整z-index将不受父容器层次约束

3、z-index：auto和z-index：0；异同
① z-index：auto是默认值。与z-index：0；处于同一平面
② z-index：0会约束子元素必须与父容器在同一平面
z-index：auto；不会约束子元素的层次。

[cilp属性]
 1、作用：clip属性用于裁切图片标签，显示图片的指定区域。
 2、使用要求：clip属性，只能作用于有absolute或fixed定位的图片标签上。
 3、clip属性，接受一个rect()函数，函数传入四个值，分别表示上、右下左四条切线的位置；
 注意：与其他属性不同的是，rect中的四个值上下两个值的距离都是从上边量取；左右两个值都是从左边量取。