文献种类:专题技术总结文献
开发工具与关键技术:MVC
作者:吴锦华 ;年级:20级 ;撰写时间:2021 年 6 月 28日
文献编号: 归档时间: 年 月 日
CSS浮动与定位
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:MVC
作者:吴锦华
撰写时间:2021/6/28
CSS:定义和用法:
float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。在页面布局时,一般用float属性来实现多栏布局,导航菜单等等。
浮动(float)的三个属性值:
left:元素向左浮动
right:元素向右浮动
none:默认值,元素不浮动,并会显示在其在文本中出现的位置;
inherit:规定应该从父元素继承 float 属性的值。
通俗解释:浮动的意思就是把元素从常规的文档流中拿出来,浮动的元素在脱离了常规的文档流之后,原来紧跟其后的元素就会在空间允许的情况下,向上提升到浮动元素平起平坐。如果想要浮动元素紧跟的元素停留在原始的位置,不跟着浮动,就对该元素设置clear(清除浮动)的属性值。
清除浮动(clear)的三个属性值:
left:清除左侧浮动
right:清除右侧浮动
both:左右两边浮动
清除浮动的三个方法
1 额外标签法
在需要清除浮动效果的元素后添加一个无内容块级标签,并设置属性clear来清除浮动
示例:
2 伪元素清除浮动
在需要清除浮动效果的父元素上 通过::after的伪元素来设置清除浮动。需要注意的是伪元素默认行内元素,需要设置为块级元素才能达到效果。
示例:
3 通过给父元素设置overflow属性值为hidden或者auto来清除浮动
示例:
CSS定位:规定元素的定位类型。
说明:这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对定位或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
通过设置top bottom left right 四个属性值来决定偏移位置。值可以为关键词、百分比、绝对单位
值 描述
Static 默认值,没有定位。元素出现在正常的流中。(忽略top、right、bottom、left和z-index属性)
relative 生成相对定位的元素,相对于其正常位置进行定位。
absolute 生成绝对定位的元素,相对于最近的非static父元素进行定位。绝对定位的元素可以设置外边距(margin),且不会与其他他边距合并。
fixed 生成绝对定位的元素,相对于浏览器窗口(viewport)进行定位。 sticky 盒位置根据正常流计算,然后相当于该元素在流中的flow root(BFC)和containing block(最近的块级元素)定位。
Fixed定位示例如下:
Relative相对定位示例如下:
Absolute绝对定位示例如下:
这是我所学到的 CSS,所以我要分享给各位亲,希望可以帮助到你们。
以上就是我的分享,新手上道,请多多指教。如果有更好的方法或不
懂得地方欢迎在评论区教导和提问喔