css浮动布局

上次我们一起对盒子模型进行了一定的了解,今天我们就对css浮动布局做一下研究.首先我们来了解一下网页基本布局的三种形式. 首先我们来了解一下什么是网页布局: 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的网页基本布局主要有三种形式:一是标准流,而是浮动流,三是定位流. 标准流(文档流/普通流)排版方式其实浏览器默认的排版方式就是标准流的排版方式在CSS中将元素分为2大类, 分别是块级元素/行内元素还有一类是行内块级元素,它本质上是行内元素,不会占据一行,但又具有块级元素的属…

CSS浮动布局与菜单栏设计

公司周六停电,终于可以双休了.用周五空余时间再夯实一下css基础,<CSS权威指南>概念性的内容看起来容易犯困,不如实践来得快,动手操作吧. 一.浮动布局浮动存在问题:浮动使元素脱离文档流,导致下面的元素向上提. 布局存在问题:由于浮动元素宽度已设定,根据盒模型,对于有宽度的盒子添加padding border和magin导致盒子变大,从而挤出后面浮动元素,导致下移,称作"浮动移滑". 围住浮动元素的三种方法: 1为父元素添加 overflow:hidden 强制包…

css浮动布局，浮动原理，清除(闭合)浮动方法

css浮动 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成:使用css属性float:left/right/none 左浮动/右浮动/不浮动(默认) 4.浮动的影响: 不会影响未浮动的块级元素布局,但是会影响内联元素的布局浮动后的元素可以设置宽度和高度,…

Css - 浮动布局

Css - 浮动布局浮动布局 float 取值:left | right | none 利用float属性可设置元素的浮动,虽然浮动主要是应用于块元素,但行内元素其实也可以浮动,但行内元素本来就是一行显示,所以没有这个必要 1.一旦元素浮动,则它会脱离标准文档流,它会悬在它原来的位置上面,也即它原来占据的位置被腾空.比如:两个兄弟div,A在前,B在后,当A向左浮动后,B就会占据A的位置,但由于A悬浮在B上面,所以会看不到B,看起来就是两个盒子在一个位置.但是如果它下面的元素是行内/行内块元素…

CSS浮动布局带来的高度塌陷以及其解决办法

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .outer{ 8 border:10px red solid; 9 } 10 .inner{ 11 width:100px; 12 height:100px; 13 backgrou…

css浮动布局小技巧

父元素如何围住浮动的子元素的三种办法: 一.为父元素应用overflow:hidden. overflow真正用途是防止包含元素被大的内容撑开,设定了宽度之后,包含元素将超过容器的内容减掉:而它还有另外一个作用就是迫使父元素包含其浮动的子元素. 二.同时浮动父元素. 三.添加非浮动的元素并清除它. 这里又有二种办法来清除元素: 第一种方法是加个空的div容器,由于没有往其添加内容,所以不会引入多余空间,然后使用clear属性清除他,我们知道包含元素一定会包围非浮动的子元素, 当我们添加一个div…

css 浮动布局，清除浮动

浮动的特性: (1)浮动元素有左浮动(float:left)和右浮动(float:right)两种 (2)浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 (3)相邻浮动的块元素可以并在一起,超出父级宽度就换行 (4)浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) (5)浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,开成文字绕图的效果 (6)父元素如果没有设置尺寸(一般是高度不设置),父元素内整体浮动的元素无法撑开…

div css float布局用法

float的应用与用法想要知道float的用法,首先你要知道float在网页中的用处. 浮动的目的就是为了使得设置的对象脱离标准文档流. 什么是标准文档流? 网页在解析的时候,遵循于从上向下,从左向右的一个顺序,而这个顺序就是来源于标准文档流. 也就是说,为了使元素能够脱离元素特性的控制--即块级元素可以并排显示,且不设定宽度就不会占满父元素宽度的百分之百:而行内元素可以设置宽高,并且可以并排显示. 这就是所谓的脱离了标准文档流. float浮动用于设置对象靠左或靠右浮动样式,可实现我们所需要…

前端开发：css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局前言楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题浮动是什么东西? 为什么这个浮动没有效果? 这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^ 下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们…

html/css 盒子布局 Margin 、Padding 、border 以及清除浮动的知识（学习HTML过程中的小记录）

html/css 盒子布局 Margin .Padding .border 以及清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽度"的意思,CSS中width指的是内容的宽度,而不是盒子的宽度. Height 是"高度"的意思,CSS中height指的是内容的高度,而不是盒子的高度 Padding 是"内边距"的意思 Border 是"边框" Marg…

html5 css练习浮动布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮动布局</title> <link rel="stylesheet" type="text/css" href="st1.css"></head><bo…

CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）

css之浮动布局本人博客:查看文章 1.什么是浮动:在我们布局的时用到的一种技术,能够方便我们进行布局,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置 2.浮动的原理:使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成:使用css属性float:left/right/none 左浮动/右浮动/不浮动(默认) 4.浮动的影响: 对附近的元素布局造成改变,使得布局混乱浮动后的元素可以设…

认识CSS中布局之文档流、浮动、定位以及叠放次序

前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流普通流又被称为文档流或者标准流,普通流是指网页内标签元素正常情况下会按照自上而下,自左向右按顺序排列.即块级元素独占一行,多个块级元素存在会自上而下顺序排列,多个行内元素会共占一行,自左向右排列. <!DOCTYPE html> <html> <head> <meta c…

float浮动布局（慕课网CSS笔记 + css核心技术详解第四章）

---------------------------------------------------------------------- CSS中的position: CSS三种布局方式: 标准流:网页中默认的布局方式,即顺序布局.html元素可以分为两大类:块级元素(div,h1…h6,ol,ul,li,table,p段落等)和内联元素(a超链接,span文字,img图片,input控件).块级元素总是独占一行,内联元素是和相邻的内联元素在同一行,如果一行内宽度不够时,才被挤到另一行上去.…

css盒子布局,浮动布局以及显影与简单的动画

08.05自我总结一.盒子布局 1.盒子布局的组成 margin border padding content 2.margin margin是外边距,控制盒子的显示位置相对于他的上一级 left.top控制自身,right.bottom影响兄弟 3.border 宽度:border-width 颜色:border-color 透明度:transparent 样式:border-style: 常用的样式 none:没有边框 solid:实线 dashed虚线 dotted点或者方框根据浏览器不…

CSS之浮动布局及相关问题

CSS之浮动布局及相关问题 1.什么是浮动: 在我们布局的时候用到的一种技术,能够方便我们进行布局,默认流动布局有不足,让块元素可以并排显示,通过让元素浮动,我们可以使元素在水平上左右移动,再通过margin属性调整位置. 2.浮动的原理; 使当前元素脱离普通流,相当于浮动起来一样,浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动的边缘 3.浮动的生成: 使用css属性 float:left/right/none左浮动/右浮动/不浮动(默认) 4…

CSS浮动、定位

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

这可能是史上最全的CSS自适应布局总结教程

标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关的盒子模型,普通流.浮动.绝对定位三种定位机制,CSS3中的transform.弹性盒子模块.试验中的grid模块.逛园子的时候经常可以看到浮动布局,inline-block布局,弹性盒布局这几个名词.现在对布局也算有一点了解,做个总结巩固一下.如果你也看了很多资料,但是实际动手时对布局还是无从下手…

奇妙的CSS之布局与定位

前言关于布局与定位是Web前端开发里非常基础而又重要的部分.介绍相关知识的文章,很容易就可以找到.虽然,这方面的知识点不是很多,但我们如果不弄清楚,在运用时候往往会出现预料之外的布局,这些“意外”有时候很令人苦恼.下面根据我的学习和编程经验来谈一下这方面的要点. 要想完美的实现自己的布局,那首先一定要把盒模型搞清楚.盒模型由内容区.内边距(padding).边框(border)和外边距(margin)构成.这些属性值都是可选的,相互之间没有依赖关系,但在具体的布局时会需要设置某些属性.我们平时…

CSS网页布局全精通

在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则稍后在"技巧延伸"中,将会讨论Windows版Internet Explorer 5.0盒模型的问题,以及绕过它的方法.也将分享一个以CSS达成等宽栏位的简单秘密. 要如何以CSS作出两栏版面布局? 答案是有好几种方法,为了带领你起步,同时帮助你了解两种常见方法的差异(浮动与定位),因此先把焦点放在四种不同的…

第 27 章 CSS 传统布局[上]

学习要点: 1.布局模型 2.表格布局 3.浮动布局主讲教师:李炎恢本章主要探讨 HTML5 中 CSS 早期所使用的传统布局,很多情况下,这些布局方式还是非常有用的. 一．布局模型在早期没有平板和智能手机等移动设备大行其道的时期,Web 页面的设计主要是面向 PC 端电脑分辨率展开的.这种分辨率比例比较单一,基本上只要满足最低分辨率设计即可.一般来说有 4:3.16:10.16:9 这样的主要分辨率.那么,从这种比例上来看,长度总是大于宽度的.从最低分辨率 1024 * 768 设计即可…

css浮动

一.浮动介绍历史: 浮动属性产生之初是为了实现“文字环绕”的效果,让文字环绕图片在网页实现类似word中“图文混排”. 定位方式: 浮动让元素脱离正常流,向父容器的左边或右边移动直到碰到包含容器的边[经测试碰到padding即停]或者碰到其他浮动元素.文本和行内元素将环绕浮动元素. Note: 1.碰到容器的边指的是容器的padding内边. 举例验证: <style> .container{ border: 1px solid green; padding: 30px; backgroun…

《精通CSS网页布局》读书报告 ----2016-12-5补充

第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦! (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联-->内部-->外部 5.导入css样式表: <link href="" rel="stylesheet"> <style> @import url("001.css") </style> 6.css用相…

用css进行布局

用css进行布局一,开始布局的注意事项 1.作为最佳实践,应把html(内容)和css(显示)分离: 2.网站设计主要有两大类型:固定宽度(基于像素)和响应式(也称流式,使用百分数定义) 二,构建页面 !!高效网页的核心是结构良好,语义化的HTML. 1.恰当的使用article.aside.nav.section.header.footer.和div等元素将页面分成不同的逻辑块,并对他们使用ARIR地标角色.如以下代码: <article class="about">…

带你熟悉CSS浮动

一.概念理解浮动:顾名思义先浮后动,浮动的对象会先漂浮起来,离开自己原来的位置(也就是所谓的脱离文档流),后动的意思是,它的后面的元素会向它原来的位置动起来. 二.注意事项 1.当元素有浮动属性时,会对其父元素或后面的元素产生影响,会出现一个布局错乱的现象.(我们可以通过清除浮动的方式进行解决这个问题) 2.当父元素没有指定高度并且子元素有浮动时,这个父元素的高度不会自动增加. 3.清除浮动:就是可以去掉前面对象的浮动对后面对象的印象,是加给未浮动元素的. 语法:clear:none(默认值,…

css 浮动

1. 浮动浮动是css的布局功能,在CSS中,包括div在内的任何元素都可以浮动的方式显示.它能够改变页面中对象的前后流动顺序.浮动元素会脱离文档流,不占据空间.浮动元素可以左右移动,直到碰到包含它的边框或者浮动元素的边框停留. 2. 浮动可能带来的问题父元素的高度无法撑开,影响与父元素同级的元素:与浮动元素同级的非浮动元素会紧跟其后,可能导致看不到非浮动元素的情况:浮动元素可能会影响到页面的整理布局效果 3. 清除浮动影响的方法 (1)使用空标签清除浮动在所有浮动标签后面添加一个空标签,…

css浮动（folat），清除浮动（clear）（另加两种清除浮动方式，总共三种清除浮动方式）

css浮动(float) float是css样式,用于设置标签的居左浮动和居右浮动,浮动后的元素不属于html文档流,需要用清除浮动把文档拽回到文档流中浮动值: left:向左浮动 right:向右浮动 html文档流:自窗体自上而下分成一行一行,并在没行中从左到右的顺序排放元素. 通过例子来解释浮动 1.页面上有两个块元素,每个块元素独占一行 2.我们希望他们能并排显示,这是就可以使用float,我们先给红色的div加float:left,发现两个是在一行了,但是他们重叠在了一起. 3.这是…

CSS常用布局整理（二）

1-2-1单列变宽布局 side列定宽300px,content列变宽,尺寸是100%-300px.核心的问题就是浮动列的宽度应该等于“100% - 300px”,而CSS显然不支持这种带有减法运算的宽度表达方法.但是通过margin可以变通的实现这个宽度.实现的原理为,在content外面再套一个div,即图中的contentWrap,使它的宽度为100%,也就是等于container的宽度.然后通过将其margin-left设置为-300px,就使它向左平移了300px.再将content的…

CSS+DIV布局初练—DIV元素必须成对出现？

一直做C/S开发的工作,但是很少做和布局相关的工作,往往都是同事将界面设计好,自己填写代码而已,对于B/S的工作,做过,但是很少没有像C/S这么多,界面布局的话,更无从谈起. 日子就这么过,一天一个样字,时间多了自己写博客,写心得,时间紧张了,要么转载别人的,要么干脆就不写了,这种心情不知道大家能理解不?今天心血来潮,决定自己尝试一下这个传说中的CSS,其实做布局首先是要分块,将界面分为自己想要的几个部分,在Winform中,一般都是通过panel+doc属性搞定,如果仔细想想,其实这个pane…

总结与学习DIV+CSS网页布局技巧

以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> #layout { width:778px; margin:0 auto; text-align:center;} </style> <div id="layout">QLJ标准之路www.aa25.cn</div> 宽度为适合800×600分辨率浏览…

【css浮动布局】的更多相关文章