css基础知识,CSS基础知识

12、浮动

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

12、浮动

图片 1

特点:将如今因素脱离文档流    float: left 即左浮动  float: right
即右浮动

注:*父与子元素,设置子元素浮动不可以超越父元素的限定

*多少个因素均安装为转移时,将自行排列(水平方向)

*手足元素,后一个要素设置为扭转,前一个要素不扭转,后一个元素的位置不可能超过前一个因素的岗位

*文字内容不会被变型元素所覆盖,而是围绕在扭转元素的四周。

i 清除浮动 clear

 none – 不清除    left – 清除左浮动   right – 清除右浮动   both –
清除两侧的变迁

i 中度塌陷

 图片 2

设置:父级元素- 未安装中度;子级元素- 设置中度,且变动   

结果: 父级的显得中度为 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、定位

 图片 3

  Ø static 默许值 表示静态定位(没有打开定位)

       Ø relative 表示相对固定,没有退出文档流

相对于父级元素的定势:

周旋固化后的地方,是相持于近期因素的原本地点进行测算

* 行内元素设置为相对固定时 – 依旧是内联元素的法力 Span

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

打开相对定位,(默认开启定位 – 不会改变近来因素突显的职位)

top、right、bottom、left依次安装距离上面、左边、上边、左侧的值  

  定义父级与子级元素:

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

  2. 再者为父级和子级元素设置相对定位:

父级元素相对于 <HTML页面> 举行固定; 子级元素相对于
<父级元素> 的开展一定

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

功用:相对于 <HTML页面> 举行的一定

【注:行内元素设置为定位定位、相对定位,突显块极元素的效应】

 

http://www.bkjia.com/Javascript/1284015.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/1284015.htmlTechArticleCSS基础知识(定位、浮动),css基础知识 12 、浮动
特点:将近来因素脱离文档流 float: left 即左浮动 float: right 即右浮动
注:*父与子元素,…

图片 4

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

注:*父与子元素,设置子元素浮动不可能超出父元素的限量

*多少个要素均安装为转移时,将自行排列(水平方向)

*手足元素,后一个元素设置为扭转,前一个因素不扭转,后一个因素的岗位不可以跨越前一个要素的岗位

*文字内容不会被转移元素所覆盖,而是围绕在变更元素的方圆。

i 清除浮动 clear

 none – 不免除    left – 清除左浮动   right – 清除右浮动   both –
清除两侧的变动

i 中度塌陷

 图片 5

安装:父级元素- 未安装中度;子级元素- 设置高度,且变动   

结果: 父级的显得高度为 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、定位

 图片 6

  Ø static 默许值 表示静态定位(没有拉开定位)

       Ø relative 表示绝对稳定,没有脱离文档流

对峙于父级元素的一定:

周旋固化后的职位,是相对于近期因素的原来地点展开测算

* 行内元素设置为相对固化时 – 依旧是内联元素的效劳 Span

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

拉开相对定位,(默许开启定位 – 不会转移近年来元素展现的地点)

top、right、bottom、left依次安装距离上面、右侧、上面、右边的值  

  定义父级与子级元素:

  1. 只为子级元素设置相对定位:    相对于<HTML页面>举办稳定

  2. 还要为父级和子级元素设置相对定位:

父级元素相对于 <HTML页面> 举办一定; 子级元素相对于
<父级元素> 的展开稳定

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

成效:相对于 <HTML页面> 举行的稳定

【注:行内元素设置为固定定位、绝对定位,突显块极元素的职能】

 

相关文章