CSS基础知识(定位、浮动)

Wesley13
• 阅读 258

12****、浮动

CSS基础知识(定位、浮动)

特点:将当前元素脱离文档流    float: left 即左浮动  float: right 即右浮动

注:*父与子元素,设置子元素浮动不能超出父元素的范围

*多个元素均设置为浮动时,将自动排列(水平方向)

*兄弟元素,后一个元素设置为浮动,前一个元素不浮动,后一个元素的位置不能超过前一个元素的位置

*文字内容不会被浮动元素所覆盖,而是环绕在浮动元素的周围。

i 清除浮动 clear

 none - 不清除    left - 清除左浮动   right - 清除右浮动   both - 清除两侧的浮动

i 高度塌陷

 CSS基础知识(定位、浮动)

设置:父级元素- 未设置高度;子级元素- 设置高度,且浮动   

结果: 父级的显示高度为 0

默认情况下,未设置宽高;默认宽度是当前页面整个宽度;高度是0或子元素高度的总和

u 解决方案

(1)为父元素设置高度(所有子元素高度的总和)

问题:人为为父级元素设置 height 属性;父级元素的 height 属性值,计算得来的

(2)将父和子元素同时设置为浮动

父元素未设置宽度和高度 结果: 父级的宽度和高度分别所有子元素的宽度和高度的总和

  (3)clear属性 来清除浮动

l BFC块极格式化环境

全称:Block Formatting Context,是元素的隐含属性。

默认情况下BFC是关闭的,当元素开启BFC以后,将会具有如下特性:

*文档流中的元素不会被设置为浮动的元素所覆盖

*子元素的垂直方向的外边距不会传递给父元素

*元素可以包含浮动的子元素

² 开启 BFC

设置元素为 浮动(float);或display 为 inline-block;或 绝对定位

将元素的overflow 设置为一个非visible的值(一般设置为 hidden)

在所有子元素的最后新增一个子元素,并设置 clear 属性值为 both

注: 开启 BFC会有一些副作用,需要选择一些副作用小的方式。

13****、定位

 CSS基础知识(定位、浮动)

  Ø static 默认值 表示静态定位(没有开启定位)

       Ø relative 表示相对定位,没有脱离文档流

相对于父级元素的定位:

相对定位后的位置,是相对于当前元素的原本位置进行计算

* 行内元素设置为相对定位时 - 依旧是内联元素的效果 Span

  • Ø absolute 表示绝对定位  【脱离】文档流

开启绝对定位,(默认开启定位 - 不会改变当前元素显示的位置)

top、right、bottom、left依次设置距离上边、右边、下边、左边的值  

  定义父级与子级元素:

1. 只为子级元素设置绝对定位:    相对于<HTML页面>进行定位

2. 同时为父级和子级元素设置绝对定位:

父级元素相对于 <HTML页面> 进行定位; 子级元素相对于 <父级元素> 的进行定位

  • fixed 表示固定定位 【脱离】文档流

效果:相对于 <HTML页面> 进行的定位

【注:行内元素设置为固定定位、绝对定位,呈现块极元素的效果】

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
LinMeng LinMeng
2年前
小记面试题-2021
CSS类1.解释浮动及其工作原理浮动的元素可以向左或者向右移动,直到它的外边缘碰到包含元素(父元素)或另一个浮动元素的边框为止。要想使元素浮动,必须为元素设置一个宽度。虽然浮动的元素已不在文档流中,但是它浮动后所处的位置依然在浮动之前的水平方向上。因为浮动元素不在文档流中,所以文档流中的块元素表现的就像浮动元素不存在一样,下面的元素会填补原来的位置。有些
Stella981 Stella981
2年前
KVM调整cpu和内存
一.修改kvm虚拟机的配置1、virsheditcentos7找到“memory”和“vcpu”标签,将<namecentos7</name<uuid2220a6d1a36a4fbb8523e078b3dfe795</uuid
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
2年前
BFC清除浮动
BFC就是清除浮动用来处理文档脱离文档流的问题清除浮动的方法:a、父元素也添加一个浮动    产生弊端就是:margin不能使用b、给父元素添加一个:display:inlineblock     弊端同a一样:无法使用marginc、给父元素添加高     
Wesley13 Wesley13
2年前
CSS中清除浮动的作用以及如何清除浮动
1.什么是浮动,浮动的作用“浮动”从字面上来理解就是“悬浮移动、非固定”的意思。块级元素(div、table、span…)是以垂直方向排列,而在前端界面中往往要使用水平布局块级元素使界面更美观。这就要用到浮动了。被设置浮动的元素会脱离标准流(竖直排列),从而达到水平排列的效果。例如.未设置浮动时图1中的两张图片竖直排列在父级元素(橙色区域)
Stella981 Stella981
2年前
CSS 分类 (Classification)
★★CSS分类属性(Classification)★★⑴CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。⑵下面是常用的属性以及描述:!(https://oscimg.oschina.net/oscnet/00cb565
Wesley13 Wesley13
2年前
CSS复习笔记二:浮动和清除浮动
 一、浮动的性质1、浮动的元素脱离标准文档流,并且可以设置宽度和高度。2、浮动的元素相互贴靠3、浮动的元素有“文字环绕”效果       含有图片的div浮动,段落不浮动,文字会环绕图片。4、div浮动了且没有设置宽度,那么将自动收缩为内容的宽度。浮动(脱标)的元素是不能把容器惩处高度的。二、浮动的清除
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
3个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这