从品牌网站建设到网络营销策划,从策略到执行的一站式服务
在排版Html的时候,除了对元素的显示外观进行美化,还会涉及到页面元素的布局,于是引入了框的概念, 即我们对HTML里面的元素排版以一个个框为基本单位。
创新互联是一家专注于成都网站设计、成都网站建设与策划设计,皋兰网站建设哪家好?创新互联做网站,专注于网站建设十余年,网设计领域的专业建站公司;建站业务涵盖:皋兰等地区。皋兰做网站价格咨询:13518219792首先我们先来了解两个元素
div:
属于对内容分组使用的元素,没有任何预定语义的通用元素
span:
属于文本元素,没有任何预定语义的通用元素
通俗的来说,没有预定义即不同与
代表段落、代表超链接已经有了自己含义。
这两个元素的区别在于,使用div修饰时,它有一个区域的概念,会另起一行,与上下的元素隔离,而使用span时,他会在本行生效。见代码:
This is span1 This is span2 |
在页面上我们会看到:
当然我们也有方法让他们通用,通过display属性的inline和block值来实现对方的效果
This is span1 This is span2 |
在页面上我们会看到:
在一个框中包含了四个部分
margin:外边距,代表这距离浏览器窗口边的距离
border:边框
padding: 内边距,代表内容区域到边框的距离
内容区域:代表文字或图片等内容的区域大小,有width和height两个属性值来定义
下面来看一段代码
|
生成html后,我们可以在浏览器中看到,”this is box”是漂浮在中间的,这时候通过查看网页源码的style就能看到上面的框模型图了~
框模型当然还有更多具体的边距和边框选项,针对边距的上下左右来设置具体的值,生成不规则的四边形,以及一些多样化的边框属性,如虚线、实线、凹陷、突出等,由于我们目标是先学会这些概念,这里不再具体说明。
在了解了框模型之后,我们需要进一步来浏览器窗口中固定其位置,定义不同的框之间的位置关系。
属性 | 说明 |
---|---|
position | 定义元素在页面的定位方式 |
left | 制定元素与最近一个具有定位设置的父对象左边的距离 |
right | 制定元素与最近一个具有定位设置的父对象右边的距离 |
top | 制定元素与最近一个具有定位设置的父对象上边的距离 |
bottom | 制定元素与最近一个具有定位设置的父对象下边的距离 |
float | 制定元素是否以及如何浮动,图文结合时使用 |
总结:框模型加上定位功能,基本上已经覆盖了页面排版了,CSS的基础知识也终于学完了,下章开始学习jQuery入门~
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图