布局css

ComputerScienceandApplication计算机科学与应用,2019,9(3),531-538PublishedOnlineMarch2019inHans.
http://www.
hanspub.
org/journal/csahttps://doi.
org/10.
12677/csa.
2019.
93061文章引用:高葵,李蔚妍,付晓翠.
基于CSS+Div的网页布局方法研究[J].
计算机科学与应用,2019,9(3):531-538.
DOI:10.
12677/csa.
2019.
93061ResearchonWebPageLayoutMethodBasedonCSS+DivKuiGao,WeiyanLi,XiaocuiFuSchoolofInformationScienceandEngineering,ShandongAgriculturalUniversity,TaianShandongReceived:Feb.
16th,2019;accepted:Mar.
4th,2019;published:Mar.
11th,2019AbstractTheCSS+Divlayoutmethodhasgainedmoreandmoreapplicationsintheactualwebsitedesignandproduction,andcanbeusedthroughLabelsandCSSpropertysettingsimplementwebpagelayout.
ThroughtheexampleoftheCSS+Divlayoutmethodandtheanalysisandexplanation,thispapergivestheusagemethodandattentiontousetheCSS+Divlayoutmethodtoachievethepurposeofmastering.
KeywordsCSS+Div,Margin,Padding,Border,Position,Float,Clear基于CSS+Div的网页布局方法研究高葵,李蔚妍,付晓翠山东农业大学,信息科学与工程学院,山东泰安收稿日期:2019年2月16日;录用日期:2019年3月4日;发布日期:2019年3月11日摘要CSS+Div布局方法在实际网站设计制作中得到了越来越多的应用,可以通过标签和CSS属性设置实现网页布局.
本文通过CSS+Div布局方法举例并进行分析说明,给出使用CSS+Div布局方法进行布局的使用方法和注意事项,达到掌握的目的.
关键词CSS+Div,外边距,内边距,边框,Position,Float,Clear高葵等DOI:10.
12677/csa.
2019.
93061532计算机科学与应用Copyright2019byauthor(s)andHansPublishersInc.
ThisworkislicensedundertheCreativeCommonsAttributionInternationalLicense(CCBY).
http://creativecommons.
org/licenses/by/4.
0/1.
引言在网页设计中,CSS即层叠样式表,是用来控制网页样式并允许样式与内容分离的一种标记性语言.
Div标签用来定义网页内容中的逻辑区域,是一个块级元素,是一个容器,可以容纳任何网页元素.
使用CSS+Div技术可以实现网页布局.
与使用表格布局方法相比,CSS+Div布局方法具有结构简洁、定位灵活、代码效率高等优点,因此该技术在实际网站设计制作中得到了越来越多的应用,同时也成为网站制作者的必备技术.
但在实际应用中由于对相关概念和属性掌握不透彻,导致在网页布局中出现异常,本文通过CSS+Div布局方法举例并进行分析说明,给出使用CSS+Div布局方法进行布局的使用方法和注意事项,达到掌握的目的.
2.
使用举例2.
1.
相关概念1)盒子模型盒子模型是CSS+Div网页布局的重要概念,网页元素和它周围空间所形成的矩形区域称为盒子(box)[1],根据需要将网页中的盒子进行排列和分布,就形成了网页布局.
盒子模型将页面中的每个元素看作一个矩形框,这个框由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成.
按top、bottom、left、right的四个方向,分别进行定义和设置,描述盒子属性.
具体设置如下图1所示.
Figure1.
Boxmodelstructureandproperties图1.
盒子模型结构和属性2)标签标签是盒子模型的主要载体[2],具有分割网页的功能.
标签是一个块状容器类标签,在和