JavaScript程序设计实例教程教案第23-24单元

《页面架构》

《JavaScript程序设计》课第23单元

课程单元教学设计

（2019〜2020学年第1学期）

单元名称：JavaScript初探

所属系部：计算机与通信工程学院

制定人：___________________

合作人：_________________________

制定时间：2020.8

***学院教务处制

JavaScript程序设计课程单元教学设计

单元教学学时2

单元标题：页面架构的实现在整体设计中

第23次

的位置

16web上课上课计算机实

授课班级每周一1,2节

班时间地点验室

能力目标知识目标素质目标

教学

1.能够实现系统页面架构的整

巩固学习培养学生项目开

体布局

目标HTML和CSS的发的能力；培养学

2,能使用MUI框架布局首页，列

使用方法生色彩搭配能力

表页面，

任务：页面架构

教学组织：

能力训练

1,带领学生了解课程任务

2,讲解学习HTML和CSS的使用方法，实现MUI框架布局首页，列表

任务

页面

3.设计页面架构

div+csscss3JavaScript

本次课使documentgetElementByld

menustyledisplay

用的外语marginposition

background

单词

background-repeat

案例：页面架构

教学材料：

案例和1.教材名称：JavaScript程序设计实例教程》第2版主编：程乐、郑

丽萍、刘万辉，出版社：机械工业出版社，出版日期：2020年3月。

教学2.参考教材名称：《JavaScript与jQuery案例教程》主编：郑丽萍，

出版社：高等教育出版社。

材料3.教学多媒体课件，项目源文件。

多媒体资料：http://www.icourse163.org/course/HCIT72067068284.

仪器与设备：计算机等

单元教学进度设计（纲要）

教学内容

时间

步骤及能力/知教师活动学生活动

（分钟）

识目标

1

介绍本节课

情境导导入本次课教学情境学生了解工作情境2

的教学目标.

入

2任务：页面架

交代任务学生接受任务3

引入构

掌握主界面结构主要

讲解主界面结构分析组成部分，主题背景10

色的设定

掌握主体样式的设

3讲解页面主体样式的设定10

定，

知识点页面木构

讲解页脚导航部分的布局

讲解掌握导航布局和样式10

及样式设定

主界面页面背景色的

教师巡视，发现问题设定，各部分样式的15

设定

掌握页面架构制作的

教师演示10

4步骤和方法

页面架页面木构

使用MUI框架布局首

构设计教师巡视，发现问题20

页，列表页面

5检查学生完抽查学生完成情况，讲解出演示自己的界面，修

5

评比成情况现的问题改出现的问题

6重点强调学生练习中出现

页面架构学生思考反馈5

总结的问题

作业如何改变元素的内容？

课后

体会

、情境导入

介绍本节课的教学目标

二、引入

任务：页面架构

三、知识点讲解

a.隐藏列表顶部的空隙

#list1{

margin-top:-1px;

)

<标题<标题

Item1

Item1

Item2

Item2

Item3

Item3

区◎

党区春照

处件设置

首页-e

b.让导航栏、标题栏中背景色为黄色、活动项前景色为红色

.mui-active.mui-tab-labeI{color:red;}

.mui-active.mui-icon{color:red;}

.mui-bar*{color:green;background:#FFFF88}

<h1class="mui-titIe"styIe="margin-right:-50px;margin-1eft:-50px;">标题</h1>

<标题<标题

Item1Item1

Item2Item2

Item3Item3

贷%区©区播

首页电话扬件S34首页亳话S3

新建app项目

3、真机调试及运行

不管是iOS还是Android,不管是模拟器还是真机，都可以与HBuilder连接进

行真机运行。

以往开发App,需要改一个界面，然后打包，然后安装到手机上，然后进入那

个界面，看看改对了没。没有的话循环这套动作，非常低效。

有了真机运行，改了代码后保存，手机立即看到效果，如果在手机上运行时发生

错误,那么日志和错误信息也都可以反馈到HBuilder控制台。

有些开发者喜欢alert大法，但事实上在HBuilder的js里敲clog,用打日志来

调程序更好。

页面总体架构描述

首页

五、评比

检查学生完成情况

六、总结

主体页面架构

《JavaScript初探》

《JavaScript程序设计》课第24单元

课程单元教学设计

（2019〜2020学年第1学期）

单元名称：JavaScript初探

所属系部：计算机与通信工程学院

制定人：___________________

合作人:_________________________

制定时间：2020.8

***学院教务处制

JavaScript程序设计课程单元教学设计

单元教学学时2

单元标题：JavaScript初探在整体设计中的

第1次

位置

16移1周9月5日第

授课班上课上课计算机实

动开1节至1周9

级时间地点验室

发班月5日第2节

能力目标知识目标素质目标

了解JavaScript简

教学1.能够使用多种方案引入史和引擎的工作原

JavaScript脚本代码到HTML文档树立学习信

理。掌握

目标中。心；培养讨论

的组

2.能够使用常用的输出语句。JavaScript思考的习惯

3.能够获取元素并改变元素内容。成、主要特点和相关

应用。

任务：JavaScript初探

能力训教学组织：

1.带领学生了解课程任务

练任务2.讲解JavaScript简史及相关术语

3.引入JavaScript脚本代码到HTML文档中，使用常用的输出语句

JavaScriptWeb

本次课

functionDate

getFuIIYeargetMonthgetDate

使用的

documentgetEIementByIdinnerHTML

外语单

词

案例：JavaScript初探-文字的切换

案例和教学材料：

1.教材名称：《JavaScript程序设计实例教程》第2版主编：程乐、郑

教学丽萍、刘万辉，出版社：机械工业出版社，出版日期：2020年3月

2.教学多媒体课件，项目源文件

材料3.多媒体资料:http:〃www.icourse163.org/course/HCIT-1206706828

4.仪器与设备：计算机等

单元教学进度设计（纲要）

教学内容

时间

步骤及能力/知教师活动学生活动

（分钟）

识目标

1

介绍本节课

情境导导入本次课教学情境学生了解工作情境2

的教学目标.

入

任务：

2JavaScript

交代任务学生接受任务3

引入初探-文字的

切换

讲解JavaScript简史及相了解JavaScript简史

10

关术语及相关术语

讲解JavaScript引擎的工了解JavaScript引擎

10

3JavaScript作原理的工作原理

知识点初探掌握引入JavaScript

讲解引入JavaScript脚本

讲解脚本代码到HTML文档10

代码到HTML文档中方法

中方法

教师巡视，发现问题多种引入方案练习15

掌握常用的输出语句

JavaScript教师演示10

方法

4实践初探文字的

切换教师巡视，发现问题常用的输出语句练习20

5检查学生完抽查学生完成情况，讲解出演示自己的界面，修

5

评比成情况现的问题改出现的问题

6JavaScript重点强调学生练习中出现

学生思考反馈5

总结初探的问题

作业Javascript的主要特点？

课后

体会

一、情境导入

介绍本节课的教学目标

二、引入

任务：JavaScript初探-文字的切换

三、知识点讲解

术语"ECMAScript"和"JavaScript"指的是同一个东西。但如果把

JavaScript看成是“Mozilla或其他组织的ECMAScript实现"，那么

ECMAScript就是实现JavaScript所依据的标准。术语“ECMAScript”也用来描

述语言版本(比如ECMAScript5)0

JavaScript解析引擎就是能够“读懂"JavaScript代码，并准确地给出代

码运行结果的一段程序。比方说，当编写了vara=1+1;这样一段代码，

JavaScript引擎做的事情就是看懂(解析)你这段代码，并且将a的值变为2。

JavaScript引擎就是直接解析并将代码运行结果输出的JavaScript的解释器

JavaScript由三部分组成：

•核心(ECMAScript)描述了该语言的语法和基本对象

•文档对象模型(DOM,Documnet)描述了处理网页内容的方法和接口

•浏览器对象模型(B0M)描述了与浏览器进行交互的方法和接口

JavaScript的主要特点

JavaScript相关应用

选择JavaScript脚本编辑器

引入JavaScript脚本代码到HTML文档中方法

Javascript常用的输出语句：

•使用window.alert()弹出警告框。

,使用document.write。方法将内容写到HTML文档中。

•使用innerHTML写入到HTML元素。

•使用console.log()写入到浏览器的控制台。

四、任务实施

document.getElementById("demo"),使用id属性来查找id为demoHTML

元素，然后给它的innerHTML属性重新的赋值为新的字符串，就有了我们看到的切换文字的效

果。

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8n>

<title>SamplePage!</title>

</head>

<body>

<script>

functionclickMe()

(

document.getElementById("demo").innerHTML二”开始学习JavaScript!";

1

</script>

<divid="demo"style="font-family:微软雅黑'；font-size:36px;color:#00f;n

onclick="clickMe。">准备好了就点击这里!v/div>

</body>

</html>

五、评比

检查学生完成情况

六、总结

文字切换

页面布局基础

HTML标签介绍

网页结构

•一个HTML文件是有自己固定的结构的。

CDOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

</head>

<body>

</body>

</html>

•<!DOCTYPEhtml>定义文档类型，告知浏览器用哪一种标准解释HTML

・可告知浏览器其自身是一个HTML文档。

•<head></head>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有

tle>><script>><style>><link>、<meta>等标签.

•<bodyx/body>标签之间的内容是网页的主要内容，如<hl>、<p>、<a>、<img>等网

页内容标签，在这里的标签中的内容会在浏览器中显示出来。

•<titlex/title>元素可定义文档的标题。

•〈link>标签将css样式文件链接到HTML文件内

•<meta>定义文档的元数据，网页的元信息(charset="utf8”国际编码类型)

第一节HTML基本结构

<style>

p(

color:#777777;

)

.list01{

width:660px;

)

</style>

<divclass="list01">标签的内容v/div>

<br/>

<imgsrc=""/>

•HTML标签是由<>包围的关键词，例：<html>

•HTML标签通常成对出现，分为标签开头和标签结尾，例：<html></html>

•有部分标签是没有结束标签，成为单标签，单标签内必须用/结尾，例：<br/>

•页面中所有的内容，都要放在HTML标签中

•HTML标签主题分为三个部分

—标签名称

-标签内容

标签属性

•HTML标签具有语义化

-语义化：就是仅通过标签名就能判断出该标签的内容。

语义化的作用

•网页结构层次更清晰。

­更容易被搜索引擎收录。

更容易让屏幕阅读器读出网页内容。

«标签的内容就是在一对标签内部的内容

­标签的内容可以是其他标签

第二节标签（元素）全局标准属性

在HTML规范中，规定了8个全局标准属性：

class属性

•用于定义元素的类名。

id属性

•用于指定元素的唯一id

•要注意该属性的值在整个HTML文档中要具有唯一性

style属性

•用于指定元素的行内样式

•使用该属性后将会覆盖任何全局的样式设定

title属性

•用于指定元素的额外信息

文本标签

段落标签<p></p>

段落标签用来描述一段文字

标题标签<hx></hx>

•标题标签用来描述一个标题

•标题标签总共有六个级别，由高到低分别是hl,h2,h3,h4,h5,h6

vhl>我是一级标题v/hl>

vh2>我是二级标题v/h2>

vh3>我是三级标题v/h3>

vh4>我是四级标题v/h4>

vh5>我是五级标题v/h5>

vh6>我是六级标题v/h6>

•<hl></hl>标签在每个页面中通常只出现一次

强调语句标签<em>v/em>

用于强调某些文字的重要性

更加强调标签<strong>v/strong>

和<em>标签一样，用于强调文本，但它强调的程度更强一些

无语义标签<span>v/span>

<span>标签是没有语义。

短文本引用标签<q></q>

简短文字的引用。

长文本引用标签<blockquote>v/blockquote>

定义长的文本引用

换行标签<br/>

<br/>标签作用相当于word文档中的回车，起到文字换行的作用

第三节列表

无序列表标签

•Ul-li是没有前后顺序的信息列表

•<ulxul/>列表定义一个无序列表

•代表无需列表中的每一个元素

<ul>

<li>HTML<li/>

<li>CSS<li/>

<li>JavaScript<li/>

</ul>

有序列表vol><li>vli/>v/ol>

Ol-li列表默认情况下，每个li在浏览器中都会显示一个数字，代表自己的序号

定义列表<dl></dl>

•定义列表通常和<dt></dt>和<dd></dd>标签一起使用

•<dt></dt>定义列表中的项目

•<ddx/dd>描述列表中的项目

<dl>

vdt>学习WEB前段需要掌握哪三种语言v/dt>

vdd>需要掌握HTML,搭建网页结构v/dd>

<dd>需要掌握CSS,用于修改网页结构的样式</dd>

<dd>需要掌握JavaScript,用于用户和计算机交互</dd>

</dl>

第四节表格

表格标签<table></table>

表格的一行vtrx/tr>

有几对tr,表格就有几行。

单元格<td></td>

•表格的一个单元格，一行中包含几对<tdxtd/>,说明一行中就有几列。

<table>

<tr>

vth>姓名</th>

vth>性别</th>

<th>年龄v/th>

</tr>

<tr>

<td>张三v/td>

<1(1>男</td>

<td>25</td>

</tr>

<tr>

<td>小花</td>

<td>女</td>

<td>23</td>

</tr>

<tr>

vtd>李四</td>

<td>男</td>

<td>28</td>

</tr>

</table>

表格的表头vth>v/th>

表格的头部的一个单元格，表格表头。

表格合并

•同一行内，合并几列colspan="2"

•同一列内，合并几行rowspan="3"

*

第五节表单标签系列

表单标签vform>

•<form></form>表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就

可以处理表单传过来的数据。

•<formmethod="^^Caction=呻麻飘

•action：浏览者输入的数据被传送到的地方，比如一个PHP页面（save.php）

•method：数据传送的方式（get/post）

输入标签〈input/〉

input是最重要的表单标签，重要属性包括：

•name：为文本框命名，用于提交表单，后台接收数据用。

•value：为文本输入框设置默认值。（一般起到提示作用）

,type：通过定义不同的type类型，input的功能有所不同（见下表）

type功能说明

text单行文本输入框

password密码输入框（密码显示为***）

radio单选框（checked属性用于显示选中状态）

checkbox复选框（checked属性用于显示选中状态）

file上传文件

button普通按钮

reset重置按钮（点击按钮，会触发form表单的reset事件）

submit提交按钮（点击按钮，会吃饭form表单的submit事件）

email专门用于输入e-mail

url专门用于输入url

number专门用于number

range显示为滑动条，用于输入一定范围内的值

date选取日期和时间（还包含：month、week、time>datetime>

datetime-local）

color选取颜色

〈button〉按钮

button标签的功能与<input>按钮功能相同，button是双标签，内部可以嵌套其他

行内元素。

下拉选择框<select>v/select>

<select>

<optionvalue二"看书”>看书</option〉

<optionvalue二"旅游"selected="selected”,旅游〈/option〉

<optionvalue二“运动"〉运动〈/option〉

<optionvalue二“购物"〉购物〈/option〉

</select>

•<optionvalue=”提植）选Voption>是下拉选择框里面的每一个选项

•selected：当某个option选项有这个属性时候，select默认选中这个选项

文本域<textarea></textarea>

•当用户想输入大量文字的时候，使用文本域

,cols：多行输入域的列数。

•rows：多行输入域的行数

CSS概述

第一节css代码语法

,CSS全称为层叠样式表(CascadingStyle

Sheets),它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体

加粗等。

•css代码通常存放在<style></style>标签内

•CSS样式由选择符和声明组成，而声明又由属性和值组成

•■值例：p{color:red;}

•选择符：又称选择器，指明网页中要应用样式规则的元素

•声明：在英文大括号{}中的的就是声明，属性和值之间用英文冒号：分隔。当有多条声明

时，中间用英文分号；分隔，如：

P(

font-size:12px;

color:red;

第二节CSS放置位置

行内样式

•直接书写在标签的style属性中

•不建议使用

<divstyle=''width:200px;height:200px;"></div>

内联式样式表

•写在<style*/style)标签中

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<style>

.box{

width:200px;

height:200px;

background-color:red;

)

</style>

</head>

<body>

</body>

</html>

外联样式表

•将一个独立的.css文件引入到HTML文件中，使用<link>标签写在<head>标签中。

链接式会以网页文件主体装载前装载CSS文件。

•rel="stylesheet”定义类型为层叠样式表，一定要写

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<linkhref="My.cssnrel="stylesheet"type="text/css">

</head>

<body>

</body>

</html>

第三节CSS的继承

•css的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅

应用于某个特定html标签元素，而且应用于其后代。

,不可继承样式：display>margin>border>padding>backgroundsheight>min-height>max

-height、width、min-width>max-width、overflow>position>left>right>top>bottom>z-i

ndex>float、clear

•可以继承的样式：letter-spacing>word-spacing>white-space>line-height>color>font>fon

t-family>font-size>font-style>font-variant>font-weight、text-decoration>text-transform>

direction>visibility>cursor

css选择器

第一节选择器的种类

标签选择器

通过标签的名字，修改css样式

div{

width:200px;

height:300px;

)

通配符选择器

•选择页面中所有的元素

*{

margin:©;

padding:0;

)

属性选择器

后代选择器

•选择某个父元素下面所有的元素

.boxp{

background-color:red;

)

一级子元素选则器

•选择某个父元素的直接子元素

•后代选择器是选择父元素的所有子孙元素，一级子元素原则器只选择第一级子元素，不会

再向下查找元素

.box>p{

background-color:red;

}

id选择器

通过id查找页面中唯一的标签，用#标示id

#wrap{

width:200px;

height:300px;

class选择器

通过特定的class（类）来查找页面中对应的标签，以.class名称

.box{

width:200px;

height:300px;

)

<divclass="box"x/div>

伪类选择器

•:hover鼠标移入某个元素

.box:hover{

color:red;

)

•：before在某个元素的前面插入内容

div:before{

content:'-台词";

background-color:yellow;

color:red;

font-weight:bold;

)

•:after在某个元素的后面插入内容

diy:after{

content:n-台词”；

background-color:yellow;

color:red;

font-weight:bold;

)

群组选择器

•可以对多个不同的选择器设置相同的样式

.box,.boxl,.box2{

width:200px;

height:300px;

)

第二节选择器的优先级

•当有不同的选择器对同一个对象进行样式指定时，并且两个选择器有相同的属性被赋予不

同的值时。

•通过测算那个选择器的权重值最高，应用哪一个选择器的样式

•权重计算方式

标签选择器：1

-class选择器：10

-id选择器：100

-行内样式：1000

-1important最高级别，提高样式权重，拥有最高级别

p{width:200px}/*权重1*/

.box{width:200px}/*权重10*/

.boxp{width:200px}/*权重11*/

#txt{width:200px}

•如果两个选择器的权重值一样高，则应用距离对象最近的css样式

css样式（属性）

第一节背景样式

背景颜色background-color

•background-color:red

•背景颜色的值可以是英文，可以是十六进制颜色值，可以是rgb,也可以是rgba

背景图片background-image

•background-image:url（bg01.jpg）;

•背景图片的大小可以和容器大小不一样

•背景图片不会占位

•如果容器大，背景图片小，背景图片会平铺铺满整个容器

背景图片位置background-position

•background-position:10px100px;

•背景图片定位的值是两个单位，分别代表坐标x,y轴

,背景图片定位的值可以是应为left,right,top,bottom,center

•背景图片定位的值也可以是百分比或者像素

背景图片重复background-repeat

•background-repeat:no-repeat

•no-repeat设置图像不重复，常用

•round自动缩放直到适应并填充满整个容器

•space以相同的间距平铺且填充满整个容器

背景图片定位background-attachment

•background-attachment:fixed

•背景图像是否固定或者随着页面的其余部分滚动

background-attachment的值可以是scroll（跟随滚动），fixed（固定）

background缩写

•background:#ff0000url（bg01.jpg）no-repeatfixedcenter

*

第二节字体样式

字体族font-family

•font-family:"彳1^J黜；

使用逗号隔开多种字体（优先级从前向后，如果系统中没有找到当前字体，则往后面寻找

）

字体大小font-size

•font-size:12px;

•网页默认字体大小是16Px

字体粗细font-weight

•font-weight:400；

,normal（默认）

•bold（加粗）

,bolder（相当于〈strong〉和vb＞标签）

•lighter（常规）

•100〜900整百（400=normal,700=bold）

字体颜色color

•颜色的英文单词color:red;

•十六进制色：color:#FFFF00;

•RGB（红绿蓝）color:rgb（255,255,0）

•RGBA（红绿蓝透明度）A是透明度在。〜1之间取值。color:rgba（255,255,0,0.5）

字体斜体font-style

font-style:italic

,normal文本正常显示

•italic文本斜体显示

•oblique文本倾斜显示

*

第三节文本属性

彳丁injline-height

•line-height:50px;

•可以将父元素的高度撑起来

文本水平对齐方式text-align

•left左对齐

,center文字居中

,right右对齐

文本所在行高的垂直对齐方式vertical-align

,baseline默认

•sub垂直对齐文本的下标，和。1|13＞标签一样的效果

•super垂直对齐文本的上标，和。1^＞标签一样的效果

•top对象的顶端与所在容器的顶端对齐

•text-top对象的顶端与所在行文字顶端对齐

•middle元素对象基于基线垂直对齐

•bottom对象的底端与所在行的文字底部对齐

•text-bottom对象的底端与所在行文字的底端对齐

文本缩进text-indent

•text-indent:2em;

•通常用在段落开始位置的首行缩进

字母之间的间距letter-spacing

单词之间间距word-spacing

文本的大小写text-transform

•capitalize文本中的每个单词以大写字母开头。

,uppercase定义仅有大写字母。

•lowercase定义仅有小写字母。

文本的装饰text-decoration

•none默认。

•underline下划线。

•overline上划线。

•line-through中线。

自动换行word-wrap

•word-wrap:break-word;

*

第四节基本样式

宽度width

•width:200px;

•定义元素的宽度

高度height

•height:300px

•元素默认没有高度

•需要设置高度

•可以不定义高度，让元素的内容将元素撑高

鼠标样式cursor

定义鼠标的样式cursor:pointer

-default默认

pointer小手形状

-move移动形状

透明度opacity

•opacity:0.3

•透明度的值可以使。〜1之间的数字，。代表透明，1代表完全不透明

•透明的元素，只是看不到了，但是还占据着文档流

可见性visibility

•visibility:hidden;

,visible元素可见

•hidden元素不可见

•collapse当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

溢出隐藏overflow

•设置当对象的内容超过其指定高度及宽度时如何显示内容

•visible默认值，内容不会被修剪，会呈现在元素框之外。

•hidden内容会被修剪，并且其余内容是不可见的。

•scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

•auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

边框颜色outline

•input文本输入框自带边框，且样式丑陋，我们可以通过outline修改边框

•outline:lpxsolid#ccc；

•outline:none清除边框

第五节样式重置

早期的网页没有css样式，为了界面美观，很多元素自带margin、padding等样式，但这些样式

在不同浏览器解析的值都不一样，需要将css样式重置，保证在不同浏览器显示一致。

清除元素的margin和padding

去掉自带的列表符

•去掉自带的下划线

*{margin:©;padding:0;}/*清除页面所有标签自带的外间距和内填充*/

ul,ol{list-style:none;}/*去掉自带的列表符*/

a{text-decoration:none;}/*去掉自带的下划线*/

img,input(border:none;}/*清除IE下自带的边框*/

第六节盒模型样式

HTML元素分类

在讲解CSS布局之前，我们需要提前知道一些知识，在CSS中，html中的标签元素大体被分为

三种不同的类型：块状元素、内联元素和内联块状元素。

元素分类特性标签

块级元素1、每个块级元素都从新的一行开始，并且<div><p><hl>〜<h6>

其后的元素也另起一行。<br/>2、元素的<ol><ul><dl>

高度、宽度、行高以及顶和底边距都可设<address>

置。<br/>3、元素宽度在不设置的情况下，<blockquote><form>

是它本身父容器的100%（和父元素的宽度

一致），除非设定一个宽度。

行内元素1、和其他元素都在一行上；<br/>2、元素<a><span><br/><i>

的高度、宽度、行高及顶部和底部边距不<em><strong><label>

可设置；<br/>3、元素的宽度就是它包含<q>

的文字或图片的宽度，不可改变。

行内块状元1、和其他元素都在一行上；<br/>2、元素<img><input>select

素的高度、宽度、行高以及顶和底边距都可textareabuttoniframe

设置。

元素分类转换display

•block：将元素转换为块级元素

•inline：将元素装换为行级元素

•inline-block：将元素转换为内联块元素

•none:将元素隐藏

描边border

•border:2pxsolid#f00;

•盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色（

边框三个属性）。

•线条的样式：

-dashed（虚线）［dotted（点线）|solid（实线）。

•CSS样式中允许只为一个方向的边框设置样式：

-下描边border-bottom:lpxsolidred;

上描边border-top:lpxsolidred;

右描边border-right:lpxsolidred;

左描边border-left:lpxsolidred;

间距margin

•div{margin:20px10px15px30px;}

•元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下

、左。

•也可以分开写：

div{

margin-top:20px;

margin-right:10px;

margin-bottom:15px;

margin-left:30px;

）

•当margin给一个值时：指的是四个方向

•当margin有两个值时：指的是上下左右

•当margin给三个值时：指的是上左右下

•当margin给四个值时：值的是上右下左

内填充padding

•padding:10px

•元素内容与边框之间是可以设置距离的，称之为填充。填充也可分为上、右、下、左。

如下代码：div{padding:20px10px15px30px;}

顺序一定不要搞混。可以分开写上面代码:

div{

padding-top:20px;

paddi