(1)三个技能点:
①标准文档流
②块级元素
③margin属性(实现网页自动居中布局的关键)
2、居中设置:margin:0 auto;
(1)auto:会根据浏览器的宽度自动的设置两边的外边距
(2)原理:(浏览器的宽度-外包含层的宽度)/2=外边距
(3)要求:不能再设浮动或绝对定位属性
如果想让页面自动居中,当设置margin属性为auto的时候,不能再设置浮动(float)或绝对定位(position)属性,不然magin会失效

CSS 自动居中一列布局相关推荐

  1. 金典 DIV+CSS 3行2列 布局详解--企业网站通用的基本布局详解

    我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等.这样的形式是国内经典式的布局,我们这里不对 ...

  2. CSS 垂直居中、多列布局

    阅读目录 垂直居中 基本实现思路 单列布局 示例网站 两列布局 示例网站 两列布局的实现 第 1 步,写好 HTML 结构.这里为了查看方便,我们为布局容器设置背景颜色和高度. 第 2 步,将布局容器 ...

  3. div+css经典三行两列布局

    写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...

  4. html三列布局中间固定,常见的三列布局(左右固定宽度,中间自适应)

    实现css中的三列布局,左右固定宽度,中间自适应.三列布局方式的关键是怎么样才能使得在伸缩浏览器窗口的时候让中间的子元素宽度改变.比较常见的实现方案是:定位,浮动,css3中新特性flex布局,以及流 ...

  5. css实现3行2列居中高度自适应布局

    1.CSS2盒模型 自从1996年CSS1的推出,W3C组织就建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层< ...

  6. HTML变列自适应布局三行,div自适应居中_典型的DIV CSS三行二列居中高度自适应布局...

    摘要 腾兴网为您分享:典型的DIV CSS三行二列居中高度自适应布局,弈玩游戏,携程,悟空单车,我和你等软件知识,以及驾考精灵,指尖遥控,广告拦截,浙江学习网,360主题桌面,平板电脑qq,咖啡厅室内 ...

  7. 在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...

    三列布局 本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局 思路:将 ...

  8. CSS布局教程:用DIV CSS实现国内经典式三行两列布局-CSS布局实例

    我们碰到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等.这样的形式是国内经典式的布局,我们这里不对 ...

  9. 纯CSS无hacks的跨游览器多列布局(转)

    转自:http://www.cnblogs.com/rubylouvre/archive/2009/07/15/1523683.html 翻译自Matthew James Taylor的Equal H ...

最新文章

  1. Nutch插件开发及发布流程
  2. tensorflow-计算图
  3. java内部方法调用_Java学习之类方法的外部和内部调用
  4. 吉林省计算机二级考试题型,吉林省 | 2018年上半年全国计算机二级考试报考简章...
  5. linux python3_在Linux上安装Python 3
  6. NTFS USN的Create和工具代码汇总
  7. 数学不好的人可以学python吗_数学不好的人,适合学习深度学习,机器学习,人工智能吗?...
  8. 11-用两个栈实现一个队列
  9. Android应用程序键盘(Keyboard)消息处理机制分析(19)
  10. 本地Exchange和exchange online混合部署后OWA统一登录的实现
  11. app开发前后端简易流程图
  12. OpenStack创建卷报错
  13. 【论文笔记】PSEUDOSEG: DESIGNING PSEUDO LABELS FOR SEMANTIC SEGMENTATION
  14. 牛客练习赛10 B栈和排序【思维】
  15. 【解决方法】Mac book 外接显示器后,笔记本没声音
  16. Win32编程基础知识
  17. STM32F10xxx20xxx21xxxL1xxxx Cortex-M3程序设计手册 阅读笔记四(5):系统滴答定时器
  18. 初学编程,到底选Java还是C++?
  19. 企业网络和家庭网络区别
  20. 【H.264/AVC视频编解码技术详解】八、 熵编码算法(2):H.264中的熵编码基本方法、指数哥伦布编码

热门文章

  1. Python 接口测试(三)
  2. Cordova开发总结(插件篇)
  3. java的前台与后台
  4. 【转】数据库范式(1NF 2NF 3NF BCNF)详解二
  5. 虚拟函数-1、静态联编与动态联编,引入虚函数
  6. PetShop之ASP.NET缓存 --one
  7. 正确使用StereoRectify
  8. 【小白冲冲冲!!!】补2:SLAM中最小二乘问题的引入及求解
  9. windows和android结合,Android和Windows 10可以很好地合作的10种方式
  10. ffmpeg播放器 android,Android 调用ffmpeg 播放器开发(一)