关于css中浮动的理解及实际应用

一.元素浮动的意义及使用:1. 浮动的意义:设置了浮动属性的元素会脱离普通标准流的控制,移动到其父元素中指定的位置的过程,将块级元素放在一行,浮动会脱离标准流,不占位置,会影响标准流,浮动只有左右浮动,不会出现上下浮动.2. 浮动的使用:基本语法格式:选择器{float:属性值;} left 元素向左浮动 right 元素向右浮动 none 元素不浮动二.元素浮动的特性:1. 浮动的元素脱离了标准文档流,摆脱块级元素和行内元素的限制 1)这是两个div盒子以及一个span元素在没有设置浮动情况…

CSS 中浮动的使用

float none 正常显示 left 左浮动 right 右浮动 clear none 允许两边浮动 left 不允许左边浮动 right 不允许右边浮动 both 不允许两边浮动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns…

关于css中float的理解

感觉css里的float是个非常神奇的东西,神奇之处在于,你知道它是什么意思,但是用的时候总是不知道怎么实现效果.又或者它会很容易地影响到别的元素和属性.所以今天打算尝试一下float的各种设置,看看效果.在这篇博客里做个总结. 1. 设置float后对后面元素的影响 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>…

浅谈css中浮动和清除浮动带来的影响

有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不是很清晰的问题把它弄清楚了,便于我们以后的使用.早些时候,W3C规定出来的浮动实际并不是为了布局所用,当时是为了做文字环绕才使用到浮动,后来有人发现用它来做布局也挺不错啊,但是,用到了浮动,是要付出一定的代价的,我们就必须要处理浮动所带来的影响.接下来我们就聊聊浮动的那些事儿,此分享仅供参考,有什么…

简要的谈一谈我对CSS中长度单位的理解

CSS中的长度单位目前分为两种,分别是绝对长度和相对长度.绝对长度单位包括: in:英寸 cm:厘米 mm:毫米 pt:磅(1磅等于1/72英寸) pc:pica(1pica等于12磅) 以上五个就是CSS中定义的绝对长度单位,他们都是在我们实际生活中用的很多,但是在写CSS代码制作要在屏幕上显示的网页的时候,这种绝对长度单位用到的很少,我能想到的比较有用的地方只有给印刷品设置长度单位时可能会用到,虽然我没有接触过. 接下来就是相对长度单位,相对,顾名思义就是以某个长度作为参照,设置的相对长度的…

css中line-height的理解_介绍line-height实际应用

一.line-height的定义 css中line-height行高是指文本行基线之间的距离,不同字体,基线位置不同.line-height只影响行内元素和其他行内内容,而不会直接影响块级元素,如果块级元素设置了line-height,这个值只会应用到块级元素里面的内联内容时才会有影响.在块级元素上声明line-height会为该块级元素的内容设置一个最小行框高度. 二.line-height与行内框盒子模型 <p>hello world<em>this is em</em&…

【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点. 说白了width:auto试图…

CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

---恢复内容开始--- 一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点. 说白了w…

CSS中浮动的使用

CSS有两个性质第一个是 :继承性第二个是:层叠性: 选择器的一种选择能力,谁的权重大就选谁 { 里面分两种情况: 分别是选中和没选中. 1.选不中的情况下,走继承性,(font,color,text都可以继承)继承性的权重为0 有多个父级都设置了这样的样式,走就近原则 2.选中了的情况下:得考虑三种情况 (a:权重问题,权重大,就选谁的样式: b:权重相同,谁在后选择谁: c:纯标签和类(class)没有可比性的,纯类(class)也没法和id进行比较. } 标准文档流浏览器的排版是根…

CSS中浮动属性float及清除浮动

1.float属性 CSS 的 Float(浮动),会使元素向左或向右移动,由于浮动的元素会脱离文档流,所以它后面的元素会重新排列. 浮动元素之后的那些元素将会围绕它,而浮动元素之前的元素将不会受到影响.比如如果一个图像向右浮动,下面的文本流将环绕在它左边. <div> <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈…

详细解读css中的浮动以及清除浮动的方法

对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读: 1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮动(本文将涉及到多种清除浮动的方法) 博客正文: 1.css块级元素讲解常见的块级元素主要有以下几种:<div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<addr…

css 中的浮动

css中浮动的作用: 使元素脱离正常的文档流并使其移动到其父元素的“最左边”或“最右边”. css中浮动的特点: 1)改变元素类型,使元素支持宽高: 2)半脱离文档流: 3)文本环绕: 4)顶对齐: css中浮动使用的三要素: 1)同级元素一个浮动,其他都要浮动: 2)子级浮动,父级清浮动: 3)浮动元素能设置宽尽量设置宽: css中清除浮动的三种方法: 1)给浮动元素父级加overflow:hidden: 2)在浮动元素下面加<br style=‘clearfix:both’/>:…

css中的float属性以及清除方法 (2011-09-03 17:36:26)

CSS里面的浮动属性是布局的常用工具,只有真正了解它并熟练使用才能将它的优点发挥到极致. 许多页面中都有文字绕图效果,并且各区块分布得错落有置,很多朋友在自学CSS布局时为了做出这些效果往往会被div只能独占一行的默认样式搞的头大,但使用了浮动属性,布局就变得简单.美观了. 任何元素都可以被浮动,段落标签<p>.<div>.<table>.<img>,甚至<span>.<b>.<h1>等等都可以,而且所有被定义为浮动的元素…

如何理解CSS中的浮动：其实他就像乘坐扶梯一样

只要你用过自动扶梯,你就能很快的理解CSS中的浮动(Float). 你肯定遇到过这样的情况: 做好了,你想用CSS浮动来调整元素间的位置关系. 在写完代码之后,你发现浮动元素没出现在你设想的位置,而且像个磁铁一样紧紧的靠在div旁边. 为了理解浮动这个概念,我个人曾经花费了很长的时间.有一次,我读到了一篇有关浮动的文章,觉得它说的很有道理,于是去尝试文章中的方法.但是写完代码之后,还是失败了--我也只好从头再来. 如今我已经成功的理解了这个概念,我也想要尽我最大的努力让其他人少走弯路…

深入理解CSS中的层叠上下文和层叠顺序(转)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道理都是想通的在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时…

深入理解css中的margin属性

深入理解css中的margin属性之前我一直认为margin属性是一个非常简单的属性,但是最近做项目时遇到了一些问题,才发现margin属性还是有一些“坑”的,下面我会介绍margin的基本知识以及那些“坑”.这篇博文主要分为以下几个部分: margin--基础知识 margin--在同级元素(非父子关系)之间应用 margin--在父元素和子元素之间应用(重点) margin--margin值的单位为%时的几种情况第一部分:margin--基础知识要介绍margin的基础知识,我们不可回…

css中的浮动以及清除浮动

对于css中的浮动问题,曾经有一段时间我是懵懵懂懂的感觉,对于float这个属性一直是似懂非懂的赶脚,对于这种让我们一直懵懵懂懂的知识点,我们就需要找个时间点,仔仔细细的去将它搞懂,从这个过程中我们也会去复习以前的知识,这是真正会让我们有所提高的一个过程,是所谓温故而知新.那么在学习的过程中也看了很多大神的博客,这里就来总结一下我个人对于float的理解; css的浮动使我们在布局的时候经常会用到的一个属性,在大量的使用过程中,我们可能只是一知半解的去使用,或者使用的时候得到了自己想要的结果就绝…

深入理解CSS中的层叠上下文和层叠顺序

零.世间的道理都是想通的在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显然,是不可能做到完全等同的,先后顺序,身份差异就显现出来了.例如,杰克和罗斯,只能一人浮在木板上,此时,出现了冲突,结果大家都知道的.那对于CSS世界中的元素而言,所谓的“冲突”指什…

CSS中的定位与浮动

CSS中的定位与浮动本文主要讲述CSS中的三种定位样式static.relative和absolute的区别以及浮动元素的特征. 定位样式 CSS中定位样式position的取值有三个,默认值:static,相对定位:relative,绝对定位:absolute. static: 采用默认定位时,一般可以不用设置position样式. 各个元素是按照文档流的形式从上往下排,同时保证块状元素独占一行的原则. relative : 生成相对定位的元素,相对于其正常位置进行定位,同时配合top, b…

CSS中盒模型的理解

今天突然看到一篇关于CSS中盒模型的文章,忽然觉得自己竟然遗忘了很多小的地方,所以写一篇文章来记忆一下 (摘抄于千与千寻写的CSS盒子模型理解,并在自己基础上添加了一些东西,希望更完善,对大家有帮助) 1.基本的盒模型知识 CSS css盒子模型又称框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(border).外边距(margin)几个要素.如图: 为了方便大家理解和尝试,我写了一个小Demo放上来方便大家尝试 <!DOCTYPE html…

【转】CSS中的浮动和清除浮动

以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目的并没那么多事儿,就只是用来实现文字环绕效果而已,如下所示: 文字环绕效果但是早期的前端开发者发现:浮动的元素可以设置宽高并且可以内联排列,是介于inline和block之间的一个神奇的存在,在inline-block出来之前,浮动大行其道.直到inline-block出来后,浮动也有它自己独特的使用场…

[转]深入理解CSS中的层叠上下文和层叠顺序

http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是想通的在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在CSS届,也是如此.只是,一般情况下,大家歌舞升平,看不出什么差异,即所谓的众生平等.但是,当发生冲突发生纠葛的时候,显…

深入理解CSS中的margin

1.css margin可以改变容器的尺寸元素尺寸可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准之中,jquery中有相对应的方法 margin与可视尺寸 1.1使用那个与没有设定width/height的普通block水平元素 2.2只适用于水平方向尺寸 <body style="background-color:#1a2b3c"> <div style=&quo…

CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了

浮动基本介绍在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多个元素排在同一行,并且可以设置宽高度. 其实浮动是通过float属性来实现的. float属性值说明表: 属性值描述 left 设置元素向左浮动. right 设置元素向右浮动. 右浮动实践让我们进入右浮动的实践,实践内容如:将class属性值为.box1元素设置为右浮动. 在进入有浮动实践之前…

css中的浮动与三种清除浮动的方法

说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个. 对于这种现象一般不用处理. 2,margin塌陷现象: 如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移. 解决方案: 1.0给大盒子加一个边框border属性. 2.0给大盒子设置一个overflow…