前端开发基础（二）——CSS

目录

一.CSS初识

二.CSS选择器

三.CSS字体、属性、调试工具

四.标签显示模式 / CSS三大特性

五.盒子模型（重点）

六.浮动（float）

七.定位（position）

九.高级技巧

七.不知名网结构分析

---

一.CSS初识

• 理想结果： 结构(html) 与 样式(css) 相分离
• CSS（层叠样式表）作用：设置 HTML页面 版面布局、外观显示样式等
• 引入CSS样式表：

1. 行内式（内联式）：控制当前标签，没有实现样式和结构分离
2. 内嵌样式表：写在 head标签之间，控制当前页面，未彻底分离
3. 外部样式表：写在 head标签之间，控制整个站点，实现样式和结构完全分离

二.CSS选择器

1.CSS基础选择器

• 
• 多类名：各个类名中间用 空格隔开
• 类选择器 可被许多标签重复使用，id选择器 仅能被一个标签使用
• 通配符选择器：影响页面响应速度，不推荐随便用

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

2.CSS复合选择器 

• 复合选择器：由两个或多个基础选择器，通过不同的方式组合而成的
• 后代选择器（包含选择器 重点）：对子代目录下全部标签起效果，包括儿子的儿子

.class h3{color:red;font-size:16px;}    // 空格分离

• 子元素选择器：对子代第一个亲儿子起效果，不包括儿子的儿子

.class>h3{color:red;font-size:14px;}    // >符号分离

• 交集选择器：第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格！

p.one   选择的是： 类名为 .one  的段落标签

• 并集选择器（重点）：逗号隔开，用于集体声明

<!-- .one 和 p  和 #test 这三个选择器都会执行颜色为红色 ·-->
.one, p , #test {color: #F00;}  

• 链接伪类选择器（重点）：

 a:link         /* 未访问的链接 */
 a:visited      /* 已访问的链接 */
 a:hover        /* 鼠标移动到链接上  用的最多 */
 a:active       /* 鼠标没松手时的链接 */

• 记忆法则：love hate 爱上了讨厌  一定要按顺序写这些，不然会不起效果！实际开发中可能不会写全四个状态
• 

三.CSS字体、属性、调试工具

1.font字体

• 
• 谷歌默认文字大小：16px，不同浏览器默认大小可能不同，所以要在body样式中统一
• 同时指定多个字体，中间逗号隔开，浏览器不支持第一个字体，则会尝试下一个， 如果都没有，则用默认字体
• 中文字体名要添加英文双引号，尽量使用系统默认字体
• font-family: Arial,"Microsoft Yahei", "微软雅黑";
• font：综合设置字体样式：一定不可以颠倒顺序！必须保留 font-size 和 font-family属性
• font: font-style  font-weight  font-size  font-family

2.CSS外观属性 

• 
• 颜色：#FF0000 = #F00 = 红，#00FF00 = #0F0 = 绿，#0000FF = #00F = 蓝
• text-align文本水平对齐方式：让盒子里面的内容水平居中， 而不是让盒子居中对齐
• 一般情况下，行高比字号大7、8像素就可，如谷歌：line-height: 24px;（16px+8px）
• 首行缩进2个字： text-indent: 2em;  1个em（字符宽度的倍数）就是1个字的大小 
• none：无下划线；underline：下划线；overline：文本上方划线；line-through：删除线

3.开发者工具（chrome）

• 谷歌浏览器中：“按F12”或者是 “shift+ctrl+i” 打开开发者工具。/  菜单： 右击网页空白出--检查。
• 左侧 html页面结构，右侧 css样式，可以改动数值和颜色查看更改后效果，最后要回源文件中保存修改

4.sublime快捷操作emmet语法

• 生成标签 直接输入标签名 按tab键即可，比如 div+tab
• 生成多个相同标签 加上 * 就可， 比如 div*3 = 快速生成3个div
• 生成带有类名或者id名字， 直接写 .demo 或者 #two + tab 键
• 有父子级关系的标签 用 >， 比如 ul > li*n 
• 有兄弟关系的标签 用 +， 比如 div+p

// 生成的div类名是有顺序的 可以用 自增符号 $
.demo$*3        
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>

四.标签显示模式 / CSS三大特性

1.标签显示模式（display）

• 标签显示模式：标签以什么方式显示，比如 div自己占一行， span一行可以放很多个
• 标签分类：块标签（块元素）、行内标签（行内元素）

1.1 块元素

• 常见的 块元素 有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
• 块元素特点：

1. 自己独占一行
2. 高度，宽度（默认是容器（父级宽度）的100%）、外边距内边距都可以控制
3. 是一个容器，里面可以放行内或者块级元素（p、hx、dt等除外，这里只能放文字）

1.2 行内元素

• 常见的 行内元素（内联元素） 有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
• 行内元素特点：

1. 一行可以显示多个
2. 高、宽（默认宽度就是它本身内容的宽度）直接设置无效

3. 行内元素只能容纳文本或则其他行内元素

1.3 行内块元素

• 常见的 行内块元素：<img />、<input />、<td>，可以设置宽、高、对齐属性

• 行内块元素的特点：

1. 一行可以显示多个
2. 默认宽度就是它本身内容的宽度
3. 高度，行高、外边距以及内边距都可以控制

1.4 display总结

• 

• 块转行内：display:inline;
• 行内转块：display:block;
• 块、行内元素转换为行内块： display: inline-block;

2.行高

• 行高 = 上距离 + 内容高度 + 下距离
• 上距离和下距离总是相等的，因此文字看上去是垂直居中的
• 行高和高度的三种关系：

1. 行高 = 高度 文字会 垂直居中
2. 行高 > 高度 文字会 偏下
3. 行高 < 高度 文字会 偏上

3.背景

• 
• 背景图片：必须加url ，url 里面的地址 不要加引号：url(images/demo.png); 
• background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
• background: #ccc url(images/sms.jpg) no-repeat fixed center top;
• 超大背景图片 背景定位：background-position: center top;

background-color:颜色值;   默认值是 transparent透明的
background-repeat : repeat（默认纵横平铺） | no-repeat（常用） | repeat-x | repeat-y
background-position :x y  // 一定按照先左右x、再上下y的顺序 设置背景图片位置
background-position: 50px 10px ;
background-position : position || position  // top | bottom | left | center | right
background-position: right top; // 右上角
background-position: 10px center; // 混合使用：距离左边x10px，上下y居中
			/*背景固定的*/
			background-attachment: fixed;
            /*背景透明：rgba：.2相当于0.2 表示透明度（范围是0-1）*/
			background: rgba(0, 0, 0, .2)

• 导航栏实例：
• 行高等于盒子的高度，可以让单行文本垂直居中

	<style>
		.nav {
			text-align: center; /*这句话对 行内元素 行内块元素都有效果的*/
		}
		.nav a {
			display: inline-block; /*a是行内元素 不能设宽高 必须要转换行内块元素*/
			width: 120px;
			height: 50px;
			line-height: 50px; /*行高等于盒子的高度 就可以让单行文本垂直居中*/
			text-decoration: none; /*去除下划线*/
			background: url(images/bg.png) no-repeat; /*背景简写*/
		}
		.nav a:hover { /*鼠标经过nav里面的链接，更换背景图片*/
			background-image: url(images/bgc.png);
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">网站首页</a>
        ...
		<a href="#">网站首页</a>
	</div>
</body>
</html>

• 效果展示：
• 
• 

4.CSS三大特性（层叠性、继承性、优先级）

4.1 层叠性

• 样式冲突，遵循的原则是 就近原则

div {color: red;}
div {color: pink; // 根据就近原则决定采用下方的div，颜色为粉色}
<body>    <div>...</div>

4.2 继承性

• 子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

div {color: red;}
<body>
	<div>
		<p> 王思聪 </p> // 未设置<p>的颜色，但是p继承了div的颜色，王思聪为红色
	</div>

4.3 CSS优先级（重点）

• 
• 值从左到右，左面的最大，一级大于一级
• 数位之间没有进制，级别之间不可超越（比如0,0,1,0  ＞0,0,0,12）

五.盒子模型（重点）

• 网页布局本质：设置盒子大小，摆放盒子位置，把网页元素放入盒子
• 盒子模型（Box Model）：元素内容 + 边框（border） + 内边距（padding） + 外边距（margin）
• 盒子模型布局稳定性：width >  padding  >   margin   
• 原因：width无问题，padding会影响盒子大小，margin会有外边距合并

1.边框（border）

• 
• border : border-width || border-style || border-color 
• border: 1px solid red;    /*复合写法 没有顺序*/
• border-collapse:collapse; 表示相邻边框合并，否则边框会重叠加粗

2.内边距（padding）

• 内容和边框有距离，添加内边距，盒子会变大，所以设置宽高后，要减去内边距，从而维持盒子原大小
• 如果没有给一个盒子指定宽度， 此时，如果给盒子指定padding， 则不会撑开盒子
• padding复合写法：
• 新浪导航栏核心：里面的字数不一样多，不方便给宽度，所以给padding ，自动撑开盒子
• 目标效果：

3.外边距（margin）

• 块级盒子水平居中：必须设置宽度，给左右外边距设置auto
• text-align: center; /*  文字、行内元素、行内块元素 水平居中 */
• margin: 10px auto;  /* 块级盒子水平居中，上下margin都可以，左右auto */
• 插入图片和背景图片的区别：

1. 插入图片：比如产品展示类，移动位置只能靠盒模型 padding margin
2. 背景图片：用于小图标背景 或 超大背景图片，移动位置只能通过 background-position

• 清除元素内外边距（重要）：行内元素 为了兼容性， 只设置左右内外边距， 不设置上下内外边距

* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}	  /*这是一个神奇的代码  以后写css 第一句话*/

4.外边距合并

• 相邻块元素 垂直外边距的合并：
• 当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距 ≠ margin-bottom + margin-top，而是 取两个值中的较大者 ，这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）
• 解决方案：只给一个盒子添加margin
• 嵌套块元素 垂直外边距的合并（塌陷）：
• 为父元素定义上边框  transparent 透明：border-top: 1px solid transparent;
• 为父元素定义上 padding：padding-top: 1px; 
• 为父元素添加 overflow:hidde

5.ps基本操作

• 基本操作：

1. ctrl+r ：打开标尺 或者 视图 -- 标尺
2. 右击标尺：把单位改为 像素
3. ctrl+ 加号：放大视图；ctrl+ 减号：缩小视图
4. 按住空格键：鼠标变成小手 ，拖动 ps视图
5. 选区拖动：测量大小

• 切图操作：

1. 用切片选中图片：选图-- 图层菜单：新建基于图层的切片 -- 利用辅助线切图（基于参考线的切片）
2. 导出切片：文件菜单 -- 存储为web设备所用格式 ---- 选择 我们要的图片格式 ---- 点存储 --- 别忘了选中的切片
3. 辅助线和切片的使用及清除：视图菜单 -- 清除 辅助线/ 清除切片

6.其他样式补充

• 去掉 li默认样式（小圆点）：li { list-style: none; }
• 圆角：border-radius: 50%;： // 圆形，也可替换成半径长度20px
• 盒子阴影：水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色  内/外阴影；
• 前两个属性是必须写的。其余的可以省略
• box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
• 外阴影 (outset) 是默认的，但是不能写，想要内阴影可以写 inset 
• 效果展示：
• 行高 = 高度：只能让单行文本垂直居中，两行不可
• 子盒子 宽度 可以比父盒子大

7.CSS书写规范

• 空格规范：

1. 选择器 与 { 之间必须包含空格：.selector {}
2. 属性名 与 : 之间不许空格， : 与 属性值 之间必须有空格：font-size: 12px;

• 选择器规范：

1. 并集选择器，每个选择器声明必须独占一行
2. 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确

• 
• 

 

六.浮动（float）

1.放盒子的三种机制

• CSS提供 3 种机制 设置盒子位置：普通流（标准流）、浮动、定位
• 三种机制区别：

2.浮动口诀

• 浮动：让多个盒子水平排成一行，最早用来控制图片，实现文字环绕图片效果
• 口诀：浮、漏、特：

		.one {	/*不是标准流了， 漂浮起来， 相当于不占位置，浮在标准流的上面*/
			float: left;
			background-color: pink;
		}
		.two {  /*是标准流，因为浮动.one不占位置，所以.two在.one下面*/
			background-color: purple;
		}

• 效果：
• 口诀：浮、漏、特：

div {
    /* 转换为行内块元素，可以水平显示，不过 div之间有间隙，不方便处理 */
    /* display: inline-block; */
    /* 设置浮动属性，可以让 div 水平排列，并且没有间隙 */
    float: left;
}

• display: inline-block; ：转换为行内块元素，可以让盒子一行显示，不过 div间有间隙，不方便处理
• float: left;：设置浮动属性，让 div水平排列，并且没有间隙
• 总结：float 可以实现 inline-block 的效果，让元素可以一排显示，并且没有空隙 
• 注意：浮动元素互相贴一起，如果父级宽度装不下浮动盒子， 多出的盒子会另起一行

3.浮动应用

• 小米案例：
• 导航栏：实际重要的导航栏中，不会直接用链接a，而是用 li 包含链接(li+a)的做法
• 直接用a，搜索引擎辨别为堆砌关键字嫌疑（有降权的风险），从而影响网站排名

4.浮动元素关系

• 浮动元素与父盒子的关系：

1. 子盒子的浮动参照父盒子对齐
2. 不会与父盒子的边框重叠，也不会超过父盒子的内边距 ​

• 浮动元素与兄弟盒子的关系：
• 在一个父级盒子中，如果前一个兄弟盒子是：

1. 浮动的，那么当前盒子会与前一个盒子的顶部对齐，即水平摆成一排
2. 普通流的，那么当前盒子会显示在前一个兄弟盒子的下方，因为普通流占据空间，所以不会让盒子浮上来

• 总结：浮动只会影响 当前 或者 后面的标准流盒子，不会影响 前面的标准流盒子
• 技巧：如果一个盒子里有多个子盒子，其中一个子盒子浮动，其他兄弟也应该浮动，防止引起问题
• 浮动的元素 不会有外边距塌陷的问题

5.清除浮动（clear）

• 很多情况下，父盒子不方便给高度，根据内容撑开，有多少内容，父盒子就有多高
• 使用场景：父级没设置高度，子盒子浮动了，影响下方布局，则清除浮动，父级就会自动监测高度了
• 效果展示：
• 清除浮动方法：

1. 给父级添加 overflow 清除浮动 不需要加新标签
2. 给父级添加 after伪元素，在父元素类名中引用.clearfix
3. 给父级添加双伪元素，在父元素类名中引用.clearfix
4. 额外标签法

		.one { /*这个父盒子没有设置高度*/ 
			width: 500px;
			border: 1px  solid red;
			overflow: hidden; /*方法二：给父级添加 overflow 清除浮动 不需要加新标签*/
		}
		/*不清除浮动，父盒子就会和大毛二毛以及two重叠在一起，因为父盒子没高度，大毛二毛浮动*/
		.damao {
			float: left;
			background-color: purple;
		}
		.ermao {
			float: left;
			background-color: skyblue;
		}
		.two {
			width: 700px;
			height: 150px;
			background-color: #000;
		}
		.clear { 	/*方法一：额外标签法*/
			clear: both;
		}

        /*方法三：给父级添加 after伪元素*/
		.clearfix:after {  /*固定代码，在父元素类名中引用.clearfix*/
			content: "";
			display: block;
			height: 0;
			visibility: hidden;
			clear: both;
		}
		.clearfix {
			*zoom: 1;  /*ie6,7 专门清除浮动的样式*/
		}
        /*方法四：给父级添加双伪元素*/
        .clearfix:before,
		.clearfix:after {
			content: "";
			display: table;
		}
		.clearfix:after {
			clear: both;
		}
		.clearfix {
			*zoom: 1;    /*ie6,7 专门清除浮动的样式*/
		}
	</style>
</head>     
<body>
	<div class="one clearfix">    /*父级元素盒子*/
		<div class="damao"></div>    /*子级元素兄弟一*/
		<div class="ermao"></div>    /*子级元素兄弟二*/
		<div class="clear"></div>    /*方法一：额外标签法*/
	</div>
	<div class="two"></div>    /*可能会被上述浮动干扰的其他普通流盒子*/
</body>

• 
• 

七.定位（position）

• 定位：将盒子定在标准流和浮动的上面
• 定位 = 定位模式 + 边偏移
• 边偏移：
• 定位模式（position）：静态定位、相对定位、绝对定位、固定定位
• 堆叠顺序（z-index）：

1. 定位盒子：默认后来者居上
2. 该属性只能应用于相对 / 绝对 / 固定定位，其他标准流 / 浮动 / 静态定位无效

1.静态定位（static）-了解

• 默认方式，相当于无定位；按照标准流摆放，没有边偏移，几乎用不到

2.相对定位（relative）-重要

1. 相对于自己原来在标准流中位置移动
2. 原来在标准流的区域继续占有，后面的盒子仍然以标准流对待它

3.绝对定位（absolute）-重要

1. 完全脱标（不占原来的位置）
2. 父没定位就以 浏览器 为定位，父有定位就以 父（或者祖先）进行定位

• 绝对定位要和父级搭配使用：父级相对定位，子级绝对定位
• 原因：父级需要占有位置，相对定位可按照标准流处理父级元素，子级可以随意摆放，绝对定位完全脱标
• 绝对定位和浮动的关系：

1. 绝对定位：脱标，利用边偏移指定准确位置
2. 浮动：脱标，不能指定准确位置，让多个块级元素在一行显示

• 
• 绝对定位盒子居中：
• 绝对定位 margin 左右auto 不能让盒子水平居中，标准流 margin 左右auto 可以让盒子水平居中

		div {
			position: absolute;
			left: 50%; 	/*1.left 50% 走父亲宽度的一半*/	
			margin-left: -100px; /*2.margin-left 左走自己宽度的一半  一定注意是 负值*/
			width: 200px;
		}

4.固定定位（fixed）-重要

• 特殊的绝对定位：只认浏览器可视窗口 + 边偏移属性，和父级是否定位没关系
• 使用固定定位时，如果盒子中没有内容，需要指定宽度，比如 width:100%

5.定位与模式转换

• 转换行内块方法：display:inline-block / float默认转换 / 绝对定位 / 固定定位
• 行内盒子，如果加了浮动、固定定位、绝对定位，不用转换，就可以给这个盒子直接设置宽高
• 浮动、固定定位、绝对定位 不会触发 外边距合并的问题
• 

6.网页布局

• 标准流：可以让盒子上下排列 或者 左右排列
• 浮动：可以让多个块级元素一行显示 或者 左右对齐盒子，浮动的盒子就是按照顺序左右排列
• 定位：有层叠的概念，可以让多个盒子 前后 叠压来显示， 但每个盒子需要测量数值

九.高级技巧

1.元素的显示和隐藏

• 类似网站广告，当点击关闭就不见了，重新刷新页面，会重新出现
• display （重点）：

1. display: none 隐藏对象：隐藏之后，不再保留原来的位置
2. display：block 转换为块级元素 / 显示元素：配合js做特效，鼠标经过，显示下拉菜

• visibility 可见性 （了解）：

1. visibility：visible ; 对象可视
2. visibility：hidden; 对象隐藏：隐藏之后，继续保留原有位

• overflow 溢出（重点）：

1. overflow: hidden 溢出隐藏，超出盒子大小的部分 隐藏起来，清除浮动
2. overflow: scroll; 总是显示滚动条，不超出盒子大小，太丑了不常用
3. overflow: auto; 如果超出，就显示滚动条；如果不超出，不显示滚动条

• 总结：

2.用户界面样式

• 鼠标样式 cursor：

1. cursor:default：我是小白
2. cursor:pointer：我是小手
3. cursor:move：我是移动
4. cursor:text：我是文本
5. cursor:not-allowed：我是禁止

• 轮廓线 outline：

1. <input  type="text"  style="outline: 0;"/>
2. 也可以设置为 outline:none; 表示取消轮廓线

• 防止拖拽文本域 resize：
• <textarea  style="resize: none;"></textarea>
• vertical-align 垂直对齐：
• 仅用于 行内元素 或者 行内块元素，对块级无效！！块级元素不会有底部空白
• 默认基线对齐，所以底部有空白缝隙，去除图片在 div中底部空白方法：别是基线对齐即可

1. vertical-align: baseline;（默认）
2. vertical-align: bottom;
3. vertical-align: middle;

• white-space：用于强制一行显示内容

1. white-space:normal ；    // 默认处理方式
2. white-space:nowrap ;    // 强制在同一行内显示所有文本，直到文本结束 / br标签才换行

• text-overflow ：文字溢出

1. text-overflow : clip ；    // 不显示省略标记（...），而是简单的裁切 
2. text-overflow：ellipsis ；    // 当对象内文本溢出时显示省略标记（...）

• 溢出的文字省略号显示 总结三部曲：

1. 先强制一行内显示文本：white-space: nowrap;
2. 超出的部分隐藏：overflow: hidden;
3. 文字用省略号替代超出的部分： text-overflow: ellipsis

3.精灵技术（sprite）

• 精灵技术目的：为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度
• 解决方法：将页面中的 背景图片（不是插入图片）放在一张大图片上，这样只需请求一次服务器
• 步骤：

1. 精确测量，每个小背景图片的大小和位置
2. 给盒子指定小背景图片时， 背景定位基本是 负值

		div {    // 这里设置了四个字母背景的公共属性，就不需要在下面重复写了
			float: left;
			background: url(images/abcd.jpg) no-repeat;
		}
		.p {  
			width: 92px;
			height: 108px;
			background-position: -497px -278px; // 背景定位是负值
		}
        ...
<body>
	<div class="p"></div>
    ...
</body>

• 效果展示： 

4.滑动门技术

• 核心：利用 精灵技术 + 盒子padding撑开宽度,，来适应不同字数的导航栏
• 经典导航栏布局：a 中包含 span标签
• <li><a href="#"> <span>导航栏内容</span> </a></li

	   a { /*a 是设置 左侧背景（左门）*/
			display: inline-block; 
			height: 33px; /*指定高度*/
			background: url(images/to.png) no-repeat;
			margin: 100px;
			padding-left: 15px; /*利用padding撑开盒子*/
			color: #fff;
		}
		a span { /*span 是设置 右侧背景（右门）*/
			display: inline-block;
			height: 33px;
			/*一定注意 span 需要背景图片 右对齐*/
			background: url(images/to.png) no-repeat right top;
			padding-right: 15px;
		}
		/*因为整个导航栏都是链接，所以 a要包含span */

5.margin负值之美

• 突出显示某个商品列表中的盒子：

		div {
			float: left;        /*想象产品列表，浮动盒子贴在一起*/
			width: 200px;
            ...
			margin-left: -1px;   	/*此处可以让重复部分的边框没那么粗…*/
			margin-top: -1px;
		}
		div:hover { /*鼠标经过div 的意思  p:hover鼠标经过文章 */
			border: 1px solid #f40;
			position: relative; /*相对定位 占位置 防止被其他元素占据原来位置，导致无法显示*/
			z-index: 1; /*都是定位的盒子，通过z-index 来实现层级关系，鼠标经过升到最高处*/
		}

6.CSS三角形

		div {
			width: 0; /*宽度为0*/
			height: 0; /*高度为0*/
			border-top: 10px solid red;
			border-right: 10px solid green;
			border-bottom: 10px solid blue;
			border-left: 10px solid pink;
		}
		p {
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 10px;
			/*4个边框都要写， 只保留需要的边框颜色，其余的不能省略，都改为 transparent透明*/
			border-color:  transparent transparent transparent red;
			/*为了照顾兼容性 低版本的浏览器，加上 font-size: 0; line-height: 0;*/
			font-size: 0;
			line-height: 0;
		}

• 效果展示：

七.不知名网结构分析

1.CSS属性书写顺序（重点）

1. 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2. 自身属性：width / height / margin / padding / border / background
3. 文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

2.布局流程

1. 版心（可视区）
2. 分析行模块以及每个行中的列
3. 制作 html结构
4. 运用盒子模型控制模块

2.1 版心

• 版心是 1200像素，每个版心都要水平居中对齐：

.w {
    width: 1200px;
    margin: auto;
}

2.2 头部制作

1. 版心盒子 即1号盒子 水平居中对齐, 上下给一个 margin值
2. 版心盒子 里面包含 2号盒子 logo
3. 版心盒子 里面包含 3号盒子 nav导航栏
4. 版心盒子 里面包含 4号盒子 search搜索框
5. 版心盒子 里面包含 5号盒子 user个人信息
6. 注意，里面的 4个盒子 必须都浮动

2.3 banner制作

1. 1号盒子是通栏的大盒子banner， 不给宽度，给高度
2. 2号盒子是版心， 水平居中对齐
3. 3号盒子版心内，左对齐 subnav侧导航栏
4. 4号盒子版心内，右对齐 course 课程

2.4 课程表模块

1. 1号盒子 是 228 * 300 的盒子 右浮动 【浮动的元素 不会有外边距塌陷的问题】
2. 1号盒子内 分为 上下 两个 子盒子
3. 2号子盒子是 上部分 命名为 course-hd (hd 是 head 的简写 头部的意思)
4. 3号子盒子是 下部分 命名为 course-bd (bd 是 body 的简写 主体的意思)

2.5 精品推荐小模块

• 复习点： 里面三个盒子都要垂直居中，利用继承性，给最大的盒子 一个垂直居中的代码就好
• 大盒子水平居中 goods 精品 ，注意此处有个盒子阴影
• 1号盒子是标题 H3 左侧浮动
• 2号盒子 里面放链接 左侧浮动 goods-item 距离可以控制链接的 左右外边距（注意行内元素只给左右内外边距）
• 3号盒子 右浮动 mod 修改

2.6 精品推荐大模块

• 1号盒子为最大的盒子 box 版心水平居中对齐
• 2号盒子为上面部分 box-hd -- 里面 左侧标题H3 左浮动 右侧 链接 a 右浮动
• 3号盒子为底下部分 box-bd --- 里面是无序列表 有 10个 小li 组成
• 小li 外边距的问题， 这里有个小技巧。 给box-hd 宽度为 1215 就可以一行装开5个 li了
• 复习点： 用到清除浮动 因为 box-hd 里面的盒子个数不一定多少，就不给高度了，但是里面的盒子浮动了， 影响下面的布局，此时需要清除浮动

2.7 底部模块制作

• 1号盒子通栏大盒子 底部 footer 给高度 底色是白色
• 2号盒子版心水平居中
• 3号盒子版权 copyright 左对齐
• 4号盒子 链接组 links 右对齐
• 
•