布局（一）——流体浮动三列布局

最新推荐文章于 2022-03-26 19:28:11 发布
最新推荐文章于 2022-03-26 19:28:11 发布
阅读量893 收藏
点赞数
分类专栏： xhtml css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mmrsdym/article/details/20292965
版权
本文介绍了跟随李炎恢老师视频教程学习的流体浮动布局，特别是三列布局的实现。讨论了流体浮动布局的特点和应用场景，包括布局的四种类型：流体浮动、流体定位、固定浮动和固定定位。详细讲解了三列布局的实践代码，涉及布局的宽度百分比设置、浮动清除、元素居中等关键点，适用于不同大小的浏览器。
摘要由CSDN通过智能技术生成
  今天看李炎恢老师的视频教程，学习了流体浮动布局，跟着教程写了 流体浮动三列布局的代码，其中有一些自己的理解，总结一下，便于自己以后查看。
    根据李炎恢老师总结的4种布局，分为：
    1.流体浮动布局
    2. 流体定位布局
    3. 固定浮动布局
    4. 固定定位布局

1. 流体浮动布局（可使不同大小的浏览器布满；缺点：易错位）
规格：当视窗变化时跟着变化  
采用：浮动布局
兼容：兼容当前主流浏览器

实践代码

html文件代码:

最低0.47元/天 解锁文章
MMRS
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
布局（一）——流体浮动布局
bigboy1010的博客
04-13 1413
记录一下自学过程中对布局的自我理解 一，流体布局 流体布局通俗的讲就像水上偏流的“盒子”一样，哪有缝隙往哪里流动，前提是缝隙放的下“盒子”的宽度，这里的“盒子”宽度用百分比表示，即：width：40%，（相对整个body的宽度），这也算是流体布局的一大优点，可以铺满屏幕 属性用到： float ：(为“盒子”添加浮动特性) 值 描述 left 元素向左浮动。 r...
CSS布局之流体浮动布局
liangde123的博客
07-17 3533
在CSS布局中经常使用的布局方式大值分为以下四种： 1、流体浮动布局 2、流体定位布局  3、固定浮动布局 4、固定定位布局 下面首先说下流体浮动布局; 假如我们要实现如下的布局情况： 则应该可以考虑采用流体浮动布局，其中CSS的样式如下： #header{ border:2px solid black; height:80px; back
弹性流体布局
weixin_34239592的博客
05-10 121
 原创：冰极峰    转载请注明出处     时间：2009年5月10日 0:12:03 蓝色论坛讨论贴：http://bbs.blueidea.com/thread-2927057-1-1.html 在我的另一篇文章《弹性+固宽布局》中，我介绍了弹性加最小固定宽度的一种布局方案，现在介绍另一种布局方案---弹性流体布局。 那种方案其实就是这种布局的变通应用。弹性布局最大的优...
[01]项目实战-移动端流体布局
weixin_34032827的博客
02-18 110
一．整体设计 首先，我们要了解一下测试工具。这里提供两种测试工具，一种是 Chrome 自带的移动端测试工具，另一种是 Opera Mobile 移动端测试工具。这里主要以 Chrome 为准，他模拟了主流的手机，并且引擎是webkit。 首先，我们介绍一下分辨率，通过 Chrome 移动端测试工具可以得知，一般分辨率最小的不会小于 320了，最大的不超过 640。这时有人会...
别具光芒——CSS属性、浏览器兼容与网页布局
03-17
"别具光芒——CSS属性、浏览器兼容与网页布局"这个主题涵盖了三个核心概念：CSS属性、浏览器兼容性和网页布局。 首先，我们来详细探讨CSS属性。CSS提供了无数的属性，如颜色、字体、大小、位置等，这些属性共同决定...
web前端开发第一阶段——bootstrap响应式布局
qq_43151638的博客
10-30 292
ps: 记熟class样式，可提高速度 其中js使用的jquery库 开发环境：程序员使用时 有空格有注释，有警告，有提示的代码 生产环境：用户直接使用时 压缩，没有警告，没有注释 bootstrap 容器：标签大小 固定容器：container 大屏1170、中屏970、小屏750、超小屏100% 流体容器：container-fluid 100% 栅格系统：通过一系列row和column...
CSS网站布局实录-基于Web标准的网站设计指南（第2版）
07-02
《CSS网站布局实录——基于Web标准的网站设计指南（第2版）》是一本深入探讨CSS（Cascading Style Sheets）技术在构建网站布局中的应用的专业书籍。由李超编著，它针对Web开发人员和设计师，提供了一个全面、实践性...
三列浮动布局的核心
洛神赋
07-29 249
/*三列定位布局*/ div#main { margin: 0 30% 0 20%; padding: 0px; } div#left { float: right; width: 25%; } div#right { float: left; width: 15%; } /*三列浮动布局*/ div#main{ margin: 0 ...
流体布局、响应式布局
weixin_34391854的博客
10-13 191
一、流体布局 流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值。流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。 <!DOCTYPE html> <html lang="zh-cn"> <head> <...
浮动方法实现三列布局的原理
yin_991的博客
01-28 1475
  方法1 浮动 &lt;style&gt; .float&gt;div{ height: 100px; } .float .left{ width: 300px; float: left; background: red; } .float .right{ width: 3...
运用流体布局的html代码,div+css布局之流体浮动布局_html/css_WEB-ITnose
weixin_36194102的博客
06-15 205
FloatLayout3Cols.htm流体浮动布局2这里是标题新闻杂志游戏音乐电影娱乐对于ASP.NET而言，开发人员不可避免的会将ASP.NET与ASP进行比较，因为ASP.NET可以算作是ASP的下一个版本。但是ASP.NET却与ASP完全不同，可以说微软重新将ASP进行编写和组织形成ASP.NET技术。在传统的ASP开发中，开发人员可以在页面中进行ASP代码的编写，当服务器请求相应的页面时...
CSS-float浮动与流体布局（2）
柒青衿的博客
12-11 2069
2 float特性 2.1 包裹性 未浮动： hi 效果： 浮动后： hi 效果： 结论：未设宽度的块级元素浮动后展示效果如果内联元素，会自动收缩包裹其内容。具有相同特性的css样式还有： display:inline-block/talbe-cell position:absolute/fixed overflow:hidden/scroll 2.2
流体布局FlowLayout
了吃好最子包
09-21 583
FlowLayoutView.javaimport android.content.Context; import android.util.AttributeSet; import android.view.View; import android.view.ViewGroup;import java.util.ArrayList; import java.util.List;/** * Cre
css学习8：浮动和流体布局
D_evin_的博客
09-13 349
浮动和流体布局 十七、浮动和文档流 1. 默认文档流 - 流就是文档布局的自身特性,而定位机制可能就会打破原有流的特性 - 默认文档流,画格子,内联和块级 - 内联元素，从左向右排列 - 块级元素，从上向下排列 2. 脱离文档流 文档一旦脱离文档流，不受文档流的布局约束了，在算其父元素的高度时，就不包括其自身了。以下属会导致元素脱离文档流： - float 浮动 - position 定位(绝对定位、固定定位) 2. 浮动 - 子...
CSS 流体布局
weixin_30877227的博客
05-09 208
流体布局设计随着用户对浏览器窗口的扩大或缩小而伸展或收缩。这种设计通常使用百分数。 优势 页面会伸展到整个浏览器窗口，所以即使在大屏幕上，页面的周围 也没有空白； 如果用户的窗口很小，页面就会收缩以适应窗口，而不必横向滚动； 即使用户设置的字体比设计人预设的更大，这种设计也可以适应（因为页面可以伸展）。 劣势 如果不对页面各个部分的宽度加以控制，那么页面设计会和预期的效果大...
css三列布局-float
HAINIHAOya的博客
03-26 341
css三列布局-float 使用浮动实现三列布局的注意点是浮动元素需要写在内容元素之前，否则布局是混乱的。这种方式实现三列布局是优点是简单、兼容性好，但缺点是需要清除浮动，否则父盒子的高度无法撑开，可能会导致其他页面元素的布局混乱。  首先给类名为"container"的盒子添加"overflow: hidden"属性，该属性可以使盒子成为BFC，处理浮动元素父盒子高度塌陷的问题。再给类名为"left"的盒子添加"float: left"和"width: 100px"两条属性，首先往左浮动，宽度这里设置1
[原创]float实现三列布局
04-02 347
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head>...
使用负边距创建自适应宽度流体布局
在本教程中，作者提到国外早在2004年就开始使用负边距创建自适应布局，而现在这一技术已经成为创建流体布局的常见方法。 对于不太复杂的网站，如论坛页面和博客，使用百分比布局可以很好地实现自适应效果。相比于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值