我家小花儿

这个屌丝很懒，什么也没留下！

热门标签

html+css基础总结_html及css编码基础实验总结

作者：我家小花儿 | 2024-02-15 13:18:45

踩

html及css编码基础实验总结

<![endif]-->

html+css基础总结

一、web标准

web标准是网页制作的标准，它不是一个标准，是一系列标准，大部分的标准由W3C制定，还有一部分标准由ECMA制定。

web标准由结构（html,xhtml），表现（css）,行为（js）三个方面构成

W3C—万维网联盟（结构标准和表现标准）

ECMA—欧洲电脑厂商联合会（行为标准）

二、html相关概念

1.HTML—超文本标记语言

2.XHTML—可扩展的超文本标记语言

3.HTML5—HTML的第五次重大修改

注：HTML和XHTML的区别

a）XHTML并没有增加任何新的标签，只是语法要求更加严格

b) 比如标签必须闭合，标记名称必须要小写，属性值必须放在双引号中

三、Dw常用快捷键

新建文件 ctrl+n

打开文件 ctrl+o

预览页面 F12

文件控制面板 F8

首选参数面板 ctrl+u

保存文件 ctrl+s

撤销 ctrl+z

恢复 ctrl+y

编辑窗口切换 ctrl+tab

全选 ctrl+a

四、html基本结构

1.文档声明（告知浏览器文档以什么样的规范呈现）

h5的文档声明 <!doctype html>

2.网页的根标签（根元素）：html

<html></html>所有代码都放置在html标签中

3.html又包含两大部分：head部分和body部分

head部分主要用来设置文档的头部，关键词，描述，引入一些外部文件等

body部分：所有要显示在浏览器中的网页内容和内容标签都放在body部分

4.设置字符集编码

常见编码格式：utf-8,gbk,gb2312

五、html语法

1.常规标记

<标记属性="属性值" 属性="属性值"></标记>

eg: <a href="#" target="_blank">百度一下</a>

2.空标记

<标记属性="属性值" 属性="属性值"/>

eg: <img src="1.jpg"/>

注：a）属性和属性值之间用等号连接

b) 属性值要放在双引号中

c) 多个属性之间用空格隔开，不分先后顺序

六、html常用标记（标签）

1.文本标题

语法： <hx>标题文本</hx>

注：x为1-6

eg: <h1>千锋教育</h1>

2.段落标记

语法： <p>段落文本内容</p>

3.空格（html转义字符） 

其他常用html转义字符：

> >

< <

4.换行

语法： <br/>

5.加粗

语法：<strong>加粗文本</strong> <b>加粗文本</b>

6.倾斜

语法：<i>倾斜文本</i> <em>倾斜文本</em>

7.水平分隔线

语法：<hr/>

8.上标和下标

上标: <sup></sup>

下标：<sub></sub>

9.无序列表

语法：<ul>

...

</ul>

10.有序列表

语法： <ol>

...

</ol>

11.自定义列表

语法：<dl>

...

...

</dl>

12.相对路径的三种写法

（a）当前文件和目标文件在同一目录下时，写法：目标文件名+扩展名

（b）当前文件和目标文件所处文件夹在同一目录下，写法：目标文件所处文件夹名/目标文件名+扩展名

（c）当前文件所处文件夹和目标文件所处文件夹在同一目录下，写法：../目标文件所处文件夹名/目标文件名+扩展名

注：../代表返回到上一级目录

13.图片

语法： <img src="图片路径" title="提示文本" alt="替换文本" width="x" height="y"/>

注：alt与title的区别：

a）title是鼠标悬停在图片上时显示的提示信息

b）alt是当图片由于某些原因无法正常加载时显示的替换信息

14.超链接

语法：<a href="链接地址" target="_blank" title="提示信息">链接文本或图片</a>

注：target="_blank" 链接在新页面打开

target="_self" 默认属性值，在本页面打开

空链接 <a href="#">新闻资讯</a>

七、表格

table 作用：显示数据

语法： <table border="1" cellspacing="0" cellpadding="0">

<tr>

...

</tr>

</table>

注：table相关属性

a）width="值" 设置表格宽度或单元格宽度

b) height="值" 设置表格高度或单元格高度

c) border="值" 设置表格边框（一般给table加）

d）cellspacing="值" 设置单元格之间的间距（给table加，一般设为0）

e) cellpadding="值" 设置内容与单元格之间的空隙（给table加，一般设为0）

f) align="left|center|right" 设置单元格内容水平对齐方式

g) valign="top|middle|bottom" 设置单元格内容垂直对齐方式

h) bgcolor="颜色值" 设置表格背景色（一般通过css样式去设置）

i) colspan="数值" 合并列（给td加）

j) rowspan="数值" 合并行（给td加）

注：table常用到的标签

a）table 定义表格

b) tr 代表行

c) td 代表列

d) th 定义表格的表头（会有加粗，居中的效果）

e) caption 定义表格的标题

f）thead 定义表格的页眉

g) tbody 定义表格的主体

h) tfoot 定义表格的页脚

表格行分组：thead,tbody,tfoot

一、css概念

css—层叠样式表

二、样式表的创建

1.内联样式（行内样式，行间样式）

语法：<标记 style="属性:属性值;"></标记>

eg: <h1 style="color:red;">千锋教育</h1>

2.内部样式（嵌入式样式）

语法： <style type="text/css">

选择器{

属性:属性值;

}

</style>

eg: <style type="text/css">

h1{

color:red;

}

</style>

注：style标签一般放置在head部分

3.外部样式

（a）使用link标签引入

语法： <link rel="stylesheet" type="text/css" href="css文件路径"/>

注： rel代表引入文件和本文件之间的关系

link标签一般也放在head部分

在使用link标签之前首先要创建一个css文件，文件以英文命名

（b）使用@import 引入css文件

语法： @import "css文件路径";

注:@import方式属于css范畴，必须放在css文件中或内部样式中

注：link和@import的区别

I.link属于html标签，除了可以引入css文件以外，还可以引入其他文件。@import属于css范畴，只能引入css文件

II.link引入的css文件和html同时加载，而@import引入的css文件要在页面加载完成后才进行加载

III.link标签所有浏览器都支持，@import在IE5及以下版本浏览器不支持

IV. link标签支持js操作DOM，@import不支持

三、样式表的优先级（三种样式表的区别）

采取就近原则（离被设置样式的元素越近，优先级越高）

内联样式>内部样式>外部样式

如果css属性值中出现!important关键字时，他的优先级最高

四、css语法

css由两大部分组成：选择符和声明,声明由属性和属性值两部分组成;

选择符{属性:属性值;属性:属性值;}

注: a) 属性和属性值之间用冒号连接

b）每条声明结束要加分号

五、css注释

/* 注释内容 */

六、css选择器

1.id选择器

语法： <标记 id="id名"></标记>

#id名{属性:属性值;}

eg: <h1 id="tit">千锋教育</h1>

#tit{color:red;}

注：id名是唯一的，不允许出现同名的id

id名不允许使用词列表的方式

2.class选择器

语法：<标记 class="class名"></标记>

.class名{属性:属性值;}

eg：<a href="#" class="linkA">新闻资讯</a>

.linkA{color:red;}

注:可以有相同的类名

也可以使用类名词列表的方式(当所有样式都与其他元素相同，只有某一个css样式与其他元素不同)

3.元素选择符（类型选择符，标签选择器）

语法：标记名称{属性:属性值;}

注：a）如果想改变某个元素的默认样式时，可以使用类型选择符；

b) 当统一文档某个元素的显示效果时，可以使用类型选择符；

4.群组选择器

语法：选择符1,选择符2,选择符3{属性:属性值;}

注：给多个元素设置同一个样式时，使用群组选择器

5.后代选择器(包含选择器)

语法：选择符1 选择符2 选择符3{属性:属性值;}

注：选择符1，选择符2及选择符3一定是包含与被包含的关系

6.通配符（通用选择器）

语法： *{属性:属性值;}

常用写法： *{margin:0; padding:0;}

注:*匹配html下所有的标签元素

7.伪类选择器

语法：选择符:hover{属性:属性值;}

超链接的四种状态

a:link 链接没有被访问过时的状态

a:visited 链接访问过后的状态

a:hover 鼠标滑过时的状态

a:active 鼠标按下时的状态

注：为了简化代码，我们一般这样去写：

a{color:red;} a:hover{color:green;}

记忆方法：爱恨原则

L o V e H A t e

link visited hover active

七、css权重问题

1.第一等内联样式 style="" 权重：1000

2.第二等 id选择器权重：100

3.第三等 class选择器，伪类选择器，属性选择器权重：10

4.第四等类型选择器，伪元素选择器权重：1

注：后代选择器权重：各个选择器权重之和

群组选择器权重：各个选择器自身的权重

八、css层叠

层叠指的是样式的优先级，当产生冲突时以优先级高的为准

1. 内联样式>内部样式>外部样式（除非使用!important标记）

2. id选择符>类选择符>元素选择符

3. 权重相同时取后面定义的样式

CSS核心属性

一、字体类属性

1.字体类型

font-family:字体1,字体2,字体3;

常用写法： font-family:"微软雅黑",Arial;

注：a) 多个字体之间用逗号分隔

b）中文字体要放在双引号中，英文字体由多个单词组成时也要加双引号

c) 浏览器优先识别字体1，如果找不到字体1，识别字体2，如果都找不到，显示浏览器默认字体

2.字体大小

font-size:数值+单位;

注：a）浏览器默认字体大小为16px

b) font-size:medium;等价于 font-size:16px;

c）字体大小一般设置偶数不设置奇数

注：也可以用关键字设置字体大小

xx-small 9px

x-small 11px

small 13px

medium 16px

large 19px

x-large 23px

xx-large 27px

3.字体加粗

font-weight:normal(常规字体)|bold(加粗)|bolder(加粗)|100-500(常规字体)|600-900（加粗字体）;

4.字体倾斜

font-style:normal(常规字体)|italic(倾斜)|oblique(倾斜);

5.文本是否大写

font-variant:normal(常规字体)|small-caps(小型的大写字母字体);

注：此属性主要应用于英文

6.字体颜色

color:颜色值;

颜色值的几种设置方式：

a)十六进制写法 #000 黑色 #fff 白色 #f00 红色

b)rgb写法 rgb(0,0,0) 黑色 rgb(255,255,255) 白色

c)rgba写法 a代表透明度，取值范围0-1 rgba(0,0,0,0.6)

d)颜色单词 red(红色) black(黑色) white(白色) green(绿色) yellow(黄色) gray(灰色) pink(粉色) blue(蓝色)

7.font简写方式

font:italic bolder 12px "微软雅黑",Arial;

注：使用简写方式时，font-size和font-family不可与其他属性互换位置，也不能分开写

font:12px/1.5 "微软雅黑",Arial; （字体大小为12px,行高是字体大小的1.5倍）

注：将font-size和line-height结合在一起时，用/来表示，/前表示字体大小，/后表示字体行高，当行高不加单位时，表示行高为字体大小的多少倍

注：只有在同时指定font-size和font-family时才能使用/这种写法

二、文本类属性

1.水平对齐方式

text-align:left(默认值,左对齐)| center(居中对齐)|right(右对齐)|justify(两端对齐,只对英文起作用);

注: text-align只对文本，图片，内联元素起作用，给文本，图片，内联元素所在父元素加

2.垂直对齐方式

vertical-align:top|middle|bottom;

top:居顶部对齐

middle:居中对齐

bottom:居底部对齐

注：该属性只对行内块元素有效，给本元素添加此属性

一般在设置图片和文字居中对齐的时候会用到，input控件垂直居中对齐时会用到

3.行高

line-height:数值+单位;

注：当单行文本的行高等于容器高时，可以实现单行文本在容器中垂直居中

注：line-height只写数值不加单位时，表示倍行高，行高为字体大小的多少倍

eg: line-height:3; 字体大小的三倍

注：line-height不允许设置负值

4.文本修饰

text-decoration:none(默认值)|underline(下划线)|overline(上划线)|line-through（删除线）;

常用： a{text-decoration:none;}

5.首行缩进

text-indent:数值+单位;

注：向前缩进为负值，会达到一种隐藏的效果，向后缩进为正值只对第一行有效

6.字符间距（汉字与汉字，字母与字母的间距）

letter-spacing:normal(默认间隔)|数值+单位;

注：值越大，间距越大，值越小，间距越小，允许设置负值

7.词间距（主要针对英文）

word-spacing:normal(默认值)|数值+单位;

注：允许设置负值

8.文本是否大小写

text-transform:none(默认值)|capitalize(首字母大写)|uppercase(全部大写)|lowercase(全部小写);

9.长单词换行

word-wrap:normal(默认值)|break-word;

注：在长单词或 URL 地址内部进行换行时设置为break-word

10.强制在一行显示

white-space:normal(默认值)|nowrap(不换行);

注：常在省略号设置中用到

11.文本流控制

layout-flow:horizontal(从左到右)|vertical-ideographic(从上到下);

三、列表类属性

1.列表符号样式

list-style-type:disc(实心圆)|circle(空心圆)|square(实心方块)|decimal(数字)|none(去掉列表符号样式);

2.使用图片作为列表符号

list-style-image:url(图片路径);

3.列表符号位置

list-style-position:outside(默认值，在外边)|inside(在里边);

4.去掉列表符号样式

list-style:none;

常用写法： ol,ul{list-style:none;}

四、背景类属性

1.背景颜色

background-color:颜色值;

注：颜色值设置方法同字体颜色

2.背景图片

background-image:url(背景图片路径);

注：网页中常见的两种图片：img标签引入图片和背景图片

a）网页中常进行更换的数据型图片使用img标签插入

b) 用来装饰网页，不需要经常更换的图片使用背景图插入

c) 我们可以在背景图上显示任何的文本，图片

3.背景图平铺属性

background-repeat:no-repeat(不平铺)|repeat(平铺)|repeat-x(横向平铺)|repeat-y(纵向平铺);

4.背景图位置

注：a）第一个值代表水平方向，第二个值代表垂直方向

b)当两个值都为center时，可以省略第二个值

c)当设置为数值时，水平方向向右为正值，向左为负值，垂直方向向下为正值，向上为负值

5.背景属性简写方式

background:背景色背景图背景平铺属性背景图位置;

eg: background:#f00 url(1.jpg) repeat-x left center;

6.背景图固定

background-attachment:scroll(默认值)|fixed(固定);

注：当页面出现滚动条时，背景图不跟随滚动条滚动，设置为fixed

7.背景图显示原则

（a）当容器尺寸等于背景图尺寸时，背景图正好显示在容器中

（b）当容器尺寸大于背景图尺寸时，背景图默认平铺，直至铺满整个容器

（c）当容器尺寸小于背景图尺寸时，背景图只能显示容器范围以内的部分

8.网页中常见的图片格式：

a）jpg:适用于色彩数量比较丰富的图片，像素点越多越清晰

b) gif:支持动画，支持透明

c) png:支持透明

五、浮动属性

float:none(默认值，不浮动)|left(左浮动)|right(右浮动);

六、清除浮动

clear:none|both|left|right;

none:默认值，允许两边有浮动

both:清除左浮动和右浮动

left:清除左浮动

right:清除右浮动

注：当本元素前面有元素浮动对本元素造成了影响，给本元素添加清除浮动

------------------------------------------------------

图片默认有空隙，如何解决：

方案一：给img标签添加float属性

方案二：给img标签添加display:block;

-------------------------------------------------

PS快捷键

ctrl+n新建

M选区工具

V移动工具

ALT+删除键前景色

ctrl+删除键背景色

ctrl+d取消选中

ctrl+1实际大小

ctrl++放大

ctrl+-缩小

ctrl+t变形工具

ctrl+s保存

ctrl+shift+s另存为

ctrl+o打开

空格抓手工具

ctrl+r标尺

ctrl+h辅助线显示隐藏

F8信息面板

一、css盒模型

概念—css盒模型是css的基石,盒模型由content(主体内容),padding(补白，填充),border(边框),margin(外间距);

1.content

width:数值+单位; 主体内容的宽度

height:数值+单位; 主体内容的高度

2.padding(补白或填充)

（a）padding:10px; 设置一个值，代表上，下，左，右均为10px

（b）padding:20px 10px; 设置两个值，代表上下为20px,左右为10px

（c）padding:20px 10px 5px;设置3个值，代表上为20px,左右为10px,下为5px

（d）padding:20px 10px 5px 0;设置4个值，顺时针依次为：上20px,右10px,下5px，左为0

可以单独设置某一个方向的padding值

padding-left:20px;（left可更改为right,top,bottom）

注：I.padding 不允许设置负值

II.背景可以延伸到padding区域

III.当我们需要调整子元素在父元素中的位置关系时，padding给父元素加

IV.当给元素设置padding后，要在原来的宽高上减去设置的padding值，保证总宽高不变

3.border(边框)

a）边框类型

border-style:solid(实线)|dashed(虚线)|dotted(点线)|double(双线);

b)边框颜色

border-color:颜色值;

c）边框宽度

border-width:数值+单位; (常用)

border-width:thin|medium|thick;

d)边框简写方式

border:线型宽度颜色;

e)单独设置某一个方向的边框

border-top:5px solid gray;(top可更改为left,right,bottom)

注：I.背景可以延伸到border区域，当边框为实线时，背景会被遮挡

II.当给元素设置边框时，也会占据一定的宽度和高度，要在原来的宽高上减去设置的border值，保证总宽高不变

border-left-color:transparent; （transparent代表透明）

4.外间距（margin）

margin值设置方式同padding

注：a）背景不能延伸到margin区域（margin区域背景不可见）

b）margin可以设置负值

c) 当左右margin值设为auto时，可以使定宽块状元素水平居中显示

d）调整本元素与其他元素之间的位置关系时，给本元素添加margin值

标准盒模型的总宽度=width+左右padding+左右border+左右margin

标准盒模型的总高度=height+上下padding+上下border+上下margin

一、css盒模型

概念—css盒模型是css的基石,盒模型由content(主体内容),padding(补白，填充),border(边框),margin(外间距);

1.content

width:数值+单位; 主体内容的宽度

height:数值+单位; 主体内容的高度

2.padding(补白或填充)

（a）padding:10px; 设置一个值，代表上，下，左，右均为10px

（b）padding:20px 10px; 设置两个值，代表上下为20px,左右为10px

（c）padding:20px 10px 5px;设置3个值，代表上为20px,左右为10px,下为5px

（d）padding:20px 10px 5px 0;设置4个值，顺时针依次为：上20px,右10px,下5px，左为0

可以单独设置某一个方向的padding值

padding-left:20px;（left可更改为right,top,bottom）

注：I.padding 不允许设置负值

II.背景可以延伸到padding区域

III.当我们需要调整子元素在父元素中的位置关系时，padding给父元素加

IV.当给元素设置padding后，要在原来的宽高上减去设置的padding值，保证总宽高不变

3.border(边框)

a）边框类型

border-style:solid(实线)|dashed(虚线)|dotted(点线)|double(双线);

b)边框颜色

border-color:颜色值;

c）边框宽度

border-width:数值+单位; (常用)

border-width:thin|medium|thick;

d)边框简写方式

border:线型宽度颜色;

e)单独设置某一个方向的边框

border-top:5px solid gray;(top可更改为left,right,bottom)

注：I.背景可以延伸到border区域，当边框为实线时，背景会被遮挡

II.当给元素设置边框时，也会占据一定的宽度和高度，要在原来的宽高上减去设置的border值，保证总宽高不变

border-left-color:transparent; （transparent代表透明）

4.外间距（margin）

margin值设置方式同padding

注：a）背景不能延伸到margin区域（margin区域背景不可见）

b）margin可以设置负值

c) 当左右margin值设为auto时，可以使定宽块状元素水平居中显示

d）调整本元素与其他元素之间的位置关系时，给本元素添加margin值

标准盒模型的总宽度=width+左右padding+左右border+左右margin

标准盒模型的总高度=height+上下padding+上下border+上下margin

一、元素类型

html元素可分为三大类：块元素、内联元素、可变元素

1.块元素

常见块状元素：div,p,ul,ol,li,dl,dt,dd,form,hr,table,tr,td,h1-h6,filedset,caption

块状元素特点：

（a）以块的形式显示为一个矩形区域

（b）块状元素独占一行，自上而下排列

（c）块状元素可以定义自己的宽度和高度，以及盒模型中的margin,padding,border

（d）块状元素可以作为一个容器包含其他的块状元素或内联元素

2.内联元素（行内元素）

常见内联元素：a,strong,b,i,em,span,label,img,input

内联元素特点：

（a）内联元素在一行逐个进行显示

（b）内联元素没有自己的形状，不能定义宽度和高度，它的宽高由内容来决定

（c）内联元素设置与高度相关的一些属性（如margin-top,margin-bottom,padding-top,padding-bottom,line-height），

显示无效或显示不准确

（d）内联元素设置左右填充和外间距是可以的

内联块状元素：img,input,textarea

内联块状元素特点：

（a）即具有内联元素特点，也具有块状元素特点

（b）即可以定义容器的宽，高，margin，padding等，还可以和其他内联元素在一行显示

3.可变元素

二、元素类型转换

display:block|inline|inline-block|none|list-item;

block:将元素转换为块状元素（大部分块状元素的默认display属性值）

inline:将元素转换为内联元素（大部分内联元素的默认display属性值）

inline-block:将元素转换为内联块状元素（img,input等元素的默认display属性值）

list-item:将元素转换为列表类型（li的默认display属性值）

none:元素隐藏不可见

注：当元素设置了float属性后，就相当于设置了display:block;可以给元素定义宽，高了

三、置换元素和非置换元素

1.置换元素

浏览器根据元素的标签和属性，来决定元素的具体显示内容

如img标签，src属性决定了在网页呈现不同的图片

如input标签，type属性决定了在网页中呈现什么类型的input控件

2.非置换元素

除置换元素外其他的html元素都是非置换元素

标签之间书写什么样的内容，浏览器就显示什么内容

<h1>hello world</h1>

--------------------------------------------------------------------

表单元素行高不一致，如何解决

方案一：给表单元素添加float属性

方案二：给表单元素添加vertical-align:middle;

css布局模型

流动模型（Flow）

浮动模型（Float）

层模型（Layer）

一、流动模型

页面在没有设置任何css样式，元素按照本身的特性在浏览器中显示，这样的布局模型称为流动模型

二、浮动模型

在网页中使用float属性进行页面布局

当元素设置了float属性后，就脱离了正常的文档流

三、层模型

position:static(默认值)|absolute(绝对定位)|relative(相对定位)|fixed(固定定位);

1.绝对定位（absolute）

绝对定位的参照物：

a）是绝对定位元素的父包含块（参照物与绝对定位元素是包含与被包含的关系）

b) 父包含块必须具有position定位属性

如果找不到满足以上两个条件的父包含块，那么相对于html，即浏览器窗口进行绝对定位

注：以下两种情况，元素会脱离正常的文档流，左右margin为auto将会失效

1）当元素设置了float属性

2）当元素设置了绝对定位

2.相对定位(relative)

相对定位的参照物：

相对于偏移前的位置进行定位

相对定位不会脱离正常的文档流

注：relative和absolute结合使用

给父元素设置relative,给子元素设置absolute,在网页布局中常这样结合使用制作一些特殊效果

3.固定定位（fixed）

固定定位的参照物：屏幕窗口

注：a）固定定位的元素也会脱离正常的文档流

b）固定定位的元素不随滚动条滚动

---------------------------------------------------------

四、透明度的设置

opacity:数值;(取值范围0-1，0为完全透明，1为不透明)

eg: opacity:0.4; 《=》 opacity:.4;

注：opacity属性无法兼容IE9以下的浏览器，兼容写法如下：

filter:alpha(opacity=value);(取值范围1-100)

eg： filter:alpha(opacity=40);

五、定位层叠属性设置

z-index:auto|数值（一般为整数）;

注：a）当没有设置z-index属性时，后写的元素优先显示在上层，设置后，数值越大，越靠上

b) z-index也可以设置负值，设为负值时，在所有元素之下

六、锚点链接

1.命名锚记名

<标记 id="锚记名称"></标记>

2.链接锚记名称

eg： <h1 id="pageone"></h1>

-------------------------------------------------------

扩展一：如何在网页中插入flash

</object>

扩展二：滚动字幕

<marquee width="500" height="30" behavior="scroll(滚动)|alternate（晃动）" direction="left|right|down|up"

scrollamount="数值（值越大速度越快）">

...

</marquee>

css设置小技巧

一、css宽高自适应

1.宽度自适应

元素宽度设为100%（块状元素的默认宽度为100%）

注：应用在通栏效果中

2.高度自适应

height:auto;或者不设置高度

3.最小，最大高度，最小，最大宽度

a)最小高度 min-height:value;

IE6不识别min-height属性，解决方案如下：

方案一：min-height:100px; _height:100px;

方案二：min-height:100px; height:auto!important; height:100px;

b)最大高度

max-height:value;

c)最大宽度

max-width:value;

d)最小宽度

min-width:value;

注：块状元素设置最小宽度时，需要将元素转换为内联块状元素，添加display:inline-block;

注：以上四个属性IE6及以下版本浏览器不支持

4.高度塌陷问题

描述：子元素浮动，父元素高度自适应，造成父元素高度为0，简称高度塌陷问题

解决方案：

方案一：

给父元素添加overflow:hidden;

优点：简单，兼容性好

缺点：当有position:relative;出现时，会影响页面显示效果

方案二：

给父元素固定的高度 height:value;

缺点：不灵活，高度无法自适应

方案三：

在子元素的末尾添加一个空div，并设置样式

.clear{height:0; overflow:hidden;clear:both;}

优点：所有浏览器都支持

缺点：在页面中添加一个无意义的div，造成代码冗余

方案四：（万能清除浮动法，推荐使用）

通过伪元素的方式清除浮动

父元素:after{

content:"";

height:0;

overflow:hidden;

clear:both;

display:block;

visibility:hidden;

}

注：伪元素是内联元素,转换为块元素设置宽高才能生效

height:0;在IE6下不兼容，添加overflow:hidden;兼容IE6

二、元素隐藏不可见的两种方式（display:none;和visibility:hidden的区别）

1.display:none;元素隐藏不可见，位置不保留

2.visibility:hidden;元素隐藏不可见，位置保留

三、窗口高度自适应

首先，给html，body设置高度为100%

html,body{height:100%;}

然后给元素设置高度100%

div{height:100%}

注：常用于窗口内容不满一屏或者没有内容body高度为0时

四、水平居中和垂直居中

1.行内元素水平居中设置

设置文本、图片等行内元素水平居中，给父元素设置text-align:center;

2.定宽块状元素水平居中设置

给定宽块状元素设置左右margin值为auto

注：当元素设置float或绝对定位，固定定位时，左右margin为auto失效

3.不定宽块状元素水平居中

方法一：

给父元素设置 {display:table;margin:0 auto;}

注： display:table;将元素转换为表格的形式

方法二：

子元素设置： {display:inline-block;}

父元素设置：{text-align:center;}

五、元素水平垂直都居中

1.未知宽高元素在屏幕窗口水平垂直都居中

方法一：

元素{

width:value;

height:value;

position:fixed;

left:50%;

top:50%;

margin-left:-width/2+px;

margin-top:-height/2+px;

}

方法二：

元素{

width:value;

height:value;

position:fixed;

left:0;

top:0;

right:0;

bottom:0;

margin:auto;

}

2.未知宽高元素在父元素中水平垂直都居中

方法一：

元素{

width:value;

height:value;

position:absolute;

left:0;

top:0;

right:0;

bottom:0;

margin:auto;

}

方法二：

父元素{

width:value;

height:value;

display:table-cell;

vertical-align:middle;

text-align:center;

}

注：display:table-cell;将元素转换为表格单元格形式

方法三：

在父元素中添加一个参照物，如<span></span>

元素{

vertical-align:middle;

}

span{

display:inline-block;

width:0;

height:100%;

vertical-align:middle;

}

父元素{

text-align:center;

}

结构：

</div>

六、网页圆角效果

方法一：

使用背景图片的方式实现，所有浏览器都支持

方法二：

使用border-radius属性来实现，IE8及以下浏览器不支持

css图片整合技术

1.概念

将多张图片有规律的整合到一张背景图中，通过background-position来实现图片的定位技术就称为图片整合技术

2.优势

将多张图整合到一张图中，减少了对服务器的请求次数，加快了图片的加载速度，减小了图片体积，从而达到了网站性能的优化。

注：图片整合技术也称为精灵图，滑动门技术，雪碧图。

一、css常见兼容性问题

1.双倍浮动bug

描述：块状元素设置了float属性后，又设置了横向的margin值，在IE6下显示的margin值要比设置的值大

解决方案：给float的元素添加 display:inline;将其转换为内联元素

2.表单元素行高不一致

解决方案：

a）给表单元素添加vertical-align:middle;

b) 给表单元素添加float:left;

3.IE6不识别较小高度的标签（一般为10px）

解决方案：

a）给标签添加 overflow:hidden;

b) 给标签添加 font-size:0;

4.图片添加超链接时，在IE浏览器中会有蓝色的边框

解决方案：

给图片添加border:0;或者border:none;

5.最小高度min-height不兼容IE6

解决方案：

a)min-height:100px; _height:100px;

b)min-height:100px; height:auto!important; height:100px;

6.图片默认有空隙

解决方案：

a) 给img添加float属性

b) 给img添加display:block;

7.按钮默认大小不一

解决方案：

方案一：如果按钮是一张图片，直接用背景图作为按钮图片

方案二：用a标记模拟按钮，使用js实现其他功能

8.百分比bug

描述：父元素设置100%；子元素各50%，在IE6下，50%+50%大于100%

解决方案：

给右边浮动的元素添加clear:right;

9.鼠标指针bug

cursor:hand;只有IE浏览器识别

cursor:pointer; IE6及以上浏览器和其他浏览器都识别

注：cursor:pointer;鼠标指针设置为手型

10.透明度设置，IE不识别opacity属性

解决方案：

标准写法： opacity:value;（取值范围0-1）

兼容IE浏览器 filter:alpha(opacity=value); （取值范围1-100）

11.上下margin重叠问题

描述：给上面的元素设置margin-bottom，给下面的元素设置margin-top,只能识别其中较大的那个值

解决方案：

a）margin-top和margin-bottom只设置其中一个值

b)给其中一个元素再包裹一个盒子，并设置overflow:hidden;

12.给子元素设置margin-top，应用在了父元素上

解决方案：

a）把给子元素设置的margin-top改为给父元素设置padding-top

b）给父元素设置1px的border，即border-top:1px solid transparent;

c) 给父元素设置overflow:hidden;

d) 给父元素设置float:left;

二、css hack(过滤器)

1.下划线属性过滤器

语法：选择符{_属性:属性值;}

注：下划线属性过滤器只有IE6识别，其他浏览器都不识别

2.!important关键字过滤器

语法：选择符{属性:属性值!important;}

注：a）!important优先级最高，除IE6以外的其他浏览器都识别

b) 加!important的属性放在标准写法之前

3.*属性过滤器

语法：选择符{*属性:属性值;}

注：*过滤器只有IE6，IE7识别

4.\9

语法：选择符{属性:属性值\9;}

注：只有IE6，IE7，IE8识别

5.\0

语法：选择符{属性:属性值\0;}

注：IE8及以上浏览器都识别，其他浏览器不识别

三、五大浏览器内核

1.IE内核 Trident

2.Mozilla Firefox(火狐)内核 Gecko

3.safari,chrome内核 Webkit

4.opera(欧朋)内核 Presto

5.最新版本的chrome浏览器内核 Blink

一、css样式重置

将页面布局经常需要用到的一些公共样式提炼出来，放在css文件的开头，称为样式重置

优点：

a）将一些公共的代码提炼出来，减少了代码冗余，达到了网站性能优化（如去掉列表符号样式，去掉超链接下划线）

b) 去掉一些块状元素的默认margin，padding值，有利于网页布局更加精确

二、seo优化

概念—中文译为搜索引擎优化

包含两个方面

a）站内优化

b) 站外优化（品牌建设，网站推广，流量统计）

站内优化包含以下几个方面：

1.页面主题优化

在head部分设置title标题

2.页面头部优化（设置关键词，描述）

3.超链接优化

a）尽量不要把超链接放在flash中，seo无法识别flash中的超链接文字

b) 给a标签添加title属性

c) 尽量少用或不用图片热点链接

4.图片优化

给img标签添加title和alt属性

5.为网站添加网站地图或网站导航

方便用户迅速找到要查看的内容信息

6.给网站添加友情链接

提高pr值

7.避免“大体积”页面

代码结构合理清晰，避免大量嵌套表格，尽量减少代码冗余

一、html5新增语义化标签

header 定义网页的头部

footer 定义网页的底部

nav 定义网页的导航

section 定义网页的某个区域

article 定义一篇文章

hgroup 对某一区域的标题进行组合

figure 对某一区域的元素进行组合

figcaption 定义figure元素的标题

aside 定义网页的侧边栏

dialog 定义一个对话框

二、h5新增其他标签

1.mark 定义带有记号的文本

<mark>带有记号的文本</mark>

2.meter 已知范围内的分数值或标量测量

3.progress 定义任务进度

三、h5新增标签—音频、视频

1.音频

...

Your browser does not support the element

</audio>

音频常用html属性

controls 添加音频控制条

autoplay 自动播放

loop 循环播放

src 引入音频文件

常见的音频格式：

mp3,ogg,wav

2.视频

...

Your browser does not support the element

</video>

视频常用属性：

width 视频区域的宽度

height 视频区域的高度

src 引入视频文件路径

poster 在视频播放前或快进时展示的一张图片

autoplay,loop同audio

常见视频格式：

mp4(MPEG4),ogg,webm

四、h5新增表单type属性值

1.type="email"

限制用户输入必须为邮箱(必须含有@符号，并且@符前后都要有内容)

2.type="url"

限制用户输入必须为url(必须含有http:)

3.type="number"

数量的选择

eg: <input type="number" value="1" min="1" max="10" step="2"/>

注：min 最小值

max 最大值

step 每次递增或递减的数量

4.type="range"

产生一个滑动条的效果（常用在音量调节或色值改变）

5.type="color"

产生一个可以选择颜色的颜色面板

6.type="date"

选择日期

7.type="time"

选择时间

8.type="month"

选择年月

9.type="week"

选择某个日期是这一年的第几周

注：6,7,8,9只有Chrome支持

五、h5新增表单新属性

1.设置为必填项，不能为空

2.设置默认提示信息

3.在页面加载完成后，默认某一个input框自动聚焦

4.pattern

输入的内容匹配一个正则表达式

5.表单搜索功能

...

</datalist>

type为search的input框的list属性值必须和datalist标签的id名一致才能实现搜索的功能

6.取消表单验证

在form标签上添加novalidate属性

一、基本选择器

1.通用选择器（通配符） *

2.标签选择器（元素选择符）

3.id选择器

4.class选择器

5.群组选择器

二、层次选择器（关系选择器）

1.E F (后代选择器)

匹配父元素下所有的子元素

2.E>F (子代选择器)

匹配父元素下第一级子元素

3.E+F (相邻兄弟选择器)

匹配E元素后面紧跟着那个F元素(有且仅有一个)

4.E~F (通用兄弟选择器)

匹配E元素后面所有的F元素(可能会匹配到多个)

---------------------------------------------------------------

伪类选择器

一、动态伪类选择器

E:link 链接没有被访问过的状态

E:visited 链接被访问过后的状态

E:hover 鼠标滑过时的状态

E:active 鼠标按下时的状态

E:focus 当获取到焦点时的状态

二、结构性伪类选择器

1.E:first-child 匹配父元素下的第一个子元素

eg： li:first-child{color:red;}

匹配父元素下的第一个子元素li(li必须是父元素下的第一个子元素)

eg: :first-child{color:red;}

匹配父元素下的第一个子元素

注：:first-child 等同于 :nth-child(1)

2.E:last-child 匹配父元素下的最后一个子元素

eg: a:last-child{background:pink;}

匹配父元素下的最后一个子元素a

eg: :last-child{background:pink;}

匹配每个父元素下的最后一个子元素

注： E:last-child 等同于 E:nth-last-child(1)

3. :nth-child(n)

匹配父元素下的第n个子元素，n从0开始计算，一般从第一个开始找

E:nth-child(2n) 等价于 E:nth-child(even)

匹配父元素下的偶数个子元素E

E:nth-child(2n+1) 等价于 E:nth-child(odd)

匹配父元素下的奇数个子元素E

4. :nth-last-child(n)

匹配父元素下从后往前数第n个子元素

-----------------------------------------------------

扩展：

eg: ul li:nth-child(n+5){color:red;}

匹配父元素下的大于5包含5在内的子元素li

eg: ul li:nth-child(-n+5){color:green;}

匹配父元素下的小于5包含5在内的子元素li

-------------------------------------------------------

5.E:first-of-type

匹配父元素下指定类型的第一个子元素

eg: ul li:first-of-type{color:red;}

匹配父元素下li这种类型的子元素的第一个

6.E:last-of-type

匹配父元素下指定类型的最后一个子元素

7.E:nth-of-type(n)

匹配父元素下指定类型的第n个子元素

8.E:nth-last-of-type(n)

匹配父元素下指定类型的倒数第n个子元素

9.E:only-child

匹配父元素下唯一一个子元素

10.E:only-of-type

匹配父元素下指定类型的唯一一个子元素

11.E:empty

匹配内容为空的元素（空格，回车换行也不能有）

12.:root

匹配根元素html

三、UI状态伪类选择器

1.E:checked

匹配选中状态的单选或复选按钮

eg: input:checked+label{color:red;}

匹配选中状态的input控件后边紧跟着的那个label标签

2.E:enabled

匹配启用状态的表单元素

3.E:disabled

匹配禁用状态的表单元素

四、目标伪类选择器

E:target

匹配锚点链接链接到的那个元素

五、否定伪类选择器

E:not(否定条件)

匹配不符合条件的E元素

eg: li:not([class=lis]){color:red;}

匹配class不等于lis的li标签

------------------------------------------------------

六、属性选择器

1.E[attr]

匹配含有attr属性的E元素

eg: a[class]{color:red;}

匹配含有class属性的a标签

2.E[attr=value]

匹配含有attr属性，并且值为value的E元素

eg：a[class=link]{color:black;}

匹配含有class属性，并且值为link的a标签

3.E[attr~=value]

匹配含有attr属性，并且属性值列表中含有value这个词的E元素

eg: a[title~=淘宝]{font-size:40px;}

匹配含有title属性并且值列表中含有淘宝这个词的a标签

4.E[attr^=value]

匹配含有attr属性，并且值以value开头的E元素

5.E[attr$=value]

匹配含有attr属性，并且值以value结尾的E元素

6.E[attr*=value]

匹配含有attr属性，并且值列表中含有value这个字的E元素

eg: a[title*=淘宝]{color:blue;}

匹配含有title属性，并且值列表中含有淘宝两个字的a标签

7.E[attr|=value]

匹配含有attr属性，并且值以value-开头或值为value的E元素

七、语言伪类选择器

E:lang(value)

匹配含有lang属性，并且语言为value的E元素

八、伪元素

1. ::first-line

选择元素的第一行

2. ::first-letter

选择文本块的第一个字母或第一个文字

3. ::before

在子元素的最前面添加一个伪元素

eg: ul:before{

content:'hello';

font-size:32px;

...

}

4. ::after

在子元素的末尾添加一个伪元素，常用于清除浮动

eg: ul:after{

content:'';

height:0;

overflow:hidden;

clear:both;

display:block;

visibility:hidden;

}

5. ::selection

改变选中文效果

兼容火狐写法： ::-moz-selection

一、css3圆角

1.设置一个值

border-radius:20px;

四个方向的圆角水平半径和垂直半径都为20px

2.设置两个值

border-radius:5px 50px;

左上角和右下角为5px,右上角和左下角为50px

3.设置三个值

border-radius:25px 0 50px;

左上角为25px,右上和左下为0,右下为50px

4.设置四个值

border-radius:0 5px 15px 25px;

左上为0，右上为5px,右下为15px,左下为25px(顺时针)

5.使用/设置第二组值

border-radius:25px/50px;

第一组值代表水平半径为25px,第二组值代表垂直半径为50px

6.还可以单独设置某一个方向的圆角

border-top-left-radius 左上

border-top-right-radius 右上

border-bottom-right-radius 右下

border-bottom-left-radius 左下

注： border-bottom-right-radius:25px 50px;

代表右下角水平半径为25px, 垂直半径为50px

7.圆的设置

border-radius:50%;或border-radius:100%;

二、多色彩边框

-moz-border-top-colors:red green blue;

...

注：只有火狐支持

三、图像边框

1.border-image-source:url(图片路径);

2.图像边框裁剪位置(九宫格原理)

border-image-slice:数值;

注：设置数值专指像素，还可以是百分比

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/84811