position影响到浮动

2024-11-07

CSS使用position定位后导致元素浮动

1.子元素 absolute/fixed定位后,子元素脱离文档流存在,它让出原来占的那个坑,父元素再也不能通过子元素来撑开高度了 <style> div{ position:absolute; } </style> <div> <div style="width:100px;height:100px;background-color:red;"> </div> <div style="width:100px;h

IE6 下绝对定位position:absolute 与浮动不显示 (IE6 下拉菜单显示)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONT

【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

清除float浮动造成影响的几种解决方案

1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响” 学习浮动推荐的视频教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子块级div元素包含一个内联img元素,此时div的高应该是图片img撑开的高度,当设置了图片img元素设置浮动后,div高度就会坍塌浮动的破坏性浮动导致高度坍陷代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars

CSS浮动、定位

这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 让元素脱离文档流的方法有:浮动和定位. 二.有几种定位方式,分别是如何实现定位的,使用场景如何? CSS定位方式有四种:默认定位(static).相对定位(r

CSS布局 ——从display，position， float属性谈起

页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Mastery>后总结一下. 让我们从基础的CSS知识谈起,相信很多初学者和小弟一样不明白CSS原理,一味追求效果,结果页面漏洞百出,错误匪夷所思,关于盒模型我就不多说了,网上很多,注意一下IE和其他浏览器(W3C规范)的区别就好了. 块级元素与行内元素首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ul

float包裹性与破坏性及清除浮动几种方法

1. “清除浮动” ??准确的描述应该是“清除浮动造成的影响” 学习视频录制推荐的教程<CSS深入理解之float浮动> 2.如何清除浮动造成的影响??? 栗子块级div元素包含一个内联img元素,此时div的高应该是图片img撑开的高度,当设置了图片img元素设置浮动后,div高度就会坍塌浮动的破坏性浮动导致高度坍陷代码 <!DOCTYPE html> <html lang="en"> <head> <meta chars

定位position

position : absolute | relative | fixed | static 定位:子集可以超出父级的范围,如父级蛇overflow:hidden则看不到. absolute : 绝对定位(脱离文档流) relative : 相对定位(不脱离文档流) (1.不管父级设为relative还是absolute,而如果子集设为absolute,子集的参考对象仍为父级.若父级不设,则子集的参考对象为body.2.relative是相对于父级来说的,不管父级是absolute还是rela

谈谈CSS的布局，display、position、float

前言前端一直是我的一个很大的缺憾,这段时间痛顶思痛,决定好好的把前台的东西加强,这不,在学习了一段时间js之后,在做一些小练习,却发现最基本的一些css知识却还不了解,所以便有了这篇博文. 块级元素与行内元素首先谈谈人们经常提及的块级元素和行级(内联)元素 p, ul, form, div等元素被称为块级元素,这些元素显示为一块儿内容(会自动换行),span, input 等元素称为行内元素,这两者主要区别就是块级元素会从上到下一个个垂直排列,每个自占一行,如下即使两个div之间没任何元素,

CSS布局 ——从display，position， float属性谈起(转)

CSS布局 ——从display,position, float属性谈起页面布局,或者是在页面上做些小效果的时候经常会用到 display,position和float 属性,如果对它们不是很了解的话,很容易出现一些莫名其妙的效果,痛定思痛读了<CSS Mastery>后总结一下. 让我们从基础的CSS知识谈起,相信很多初学者和小弟一样不明白CSS原理,一味追求效果,结果页面漏洞百出,错误匪夷所思,关于盒模型我就不多说了,网上很多,注意一下IE和其他浏览器(W3C规范)的区别就好了. 块

Day_8.《无懈可击的web设计》-巧妙地浮动效果

> 本章内容略显陈旧,主要描述如何用浮动替代表格布局,并没有什么出彩的地方.不过其间提到了清楚浮动的几种方法,那么今天就总结一下如何清楚浮动吧. #### 为什么要清除浮动?虽说是清除浮动,其实是清除浮动产生的影响.浮动的元素,高度会塌陷,而高度的塌陷使我们布局中需要清除浮动的最重要的原因之一. #### 清除浮动的方法:1. 父级div定义height - 原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题. - 优点:简单.代码少.容易掌握 - 缺点:只适合高度

通过案例理解position:relative和position:absolute

w3school过了HTML的知识之后,觉得要自己单纯地去啃知识点有点枯燥,然后自己也很容易忘记,所以便找具体的网站练手便补上不懂的知识点.position:relative和postion:absolute困扰了我快一个星期之久,网上找到的资料鱼龙混杂,刚确定“这样”的理解之后,看另一份资料,发现“这样”理解是错了,就这样不断更正,并记录下来,最终整理出这份,以备参阅. 若有错误,请指正. 下面的结果都是基于firefox38版本来测试的. position:relative相对定位 1. 如

关于CSS定位属性 position 的使用

CSS中一般通过浮动和定位来对标签进行位置操作.下面我们来讨论一下定位的用法和需要注意的地方. 1.首先,说一下position的几个属性值 (1)none属性值,这个是定义不进行定位,默认为不定位,这个就不做DOM了 (2)relative属性值,相对定位.相对定位是以自己原来的位置为基础,相对于自己原来的位置进行移动. 现在我们先建立3个div作为素材代码如下:

盒模型、position、float详解css重点汇总

元素类型 HTML 的元素可以分为两种: 块级元素(block level element) 内联元素(inline element 有的人也叫它行内元素) 两者的区别在于以下三点: 块级元素会独占一行(即无法与其他元素显示在同一行内,除非你显式修改元素的 display 属性),而内联元素则都会在一行内显示. 块级元素可以设置 width.height 属性,而内联元素设置无效. 块级元素的 width 默认为 100%,而内联元素则是根据其自身的内容或子元素来决定其宽度. 最常见块级元素应该

CSS--position:relative和position:absolute

position:relative相对定位 1. 如何定位?每个元素在页面的普通流中会“占有”一个位置,这个位置可以理解为默认值,而相对定位就是将元素偏离元素的默认位置,但普通流中依然保持着原有的默认位置.(在父级节点的content-box区定位,父级节点有文字的话,元素的默认位置则是紧随文字)2. 不会改变行内元素的display属性.3. 并没有脱离普通流,只是视觉上发生的偏移.代码—— <body style='margin:0;padding:0;background:#BDD7EE;

【从0到1学Web前端】CSS定位问题一(盒模型,浮动,BFC) 分类： HTML+CSS 2015-05-27 22:24 813人阅读评论(1) 收藏

引子: 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两百年的分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽度未知,且两边div自适应宽度. 第一种实现方法,是借助css3的新属性calc,实现代码如下: body { margin: 0; padding: 0; font-size:0; } .left_div { background-color: #62FF09; /*calc是css3属性可以动态

CSS学习摘要-浮动与清除浮动

以下从浮动到BFC的段落摘自MDN 网络开发者 float 浮动 float CSS属性指定一个元素应沿其容器的左侧或右侧放置,允许文本和内联元素环绕它.该元素从网页的正常流动中移除,尽管仍然保持部分的流动性(与绝对定位相反). 一个浮动元素是float的值不为none的元素. /* Keyword values */ float: left; float: right; float: none; float: inline-start; float: inline-end; /* Globa

Css中position、float和clear整理

Position: absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定. fixed 生成绝对定位的元素,相对于浏览器窗口进行定位. 元素的位置通过 "left", "top", "right" 以及 "bottom&

【总结整理】display与position之间的关系【较完整】（转）

display与position之间的关系以防自己忘记写的网上找的 positon 与 display 的相互关系元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式,例如:width | height. relative : 原来是什么类型的依旧是什么类型. absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位 <span style=”position:a

display与position之间的关系

以防自己忘记写的网上找的 positon 与 display 的相互关系元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式,例如:width | height. relative : 原来是什么类型的依旧是什么类型. absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位 <span style=”position:absolute; width:100px; he

position影响到浮动

热门专题