float--浮动

1.float详解第一部分:

float属性值为:left(左),right(右),none(不浮动);在float产生之初,主要是用来做文字环绕的效果的,根据float的属性设定图片的浮动位置。(备注:在写img标签的时候,一定要加上alt属性)

2.float详解第二部分:

设置了float属性的元素会脱离文档流,往我们所设置的方向进行浮动,直到遇到其父级的边框,或这是浮动的方向上已经存在了一个浮动元素,它才会停止偏移。与此同时,已经浮动的元素是没有办法撑开其父级的高度的,我们可以给父级加上一个高度属性,这也是清除浮动的一种方法。清浮动的三种方法:①给父级加高②给浮动的元素的后一个元素添加clear属性,属性值为:left,right,both;根据具体情况判断应该用哪个属性值。③在元素的后面再添加一个元素(标签),添加的标签的CSS样式可以这样写{content:''";display:block;height:0;clear:both;}。考虑到代码的复用问题,我们可以在样式表中写一个基础样式,方便随时清浮动,即,在CSS中定义一个类的样式,代码为:.clearfix::after{content:''";display:block;height:0;clear:both;},然后在浮动元素的父级class属性中添加相应的class名,例如<div class='outer  clearfix'>

<div></div>

<div><div>

</div>  考虑到IE浏览器兼容性的问题,我们可以在CSS样式表中加上一句样式 .clearfix{zoom:1;},这个是清浮动最好的一种方法。

3.float详解第三部分:

①float属性对块级元素的影响:设置浮动之后,块级元素的宽度不再继承其父级,而是由内容撑开。

②float属性对行级元素的影响:设置浮动之后,行级元素可以进行宽度盒高度的设置

③总结:设置浮动之后,行标签或块标签转换成了inline-block标签。

4.伪元素:

①div(元素名或类名或id名等等)::before{},表示在元素之前插入一个伪元素

②div(元素名或类名或id名等等)::after{},表示在元素之后插入一个伪元素,通常用来清浮动。注意:这里的规范是写两个冒号,要与:hover...,伪类选择器区分开。

附加:

5.外边距重叠,即相邻连个元素的边距属性在反向上发生冲突,比如div1的margin-bottom和div2的margin-top或者是div1的margin-right和div2的margin-left会发生冲突,此时,①如果两个值都为正数,则取数值较大的一个值作为两个元素的最终的距离值,若都为负值,则取绝对值较大的一个数作为最终的距离值,若一正一负,则取连个数相加的结果作为最终的距离值。

6.背景设置:

①background-image:url();括号内为图片路径,这里可以设置多背景,即可以在这里写多个url,只需要用逗号隔开就行。

②background-color:颜色设置,可以为#加16进制数,可以是英文单词,可以是rgb(),也可以是hsl();hsl()写法同rgb(),只是这种方法是用色调来写颜色。注意,这里的背景颜色的设置,与加入背景图片之间是不会冲突的。

③background-position:(可以设置像素,也可以是百分比的形式,50%刚好居中,也可以用left/right/center | top/bottom/center 来分别设置上下盒左右的居中)。例如:background-position:center center;就是元素处于正中间的位置。

④background-repeat:no-repeat(不平铺,图片原来什么样就什么样);repeat(不断重复一张图片,直至充满整个元素);repeat-x(在x轴方向上平铺,即在x轴上重复);repeat-y(在y轴上平铺)

⑤background-size:设置背景图片的大小,可以用百分比来写,有两个值width  height = 50% 50%;也可以是background-size:cover;此时图片会充满整个元素,但是不会重复 ,还是一张图片。还可以是background-size:contain;此时图片按比例缩放,宽度或者高度,只要有一个属性碰到了元素的边界,图片就停止缩放,所以这种方法写的图片有时并不会充满整个元素。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值