页面布局与编写(续2)

概述

虽然之前总结了一些页面布局与编写的心得，但是写起页面来还是有很多疑惑的，主要是在有多种写法的时候该用哪种写法？个人觉得这个问题很重要，不能哪种方法能用就用那种方法算了，因为要考虑到日后维护和页面的健壮性。所以自己理了一下相关的问题，总结在下面，供以后开发时参考，相信对其他人也有用。

宽高

要不要设定每个元素的宽高？用数值还是百分比？

首先来想一下不设宽高会怎样？

对于块元素，不设定高它纵向就会懒懒的仅包括它包含的元素就行了，不设定宽它横向就会尽可能的伸展到它能伸展的地方。
对于内联元素，不设定宽高它就会懒懒的只包含它能包含的元素，如果它其中没有元素，它就会发生塌陷变成0x0不可见。

所以对于块元素，一般说来都需要设定它的宽高，特别是宽，不然会发生意想不到的效果。

对于内联元素，一般来说都不需要设定它的宽高，除非特殊情况比如icon什么的。

那么用数值还是百分比呢？

用百分比更能实现兼容，特别是给body的width和height设定百分比，并且，在特别的情况下，用百分比有意想不到的效果。所以，如果能用百分比，尽量用百分比。需要注意的是，如果用百分比的话，最好有一个max-width(max-height)或者min-width(min-height)来做限制。

margin和padding

以前我一直有一个误区，就是一个元素的width，height属性就等于两条边框之间的距离。其实这种想法是怪异盒模型。现代标准的盒模型的width和height只是里面content的大小。所以当给元素增加padding属性时，边框之间的距离会增大。(虽然理论讲起来很简单，但是按照设计稿就很容易把宽高认为是边框之间的距离)

对于margin，也有一点需要注意，就是块之间的纵向margin会发生塌陷的问题。还有一点要注意，如果元素没有padding，这个时候给第一个子元素的margin-top设定负值的话，父元素会向上移动，原因不明。

但是，对于父元素包含子元素，能用padding也能用margin的情况，该怎么办呢？虽然padding能够改变父元素边框之间的距离，但是能用padding还是用padding（貌似只能用padding?）

定位

定位用margin还是relative的left和top？

我们一般不推荐用绝对布局，但是用margin布局还是relative布局？

事实证明，用relative比用absolute更加难以处理，也难以维护。它偏移了元素，所以还要去找元素的实际位置在哪儿，非常容易混淆。所以推荐用margin定位。

浮动

涉及到浮动的地方，一定要注意清除浮动。

总结

有时候，试着用多种方法解决问题会带来意想不到的效果，比如说布局可以用margin布局也可以用absolute布局，但是结合起来的话可以做宽度大小兼容。

转载于:https://www.cnblogs.com/yangzhou33/p/8784774.html

页面布局与编写(续2)相关推荐

学习笔记之数据可视化（二）——页面布局（中）
续上一章 2.6 监控区域布局 2.6.1 布局结构解析: 2.6.2 样式描述: 2.6.3 HTML结构及CSS样式代码 2.6.3 ### 监控区域-效果 2.6.7 点位区域(point) 2 ...
table和div在页面布局上应该注意的问题
在这篇文章开篇,我先纠正一下我之前写的一篇入门文章的错误,还是先引用一下比较官方的说法吧,避免再次误导各位新手 " <!DOCTYPE> 声明必须位于 HTML5 文档中的第一行 ...
学习笔记之数据可视化（二）—— 页面布局（下）
续上一章 2.7 地图区域(.map) 2.7.1 实现步骤: 2.8 用户统计模块 2.8.1 布局: 2.8.2 柱状图 2.9 订单模块 2.9.1 订单区域布局 2.9.2 订单区域(orde ...
学习笔记之数据可视化（二）——页面布局（上）
~续上一章 2. 项目页面布局 2.1 基础布局 2.1.1 PC端屏幕宽度适配设置 2.1.2 主体容器viewport背景图片 2.1.3 HTML结构 2.1.4 css样式代码 2.2 边框图 ...
element-UI栅格系统缩放，导致页面布局效果bug? 叠加？错位？
这里以此代码片段为例说明一则bug,请bug对号入座.(bug截图省略) 页面的栅格缩放,导致页面布局发生叠加错位? 一.坑1 · 引言: (先来一则bug代码) <el-card v-for= ...
html5 移动端单页面布局
序移动端的web网页使用的是响应式设计,但一般我们看到的网站页面都是跳转刷新得到的,比如通过点击一个menu后进入到另一个页面今天来说下是移动端的单页面的布局.单页面就是一切操作和布局都 ...
移动端页面布局方式，简单记录一下
目录 1.视口 2.多倍图 3.移动端开发选择 4.移动端技术解决方案 5.移动端常见布局 6.流式布局 7.flex弹性布局 ①flex与传统布局比较 ②flex布局原理 ③常见父项属性 8.rem ...
04-前端技术_盒子模型与页面布局
目录三,盒子模型与页面布局 1,网页布局介绍 1.1 固定布局 1.2 流式布局(Liquid Layout) 1.3 栅格化布局 1.4 自适应布局(Adaptive Layout) 1.5 响应 ...
html第二章排列页面内容题目,HTML教程第二章页面布局及文字设计.doc
HTML教程第二章页面布局与文字设计标题一般文章都有标题.副标题.章和节等结构,HTML中也提供了相应的标题标签,其中n为标题的等HTML总共提供六个等级的标题,n越小,标题字号就越大,以下列 ...

页面布局与编写(续2)

概述

宽高

margin和padding

定位

浮动

总结

页面布局与编写(续2)相关推荐

最新文章

热门文章