所涉及的知识如表：
整 体 布 局 |
Div 标签 |
整体布局必备标签 |
Css是什么 |
了解css的作用 |
|
Css引入方式 |
将样式文件与html文件挂钩 |
|
Css选择器 |
将具体样式与相关标签挂钩 |
|
Css编码规范 |
提升代码质量与可维护性 |
|
Css样式重置 |
去除标签的默认样式 |
|
盒模型 |
通过css选择器与相应文件相关联，之后通过设置盒模式的属性，实现每个块的尺寸设置 |
|
浮动 |
使用浮动，让多个块既能设置高度，也能够与其他元素处于同一行，实现布局 |
|
清除浮动 |
清除浮动元素对其他元素的印象，保证布局的正常状态 |
2.1 div 元素
标签含义：
Div元素没有任何具体含义，是一个块元素，默认情况系占据父级元素的宽度，由内容撑开高度；可以设置高度和宽度，设置后，依旧独自占据父元素的一行。
2.2 css引入方式
1）行内书写---------最简单的样式操作方式
直接将“样式”作为标签的“属性”来书写
基本语法:<标签名 style=”具体样式属性：属性值”>内容</标签名>
代码示例：<div style=”border: 1px solid red”>1</div>
代码解析：style是div标签的属性，表示的是“样式”。Style中的border指的是边框这种样式，而“1px solid red ”表示的是边框样式为1像素、实现、红色。
2）内部书写---------简化样式操作
简化样式操作的“内部书写”，将css的属性，属性值放在一个<style></style>标签中。
3）外部引入---------控制多页面样式
一个网站中拥有10个甚至更多的HTML页面，在这10个HTML页面中，必然会拥有相同的部分，例如，网页的头部、底部、导航区、某些模块等。如果能够一次行控制这些不同HTML中的相同模块的样式，内部书写就无法满足
Link标签：将外部样式表文件链接到HTML文档中。
Link标签的书写方式：<link rel=”stylesheet” type=”text/css” href=”css/index.css”>
@import的基本语法：<style type=”text/css” media=”screen”>@import url(“css文件”);</script>
字符编码：外部引入的css文件，需要进行字符编码的设置：@charset”UTF-8”;
Link与@import的区别于使用原则：
这两种方法虽然都能够实现外部引入css,但是存在一定的区别，大多数人在实际开发中放弃了使用@import的引入方式。
link是XHTML标签，除了加载css外，还可以定义rss等其他事务；@import属于css范畴，只能加载css。
‚link引用css时，在页面载入时同时加载；@import需要页面网页完全载入后才加载。
ƒlink是XHTML标签，无兼容问题；@import是在css2.1中提出的，低浏览器不支持。
④link支持使用JavaScript控制dom去改变样式；而@import不支持。
最后，三种引入方式的比较如下：
引入方式 |
控制性 |
维护性 |
应用场景 |
优先级 |
行内引用 |
最弱 （当前标签） |
不利于维护 |
特殊情况 |
最高 |
内部引用 |
中等 （当前页面） |
维护性一般 |
比较大型网站的首页 （最快速度加载出首页） |
中等 |
外部引用 |
最强 （多个页面） |
便于维护 |
大部分小型网站 |
最低 |
2.3 css选择器
三种基本选择器分别被称为id选择器、类名选择器与标签选择器。对于id选择器可以理解为身份证；类名选择器可以理解为班级、标签名选择器可以理解为性别。三种基本选择器的用法如下表：
选择器类型 |
标签中的属性 |
Css中的使用方法 |
优先级 |
Id选择器 |
定义标签的id属性和属性值 |
#选择器名{ 属性：属性值; } |
最高 |
类选择器 |
定义标签的class属性和属性值 |
.选择器名{ 属性：属性值； } |
中等 |
标签名选择器 |
无 |
标签名{ 属性：属性值； } |
最低 |
2.4 书写规范
Css格式规范
1） 每一条规则的大括号{前后加空格；
2） 每一条规则结束的大括号}前后加括号；
3） 属性名冒号之前不加空格，冒号之后加空格；
4） 每一个属性值后必须添加分号；单行模式下，分号后加空格。
Div { width: 100px;height:200px; }
类名命名规范
1）建议使用英文单词进行命名；
2）建议根据模块具体含义使用是英文单词，类名要有具体含义
3）建议英文单词可以进行适当的缩写；
4）建议不同单词之间，可以使用连字符或下划线进行分隔；
5）建议尽量避免class与id重名
样式书写顺序
这些样式属性可以简单地划分为四类，分别是“显示样式”、“自身样式”、“文本样式”、“css3样式”。在进行编码时，遵循“显示样式”-->“自身样式”-->“文本样式”-->“兼容与css新样式”
显示样式：控制元素展示方式的属性，主要包括浮动（float）、定位（position）、展示方式（display）、超出状态以及可视化（overflow、visibility）等。
自身样式：关于元素自身的样式属性，主要就是weight、height、margin、padding、border
文本样式：用于处理背景图片、段落文章、文字字体的样式。
Css3新样式：css新增的属性。
2.5 样式重置
为何需要样式重置
1）防止默认样式对css书写带来的不便
2）保证网页在各个浏览器表现的一致性
样式重置文件
下列代码即清除各个标签默认样式的代码：
它主要有两个功能，一类代码是用来清除标签的默认样式，另一类代码则是根据当前的网站制作需求，修改一些默认样式，以方便开发工程师进行网站代码的开发与书写。
2.6 盒模型
鱼 缸 |
盒 模 型 |
设置代码 |
单位：cm |
单位：px |
Width：100px; Height:100px; Margin:5px; Padding:10px; Border:2px solid #39f |
鱼缸区 100X100 |
Width 、height |
|
泡沫区 10cm |
padding |
|
边界区 2cm |
Border |
|
外部空隙区 |
Margin |
盒模型----margin属性
设置一个元素外边距的宽度。外边距可以理解为当前元素与父级或其他兄弟集元素之间的距离。
Margin：5px 5px 5px 5px; 四个值与方向的对应顺序为“上-右-下-左”。
Margin：10px 20px 5px; 三个值与方向的对应顺序为“上-左右-下”。
Margin：10px 20px; 两个值与方向的对应顺序为“上下-左右”。
‚盒模式----padding属性
设置一个元素内边距的宽度。外边距可以理解为当前元素与元素边框之间的距离。
描述 |
|
auto |
浏览器计算内边距 |
length |
规定以具体单位计的内边距值，比如像素、厘米等。默认都是0px |
% |
规定基于父元素的宽度的百分比的内边距 |
inherit |
规定应该从父元素继承内边距 |
ƒ盒模式----border属性
1、复合属性
Border是一个复合属性，一个边框包括边框的宽度、边框的颜色以及边框的类型。类型主要有：solid（实线）、dotted(电线)，dashed（虚线）。
2、分写方法
边框有四个方向，每个方向的边框都有三种属性
Border-left-width: 10px;
3、缩写方法
属性名 |
属性含义 |
Border-width |
设置边框宽度 |
Border-style |
设置边框样式 |
Border-color |
设置边框颜色 |
Border-left|right|top|bottom |
设置左侧、右侧、顶部、底部边框，需要包含边框宽度、边框样式、边框颜色 |
Border |
设置4个方向的边框宽度、边框样式、边框颜色 |