CSS 自动居中一列布局

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

时间： 2024-10-15 20:37:23

CSS 自动居中一列布局的相关文章

使用Div+CSS进行网页的多列布局

这几天我在用Div+CSS进行网页三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方还是请各位多多指教. 当您需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式: 使用这样的嵌套方式无疑可以使代码出错的概率减少很多,但同时这样的布局也略显复杂,对于后期的维护也略显不便.我们在布局导航时经常会使用到一个方法,那就是使用 列表来进行布局,而导航可以形容为多列式的布局,既然如此,那么我们也就可以使用来进行页面的多列布局.

CSS网页布局实例代码:上下两栏上下自动居中网页布局

文章简介:div上下两栏,上下自动居中. <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>div上下两栏,上下自动居中</title><style type="text/css">html,body{overf

CSS教程:使用ul进行网页的多列布局

 几天在用CSS写三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方请各位不吝指教.   当需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式:     使用这样的嵌套方式无疑可以使代码出错的概率减少很多,但同时这样的布局也略显复杂,对于后期的维护也略显不便.我们在布局导航时经常会使用到一个方法,那就是使用<ul>列表来进行布局,而导航可以形容为多列式的布局,既然如此,那么我们也就可以使用<ul>来进行页面的多列布局.  

CSS使用ul进行网页的多列布局

  几天在用CSS写三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方请各位不吝指教. 当需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式: 使用这样的嵌套方式无疑可以使代码出错的概率减少很多,但同时这样的布局也略显复杂,对于后期的维护也略显不便.我们在布局导航时经常会使用到一个方法,那就是使用〈ul〉列表来进行布局,而导航可以形容为多列式的布局,既然如此,那么我们也就可以使用〈ul〉来进行页面的多列布局.         这是一个固定

CSS教程：使用ul进行网页的多列布局

几天在用CSS写三列布局的时候突然想到的这样一个方法,这个想法自己都觉得有些疯狂,如果其中有什么不对的地方请各位不吝指教. 当需要写一个三列布局的时候,一般情况下我会选择使用如下的DIV布局方式: 使用这样的嵌套方式无疑可以使代码出错的概率减少很多,但同时这样的布局也略显复杂,对于后期的维护也略显不便.我们在布局导航时经常会使用到一个 方法,那就是使用<ul>列表来进行布局,而导航可以形容为多列式的布局,既然如此,那么我们也就可以使用<ul>来进行页面的 多列布局. 这是一个固定宽

CSS 三列布局

1.普通三列布局 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

CSS多列布局实现方法大全

 摘要: 多列布局在网站应用中也是经常见到的,今天就分享4中多列布局. display:table 代码如下: <style> .table { width: auto; min-width: 1000px; margin: 0 auto; padding: 0; display:table; } .tableRow { display: table-row; } .tableCell { border: 1px solid red; display: table-cell; width: 3

css 两列布局应用例子(兼容ie,ff,360)

一.固定宽度两列布局 1.侧栏在左  代码如下 复制代码  <div id="wrapper">  <div id="header">header</div>  <div id="container" class="cls">   <div id="aside">    <div class="inner">asid

css常见三列布局例子代码

一.固定宽度三列布局  代码如下 复制代码 <div id="wrapper">  <div id="header">header</div>  <div id="container" class="cls">   <div id="aside">    <div class="inner">     aside