【前端】【html/css】前端学习之路（八）：盒子模型（一）（CSS重点）（padding/border/新浪导航/新闻列表）

盒子模型（CSS重点）

    其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。

    所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

    比如下图：

    整个小米的官网其实就是由很多个盒子所组成的，所以盒子是一个网页最重要的一个组件。

2.盒子模型（Box Model）

    盒子模型就如同下图：

    所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

3.盒子边框（Border）

边框就是那层皮。 橘子皮。。柚子皮。。橙子皮。。。

语法：

border : border-width || border-style || border-color 

边框属性—设置边框样式（border-style）

边框样式用于定义页面中边框的风格，常用属性值如下：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线  

dotted：边框为点线

double：边框为双实线

    也可以具体化来设置边框，比如:

border-color  border-width  border-height  border-left  border-right  border-top  border-bottom

     但是最常用的还是 ‘border: 1px solid yellow’ 还有一下几种格式。

	border-top: 1px solid red; /*上边框*/
	border-bottom: 2px solid green; /*下边框*/
	border-left: 1px solid blue;
	border-right: 5px solid pink;
	
	border: 1px solid red;

表格框线合并（Border-collapse）

     当使用table表格时，设置边框border后，会发现边框线比较粗，是因为表格的边框并没有合并，比如a单元格的边框为1px，而相邻的b单元格的边框也为1px，则两者的边框为2px，自然也就显得比较粗，所以需要使用border-collapse属性。

table{ border-collapse:collapse; } collapse 单词是合并的意思

border-collapse:collapse;   /*表示相邻边框合并在一起*/

4.内边距（padding）

padding属性用于设置内边距。 是指 边框与内容之间的距离。

    padding-top:上内边距

    padding-right:右内边距

    padding-bottom:下内边距

    padding-left:左内边距

同时，padding后跟的数值数量的不同，其代表的异议也是不同的。

示例：

①padding: xpx（控制的是内容离盒子边框的上下左右边距）

    <style>
        div {
            width: 300px;
            background-color: skyblue;
            height: 300px;
            padding: 10px;
            color: #fff;
        }
        </style>

<div>文本信息</div>

②padding: xpx xpx（控制的是上下、左右边距）

    <style>
        div {
            width: 300px;
            background-color: skyblue;
            height: 300px;
            padding: 20px 5px;
            color: #fff;
        }
        </style>

<div>文本信息</div>

③padding: xpx xpx xpx（控制的是上边距、左右边距、下边距）

    <style>
        div {
            width: 300px;
            background-color: skyblue;
            height: 300px;
            padding: 20px 5px 30px;
            color: #fff;
        }
</style>

<div>文本信息</div>

④padding: xpx xpx xpx xpx（控制的是上、右、下、左的边距）

    注意顺序是上、右、下、左，也就是 顺时针方向 控制的。

    <style>
        div {
            width: 300px;
            background-color: skyblue;
            height: 300px;
            padding: 10px 20px 30px 40px;
            color: #fff;
        }
        </style>

<div>文本信息</div>

5.案例1（新浪导航栏）

    完成新浪首页的一下导航栏效果：

   

    首先用PS或者firework获取截图中的div大小（PS用矩形工具）、颜色（PS用吸管工具），然后进行设置。重点在于各个a标签之间需要设置好padding，用PS量过后两者间的距离大概是36px，那么就只需要设置文字的左右边距都为18px，上下边距为0就可以了，这样你知道该用padding的哪个格式吗？

代码：

    <style>
        .nav {
            height: 50px;
            background-color: #fcfcfc;
            /*div顶部有橙色边框*/
            border-top: 3px solid #f97f00;
            /*div底部有灰色边框*/
            border-bottom:1px solid #eeeeee;
        }
        .nav a{
            /*为了让文字居中，line-height与div高度相等*/
            line-height: 50px;
            /*将a标签设为行内块元素以设置其宽高*/
            display: inline-block;
            font-size: 12px;
            color: #3e3e3e;
            text-decoration: none;
            /*padding: 15px 15px;*/
            /*设置文字与盒子的上下内边距为0，左右内边距均为18*/
            padding: 0 18px;
        }
        .nav a:hover {
            background-color: #edeef0;
            color: #ffc458;
        }
    </style>

<div class="nav">
    <a href="#">首页</a>
    <a href="#">新闻客户端</a>
    <a href="#">网站导航</a>
    <a href="#">邮箱</a>
    <a href="#">手机新浪网</a>
</div>

效果：

6.案例2（新闻案例）

    需要完成的效果：

（1）div+div+h1+a

    <style>
        * {
            margin: 0;
            padding: 0;  /*清除内外边距*/
        }
        body {
            background-color: #e2e2e2;
        }
        .news {
            width: 290px;
            height: 200px;
            background-color: #e2e2e2;
            border: 1px solid #c3c3c3;
        }
        .news2 {
            /*设置内边距上下为15 左右为15*/
            padding: 15px 15px;
        }
        .news2 h1{
            font-size: 20px;
            border-bottom: 1px solid #c3c3c3;
            /*设置上下边距为5*/
            padding-bottom: 5px;
        }
        .news2 a{
            font-size: 12px;
            display: block;
            /*文字居中使用line-height*/
            line-height: 26px;
            text-decoration: none;
            color: #2c282c;
            border-bottom: 1px dotted #c3c3c3;
            /*设置内边距上下为0 左右为15*/
            padding: 0 15px;
        }
        .news2 a:hover {
            text-decoration: underline;
        }
    </style>

<div class="news">
    <div class="news2">
        <h1>最新文章/NewArticles</h1>
        <a href="#">北京招聘网页设计，平面设计，php</a>
        <a href="#">体验javascript的魅力</a>
        <a href="#">jquery世界来临</a>
        <a href="#">网页设计师的梦想</a>
        <a href="#">jquery中的链式编程是什么</a>
    </div>
</div>

效果：

（2）div+ul+h4+a

	<style>
	/*div {
		width: 100px;
		height: 100px;
		border: 2px solid red;
		padding: 20px;
		margin: 30px;
	}*/
	* {
		margin: 0;
		padding: 0;  /*清除内外边距*/
	}
	body {
		background-color: #eee;
	}
	.article {
		width: 380px;
		height: 263px;
		border: 1px solid #ccc;
		margin: 100px;
		padding: 20px 15px 0;  /*上 20  左右  15  下  0*/
	}
	.article h4 {
		color: #202026;
		font-size: 20px;
		border-bottom: 1px solid #ccc;
		padding-bottom: 5px;
		/*margin-bottom: 12px;*/
	}
	li {
		list-style: none;   /*取消li 前面的小点*/
	}
	.article ul li {
		height: 38px;
		line-height: 38px;
		border-bottom: 1px dashed #ccc; /* 1像素的虚线边框*/
		text-indent: 2em;
	}
	.article  a  {
		font-size: 12px;
		color: #333;
		text-decoration: none;
	}
	.article a:hover {
		text-decoration: underline;  /*添加下划线*/
	}
	.article ul {
		margin-top: 12px;
	}
	</style>

  <div class="article">
  		<h4>最新文章/New Articles</h4>
  		<ul>
  			<li><a href="#">北京招聘网页设计，平面设计，php</a></li>
  			<li><a href="#">体验javascript的魅力</a></li>
  			<li><a href="#">jquery世界来临</a></li>
  			<li><a href="#">网页设计师的梦想</a></li>
  			<li><a href="#">jquery中的链式编程是什么</a></li>
  		</ul>
  </div>

效果：