Web前端开发（HTML5+CSS3+JavaScript） 课件 第5章 盒子模型与文本格式.pptx

Web前端基础技术;;一盒子模型;元素的width和height属性;（1）独立设置

margin-top:上外边距px；margin-right:右外边距px；margin-bottom：下外边距px；margin-left:左外边距px;1.段落：宽度为300px，高度为100px;

2.在1基础上，设置左、右内边距为100px；

3.在2基础上，设置左、右外边距为100px;;计算:宽度和高度是实际宽度和高度，包括边框，但不包括margin

如：width=400px,那么，width=border+padding+content=400px;n其前、后元素自动分行；例如段落前后的文本

n默认宽度为100%，高度为auto（由子元素高度决定）；

n可以改变宽度和高度；

n通常作为容器元素使用。

典型的块元素有：div、p、h1~h6、ul、li等。

其中：div是最常用的块元素，它没有默认属性。div作为容器元素可以包含任意其他的HTML元素，主要用于元素定位和页面布局。;2.行内元素特征;块元素和行内元素可以相互转换;示例将列表项转换为行内块元素[不换行]，实现列表项的水平排列。 ;style

ul{

list-style:none;

padding:0;

margin:0;

}

li{

display:inline-block;

}

a{/*撑大父元素*/

display:block;

padding:10px;

border:1pxsolid#ccc;

}

a:hover{

background-color:black;

color:white;

}

/style;单位、字体、文本和背景样式;1.CSS属性中的单位;;示例：使用百分比%，相对父元素对应的属性值；;2.CSS字体样式;2.CSS字体样式;2.4字体名：font-family:字体名1，字体名2,…;3.CSS文本样式;3.2行高?：line-height:px|em|百分比(相对字体，一般使用px应用于块元素);3.3首行缩进：text-indent：px|em|百分比(相对父元素宽度,但一般使用px);3.CSS文本样式;3.CSS文本样式;3.7垂直对齐方式?：vertical-align：top|middle|bottom|text-top|text-bottom|super|sub;vertical-align:text-top;;pclass=p1

imgsrc=./梦想.jpg/

这是段落文字

span段落其他文字/span

/p

pclass=p2

imgsrc=./梦想.jpg/

这是段落文字

span段落其他文字/span

/p

pclass=p3

imgsrc=./梦想.jpg/

这是段落文字

span段落其他文字/span

/p;注：span标记相当于文本标签，仅仅用于文字说明，或者对需要单独设置样式的文字起到包裹、分隔作用；除非对部分文字设置样式外一般不会使用。;body

h3部分文字效果,使用span标记包裹/h3

p这是段落，包含

spanclass=red红/span

spanclass=green绿/span

spanclass=blue蓝/span三种文字/p

p这是spanclass=text粗体、斜体而且加下划线/span的文字/p

p这是段落，显示表达式：

Xspanclass=super1/spanspanclass=sub2/sapn+

Yspanclass=super1/spanspanclass=sub2/span=Z/p

/body;综合实例：仿京东二级菜单中导航链接的效果;素材

电脑整机

笔记本

游戏本

平板电脑

台式机

一体机

服务器/工作站

电脑配件

显示器

CPU

主板

显卡

硬盘

内存

机箱

电源

散热器

显示器支架

刻录机/光驱

声卡/扩展卡