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中的四个值上下两个值的距离都是从上边量取;左右两个值都是从左边量取。

上一篇:javascript倒置再次被否定作用


下一篇:ArtifactTransferException: Failure to transfer org.apache.openejb:javaee-api:jar:5.0-1