精通CSS(2)-布局

最新推荐文章于 2023-04-10 21:19:23 发布

somnus_ly

最新推荐文章于 2023-04-10 21:19:23 发布

阅读量456

点赞数

分类专栏： css小结文章标签： CSS布局

css小结专栏收录该内容

15 篇文章 0 订阅

订阅专栏

css布局被认为是一个很麻烦的东西，可能它本身并不复杂，只是浏览器的不一致让人觉得很头疼。对于初学者来说或许框架能更快的得到想要的结果，但这种傻逼的使用方式蒙蔽了布局的内部原理，这是非常可怕的！

所有css布局技术的根本都是3个基本概念：定位、浮动和外边距操控（喵了个咪的，怎么又是3个）。下面开始写代码（一定要自己写一遍）。

1.浮动布局

貌似浮动布局是最简单也是最可靠的，先来一个简单的两栏布局，页面居中：

代码方案：

[html]view plaincopy 
   
 <html>  
 <body>  
 <div class="wrapper">  
     <div class="header">head</div>  
     <div class="container">  
         <div class="leftbar">  
             <p>left</p>  
             <p>left</p>  
         </div>  
         <div class="content">  
             <p>content</p>  
             <p>content</p>  
             <p>content</p>  
             <p>content</p>  
             <p>content</p>  
             <p>content</p>  
         </div>  
     </div>  
     <div class="clear"></div>  
     <div class="footer">footer</div>  
 </div>  
 <style type="text/css">  
 /*让容器水平居中,但IE6不支持margin：auto属性，解决方法是利用text-align:center*/  
 body{  
     text-align: center;/*IE6君认为该属性让所有的东西都居中*/  
 }  
 .wrapper{  
     width: 960px;  
     margin: 0 auto;  
     text-align: left;/*调整text-align为左对齐*/  
 }  
 .header,.footer{  
     height: 60px;  
     background-color: #9a2;  
 }  
 .leftbar{  
     width: 200px;  
     float: left;  
     background-color: #00f;  
 }  
 .content{  
     width: 740px;/*空出20px作为隔离带*/  
     float: right;  
     background-color: #0e8;  
 }  
 .clear{clear:both;}  
 </style>  
 </body>  
 </html>  

然后再来个三栏布局，只要稍微改一下代码：

[html]view plaincopy 
   
 <html>  
 <body>  
 <div class="wrapper">  
     <div class="header">head</div>  
     <div class="container">  
         <div class="leftbar">  
             <p>left</p>  
             <p>left</p>  
         </div>  
         <div class="content">  
             <div class="main-content">  
                 <p>content</p>  
                 <p>content</p>  
                 <p>content</p>  
                 <p>content</p>  
                 <p>content</p>  
                 <p>content</p>  
             </div>  
             <div class="rightbar">  
                 <p>right</p>  
                 <p>right</p>  
             </div>  
         </div>  
     </div>  
     <div class="clear"></div>  
     <div class="footer">footer</div>  
 </div>  
 <style type="text/css">  
 /*让容器水平居中,但IE6不支持margin：auto属性，解决方法是利用text-align:center*/  
 body{  
     text-align: center;/*IE6君认为该属性让所有的东西都居中*/  
 }  
 .wrapper{  
     width: 960px;  
     margin: 0 auto;  
     text-align: left;/*调整text-align为左对齐*/  
 }  
 .header,.footer{  
     height: 60px;  
     background-color: #9a2;  
 }  
 .leftbar{  
     width: 200px;  
     float: left;  
     background-color: #00f;  
 }  
 .content{  
     width: 740px;/*空出20px作为隔离带*/  
     float: right;  
     background-color: #0e8;  
 }  
 .clear{clear:both;}  
 /*在content内部再分浮动，形成3栏布局*/  
 .main-content{  
     width: 600px;  
     float: left;  
     background-color: #7621de;  
 }  
 .rightbar{  
     width: 120px;  
     float: right;  
     background-color: #b23aa2;  
 }  
 </style>  
 </body>  
 </html>  

效果图：

浮动布局的方法有很多，用起来也特别方便。虽然效果图是挫了点，但不要在意这些细节，这不是重点。。。

2.固定宽度、流式和弹性布局

2.1固定宽度布局

固定宽度布局就是以像素为单位的布局，上面的两个例子都是固定宽度布局。这种布局的好处是知道每个元素的精确宽度，非常方便。坏处就是在不同分辨率的显示器下会出现显示溢出或者大量空白。随着屏幕尺寸的多样化，外加移动web的需求，固定宽度布局常常被认为是糟糕的权益之计。

2.2流式布局

流式布局的灵活性更大，因为它采用的是百分数布局。这样随着不同窗口大小可以进行伸缩。一般还会添加以像素或em为单位的min-width来防止布局变得太窄。（有关min-width和min-height与浏览器兼容性问题，请戳这里：点击打开链接）。

在这里再总结一下px和em的关系。px是按像素计算的绝对单位。em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px)。

那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明 Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

em有如下特点：

em的值并不是固定的;
em会继承父级元素的字体大小。

所以我们在写CSS的时候，需要注意几点：

body选择器中声明Font-size=62.5%;
将你的原来的px数值除以10，然后换上em作为单位;
重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

但是12px汉字例外，就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小，而是稍大一点。这个问题 Jorux已经解决，只需在body选择器中把62.5%换成63%就能正常显示了。原因可能是IE处理汉字时，对于浮点的取值精确度有限。

2.3弹性布局

虽然流式布局比固定布局好，但是当分辨率过大时行会过长，窗口太窄时行会很短。对于这个问题，弹性布局可能是一种解决方案。

弹性布局相对于字号来设置元素的宽度，而不是浏览器宽度。以em为单位设置宽度，可以确保在字号增加时整个布局随之扩大。

[html]view plaincopy 
   
 <html>  
 <body>  
 <div class="wrapper">  
     <div class="header">head</div>  
     <div class="container">  
         <div class="leftbar">  
             <p>left</p>  
             <p>left</p>  
         </div>  
         <div class="content">  
             <div class="main-content">  
                 <p>content</p>  
                 <p>content</p>  
                 <p>content</p>  
                 <p>content</p>  
                 <p>content</p>  
                 <p>content</p>  
             </div>  
             <div class="rightbar">  
                 <p>right</p>  
                 <p>a a a a</p>  
             </div>  
         </div>  
     </div>  
     <div class="clear"></div>  
     <div class="footer">footer</div>  
 </div>  
 <style type="text/css">  
 /*让容器水平居中,但IE6不支持margin：auto属性，解决方法是利用text-align:center*/  
 body{  
     text-align: center;/*IE6君认为该属性让所有的东西都居中*/  
 }  
 .wrapper{  
     font-size: 62.5%;/*调整字号为默认16px的62.5%，使10px=1em，方便计算*/  
     max-width: 95%;  
     width: 96em;  
     margin: 0 auto;  
     text-align: left;/*调整text-align为左对齐*/  
 }  
 .header,.footer{  
     height: 6em;  
     background-color: #9a2;  
 }  
 .leftbar{  
     width: 20%;  
     float: left;  
     background-color: #00f;  
 }  
 .content{  
     width: 78%;   
     float: right;  
     background-color: #0e8;  
 }  
 .clear{clear:both;}  
 /*在content内部再分浮动，形成3栏布局*/  
 .main-content{  
     width: 80%;  
     float: left;  
     background-color: #7621de;  
 }  
 .rightbar{  
     width: 18%;  
     float: right;  
     background-color: #b23aa2;  
 }  
 </style>  
 </body>  
 </html>  