2009.12.21(3)——css+div布局一
今天谢让我看css+div
1.float和clear的用法
首先,必须要明白两件事:
1 .浏览器事按照HTML代码中对象声明的先后顺序,以流布局的方式来显示对象的.
2.HTML中的所有对象几乎都默认分为两种: block对象和in-line对象. 其中, block默认的显示状态是
占据整行; in-line对象则相反,允许其他对象与它在一行中显示. 例如两个div之间,在使用float之后,两
个div显示在同一行.但是span则不然,即使不使用float,仍然在同一行显示。
float属性, 它的作用就是改变block对象的默认显示方式. block对象设置了float属性之后,它将不再独自占
据一行
而clear在什么时候用呢?
当属性设置float(浮动)时,它所在的物理位置已经脱离文档流了,但是大多时候我们希望文档流
能识别float(浮动),或者是希望float(浮动)后面的元素不被float(浮动)所影响,这个时候我们就需
要用clear:both;来清除,如果不用它,后面的元素还是会在同一行出现的
clear:both;
作用:该属性的值指出了不允许有浮动对象的边。
这个属性是用来控制float属性在文档流的物理位置的。
用CSS的float和clear创建三栏液态布局的方法三栏布局是目前最常见的网页布局,下面介绍一种用CSS的
float和clear属性来获得三栏液态布局”(它可以根据用户浏览器窗口宽度自动伸缩)的方法。
基本方法
基本的布局包含五个div,即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度
的,并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽,中栏的内容在
左、右两栏之间“流淌”。由于中栏div的宽度并不固定,因此它可以根据浏览器窗口的改变进行必要的伸缩
。中栏div的左侧和右侧的填充(padding)属性保证内容安排在一个整齐的栏中,甚至当它伸展到边栏(左
栏或者右栏)的底端也是这样。
例子如下
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="left">
Port side text...
</div>
<div id="right">
Starboard side text...
</div>
<div id="middle">
Middle column text...
</div>
<div id="footer">
Footer text...
</div>
</body>
下面是CSS代码:
body {
margin: 0px;
padding: 0px;
}
div#header {
clear: both;
height: 50px;
background-color: aqua;
padding: 1px;
}
div#left {
float: left;
width: 150px;
background-color: red;
}
div#right {
float: right;
width: 150px;
background-color: green;
}
div#middle {
padding: 0px 160px 5px 160px;
margin: 0px;
background-color: silver;
}
div#footer {
clear: both;
background-color: yellow;
}
代码说明
HTML代码中各部分出现的顺序是非常重要的。左栏和右栏div必须在中栏之前出现。这样才可以让这两个
边栏浮动到它们的位置上(屏幕两侧),并让中栏的内容将“流”入它们之间的空间。如果浏览器在一个或
者两个边栏div之前先发现中栏,那么中栏将占据屏幕的一侧或者两侧,这样浮动的部分就会跑到中栏的下面
而不是中栏的旁边了。
div#header和div#footer样式(style)中的clear:both申明用来确保这浮动部分不会占据标题和页脚的空间
。div#header样式中的padding:1px申明用来消除页头背景色中的异常边,如果padding设置为零,那么在
Netscape浏览器中就会看到这个异常。
div#left样式中的float:left申明是用来把左栏挤压到左侧。width:150px申明用来设置栏的固定宽度,不过
你也可以把它的宽度设置为其它具体值。类似的,div#right样式中的float:right申明用来把右栏div挤压到
右侧。在本例中,float把左栏和右栏完全挤压到浏览器窗口的左边缘和右边缘。然而,如果这些div被其它
div包含,那么float将会把它们挤压到包含它们的div的边缘。
在div#middle样式中,clear申明允许中栏的内容“流淌”在两个边栏之间。padding:0px 160px 5px 160px
申明设置了到左栏和右栏的填充,这样允许150象素宽度的栏div,在加上10象素的间距。
这个例子非常粗糙和简单,但是它很好的演示了用浮动div来创建三栏液态布局的边栏这一基本技术。
float注意:
注意1:理论上,我们可以控制源文件上的任意元素的浮动,但由于IE浏览器的BUG,要浮动层需要首先出现
在源文件上
注意2:浮动层是必须设置宽度(width)才能正常浮动的
注意3:float控制的是文本流方向,当为层设置了“position:absolute;”后,float将不再有效,应为此时
层已经脱离该文本流。
2.margin的用法
margin-right: 200px;
无负号时表示元素与右边框之间滴距离是 200px;
margin-right:-200px;
有负号时表示与右边框之间滴距离是 -200px,即 右侧滴对象向左移动 200px
3.padding的用法及和margin的区别
padding 向内补白 在这个div内部多出来多少px
margin 向外补白 在这个div外部多出来多少px
margin是对外元素的距离(外补丁),而padding是对内元素的距离(内补丁)。
如果有一点Html基础的话,就应该了解一些基本元素(Element), 如p, h1~h6, br, div, li, ul, img等. 如
果将这些元素细分,又可以分别归为顶级(top-level)元素,块级(block-level)元素和内联(inline)元素.
1.Block-level element: 指能够独立存在, 一般的块级元素之间以换行(如一个段落结束后另起一行)分隔.
常用的块级元素包括: p, h1~h6, div, ul等; 2. Inline element: 指依附其他块级元素存在,紧接于被联元
素之间显示, 而不换行. 常用的内联元素包括: img, span, li, br等; 3. Top-levelelement: 包括html,
body, frameset, 表现如Block-level element, 属于高级块级元素.块级元素是构成一个html的主要和关键
元素, 而任意一个块级元素均可以用Box model来解释说明. Box Model:任意一个块级元素均由content(内容
), padding, background(包括背景颜色和图片), border(边框),margin五个部分组成,如"margin和
padding.jpg"和"margin和padding2.jpg"
何时应当使用margin
1.需要在border外侧添加空白时。
2.空白处不需要背景(色)时。
3.上下相连的两个盒子之间的空白,需要相互抵消时。如15px + 20px的margin,将得到20px的空白。
何时应当时用padding
1.需要在border内测添加空白时。
2.空白处需要背景(色)时。
3.上下相连的两个盒子之间的空白,希望等于两者之和时。如15px + 20px的padding,将得到35px的空白。
Margin的合并
Margin有一个很有趣的特性,
在垂直方向,两个盒子相连的margin会自动合并,也就是上面一个盒子的
margin-bottom和下一个盒子的margin-top会合并,合并后的margin为两个原始margin中较大的一个,
之所以有这个的设计,可能是源自文字段落的天然特性, 两段文字的margin如果不合并,就会导致段落间距
过大,不美观。这个合并特性给使用margin来做精确定位带来了一些不可预知性 ,我刚开始用margin时总是
被弄糊涂,不过水平方向的margin是没有这个合并的,还有padding也是不会合并的(无论水平还是垂直),
这是margin和padding的一个很大的区别。
4.position的用法
position属性有五个取值,分别为:static, relative, absolute, fixed, inherit, 其中“static”为默
认值。
position:static
该值为position的默认值,可以省略不写,当position取值为static或者没有设置position属性的时候,
div的显示方式为按文本流的顺序从上至下,或者从左到右顺序显示。
position:relative
最初位置也就是当position取值为static时的位置,也就是说这里的相对定位是相对于它在正常情况下的默
认位置的。
注意:
A:设置了position:relative而不设置left,top等属性的时候,层显示的位置和不设置position属性或者
position值取static时一样。
B:当一个层设置了position:relative,而且使得层位置产生相对偏移时,并不影响文本流中接下来的其他层
的位置。
C:position:relative有防止重叠的作用,当设置了position:relative,层的层叠级别高于默认的文本流级
别。当然了,如果都设置了position:relative,同等级别下将会按照文本流的顺序层叠显示。
position:absolute
当我们设置position的值为static或者relative时,层依然存在于文本流中,也就是不管位置是否偏移,文
本流中依然为它保留了该有的位置,即使原来位置上没有东西,已经发生偏移了,但是仍然会留下原来那个位
置。但当层设置了position:absolute并产生偏移(设置了top,left等值)时,该层将完全从文本流中脱离。
一般会以父容器的坐标原点为参考点进行偏移,如果父容器没有设置position属性或position值为static时
,将以body的坐标原点为参考
另,top,right,bottom,left,这四个属性在设置了position属性,并且值不为static时生效。当position取
值relative时,偏离文本流初始位置;当position取值absolute时,以父容器对应的初始点为原点偏移,如
果父容器没有设置positon或者position取值static时,以body对应的坐标点为参考点偏移。
top,right,bottom,left属性的取值除了具体的数值外,还可以是百分比、继承、或者auto(默认值)。
5.去掉下划线
#footer a {
color: #c9c9c9;
text-decoration: none;/*让下划线消失*/
}
6.鼠标放上去变色
/*
鼠标放上去变色
*/
#footer a:hover {
color: #db6d16;
}
- 大小: 67.6 KB
- 大小: 18.5 KB
分享到:
相关推荐
2层设计-2.4G RF高频信号收发模块硬件(cadence原理图+PADS PCB图+BOM)文件,可供学习及设计参考。
FTP(File Transfer Protocol)是文件传输协议的简称。 FTP的主要作用,就是让用户连接上一个远程计算机(这些计算机上运行着FTP服务器程序)查看远程计算机有哪些文件,然后把文件从远程计算机上拷到本地计算机,或把本地计算机的文件送到远程计算机去。 目前FTP服务器软件都为国外作品,例如Server_U、IIS,国内成熟的FTP服务器软件很少,有一些如(Crob FTP Server),但从功能上看来远不能和那些流行的服务器软件媲美。
语音端点检测及其在Matlab中的实现.zip
Matlab 交互式多模型目标跟踪IMM.zip
numpynumpy试题(2021年整理精品文档).zip
【作品名称】:基于Python+Django城市PM2.5空气质量数据可视化分析系统 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】: Python基于Django城市PM2.5空气质量数据可视化分析 开发软件:Pycharm + Python3.7 + Django + Echarts + Mysql 实现目标:利用已经收集各个城市包括北京、上海、广州、成都、沈阳的PM2.5空气数据,利用python进行各种数据分析,将分析结果保存到csv文件中,然后利用django框架的网站,前端采用echart对分析的结果进行图表可视化展示。
c#实现求解白拉修斯方程。程序使用文件流,四阶龙哥库塔法
单片机3.DSN
NumPy 的用途是什么
Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)Java游戏设计打飞机程序(源代码+LW)
Java项目之企业人事工资管理系统(源码) 开发语言:Java 框架:ssm 技术:JSP JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7(一定要5.7版本) 数据库工具:Navicat11 开发软件:eclipse/myeclipse/idea Maven包:Maven3.3.9
vb.net做的教务管理系统 功能完善 后台数据库使用的acce.zip
Nvidia 17.1最新win10&Win11 vGPU驱动 名称:551.78_grid_win10_win11_server2022_dch_64bit_internationa
协同过滤算法(Collaborative Filtering)是一种经典的推荐算法,其基本原理是“协同大家的反馈、评价和意见,一起对海量的信息进行过滤,从中筛选出用户可能感兴趣的信息”。它主要依赖于用户和物品之间的行为关系进行推荐。 协同过滤算法主要分为两类: 基于物品的协同过滤算法:给用户推荐与他之前喜欢的物品相似的物品。 基于用户的协同过滤算法:给用户推荐与他兴趣相似的用户喜欢的物品。 协同过滤算法的优点包括: 无需事先对商品或用户进行分类或标注,适用于各种类型的数据。 算法简单易懂,容易实现和部署。 推荐结果准确性较高,能够为用户提供个性化的推荐服务。 然而,协同过滤算法也存在一些缺点: 对数据量和数据质量要求较高,需要大量的历史数据和较高的数据质量。 容易受到“冷启动”问题的影响,即对新用户或新商品的推荐效果较差。 存在“同质化”问题,即推荐结果容易出现重复或相似的情况。 协同过滤算法在多个场景中有广泛的应用,如电商推荐系统、社交网络推荐和视频推荐系统等。在这些场景中,协同过滤算法可以根据用户的历史行为数据,推荐与用户兴趣相似的商品、用户或内容,从而提高用户的购买转化率、活跃度和社交体验。 未来,协同过滤算法的发展方向可能是结合其他推荐算法形成混合推荐系统,以充分发挥各算法的优势。
参考文献: [1]李明轩,齐步洋,贺大玮.工业园区需求响应资源聚合优化配置方法[J].电网技术,2022,46(09):3543-3549.DOI:10.13335/j.1000-3673.pst.2021.1666. 1.摘要 需求响应资源数量的不断提升对响应资源的优化运行方法提出了更高的要求。面向工业园区内负荷聚合商开展日内需求响应的应用场景,提出了一种资源聚合优化配置方法,即在日前时段对响应资源预先聚合优化形成一定数量满足 特定条件的聚合体,再在日内运行时段对各聚合体进行优化调用以满足电网侧需求。该方法实现对数量庞大、分散存在、特性各异的资源的灵活聚合和优化配置,充分发挥各资源响应潜力和互补特性,并通过将大量求解计算从日内转移至日前时段,平衡了响应实时性要求与计算规模的矛盾。通过算例分析验证了所提模型与方法的合理性和有效性。
毕业设计[主机域名]HostDirector v1.01_hostdirector101.zip
基于MATLAB的pca人脸识别.zip
Qt+OpenCV通用视觉框架全套源码.zip.008
JAVA002打飞机游戏设计(程序+LW)JAVA002打飞机游戏设计(程序+LW)JAVA002打飞机游戏设计(程序+LW)JAVA002打飞机游戏设计(程序+LW)JAVA002打飞机游戏设计(程序+LW)JAVA002打飞机游戏设计(程序+LW)JAVA002打飞机游戏设计(程序+LW)JAVA002打飞机游戏设计(程序+LW)JAVA002打飞机游戏设计(程序+LW)JAVA002打飞机游戏设计(程序+LW)JAVA002打飞机游戏设计(程序+LW)JAVA002打飞机游戏设计(程序+LW)JAVA002打飞机游戏设计(程序+LW)JAVA002打飞机游戏设计(程序+LW)JAVA002打飞机游戏设计(程序+LW)
在信息社会中,手机及其他无线设备越来越多的走进普通百姓的工作和生活,随着信息网络化的不断进展,手机及其他无线设备上网络势在必行。但是传统手机存在以下弊端: 1. 传统手机出厂时均由硬件厂商固化程序,程序不能增加、删除,有了错误也不能更新、修改,若要增加新功能必须另换一部手机。 2. 传统手机访问互联网是通过WAP(Wireless Application Protocal),所有网络资源必须接通网络才能在线访问,非常耗时、费用亦很高。