这是我参与8月更文挑战的第22天，活动详情查看：8月更文挑战

下雨天，标签和CSS在一起布局更配哦~

​

CSS 基础

盒子模型

首先说到布局，不得不提的就是盒子模型，盒子的话顾名思义就是我们放东西的容器，和我们生活中所见到的一样，比如618到的快递盒子，或者海淘的化妆品收纳箱

​

这些都可以理解为盒子，那么前面所学的HTML的元素其实也是一个个的小盒子，那么元素内的内容就是我们盒子里面存放的内容

​

梳理完盒子的关系，那么就能对应到CSS样式了，一共有三个分别是，border 盒子的边框，padding 内填充 , margin 外边距，那么通过上图也看到了，盒子是不是有上下左右四个方向，辣么代码中怎么写呢

边框

border 分为 border-top / border-left / border-right / border-bottom 简写呢就是一个 border 表示上下左右，方向有了，那么还有粗细颜色呢 

border-width 边框粗细 

border-style  边框样式

dotted 定义点状边框。在大多数浏览器中呈现为实线。dashed 定义虚线。在大多数浏览器中呈现为实线。solid定义实线。double定义双线。双线的宽度等于 border- width 的值。

border-color 边框颜色

简写版本就是：border ：1px solid red ；

内填充

指的是元素内容和边框之间的距离，就像化妆品盒子里面的填充物一样，显然填充物也是要占位置的

padding:10px 当你写一个值的时候就上右下左，注意顺序可不是上下左右

padding:10px 20px 第一个值代表上下  第二个值代表左右

padding:10px 20px 30px 第一值代表上 第二个代表左右 第三个代表下

padding:10px 20px 30px 40px 顺序为上右下左 同直接一个padding一样

外边距

指的是元素与元素直接的距离，就是盒子和盒子的距离

margin:10px 当你写一个值的时候就是上右下左，注意顺序

margin: 10px 20px 第一个值代表上下 ，第二个值代表左右

margin:10px 20px 30px 第一个值代表上 第二个代表左右 第三个代表下

margin:10px 20px 30px 40px 顺序为上右下左 同第一个效果一样

小技巧：以后在使用的时候能使用padding实现的效果都用padding

此处有个坑--->

外边距和并： 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

​

再或者当一个元素包着另一个元素的时候，当他们没有border 或者padding 把外边距分开，也会合在一起变成连体婴，分隔的方法呢就是加border or padding

​

还有就是，只有普通文档流中块级元素的垂直外边距才会发生外边距合并。浮动或绝对定位之间的外边距不会合并。行内元素也不会垂直外边距合并，为什么呢?因为行内元素的外边距（margin）和内填充（padding）的上下（top/bottom）都不生效，只有左右（left/right）生效。所以咯 以后布局的时候注意这个坑，还有要知道这个坑怎么填平

元素类型

我们的元素按照类型划分可以分为：块级元素、行级元素、行内块元素

常用的块状元素有：

 <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有：

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

常用的内联块状元素有：

 <img>、<input>

块级元素的特点：

1. 自己独占一行
2. 可以设置宽高 可以设置top/bottom 距离
3. 如果没有设置宽度，那么他直接是100%

行级元素的特点：

1. 和其他元素在一行 2.不可以设置宽高 可以设置top/bottom 距离 3.宽度由内容决定

行内块元素的特点：

1. 和其他元素在一行
2. 可以设置宽高 可以设置top/bottom 距离

元素类型的转换

通过display可以转换元素的类型，下面的表格是display可选的值

​

虽然表格里的值有很多，but 我们常用的只有四个：

none 元素不显示  /  block 显示为块级元素  /  inline显示为行级元素  /   inline-block 行内块元素

浮动

没有一个网页是那么正常显示的，要是有的话那得多丑，浮动的话在网页布局中也占着很重要的位置，浮动的属性是float可选的只有left/right左浮动还是右浮动，给元素添加完浮动后，元素会脱离当前文档流，脱离当前文档流的意思就是不占位置，那么底下的元素会跑到上面来，想想你去图书管，如果桌上空着，你是不是会以为没人坐过去，所以底下的元素跑到上面去也很正常。

在网页布局中，浮动很重要，网页布局大多数的问题都是，为什么上不去了，为什么下不来了 以后你布局整个页面的时候就会感受出来了

清除浮动

清除浮动的四种方式：

1.  给父级元素添加height 高度，为什么加高度浮动就好了？因为加高度以后，空出来的位置有元素占着位置，就像图书管里面的桌上放着一本书，那么你是不是不会坐过去了，因为显然有人占了这个位置

2. 给父级元素添加overflow：hidden 

3. 添加空标签，加clear:both 去做清空浮动

4. 显然最重要的放在后面，这个也是我们最常用的一种方式 .clearfix:after{ content:"" ; display:block ; clear:both } 通过伪元素的方式清浮动

写一个公共的 CSS

在网页布局当中，我们编写的CSS文件肯定不会是只有一个，会有多个CSS文件，包含公共文件，单独页面css文件还会有专门负责默认样式清除的，我们现在来写一个自己的清除默认样式的css，这样在以后的布局中，直接引用就可以了。

起个名字 reset.css 那么公共的文件里面都需要些什么东西呢？公共文件的作用是帮助我们清除一些元素默认的样式，如果a标签的，li 标签的 还有margin 和padding 清0 ，为了保证在不同的浏览器下面，这些元素都能好好的显示，来吧 贴代码

@charset "UTF-8";
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,
fieldset,legend,input,textarea,select
{
    margin:0;
    padding:0
}
body{
    font-size: 14px;
    font-family: "微软雅黑";
}
.fl{
    float: left;
}
.fr{
    float: right;
}
.clearfix:after{
    content: '';
    display:block;
    clear: both;
}
img{
    border: 0;
}
a{
    text-decoration: none;
    color:#000000;
}
li{
    list-style-type: none;
}

页面布局实战

布局的时候注意事项

1. 所有的命名最好都小写,不能一数字开头
2. 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
3. 表现与结构完全分离，代码中不涉及任何的表现元素，如style
4. <h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。<h1>在文档中尽量只用一次。
5. 给每一个表格和表单加上一个唯一的、结构标记id，表格只用于显示数据。
6. 尽量使用英文命名原则  
7. 尽量不缩写，除非一看就明白的单词选择符一般控制在15个字符左右。

常用的命名规范

相对网页外层重要部分CSS样式命名：

• 外套 wrap ------------------用于最外层
• 头部 header ----------------用于头部
• 主要内容 main ------------用于主体内容（中部）
• 左侧 main-left -------------左侧布局
• 右侧 main-right -----------右侧布局
• 导航条 nav -----------------网页菜单导航条
• 内容 content ---------------用于网页中部主体
• 底部 footer -----------------用于底部 

网页公共命名

• #wrapper 页面外围控制整体布局宽度
• #container或#content 容器,用于最外层
• #layout 布局
• #header 页头部分
• #foot, #footer 页脚部分
• #nav 主导航
• #subnav 二级导航
• #menu 菜单
• #submenu 子菜单
• #sideBar 侧栏
• #sidebar_a, #sidebar_b 左边栏或右边栏
• #main 页面主体
• #tag 标签
• #msg #message 提示信息
• #tips 小技巧
• #vote 投票
• #friendlink 友情连接
• #title 标题
• #summary 摘要
• #loginbar 登录条
• #searchInput 搜索输入框
• #hot 热门热点
• #search 搜索
• #search_output 搜索输出和搜索结果相似
• #searchBar 搜索条
• #search_results 搜索结果
• #copyright 版权信息
• #branding 商标
• #logo 网站LOGO标志
• #siteinfo 网站信息
• #siteinfoLegal 法律声明
• #siteinfoCredits 信誉
• #joinus 加入我们
• #partner 合作伙伴
• #service 服务
• #regsiter 注册
• arr/arrow 箭头
• #guild 指南
• #sitemap 网站地图
• #list 列表
• #homepage 首页
• #subpage 二级页面子页面
• #tool, #toolbar 工具条
• #drop 下拉
• #dorpmenu 下拉菜单
• #status 状态
• #scroll 滚动
• .tab 标签页
• .left .right .center 居左、中、右
• .news 新闻
• .download 下载
• .banner 广告条(顶部广告条)
• .products 产品
• .products_prices 产品价格
• .products_description 产品描述
• .products_review 产品评论
• .editor_review 编辑评论
• .news_release 最新产品
• .publisher 生产商
• .screenshot 缩略图
• .faqs 常见问题
• .keyword 关键词
• .blog 博客
• .forum 论坛

CSS文件命名规范

• master.css,style.css 主要的
• module.css 模块
• base.css 基本共用
• layout.css 布局，版面
• themes.css 主题
• columns.css 专栏
• font.css 文字、字体
• forms.css 表单
• mend.css 补丁
• print.css 打印

ONE 一个网页开发

呦呦呦 布局到这就差不多了，这么简单，看起来好像这样的，但是其实并不然，布局的核心我们已经掌握了，但是布局的问题都是在实战中出现的，下面来写一个网页吧，那个还记得后会无期里的韩寒么，韩寒的个人主站是 http://www.wufazhuce.com/

​

打开网站满满的文艺气息，来吧我们一起来写出来，按照步骤几步走。

那么开始代码之前你需要一个布局图，有了布局图会让你的思路更加清晰

​

第一步：项目结构搭建

创建CSS / images / js 文件夹 和  index.html 页面，复制上面编写的公共reset.css文件到项目中，并新建style.css

第二步：搭建html页面布局

<div class="container">

         <!-- 头部 --> 

        <div class="header"></div>

        <!-- 广告图/新闻-->

       <div class="content clearfix"> </div>

        <!--app-->

        <div class="app"></div>

        <!--底部-->

        <div class="footer"></div>       

</div>

布局的时候先搭大块，不用先写细节，先大块再看细节

第三步：从头部开始第一个模块

​

这个地方，背景是一个纯色的蓝色，上面 ONE 一个为 logo png 格式，在头部的div中编写

<div class="header"> <a href="#"> <img src="image/logo.png" /></a> </div>

对应的style.css样式需要添加

首先给整体最大的div加好宽度并居中，.container{ width:854pxl margin:0 auto } 给头部div 加的样式为 

.header{

background-color:#01aef0; 

height:50px;

margin:10px 0;

text-align:center;

}

第四步：开启中间的部分"广告/新闻"

​

通过布局图我们可以看出来，中间又是一个左右结构的，先左右两个 div 添加浮动

<div class="banner fl"><img src="images/banner.jpg" /></div>

<div class="newslist fr"></div>

然后开始给右侧的文字列表加布局

<div class="news fr">

<h4>ONE 文章</h4>

<p class="newsnumber">VOL.1677</p><p class="newstitle">忘情咖啡馆-绅士</p>

<ul>

<li><span>VOL.1677</span><a href="#">软糖超能力| 随便写了开心就好</a></li>

<li><span>VOL.1677</span><a href="#">软糖超能力| 随便写了开心就好</a></li>

<li><span>VOL.1677</span><a href="#">软糖超能力| 随便写了开心就好</a></li>

<li><span>VOL.1677</span><a href="#">软糖超能力| 随便写了开心就好</a></li>

<li><span>VOL.1677</span><a href="#">软糖超能力| 随便写了开心就好</a></li>

<li><span>VOL.1677</span><a href="#">软糖超能力| 随便写了开心就好</a></li>

</ul>

</div>

效果图上面明显右侧有两块，很简单复制一下，ctrl+c 然后 ctrl+v

那么中间部分的 CSS

.news{

width:270px;

height:290px;

background-color:#f6f6f6;

margin-bottom:10px;

}

.news h4{

font-size：20px; 

background-color:#01aef0; 

color:#fff; 

padding-left:8px;

height:42px;

line-height:42px;

}

.news .newsnumber{

height:48px;

line-height:48px;

padding-left:8px;

}

.news .newstitle{

height:40px;

line-height:40px;

padding-left:8px;

font-size:16px;

color:#428bd2;

}

.news ul{

padding:0 0 17px 8px;

}

.news ul li{

line-height:26px;

height:26px;

color:#666666;

}

第五步：app 模块

​

这个地方就比较简单了，布局比较简单

<div class="app">

<h4>App一个</h4>

<p>每天只为你准备一张图片、一篇文字和一个问答</p>

        <p>韩寒主编和监制 原《独唱团》主创成员共同制作</p>

        <p><img src="images/erweima.png" /><img src="images/erweima.png" /><img src="images/erweima.png" /></p>

        <p>- 也可搜索 -</p>

        <p>"韩寒一个" 或 "ONE一个"</p>

</div>

对应的 CSS 部分

.app{
    margin-top: 40px;
   text-align: center;
}
.app img{
    width: 80px;
    height: 95px;
}
.app h4{
    font-size: 18px;
    font-weight: normal;
    padding-bottom: 24px;
}

其实 APP 和底部都是让文本直接 center 居中，问题不大

第六步：最后一个底部啦

<div class="footer">
        <p>© 2012-2014 「ONE · 一个」</p>
        <p><a href="#">关于</a> <a href="#">用户协议</a> <a href="#">联系我们</a></p>
        <p><a href="#">一个App工作室</a> <a href="#">亭林镇工作室</a> <a href="#">最酷ZUICOOL</a></p>
        <p>复杂世界里, 一个就够了. One is all.</p>
        <p>沪ICP备13042400号</p>
</div>

对应的 CSS

.footer{
    border-top: 1px solid #eeeeee;
    padding-top: 24px;
    margin-top: 116px;
    text-align: center;
}
.footer p{
    height: 33px;
    line-height: 33px;
}
.footer a{
    margin: 0 6px;
    color: #428bca;
}

好不容易，终于OK 了

​

最后总结一下：其实布局说起来好像很简单，其中的辛酸只有程序员的你知道，但是只要你保持一颗三观很正的心，去写代码，你的代码也会善待你的，注意要养成良好的编程习惯，比如命名，比如布局标签正确的嵌套，比如语义化的选择，开发人员工具的使用，毕竟调试很重要，当然还有很多等等....