float布局网页原理

2024-10-03

网页布局——float浮动布局

我的主要参考资料是[Object object]的文章 float 布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂,这里详细讲一下首先,什么是浮动? 浮动元素是脱离文档流的,但不脱离文本流,这是什么意思呢,用过 word 的应该知道有一种图片环绕的方式是文字环绕吧,就是这种效果. 浮动布局的兼容性比较好,但是浮动带来的影响比较多,页面宽度不够的时候会影响布局. 例举一个标准的浮动: <style type="text/css"> .wrap1{max-wi

CSS布局：Float布局过程与老生常谈的三栏布局

原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为首页上的内容往往可以完全控制.后者适合布局模板,模板中填充的内容你没法控制——比如,在编辑wordpress模板时,你肯定没法考虑每篇博文的长度.这篇博文,就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,但我觉得都没说到点子

一、HTML和CSS基础--网页布局--网页布局基础

W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的定位机制有三种,分别是标准文档流.浮动及绝对定位. 标准文档流特点:从上到下,从左到右,输出文档内容,由块级元素和行级元素组成块级元素:从左到右撑满页面,独占一行,碰到页面边缘时会自动换行常见的块级元素:div ul li dl dt p... 行级元素:能在同一行内显示,不会改变HTML文档

转：CSS布局：Float布局过程与老生常谈的三栏布局

使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为首页上的内容往往可以完全控制.后者适合布局模板,模板中填充的内容你没法控制——比如,在编辑wordpress模板时,你肯定没法考虑每篇博文的长度.这篇博文,就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,但我觉得都没说到点子上.那就来老生常谈一次吧,CSS之

div css float布局用法

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

line-block代替float布局；

line-block代替float布局: 我们先看看float的一些特性(特征) 当我们改变浏览器的大小会出现这样的效果: 或则这样: 有时候,我们希望,以第一排最高的元素为换行基准时,我们就可以使用display:inline-block属性了滴呀效果图不能发现上图中有一个bug,那就是每个元素之间都有空白,解决方法:已经在我们另外一篇博客中记录了这样的布局算是完成了,接下来,我们看如何实现两端对齐的效果滴啊具体应用实例一(text-align:center) css .contain

SEO为什么要求网页设计师用DIV+CSS布局网页?

问:SEO为什么要求网页设计师用DIV+CSS布局网页? 答:通常情况下,SEOer非常喜欢把一个网站做到最细节,在网页设计方面,有时与设计师沟通时,通常会问到:SEO为什么要求网页设计师用DIV+CSS布局网页?有什么好处之类的问题,其实SEO们考虑的问题就是如何让网页的内容更好的让搜索引擎抓取网页的内容,更容易评估网页内容的质量,这样有利于排名.这是SEO们的最基本的目的,当然CSS+DIV的好处并不局限于此,以下为详细的分析: SEO主要就是通过对网站的结构,标签,排版等各方面的优化,使G

移动端开发rem布局之less+媒体查询布局的原理步骤和心得

rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小的动态适配,做出更漂亮整洁的页面rem布局的好处:1.页面整洁2.动态适配缺点:1.需要计算rem,但可以通过自动转化单位插件弥补 less:是一门css扩展语言,也成为css预处理器,引入了变量,mixin(混入).运算以及函数等功能css弊端:1.冗余度高 2.维护成本高 3.没有很好的计算能力

float布局打破标准流,神助攻clear清浮动

布局是什么?根据功能划分小块,再根据设计稿还原,书写静态页面,然后再在块里面填充内容,完善功能,js施加交互效果.div作为一个容器,独占一行,代码书写习惯从上至下属于标准流,而浮动float的css样式则打破div(标准流)独占一行的传统!具体代码展示如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name=&qu

采用 DIV+CSS 布局网页练习

实验四:采用 DIV+CSS 布局网页练习实验目的: 熟悉 DIV+CSS 布局网页的方法实验要求: 1.制作一个完整网页和一个 css 文件: 2.在网页中采用 DIV+CSS 布局 4 个以上区域: 3.网页中应包括图片和文本内容: 4.网页主题突出.布局合理.设计美观. 设计详情: 1.关联 css 2.简单文字显示,利用简单 css 对其样式调整. 3.设置 div 布局 m1--上两个框,m2--下两个框.m1 包括div=mp3,mp4,m2 包括 div=m2-left/r

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

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

【深入BFC】关于CSS中float布局，清除浮动，和margin合并的原理解析，解开你心中的那些困惑！

BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. 简单来讲,我们可以把它理解为,我们在进行盒模型布局的时候,如果一个元素符合了成为BFC的条件,该元素成为一个隔离了的独立容器,元素内部元素会垂直的沿着其父元素的边框排列,和外部元素互不影响 .比如浮动元素会触发BFC,浮动元素内部的子元素主要受到该浮动元素的影响,而两个浮动元素之间是互不影响的. 在

Bootstrap 框架栅格布局系统设计原理

如果你是初次接触Bootstrap,你一定会为它的栅格布局感到敬佩.事实上,这个布局系统提供了一套响应式的布局解决方案. 既然这么好用,那他是如何用CSS来实现的呢? 我特意去Bootstrap官方下载了源代码进行分析了一番,看完之后果然有了收获,不过我只看了栅格布局的那块代码,其实也很简单,不必担心不懂,你只需要要基础的CSS知识即可. 前提条件(Bootstrap 自带) 首先使用这个布局之前要定义一下代码: 这行代码如果不懂,可以搜索一下,总之大致意思就是,被定义的元素的内边距和边框不再会

一、HTML和CSS基础--网页布局--网页简单布局之结构与表现原则

结构.表现和行为分离,不仅是一项技术,更主要的是一种思想,当我们拿到一个网页时,先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式.,减少HTML与CSS耦合度. 案例一:微博对话框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

【Bootstrap】框架栅格布局系统设计原理

前提条件(Bootstrap 自带) 首先使用这个布局之前要定义一下代码: 这行代码如果不懂,可以搜索一下,总之大致意思就是,被定义的元素的内边距和边框不再会增加它的宽度,不加入的话排版会有问题. 不过,Bootstrap自己当然已经加入了,如果你是使用整个Bootstrap框架,那你可以无视这里,只是让你明白需要一个这个. 我是将Bootstrap框架里面的布局代码分割出来,形成一个小体积的仅有css文件的小框架(下载地址见最后),以后写单页小网站方便用. * { -webkit-box-si

关于CSS三列Float布局任务

任务目标掌握HTML/CSS布局的概念掌握盒模型的概念掌握position与float的概念以及在布局时的用法任务描述使用 HTML 与 CSS 按照示意图;实现三栏式布局. 左右两栏宽度固定,中间一栏根据父元素宽度填充满,最外面的框应理解为浏览器.背景色为 #eee 区域的高度取决于三个子元素中最高的高度. 任务注意事项尝试 position 和 float 的效果,思考它们的异同和应用场景. 改变中间一栏的内容长度,以确保在中间一栏较高和右边一栏较高时,父元素的高度始终为子元素中

inline-block和float 布局的选择

浮动通常表现正常,但有时候搞起来会很纠结.特别是处理内部容器中的浮动,比如对一排图片使用浮动后对齐出现问题.Inline-block是我们的另一种选择.使用这种属性可以模拟部分浮动的特征,而不需要处理一些浮动带来的问题. Inline-block 用在展示一系列照片的需求,用inline-block代替了浮动. Inline-block : 同时兼有行内 ,,块级两个特征.如下: 块级元素(block elements) 块级元素包含width height,padding,border

sticky footer 和 flex布局的原理

Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送. 一.使用flex布局这种方法就是利用flex布局对视窗高度进行分割.footer的flex设为0,这样footer获得其固有的高度;content的flex设为1,这样它会充满除去footer的其他部分. <div class="box"> <div class="co

CSS：CSS+DIV布局网页

现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS. CSS盒模型: 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性. CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)

十、一行多个：使用float布局的经典方法 ---接（一）

1.使用float必须要清除float:即在使用float元素的父级元素上清除float. 清除float的方法有三种,在父元素上加:1.width: 100% 或者固定宽度 +overflow:hidden;或者 overflow: auto; 2.clear:both 3.(推荐)在父级元素上增加伪类

布局方式-float布局

float的特性一 .元素‘浮动’ .脱离文档流 .但不脱离文本流首先看一个案例,直观的了解下float的特性 <style> .container{ background: red; width: 400px; } .p1{ background: green; float: left; width: 200px; height: 50px; } </style> <body> <div class="container"> <

float布局网页原理

热门专题