CSS布局学习笔记

最新推荐文章于 2024-04-28 11:02:06 发布

Monarch_lin

最新推荐文章于 2024-04-28 11:02:06 发布

阅读量594

点赞数

分类专栏： JavaScript 文章标签：布局 css

本文链接：https://blog.csdn.net/Monarch_lin/article/details/19334175

版权

JavaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

布局是web页面开发中常用到的一种方法，而CSS布局以众多的优点逐渐成为主流，table布局悄然淡出。最近在重新学习CSS，首先从布局的方向开始，逐渐深入。从网上的各种教程及博客搜集资料整理。通过整理博客的过程中加以理解，也不失为一个学习的方法。

三栏布局基本框架：

Left 和right 部分为固定宽度，Main部分为自适应

HTML的文档流必须是从Main开始，然后才是到两侧的渲染。对应的HTML结构如下：

1：

<div id="main"></div>
<div id="left"></div>
<div id="right"></div>

而常规的做法采用 自身浮动法是Left 和 Right 部分分别左右浮动，中间部分使用边距。这种方法对应的布局结构就会发生改变。如下：

2：

<div id="left"></div>
<div id="right"></div>
<div id="main"></div>

缺点就是在网速慢的时候，main部分内容会在最后才显示出来，而且如果Main部分存在clear:both属性，会清除浮动，导致不能正常布局，应避免clear样式。

如果采用第一个布局，就会造成以下情况：

====================================================================解决办法如下：------>>>>>

三栏布局-使用绝对定位方法

方法1：main部分采用绝对定位，自适应宽度，两侧固定宽度然后左右浮动。

HTML Content

<body>
  <div id="main">
    <p style="height:999px; background:#fffaba; ">content</p>
  </div>
  <div id="left">
    <p style="height:999px;background:#8fc41f;">left</p>
  </div>
  <div id="right">
    <p style="height:999px; background:#00b7ef;">right</p>
  </div>
</body>

CSS Content

*{
  margin:0;
  padding:0;
}

#main{position:absolute;left:200px;right:200px;}
#left,#right{width:200px;}
#left{float:left;}
#right{float:right}

页面效果：

http://codepen.io/anon/pen/pDcgt

==============================

方法2：Left 和Right部分采用绝对定位，分别固定于页面的左右两侧，Main的主体栏用左右margin值撑开距离

Html Content

<body>
  <div id="main">
    <p style="height:999px; background:#fffaba; ">content</p>
  </div>
  <div id="left">
    <p style="height:999px;background:#8fc41f;">left</p>
  </div>
  <div id="right">
    <p style="height:999px; background:#00b7ef;">right</p>
  </div>
</body>

CSS Content

*{
  margin:0;
  padding:0;
}

#main{margin:0 200px}
#left,#right{position:absolute;top:0;width:200px;}
#left{left:0}
#right{right:0}

页面效果：

http://codepen.io/anon/pen/lwFry

三栏布局-使用margin负值方法

首先，中间的主体要使用双层标签。外层div宽度100%显示，并且浮动，内层div为真正的主体内容，含有左右200像素的margin值。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200像素。

Html Content

<div id="wrap">
  <div id="main">
    <p style="height:999px; background:#fffaba; ">content</p>
  </div>
</div>
  
<div id="left">
   <p style="height:999px;background:#8fc41f;">left</p>
</div>
<div id="right">
  <p style="height:999px; background:#00b7ef;">right</p>
</div>

CSS Content

*{ margin:0;padding:0;}
#wrap{width:100%;height:100%;float:left;}
#main{margin:0 200px;}
#left,#right{width:200px;float:left;}
#left{margin-left:-100%;}
#right{margin-left:-200px;}

页面效果：

http://codepen.io/anon/pen/tuqJp

参考：

我熟知的三种三栏网页宽度自适应布局方法

http://www.planeart.cn/?p=446

Monarch_lin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS布局学习笔记

布局是web页面开发中常用到的一种方法，而CSS布局以众多的优点逐渐成为主流，table布局悄然淡出。最近在重新学习CSS，首先从布局的方向开始，逐渐深入。从网上的各种教程及博客搜集资料整理。通过整理博客的过程中加以理解，也不失为一个学习的方法。三栏布局基本框架：Left 和right 部分为固定宽度，Main部分为自适应HTML的文档流必须是从Main开始，然后才是到
复制链接

扫一扫