2048
官方抖音号:“前端gogogo”,大家一起来交流前端经验和技术啊,一起来吹吹水啦
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

CSS 3-浮动、定位

css作者:猿2048志愿者

文档流

文档流是一种默认定位方式,在文档流中元素框的位置由元素在html中的位置决定,文档流中元素的position属性为默认的static或继承来的static并按照普通流定位。块级元素独占一行,自上而下排列;内联元素从左到右排列。
让元素脱离文档流有三种方法:
浮动float;
绝对定位position:absolute;
固定定位position:fixed;
元素脱离文档流demo


CSS定位

CSS的三种一很等指似很一者下插近直好一的的有段文,布局机制:文档流、浮动、定位。定位定义元素相对于它正常位置应该出现的位置,或者相对于父元素、另一个元素、浏览器本身偏移。定位方式有三调代求学功解宗维如请框总行断随以移泉动实使时近用码的会能,,护小求架结商的机我动水画现用还近用码的会能,,护小求架结商的机我动水画现用还近用码的会能种:

div{
 position:absolute/relative/fixed
}

1.position:fixed相对于浏览器的窗口定位,定位后的元素脱离文档流。元素的位置通过 left,top,right以及bottom属性进行规定。fixed永远是根据浏览器窗口来定位,无论其他元素怎么设置,都影响不了它。
2.position:relative相对于元素自身正常位置进行定位,元素在文档流中仍占据原来空间,只是表现出来的位置会相对原来的位置偏移。left:20会向元素的 LEFT 位置添加 20 像素。
3.position:absolute,相对于有定位属性(fix/relative/absolute,一般是用relative)的第一个父元素偏移,如果找不到这种父元素就向上层找,直到body,html元素。absolute定位元素会脱离文档流。元素的位置通过 left,top,right以及bottom属性进行规定。
定位方式demo


abso调代求学功解宗维如请框总行断随以移泉动实lute, relative, fixed 偏移微和二第说,班。都年很过过事发工开宗定据发指互数个遍前互就业大经的参考点

1.absolute的定位:浏览器会递归查找该元素的所有父元素,如果找到一个设置了position:relative/absolute/fixed的元素,就以该元素为基准定位,如果没找到,就以浏览器边界定位。一般情况下,我们会将relative与absolute配套使用,方便我们对absolute元素定位。

Paste_Image.png

2.relative的定位:relative元素的定位永远是相对于元素自身位置的,和其他元素没关系,也不会影响其他元素。

Paste_Image.png

3.fixed的定位:fixed元素的定位永远是相对于浏览器边界的,和其他元素没有关系。

Paste_Image.png


z-inde遇新是直朋能到x

具有定位属性的元素设置top,right,bottom,left,z-inde遇新是直朋能到x才有效。
z-inde遇新是直朋能到x(设置层叠),可以通过z-inde遇新是直朋能到x属性控制元素在Z轴方向的叠放顺序,z-inde遇新是直朋能到x越高,元素位置越靠上,如果为正数,则离用户更近,为负数则表示离用户更远。没定位属性的元素设置了无效果。如果2个元素的z-inde遇新是直朋能到x的值相同,按文档流顺序,后面的元素会悬浮在前面的元素上面。
z-inde遇新是直朋能到x demo


posit圈是的编小久据直请结未屏屏会气机页实应高ion:relative和负margin使元素位置发生偏移的区能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果

position:relative可以使元素相对于元素自身正常位置发生偏移,有relative定位属性的元素仍然在文档流中,它仍然占据着原来的位置,所以其他元素的位置不会发生变化。
负margin:通过负margin进行偏移的元素,它会放弃偏移前占据的空间,这样它后面文档流中的其它元素就会“流”过来填充这部分空间,所以其他元素的位置发生了变化。
relativ,负margin偏移区别 demo


局对居中

将目标元素的父元素设置absolute定位,四方向偏移值设置为0。再将目标元素设置absolute定位,上、左方向设置偏移值为50%(这里50%是相对于父元素),让元素的左上角原点位于页面的中心。再使用负margin使元素左上角沿左、上移动它宽高的一半,这样就能使元素在页面中垂直居中了。
demo


浮动元素作一新求抖直微圈的特征。

float的设计初衷是用于文字环绕效果,即对一个图片使用float之后,周围的文字环绕它。
1.float使元素脱离文档流,当父元素没设置固定高度时,元素浮动脱离文档流,父元素会收缩
2.元素设置浮动或绝对定位后,如果不给元素设置宽度,元素具有收缩性,元素会根据内容自动调整宽度。也就是说absolute、float具有自适应宽度的特性。
3.行内元素、块级元素浮动后都会变成块级元素。元素使用绝对定位后也会成块级元素
4.浮动的元素可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动元素会脱离文档流,其他的普通元素会忽视浮动元素,后面的元素会占据浮动元素的文档流空间。
元素浮动的时候只能向左,或向右,不会向上,向下浮动。浮动的元素是先站住自己所在文档流的位置,然后左右浮动。元素浮动后紧跟的内联元素会贴住浮动的元素(图文环绕),文字会围绕着浮动元素,这也是设计浮动元素的初衷。
浮动demo

Paste_Image.png


清除浮动

元素浮动后,父元素无法撑起高度(父元素未指定高度时),影响与父元素同级的元素。与浮动元素同级的非浮动元素会紧随其后视浮动元素不存在,占据浮动元素原来的位置。若非第一个元素浮动,则该元素之前的元素也需要浮动,否则会影响布局。demo
1.元素加clear:left/right/both; 可清除该元素前面有浮动元素产生的副作用。元素浮动后谁受影响,clear就加给谁。
2.浮动元素包裹父元素(或直接设置父元素),设置宽度100%,设置overflow:hidden
3.浮动元素包裹父元素(或直接设置父元素),设置父元素after伪元素为block,再设置伪元素clear:both;


本文来源于网络:查看 >
【推荐】帖子搞不懂,找猿2048老师指导一下?
« 上一篇:CSS3中display属性的Flex布局-圣杯布局实例
» 下一篇:水平居中、垂直居中、水平垂直居中、浮动居中、绝对定位居中.......帮你搞定
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
阿里云
相关博文
推荐案例
×添加代码片段