【前端】【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（控制的是内容离盒子边框的上下左右边距）

文本信息

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

文本信息

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

文本信息

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

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

文本信息

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

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

   

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

代码：

    首页
    新闻客户端
    网站导航
    邮箱
    手机新浪网

效果：

6.案例2（新闻案例）

    需要完成的效果：

（1）div+div+h1+a

    

        
最新文章/NewArticles
        北京招聘网页设计，平面设计，php
        体验javascript的魅力
        jquery世界来临
        网页设计师的梦想
        jquery中的链式编程是什么
    

效果：

（2）div+ul+h4+a

  

  		
最新文章/New Articles
  		

  			
北京招聘网页设计，平面设计，php
  			
体验javascript的魅力
  			
jquery世界来临
  			
网页设计师的梦想
  			
jquery中的链式编程是什么
  		
  

效果：