html整体布局居中,html 居中布局

需求，有三个内容需要居中显示

内容居中，我们太熟悉了：)

.content1,.content2,.content3{

width:960px;

margin:0 auto;

}

这样，三个内容都居中了。然后，当content1 内容里面的h1,距离顶部有50个像素的时候，怎么写？

第一反应，用margin

.title{

margin-top:50px;

} 但是，紧邻的块级元素会发生margin collapse 。这样导致的实际效果是content1的div具体上面50px。怎么办？还有别的办法吗？

在content1 用padding

.content1{

padding-top:50px;

} 这样会发现，content1 内容宽变成960+50。根据盒模型，不要忘了。，如果坚决要用这个方法，可以如下写：

.content1{

width:910px;

} 效果是能达到，但是，如果页面有很多这样的元素，你将花大量的时间去计算width-padding 。

其实还有更好的办法：

改一下html结构：

用content 来让所有内容居中

.content{width:960px;margin:0 auto;}

通过content1 的padding 属性，实现title距离顶部50px

.content1{padding-top:50px;}

content1 ,content2,content3 通过浏览器自动计算宽度，从而就避免繁琐的计算

xiong:计算宽度实在太费脑力，多利用块级元素会自动延展的特性

html整体布局居中,html 居中布局相关推荐

css布局中的居中问题
css布局中的居中问题作者:阿捷 2004-7-5 14:35:49 #sample{ HEIGHT:240px;WIDTH:400px; BACKGROUND: url(http://www.w3 ...
android动态居中布局,Android动态添加布局的两种方式
释放双眼,带上耳机,听听看~! 前言大多数时候我们布局都是用xml来布局的,但有些时候也是会用到动态布局的,尤其是在一些大项目中,动态布局更是体现的淋漓尽致. 所以今天我们就来学习一些动态加添布局的 ...
css实现3行2列居中高度自适应布局
1.CSS2盒模型自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层< ...
HTML变列自适应布局三行,div自适应居中_典型的DIV CSS三行二列居中高度自适应布局...
摘要腾兴网为您分享:典型的DIV CSS三行二列居中高度自适应布局,弈玩游戏,携程,悟空单车,我和你等软件知识,以及驾考精灵,指尖遥控,广告拦截,浙江学习网,360主题桌面,平板电脑qq,咖啡厅室内 ...
HTML+CSS第十课：常见的3种网页布局方式：表格布局、DIV+CSS布局、框架布局
知识点:网页布局的方式 1.网页布局常见的页面布局方式:表格布局.DIV+CSS布局.框架布局. 表格布局:用来显示较多的数据,如OA系统.ERP系统或CRM系统.(一般用在局部) DIV+CSS布 ...
CSS 布局 - grid - 二维布局方法 - 网格布局
目录一.grid 二维布局模块二.基本概念理解逻辑 - 容器 - 项目理解行列 - 二维布局理解单元格网格线三.容器属性使用方法 CSS 重要属性配置 grid-template-co ...
前端必经之路：CSS页面布局(深入理解浮动布局、定位布局、圣杯布局和双飞翼布局等重要布局方案)
建筑师在对一栋建筑物进行施工之前,首先会根据建筑图纸上的平面图.立体图.剖面图和构造详图等对建筑物进行整体布局后再从局部施工(当然不排除有先装修完厕所再砌卧室围墙的奇葩).在一个网页页面的搭建过程中, ...
CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
原文网址:CSS之布局系列--静态布局.流式布局.自适应布局.响应式布局的概念及区别静态布局.流式布局.自适应布局.响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客简介说明本文介绍前端的 ...
多列布局元素和栅格布局基础
目录多列布局(column) column-count column-rule column-fill 瀑布流布局栅格布局 grid-template-columns和grid-template- ...
移动布局之rem适配布局、Bootstrap前端开发框架
欢迎加入前端技术营!如果你也是前端学习者或者对前端有学习的想法,那就跟着我一起从零开始进击前端. 致力于尽可能详细且简洁的介绍前端知识.自己的捷径,也是学习路上的记录.欢迎探讨目录一.L ...

html整体布局居中,html 居中布局

html整体布局居中,html 居中布局相关推荐

最新文章

热门文章