关于HTML页面布局要注意的问题

1.用百分比设定元素宽度可能造成的错误

  很多同学习惯使用百分比来设定页面元素(例如div,以下称作盒子,方便介绍)的宽度,这样做可能造成未知的错误,最常见的就是当页面被缩小,或者屏幕分辨率降低时,由于使用了分辨率设置盒子的宽度,盒子本身也会随着分辨率的降低而减小,有可能造成内部的元素无法正常容纳内部的元素,于是内容会被挤到下一行排列造成布局错误。

  i.解决办法

  需要强调的是,使用百分比设定盒子宽度不是不可以,但是如果使用百分比设定宽度,我们最好同时为盒子设定最小宽度element{min-width:1000px;},保证盒子内部元素能够正确排列在盒子中。或者为盒子设定固定大小的宽度,这样我们可以保证在页面缩小到一定程度时,页面会出现滚动条,不会影响盒子内部的元素布局。

2.当想要让图标移动位置时不要移动父元素

  有些同学常见的错误是希望改变图标的位置时(比如:希望图标居中,并且向左移动n个px),改变父元素的位置,这样的做法明显是错误的。通俗的说法是我们明明想搬动沙发,却把房子给搬走了。

3.让块元素居中的方法

  有很多方式可以让块元素水平居中显示,最常用的做法是为元素设定以下样式div{margin:0 auto;};或者我们也可以使用相对位移来改变元素的位置selector{position:relative;left:npx},但是这种做法常常需要计算像素值,所以第一种办法更直接有效。

4.块元素和内联元素的比较

  块元素之所以称之为块元素是因为它们都是默认以矩形形状出现的(使用CSS3样式可以改变这一特征),块元素具有height、width的特征,就是说我们可以为块状元素设定高度和宽度来改变它原本的大小。内联元素则不同,默认情况下期中的内容如何排列,它们的形状也就如何展现。另外块元素会在前边和后边各加一个换行,也就是说默认情况下块元素都是独占一行显示的(除非我们为其设定浮动,或者使用位移来改变其初始位置);通过display属性,我们可以设定元素的显示状态;

display:block;/*元素显示为块状元素*/
display:block;/*元素显示为内联元素*/
display:inline-block;/*元素显示为块状元素,但是具有行内特征,即取消两端的换行/

  

时间: 2024-12-19 14:54:52

关于HTML页面布局要注意的问题的相关文章

微信小程序页面布局

页面布局: wcml: <view class="page"> <view class="page_hd"> </view> <view class="page_bd"> <view class="section_nav"> <view class="left border_right"> 酒店 </view> <vi

jquery-easyui实现页面布局和增删改查操作(SSH2框架支持)转载

http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hibernate实现了一个系统的一小部分功能,下面给大家分享一下. 首先看运行效果: [图一:登录页] [图二:页面布局] [图三:用户编辑层] [图四:确认弹出框] 准备 easyui插件简介在这就不赘述了,大家可以在iteye上找到很多该插件的相关消息. 如果页面需要使用easyui插件,需要引进一下js和

HTML页面布局

接下来的下面代码,只是给了一个大的前端编写布局,如果你已经是牛人了,就当没看到,如果是一些初学者,不妨拿去用用,里面也写了一些常用的css样式,现在虽然有很多牛逼的前段框架,用起来也非常得心应手,但是如果你要对自己很多定制化需求,最后肯定是要自己来编写前端页面的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--网页标题-->

关于页面布局

常见的页面布局有好几种,要做一个页面,首先要知道一个页面的大小,拉的第一个div标签的时候切记要定一个具体数值,最好不要用100%来表示, 会影响到整个页面,当你在拉动视口的时候,页面的内容也会随之发生变化.在使用margin改变页面布局的时候一定要注意页面发生的变化,可能一个小细节就可能造成页面混乱. 在使用的浮动的时候要注意浮动的几大特性:浮动会脱离文档流,影响别的元素.浮动的包裹性.子级浮动会造成父级高度塌陷.元素浮动不会穿过padding区域.

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

蓝懿IOS页面布局AuToLayou

今天接触了页面布局的东西,刘国斌老师详细的用图形编程的方式和代码都将解了一遍.代码和stroyboard感觉都比较麻烦,而且逻辑思维要求比较高. Editor菜单上有一个Resolve Auto Layout Issues子菜单.从这个菜单中,选中Update Constraints.就我这个情况来说,这会告诉Interface Builder需要将约束变大64点,像这样: 很好,T-bars又变蓝了,布局是有效的.在Document Outline中,你可以看到Horizontal Space

css基础css页面布局基础

样式可以在HTML中定义,也可以在一个单独的外部样式文件中定义.样式可以分为嵌入式样式表,外部样式表,内联样式表. 外部样式表:首先要建一个后缀为.css的样式表文件,然后在web文档中的<head>段使用<link>标记,这样就可以将一个外部样式表文件链接到文档中. 语法:<link rel="stylesheet" type="text/css" href="样式表的url"/> 嵌入式样式表:在web文档

CSS3页面布局方案

Web页面中的布局,在css3之前,主要使用float属性或者position属性进行页面中的简单布局,但是使用它们也存在一些缺点,比如两栏或者多栏中如果元素的内容高度不一致,则有底部很难对齐的问题.因此在css3中追加了一些新的布局方式,使用这些新的布局方式,除了可以修改之前存在的问题之外,还可以进行更为便捷,更为复杂的页面布局. 我们可以先来看看传统使用float或者position属性布局页面:如下HTML代码: <div style="width:100%;overflow:hid

页面布局和webpart

页面布局和webpart 分类: SharePoint入门2014-10-14 00:13 269人阅读 评论(0) 收藏 举报 SharePointpage layoutwebpart 所有工作都做完毕之后,就可以把Webpart加到主页上了. 为了使主页分布合理,先修改一下Layout.点击右上角的小齿轮,Edit page,页面进入到编辑模式,点击Ribbon上的Text Layout,可以看到SharePoint已经内置了一些layout. 这里选择带有头部和三列的layout: 然后把

Web页面布局方式小结

事实上,本文是在Peter Jerde的How much information can be stored by ordering 52 playing cards文章基础上翻译.改编和扩展而来的.当然这是经过Jerde本人首肯的. 注意本文方法并非最优,也没有完全利用所有的信息空间,只是简单的尝试. 有数字的地方就有信息.所以扑克牌中保存信息不是什么新鲜事. PDF文档点这里:下载 原文(英文)点这里:访问 这里有两个DEMO. 编码DEMO,解码DEMO 首先是"DEEP IN SHALL