书签分享收藏举报版权申诉 / 54

立即下载加入VIP,免费下载

当前位置：首页 > 求职职场 > 简历 > DIV+CSS基础教程全攻略.docx

DIV+CSS基础教程全攻略.docx

文档编号：17308043
上传时间：2023-07-24
格式：DOCX
页数：54
大小：809.51KB

DIV+CSS基础教程全攻略.docx

《DIV+CSS基础教程全攻略.docx》由会员分享，可在线阅读，更多相关《DIV+CSS基础教程全攻略.docx（54页珍藏版）》请在冰点文库上搜索。

DIV+CSS基础教程全攻略.docx

DIV+CSS基础教程全攻略

CSS教程基础

一、CSS高度_cssheight

DIVCSS高度基础知识

这里的CSS高度是指通过CSS来控制设置对象的高度。

使用CSS属性单词height。

单位可以使用PX，em等常用使用PX（像素）为单位。

实例：

.yangshi{height:

300px;}即设置了yangshi选择器对象高度为300px。

CSS高度单词：

height

CSS最大高度：

max-height（IE7及以上版本浏览器支持）

CSS最小高度：

min-height（IE7及以上版本浏览器支持）

CSS上下居中：

line-height

以上可跟值为数字加单位。

Html初始高度与DIV+CSS高度对照

以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。

实例：

我的高度为100px

我高度为50px

分别设置了高度为100px和50px的两行表格

接下来我们讲解CSS高度使用方法及技巧

1、CSS自适应高度

一般我们需要让宽度一定时高度随内容增加而增高。

此时我们将无需设置高度即可实现此效果。

同时也无需使用height:

auto来实现高度自适应。

通常默认情况下不设置高度，对象高度即是自适应高度。

2、固定高度及隐藏超出固定高度的内容

很多时候我需要设置对象固定高度同时让多余的内容不显示出来。

解决办法：

设置固定高度值，和设置内容不被溢出（隐藏超出内容）

如设置一个高度为50px；宽度为50px，并禁止内容超出此高度宽度，为了观看效果同时设置对象为1px黑色边框演示，

CSS代码：

.yangshi{height:

50px;width:

50px;overflow:

hidden;border:

1pxsolid#666;}

Htmlbody内代码：

演示，内容

测试内容高度超出演示实例，divcss5实例

CSS固定高度效果截图：

3、

说明观看此上图，看出设置固定高度宽度并设置1px的黑色边框，并且实现内容未超出设置高度宽度。

禁止溢出设置CSS高度、CSS宽度的CSS属性单词及值overflow:

hidden;。

3、设置最小高度

使用CSS单词：

min-height

为什么要设置最小高度？

有时特别是在文章页面里因为文章内容多少参差不齐，所以我们可以使用最小高度设置让左右结构的布局对齐，感觉饱和一点，但是我们又不能设置固定高度，因为内容可能多可能少，当多的时候自然设置固定高度就不会显示完整内容。

这里有个问题就是IE6不支持最小高度设置（min-height），解决办法使用csshack方法来解决，大家知道区别不同浏览器时候用的csshack中IE6可以使用“_”来区别其它浏览器。

最小高度运用：

.yangshi{min-height:

50px;_height:

50px;}这样就可以解决此问题，说明这里就不能再使用overflow:

hidden;-CSSoverflow设置隐藏超出内容溢出。

完整CSShtml最小高度实例代码：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">

CSS高度实例

演示，内容

测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，divcss5实例

效果图：

以上是超出内容自动适应高

这里是内容够少，未能充满设置最小高度。

无论在IE6还是IE7及以上版本浏览器或者火狐谷歌浏览器都支持最小高度的设置。

关于CSSheight高度总结说明：

这里讲解CSSheight与htmlheight区别及用法，同时讲解了最小高度、自适应高度、固定高度的设置及运用。

2、CSS宽度——CSSwidth

一、宽度基础知识

CSS宽度是指通过CSS样式设置对应div宽度，以下我们了解传统html宽度、宽度自适应、固定宽度等宽度知识。

传统Html宽度属性单词：

width如width="300";

CSS宽度属性单词：

width如width:

300px;

最大宽度单词：

max-width如max-width:

300px;css手册中了解max-width：

最小宽度单词：

min-width如：

min-width:

300pxcss手册中了解min-width：

同时你可以进入CSS在线手册中width手册了解详细基础知识：

二、Html初始宽度与DIV+CSS宽度对照

1、传统html中宽度width="300"，即设置对应元素宽度为300px（像素）。

而宽度值后无需跟单位，默认情况下以像素（px）为单位。

如：

我的宽度为300px

即：

设置了对应表格td的宽度为300px.

2、divcss中宽度设置width:

300px;，即设置对应CSS样式为300px，这里需要跟单位。

如：

#header{width:

300px;}

即：

定义headerCSS选择器样式为300px宽度。

而在标签运用：

我的宽度为300px宽度

三、css宽度演示与讲解

1、CSS宽度自适应

常常我们看见一个网页宽度随浏览器宽度改变而自动改变，如一样，宽度是自适应宽度。

这里运用了百分比即可实现自适应宽度。

如果网页总宽度为80%即width:

80%;，将使此宽度知道自适应宽度为浏览器80%。

当然前提是设置最外层没有宽度限制条件下。

DIVCSS自适应宽度例子：

CSS样式代码：

body{margin:

0auto;text-align:

center;}

.yangshi{width:

80%;border:

1pxsolid#003;margin:

0auto;}

Html中bodydiv代码：

我是80%自适应宽度

这样即设置内容居中，为了方便测试加上1px黑色边框。

大家可以测试观察其内容是随浏览器拉大而宽度变宽而自适应宽度80%，而左右两边始终有10%宽度留着，因为设置此box宽度为80%。

以上为CSS宽度（width）演示图解。

2、CSS宽度固定

固定即设置宽度为固定值即可如

很多时候需要对网页的宽度样式设置为固定，这时只需要设置宽度width:

300px，即设置对应固定宽度为300像素。

3、最小固定宽度

CSS样式属性单词：

min-width

兼容支持：

min-width除IE6不支持为，IE7以上浏览器、火狐、谷歌都支持

常常用于设置宽度最小值，如设置对应DIV的样式最小宽度值限制。

例：

.yangshi{border:

1pxsolid#003;min-width:

300px;}

即设置最小宽度为300px，当然一般很少设置最小宽度。

如果要使用最小宽度即，使用浮动（float）可使用最小宽度限制。

最大固定宽度

CSS属性单词：

max-width

兼容支持：

max-width除IE6不支持为，IE7以上浏览器、火狐、谷歌都支持

最大固定宽度是对对应的样式div设置最大宽度限制，即内容不超过此设置最大宽度。

最大宽度限制例子：

.yangshi{border:

1pxsolid#003;max-width:

300px;}

即设置了最大宽度限制为300px，以下为设置最大宽度限制演示图：

通过图例和基础知识DIVCSS5给大家讲解了关于css宽度知识，希望大家能掌握其宽度运用。

CSS边框即CSSborder

CSS边框基础知识

CSS边框即CSSborder是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。

Html原始边框与DIV+CSS边框对照

Html表格控制边框：

border="1"bordercolor="#000000"

说明：

控制表格边框宽度为1px，颜色为黑色，默认为实线样式边框。

DIVCSS边框：

border-color:

#000;border-style:

solid;border-width:

1px;

说明：

以上代码为设置对象边框颜色为黑色、边框为实线、宽度为1px边框

边框样式包括

设置上边框：

border-top：

设置下边框：

border-bottom：

设置左边框：

border-left：

设置右边框：

border-right：

边框显示样式：

border-style:

参数值解释：

none:

　无边框。

与任何指定的border-width值无关

hidden:

　隐藏边框。

IE不支持

dotted:

　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。

否则为实线

dashed:

　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。

否则为实线

solid:

　实线边框

double:

　双线边框。

两条单线与其间隔的和等于指定的border-width值

groove:

　根据border-color的值画3D凹槽

ridge:

　根据border-color的值画菱形边框

inset:

　根据border-color的值画3D凹边

outset:

　根据border-color的值画3D凸边

例子：

设置上边框为1px实线黑色边框。

border-top-color:

#000;border-top-style:

solid;border-top-width:

1px;

或简写

border-top:

#000solid1px;

可以根据以上实例举一反三，可以设置左、右、下的边框CSS样式。

DIVCSS边框技巧

如果设置对象上、下、左、右边框相同样式，可以简写无需分别写出上下左右的属性及对应值。

例，设置上下左右边框为1px宽度、实线、黑色边框CSS代码如下：

border:

1pxsolid#000;

完整DIVCSS实例：

实例内容设置CSS命名为yangshi的css选择器，设置该属性选择器样式为边框为1px宽度实线黑色边框、宽度为200px,高度为50px的矩形。

CSS代码：

div,body{border:

0;margin:

5px;padding:

0;}/*初始化网页样式*/

.yangshi{border:

1pxsolid#000;width:

200px;height:

50px;}/*设置对象样式*/

HTML中对应DIV代码：

divcss5实例-CSS边框实例

CSS实例

上图为CSS边框（CSSborder）实例主要片段代码截图

说明：

以上代码对应显示效果，看到实线以外虚线是因DW软件特自动对DIVbox区加虚线，实际浏览是没有此虚线，特此说明。

三边有边而一边没有设置技巧

如左右下有边框并且样式为黑色1PX宽度实线边框，而上边没有边框。

CSS代码：

border:

1pxsolid#000;border-top:

none;

注意border:

1pxsolid#000;和border-top:

none;前后顺序不能调换。

因为CSS读取有从上到下、从左到右读取原理，而先设置了整个边框样式，后再加上声明顶部上边边框为“none”没有意思，即实现该实例要的样式。

从而无需分别设置下、左、右，从而节约一定代码。

总结CSS边框，常见对对象设置CSS样式使用属性代码：

border:

1pxsolid#000;

CSS背景-CSSbackground

CSS背景基础知识

CSS背景这里指通过CSS对对象设置背景属性，如通过CSS设置背景各种样式。

CSS中背景单词：

backgroundCSS手册查询-background手册

background-color设置颜色作为对象背景颜色

background-image设置图片作为背景图片

background-repeat设置背景平铺重复方向

background-attachment设置或检索背景图像是随对象内容滚动还是固定的。

background-position设置或检索对象的背景图像位置。

Html原始背景与CSS背景对照

Html是指对应效果的table背景设置，

Html背景单词：

Bgcolor设置背景颜色与CSS背景颜色对应background-color

Background设置图片作为背景与CSS背景图片对应background-image

最原始HTML背景设置演示代码：

这里设置了table背景颜色为#996600，然后设置了td的背景图片为

背景颜色

如果是给table设置背景颜色可以使用bgcolor="颜色值"即可设置对象背景颜色。

如果是CSS背景颜色，可使用background-color:

颜色值;或background:

颜色值设置对象背景颜色。

CSS背景颜色设置DIV+CSS演示图：

以上截图分别使用background-color和background来设置对象背景颜色

CSS图片背景

这里说的是以图片作为背景图片- CSS背景图片详细介绍：

CSS可以使用background或background-image直接引用图片地址来设置图片作为对象背景。

background:

url（

或

background-image:

url（background

图片背景样式（固定、滚动）

实现这个效果使用CSS单词是background-attachment当然通常情况下背景默认是固定的如果是自己使用CSSbackground简写则如上图。

background-attachment使用解析：

background-attachment:

fixed；背景固定

background-attachment:

scroll背景图像是随对象内容滚动

DIVCSS背景居中

CSS背景分为左右居中和上下居中，具体左右居中方法见上图。

背景图像上下居中，可以使用计算上下高度然后平分设置，如上下高度距离为500px，那就设置图片居顶部多少PX可以让图片实现上下居中。

CSSbackground（背景）总结：

使用图片作为背景在一个网页布局中常常会遇到，希望大家能在实际中掌握其知识。

一般设置对象图片作为背景属性实例background:

#666url（图片地址）no-repeatcentertop;（解释首先设置背景颜色紧跟设置图片作背景紧跟图片是否重复然后跟图片在对象位置。

前面的背景颜色可以不用设同时不是必须，一般使用图片作为对象背景如果要设置图片是否重复显示距离位置将设置图片位置）

1、设置图片作为背景如果图片设置图片在X坐标方向重复，如果再设置图片在对象位置的左或右位置时将无效，可设置在对象上或下位置开始显示。

2、设置图片作为背景如果图片设置图片在Y坐标方向重复，如果再设置图片在对象位置的上或下位置时将无效，可设置图片在对象左或右位置开始显示。

3、如果设置背景完全重复显示，那设置图片在对象上下左右位置开始显示将无线。

希望大家好好理解有不懂的地方可以进入CSS研教室讨论区发表问题，我们将尽力答复您。

div+css中float认识及cssfloat用法

float是什么意思？

float是浮动，翻译成中文也是浮动意思。

进入对应css手册中float手册了解float基本信息。

float的作用

通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动。

float语法：

float:

none|left|right

参数值：

none:

　对象不浮动

left:

　对象浮在左边

right:

　对象浮在右边

接下来我们来通过一个div+css实例讲解float使用技巧。

DIVCSS实验一

Css样式实例内容，我们让文字和图片在一个固定宽度div层内，让蓝色背景文字内容居右，小图片居左。

CSS案例演示最终效果图如下

1、首先我们设置一个最外层的宽度为300px，高度为200px的css命名为box的css选择器代码如下（知识点px是什么意思）

.box{width:

300px;height:

200px;}

2、设置box内的文字内容部分css样式命名为yangshi，并设置背景为蓝色，宽度为120px，居右浮动

.yangshi{width:

120px;float:

right;background:

#0066FF;}

3、设置图片居左浮动div+css样式

img{float:

left;}

4、body内的div布局，代码如下

我是网站，测试内容

DIV+CSS基础教程全攻略.docx

热门标签