页面定制CSS代码初探（一）：页面变宽文本自动换行图片按比缩放

初识博客

初写博客，先在设置里选了个喜欢的模板

第一眼就爱上了呢！那极简的风格，我喜欢！！但是，应用后，却发现...

纳尼！模板上右侧那张漂亮的图片呢？！我的怎么什么都没有。没有图片好难看啊，瞬间无爱了，设置里找了下，-》博客侧边栏公告《-，在这里，放了张宽200px的图，好看多了马上，还是有图才不会那么单调~

认识CSS

过了几天，打算写篇博，发现了一个重大的问题，怎么默认的宽度这么窄？那我放图片怎么办，而且，2边留那么多空白不浪费吗，留个5%就够了吧。于是乎，开始了2天的全折腾。

设置里找了下，发现个叫 页面定制CSS代码 的东西，上学的时候学过网页设计来着，还有点印象，但怎么用，呃，好像从来没有真正用过...

又是一顿Google，没找到想要的页面变宽的教程，喂，我只是想让页面变宽一点啊，不算多大的要求好伐？没办法，求人不如求己。查阅各种教程，然后自己在Chrome上F12照猫画虎瞎试，终于还是有了点收获。

1.既然要改它，首先要了解它。什么是CSS？打开一个网页，ctrl+U （Chrome）查看一下源代码，<head>部分除了注明标题<title>编码格式<charset>等，还会引入一堆东西，其中就有CSS（层叠样式表），可能还有JS脚本啥的。如下图：

页面定制CSS代码初探（一）：页面变宽文本自动换行图片按比缩放

CSS文件里面有#打头的id选择器，如：#red{color:red;}；有.开头的类(class)选择器，如：.center {text-align: center}；还有其他的。更多了解：http://www.w3school.com.cn/css/css_intro.asp

2.干巴巴的容易迷糊，上张图说话(图片是用Chrome F12 看到的调试界面)

页面定制CSS代码初探（一）：页面变宽文本自动换行图片按比缩放

如图所示，CSS通常是跟一种叫做<div>的标签结合一起用的，<div></div>声明了某一个区块，通常是<div id/class="xxx">，这样，被声明的那一块就都应用了那种样式(属性)，选中后右边可以看到样式出自哪个文件，都包含了哪些属性。

Tips: 在属性那里单击可以进行添加/修改，并且会有实时效果，我就是这么一点点试的，不得不说，Chrome 真的非常强大。

界面的修改过程

原图：

页面定制CSS代码初探（一）：页面变宽文本自动换行图片按比缩放

如图所示，模板的宽度被写死到1000像素，这样导致的问题是大屏幕浏览器2边会漏的很多，而且放图片什么的也不方便，简直就是对页面的浪费。

宽度的调整过程

开始动手，通过在设置里写进CSS规则去覆盖默认设置，我们让宽度设定为浏览器宽的95%，2边各留一点，否则不好看。

 /* 主界面和导航栏居中显示用户屏幕的95% */

 #main,#navigator {

     width: 95%

 }

刷新一下，纳尼，右边怎么回事啊？

页面定制CSS代码初探（一）：页面变宽文本自动换行图片按比缩放

看了一下，原来main下边的子元素mainContent也被写死了，宽765像素

页面定制CSS代码初探（一）：页面变宽文本自动换行图片按比缩放

改一下吧，查了下属性的可用值，决定用百分比，先写个100%试试，结果

页面定制CSS代码初探（一）：页面变宽文本自动换行图片按比缩放

页面变宽了，而且文字也能自适应换行了，但是。我擦，我的侧边栏呢？！往下拉，原来跑地下去了... 这可不行啊。后来改到90%，85%，因为侧边栏用百分比的话会被拉得特别难看，而mainContent这边width值又不能设成 100%-232px ，所以这问题一直没好的解决办法，只能先设成80%然后在加上侧边栏占的200+16*2=232px。

但是会引起两个问题：

1.由于设定的是相对页面80%，右侧边栏是固定宽，所以屏幕分辨率越大时，侧边栏右侧空的越多。（侧边栏默认左对齐）

页面定制CSS代码初探（一）：页面变宽文本自动换行图片按比缩放

2.浏览器缩小到一定程度时，侧边栏还是会被挤到下边

页面定制CSS代码初探（一）：页面变宽文本自动换行图片按比缩放

通过研究别人博客的排版，然后设置页面最小宽度一定程度上解决了第2个问题。

 /* 低于指定像素则不再进行横向缩放，防止侧边栏被移到正文下面，导致太难看 */

 #home { min-width: 1240px }

页面定制CSS代码初探（一）：页面变宽文本自动换行图片按比缩放

这样设定一个值后，保证侧边栏还没有被挤到下边去的时候，通过页面出现横向滚动条解决此问题。

后来，通过查询CSS元素语法，我发现了一个叫做position的神奇的属性。通过指定它解决了主界面与侧边栏共存的问题。

 /* 主界面宽度自动，右侧留出232像素，以父元素为基准进行绝对定位 */

 #mainContent{

     width: auto;

     position: absolute;

     left:0px;

     right: 232px;

 }

 /* 侧边栏向右靠齐 */

 #sideBar{float:right}

图片的等比缩放

上面的解决了以后又遇到一个新的问题，图片怎么缩放，默认最大宽度1000px写死的，一开始绕了点远路，在改了max-width=100% 以后还设置了width: 100%;让图片可以充满父元素，但是这样不仅同比缩小，而且浏览器分辨率很高的话（超过图片原始尺寸很多的话），图片也会等比放大，这样造成失真，很难看。

本来我想先凑活着吧，但我一想到以后可能会上传大的图片，你放大点没关系，但如果放一个小小的icon，你也给同比放大，那...我都不敢想了。

后来我就在网上各种找怎么让图片只同比缩小，但不同比放大的方法，网上很多CSS还有很多JS的，看着都很麻烦，看的头都大了，折腾了一晚，今早醒了后又在F12各种调，弄着弄着发现只设置max-width: 100%;就可以实现我的需求啊。

 /* 让图片等比缩小，超过原始尺寸则不放大*/

 #cnblogs_post_body img{

     max-width: 100%;

 }

还改了改留言栏的宽度和高度，让与主界面更搭一点。

完整CSS源码

最后，奉上CSS代码，有需要的直接复制到你们设置项里粘贴保存一下就可以了，注意要跟我是同一个模板啊，不然不保证会出什么问题。

 /* 低于1024像素则不再进行横向缩放，防止侧边栏被移到正文下面，导致太难看，有了position现在可以去掉了 */

 #home { min-width: 1024px }

 /* 主界面和导航栏居中显示用户屏幕的95% */

 #main,#navigator{width:95%}

 /* 主界面宽度自动，右侧留出232像素，以父元素为基准进行绝对定位 */

 #mainContent{

     width: auto;

     position: absolute;

     left:0px;

     right: 232px;

 }

 /* 让图片等比缩小，超过原始尺寸则不放大*/

 #cnblogs_post_body img{

     max-width: 100%;

 }

 /* 侧边栏向右靠齐 */

 #sideBar{float:right}

 /* 留言板宽度跟随父元素，高度设为200像素 */

 div.commentform textarea{

   width:100%;

   height: 200px;

 }

 /* 因为mainContent的position: absolute; 属性导致了这块显示出现了问题，隐藏掉元素 */

 #footer{visibility: hidden}