html_css

最新推荐文章于 2024-07-19 15:50:46 发布

u011533553

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量346

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/u011533553/article/details/107753495

版权

1、meta标签

● 网页所采用的编码字符集：

meta 标签用来设置网页的一些元数据，比如网页的字符集，关键字，简介

meta 是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个 /

	<meta charset="utf-8" />

● 设置网页的关键字

使用 meta 标签可以用来设置网页的关键字

	<meta name="keywords" content="HTML5,JavaScript,前端,Java" />

● 指定网页的描述

搜索引擎检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响页面在搜索引擎中的排名

	<meta name="description" content="发布h5、js等前端相关的信息" />

● 做请求的重定向

格式：

	<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />

2、实体

在 html 中，一些如 > < 这种特殊字符是不能直接使用，需要使用一些特殊的符号来表示这些特殊字符

符号	实体
<	&lt；
>	&gt；
空格	&nbsp；
版权符号	&copy；

3、图片标签以及图片格式

图片标签以及属性：

图片标签使用 img 表示

属性：

src：配置图片的路径

alt：当鼠标放到图片上时的提示文字

图片的格式：

JPEG(JPG)：

JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明；

一般使用JPEG来保存照片等颜色丰富的图片

GIF：

GIF支持的颜色稍，只支持简单的透明，支持动态图

图片颜色单一或者是动态图可以使用 GIF

PNG：

PNG支持的颜色多，并且支持复杂的透明

可以用来显式颜色复杂的透明的图片

4、常用选择器

● 元素选择器

作用：通过元素选择器可以选择页面中的所有指定元素

语法：标签名 {}

p {
    color: red;
}
h1 {
    color: blue;
}

● id 选择器

作用：通过元素的 id 属性值选中唯一的一个元素

语法： #id属性值 {}

#p1 {
    font-size: 20px;
}

● 类选择器(class)

作用：class 属性和 id 属性类似，只不过 class 属性可以重复，拥有相同 class 属性值的元素，我们说他们是

一组元素，可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开

.p2 {
    background-color: yellow;
}

5、选择器分组

● 并集选择器

○ 通过选择器分组可以同时选中多个选择器对应的元素

○ 语法：选择器1，选择器2，选择器N {}

#p1, .p2, h1{
    background-color: yellow;
}

● 通配选择器

○ 可以用来选中页面中的所有的元素

○ 语法：* {}

* {
    color: red;
}

● 交集选择器

○ 可以选中同时满足多个选择器的元素

○ 语法：选择器1选择器2选择器N {}

span.p3{
    background-color: yello;
}

6、子元素和后代选元素选择器

● 元素之间的关系

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

兄弟元素：拥有相同父元素的元素叫做兄弟元素

● 后代元素选择器

○ 选中指定元素的指定后代元素

○ 语法：祖先元素后代元素 {}

#d1 span {
    color: greenyellow;
}

● 子元素选择器

IE6及以下的浏览器不支持子元素选择器

○ 选中指定父元素的指定子元素

○ 语法：父元素 > 子元素 {}

div > span > span {
    background-color: yellow;
}

7、伪类选择器

伪类专门用来表示元素的一种的特殊的状态，比如：访问过的超链接、普通的超链接、获取焦点的文本框，当

我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类

● :link

表示普通的连接（没访问过的连接）

a:link {
    color: yellowgreen;
}

● :visited

表示访问过的链接，浏览器是通过历史记录来判断一个链接是否访问过，由于涉及到用户的隐私问题，所以

使用 visited 伪类只能设置字体的颜色

a:visited{
    color: red;
}

● :hover

表示鼠标移入的状态

a:hover {
    color: blue;
}

● :active

表示超链接被点击的状态

a:active {
    color: black;
}

● :hover和 :active也可以为其他元素设置。IE6中，不支持对超链接以外的元素设置 :hover 和 :active

● :focus

获取焦点

/* 文本框获取焦点以后，修改背景颜色为黄色 */
input:focus {
    background-color: yellow;
}

● :before

指定元素前

一般 before 都需要结合 content 这个样式一起使用，通过 content 可以向 before 或 after 的位置添加一些

内容

/*表示元素最前边的部分*/
p:before {
    content: "我会出现在整个段落的最前边";
    color: red;
}

● :after

指定元素后

/*表示元素的最后边的部分*/
p:after {
    content: "我会出现在整个段落的最后边";
    color: orange;
}

● ::selection

选中的元素

/*
 *	为 p 标签中选中的内容使用样式
 *	可以使用 ::selection 伪类
 *	注意：这个伪类在火狐中需要采用另一种方式编写：::-moz-selection
 */
p::selection {
    background-color: orange
}

/*火狐浏览器编写方式*/
p::-moz-selection {
    background-color: orange
}

8、伪元素

使用伪元素来表示元素中的一些特殊的位置

● 首字母

:first-letter

/*为 p 中第一个字符来设置一个特殊的样式*/
p:first-letter{
    color: red;
    font-size: 20px;
}

● 首行

:first-line

/*为 p 中的第一行设置一个背景颜色为黄色*/
p:first-line {
    background-color: yellow;
}

9、属性选择器

● title

title 属性，这个属性可以给任何标签指定。当鼠标移入到元素上时，元素中的 title 属性的值将会作为提示文

字显示

<p title="我是title中的文字">
    我是一个段落
</p>

● 属性选择器

○ 作用：可以根据元素中的属性或属性值来选取指定元素

○ 语法：

[属性名] 选取含有指定属性的元素

[属性名=“属性值”] 选取含有指定属性值的元素

[属性名^=“属性值”] 选取属性值以指定内容开头的元素

[属性名$=“属性值”] 选取属性值以指定内容结尾的元素

[属性名*=“属性值”] 选取属性值以包含指定内容的元素

//为所有具有 title 属性的 p 元素设置一个背景颜色为黄色
p[title] {
    background-color: yellow
}

//为 title 属性值是 hello 的元素设置一个背景颜色为黄色
p[title="hello"] {
    background-color: yellow;
}

//为 title 属性值以 ab 开头的元素设置一个背景颜色为黄色
p[title^="ab"] {
    background-color: yellow;
}

//为 title 属性值以 c 结尾的元素设置一个背景颜色
p[title$="c"] {
    background-color: yellow;
}

//为 title 属性值包含 m 的元素设置一个背景颜色
p[title*="m"]{
    background-color: yellow;
}

10、其他子元素选择器

● :first-child

选中第一个子标签，只会选择父元素中的第一个元素，父元素可以是任何元素

/*为第一个 p 标签设置一个背景颜色为黄色*/
p:first-child {
    background-color: yellow
}

● :last-child

选中最后一个子标签，只会选择父元素中的最后一个元素，父元素可以是任何元素

p:nth-child{
    background-color: yellow;
}

● :nth-child

选择指定位置的子元素；

该选择器后面可以指定一个参数，指定要选择第几个子元素；

even：表示偶数位置的子元素

odd：表示基数位置的子元素

p:nth-child(3){
    background-color: yellow;
}

p:nth-child(even){
    background-color: red;
}

p:nth-child(odd){
    background-color: blue;
}

● :first-of-type，:last-of-type，:nth-of-type

选择指定类型的子元素；

和前面的这些非常类似；只不过 child 是在所有的子元素中排列，即body中的排列，而type是在当前类型的

子元素中排列，不管元素是不是body中的第一个或者是最后一个，它会从这一类中找

p:first-of-type{
    color: red;
}
p:last-of-type{
    color: blue;
}
p:nth-of-type{
    color: green;
}

11、兄弟元素选择器

● 后一个兄弟元素选择器

○ 作用：可以选择一个元素后紧挨着的指定的兄弟元素

○ 语法：前一个 + 后一个

//为 span 后一个 p 元素设置一个背景颜色为黄色
span + p {
    background-color: yellow;
}

● 选中后边的所有兄弟元素

语法：前一个 ~ 后边所有

span ~ p{
    background-color: yellow;
}

12、否定伪类

作用：可以从已选中的元素中剔除出某些元素

语法：:not(选择器)

//为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
p:not(.hello){
    background-color:yellow;
}

13、样式的继承

祖先元素上的样式，会被它的后代元素所继承，利用继承，可以将一些基本的样式设置给祖先元素，这样所有

的后代元素将会自动继承这些样式。

但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承

14、选择器的优先级

● 当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪

个选择器定义的样式，由选择器的优先级（权重）决定，优先级高的优先显示

● 优先级的规则：

内联样式：优先级 1000

id选择器：优先级 100

类和伪类：优先级 10

元素选择器：优先级 1

通配*：优先级 0

继承的样式：没有优先级

● 当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后再比较，但是注意，选择器优先级计算不

会超过它的最大的数量级，如果选择器的优先级一样，则使用靠后的样式

● 并集选择器的优先级是单独计算的，比如：div, p, #p1, .hello{} 这种不会将优先级相加，会单独计算

● 可以在样式的最后，添加一个 ! important，则此时该样式将会获得一个最高的优先级，将会优先于所有的样

式显示甚至超过内联样式，但是在开发中尽量避免使用 ! import

.p1 {
    color: yellow;
    background-color: green !important;
}

15、伪类的优先级

涉及到 a 超链接的伪类一共有4个：

:link

:visited

:hover

:active

而这4个选择器的优先级是一样的，如果 :hover 伪类写在 :active 的后面时，如果点击超链接，不会出现

:active 的样式，因为优先级一样会选择后面的，:link和:visited不存在这种冲突，顺序可以随便写，所以

使用这几个伪类时 :hover 要写在 :active 的前边

16、文本标签及样式

● 和

○ em标签用于表示一段内容中的着重点，主要表示语气上的强调

○ strong标签用于表示一个内容的重要性

○ 这两个标签可以单独使用，也可以一起使用

○ 通常 em 显示为斜体，而strong显示为粗体

<p>
    <strong>警告：任何情况下不要接近僵尸</strong>
    他们只是<em>看起来</em>很友好，实际上他们是为了吃你胳膊
</p>

● 和

○ i标签中的内容会以斜体显示

○ b标签中的内容会以加粗显示

○ h5 规范中规定，对于不需要着重的内容而是单纯的加粗或者斜体，就可以使用 b 和 i 标签

●

small标签中的内容会比它的父元素中的文字要小一些，在h5中使用small标签来表示一些细则一类的内容，

● <cite>

使用 cite 标签可以指明对某些内容的引用或参考。比如：戏剧、文章或图书的标题、歌曲、电影、照片或雕

塑的名称等

<p>
    <cite>《七龙珠》</cite>讲的是召唤神龙的故事
</p>

● <q>

q 标签标示一个短的引用（行内引用）；q标签引用的内容，浏览器会默认加上引号

<p>
    子曰：<q>学而时习之不亦说乎！</q>
</p>

● <blockquote>

blockquote 标签标示一个长引用（块级引用）

<div>
    子曰：
    <blockquote>
        有朋自远方来，乐呵乐呵！
    </blockquote>
</div>

●

使用 sup 标签来设置一个上标

<p>
    2<sup>2</sup>
</p>
<p>
    赵薇<sup><a href="#">[1]</a></sup>
</p>

●

sub标签用来表示一个下标

<p>
    H<sub>2</sub>O
</p>

● <ins>和<del>

○ ins 表示插入的内容，显示时通常会加上下划线

○ del 表示删除的内容，显示时通常会加上删除线

<p>
    <del>17.75</del> <br />
    15.54 <br />
</p>

<p>
    我们的老师真<ins>好啊</ins>！
</p>

● <pre>

需要页面中直接编写一些代码，pre是一个预格式标签，会将代码中的格式保存，不会忽略多个空格

<pre>
	window.onload = function(){
		alert("Hello World")
	}
</pre>

17、无序列表和有序列表

在HTML也可以创建列表，在网页中一共有三种列表

● 无序列表

使用 ul 标签来创建一个无序列表；使用 li 在 ul 中创建一个一个的列表项，一个 li 就是一个列表项；

通过 type 属性可以修改无序列表的项目符号：

可选值：

disc：默认值，实心的圆点

square：实心的方块

circle：空心的圆

注意：默认的项目符号我们一般都不使用！！如果需要设置项目符号，则可以采用为 li 设置背景图片的

方式来设置。ul 和 li 都是块元素

<ul type="">
    <li>西门大官人</li>
    <li>柴大官人</li>
    <li>许大官人</li>
    <li>唐僧大官人</li>
</ul>

去掉项目符号的样式：

ul{
    list-style: none;
}

● 有序列表

有序列表和无序列表类似，只不过它使用 ol 来代替 ul

有序列表使用有序的序号作为项目符号

type 属性可以指定序号的类型

可选值：

1，默认值，使用阿拉伯数字

a/A，采用小写或大写字母作为序号

i/I，采用小写或大写的罗马数字作为序号

ol 也是块元素

<ol type="I">
    <li>结构</li>
    <li>表现</li>
    <li>行为</li>
</ol>

列表之间都是可以互相嵌套，可以在无序列表中放有序列表，也可以在有序列表中放一个无序列表

● 定义列表

定义列表用来对一些词汇或内容进行定义，使用 dl 创建一个定义列表

dl 中有两个子标签：

dt：被定义的内容

dd：对定义内容的描述

同样 dl 和 ul 和 ol 之间都可以互相嵌套

<dl>
    <dt>武松</dt>
    <dd>景阳冈打虎英雄，战斗力99</dd>
    <dd>后打死西门庆，投奔梁山</dd>
    <dt>武大</dt>
    <dd>著名餐饮企业家，战斗力0</dd>
</dl>

18、单位

● px

如果我们将一个图片放大的话，我们会发现一个图片是有一个一个的小色块构成的，这一个小色块就是一个

像素，也就是 1px，对于不同的显示器来说一个像素的大小是不同的，像素越小，显示效果越好越清晰

● 百分比

也可以使用一个百分数来表示一个大小，百分比是相对于父元素来说的，如果父元素使用的大小是16px，则

100%就是16px，200%就是32px

● em

em和百分比类似，它是相对于当前元素的字体大小来计算的

1em = 1font-size

使用 em 时，当字体大小发生改变时，em 也会随之改变，当设置字体相关的样式时，经常会使用 em

19、十六进制RGB值

颜色单位：

● 在CSS可以直接使用颜色的单词来表示不同的颜色：

红色：red 蓝色：blue 绿色：green

● 也可以使用 RGB 值来表示不同的颜色

○ 所谓的RGB值指的是通过 red green blue三元色，通过这三种颜色的不同浓度，来表示出不同的颜色

○ 例子：rgb(红色的浓度，绿色的浓度，蓝色的浓度)

颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有。浓度也可以采用一个百分数来设

置，需要一个0%-100%之间的数字，使用百分数最终也会转换为0-255之间的数，0%表示0,100%表示

255

● 也可以使用十六进制的 rgb 值来表示颜色，原理和上边 rgb 原理一样，只不过使用十六进制数来代替，使

用三组两位的十六进制数组来表示一个颜色，00-ff

语法：#红色绿色蓝色

00表示没有，相当于 rgb 中的0，ff表示最大，相当于 rgb 中255

像这种两位两位重复的颜色，可以简写，比如：#ff0000 可以写成 #f00，#aabbcc可以写成#abc

20、字体

.p1{
    /*设置字体颜色，使用color来设置文字的颜色*/
    color: red;
    /*
    	设置文字的大小，浏览器中一般默认的文字大小都是16px
    	font-size设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的，
    	我们设置的font-size实际上是设置框的高度，并不是字体的大小，一般情况下文字都要比这个框要小
    	一些，也有时会比框大，根据字体的不同，显示效果也不同
    */
    font-size: 30px;
    /*
    	通过font-family可以指定文字的字体，当采用某种字体时，如果浏览器支持则使用该字体，如果字体不支持
    	，则使用默认字体。该样式可以同时指定多个字体，多个字体之间使用逗号分开，当采用多个字体时，浏览器
    	会优先使用前边的字体，如果前边没有再尝试下一个
    	
    	浏览器使用的字体默认就是计算机中的字体，如果计算机中有，则使用，如果没有就不用
    	有可能用户的电脑没有，就不能达到想要的效果
    	查看计算机中字体目录：c盘/Windows/Fonts
    */
    /*font-family: arial, 围观雅黑; */
    font-family: 华文彩云, arial, 微软雅黑;
}

21、字体分类

<!--
	在网页中将字体分成5大类
		serif(衬线字体)
		sans-serif(非衬线字体)
		monospace(等宽字体)
		cursive(草书字体)
		fantasy(虚幻字体)
	可以将字体设置为这些大的分类，当设置为大的分类后，浏览器会自动选择指定的字体并应用样式，一般会将
	字体的大分类指定为font-family中的最后一个字体
-->
<p style="font-size: 50px; font-family: serif;">
    我是P标签
</p>

22、字体的样式

.p1{
    color: red;
    font-size: 30px;
    font-family: "微软雅黑";
    
    /*
    	font-style可以用来设置位子的斜体
    		可选值：
    			normal，默认值，文字正常显示
    			italic，文字会以斜体显示
    			oblique，文字会以倾斜的效果显示
    		大部分浏览器都不会对倾斜和斜体做区分，也就是说我们设置 italic 和 oblique 它们的效果往往是
    		一样的
    		一般我们只会使用 italic
    */
    font-style: italic;
    
    /*
    	font-weight 可以用来设置文本的加粗效果
    		可选值：
    			normal，默认值，文字正常显示
    			bold，文字加粗显示
    		该样式也可以指定100-900之间的9个值
    			但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果，也就是200有可能
    			比100粗，300有可能比200粗，但是也可能是一样的
    */
    font-weight: 500;
    
    /*
    	font-variant 可以用来设置小型大写字母
    		可选值
    			normal：默认值，文字正常显示
    			small-caps：文本以小型大写字母显示
    		小型大写字母：将所有的字母都已大写形式显示，但是小写字母的大小要比大写字母的大小小一些
    */
    font-variant: small-caps;
    
}

.p2{
    /*设置一个文字大小*/
    font-size: 50px;
    /*设置一个字体*/
    font-family: 华文彩云;
    /*设置文字斜体*/
    font-style: italic;
    /*设置文字的加粗*/
    font-weight: bold;
    /*设置一个小型大写字母*/
    font-variant: small-caps;
}

.p3{
    /*
    	在CSS中还为我们提供了一个样式叫font，使用该样式可以同时设置字体相关的所有样式，可以将字体的样式
    	的值统一写在font样式中，不同的值之间使用空格隔开
    
    	使用font设置字体样式时，斜体，加粗，小型大写字母 没有顺序要求，甚至可写可不写，如果不写则使用默认
    	值，但是要求文字的大小和字体必须写，而且字体必须是最后一个样式，大小必须是倒数第二个样式
    
    	实际上使用简写属性也会有一个比较好的性能
    */
    font: small-caps bold italic 60px "微软雅黑";
}

23、行高

/*
	在CSS并没有为我们提供一个直接设置行间距的方式，我们只能通过设置行高来间接地设置行间距，行高越大行间距
		越大
	使用 line-height 来设置行高
		行高类似于单线本，单线本是一行一行的，线与线之间的距离就是行高，网页中的文字实际上也是写在一个看不
		见的线中的，而文字会默认在行高中垂直居中显示
	行间距 = 行高 - 字体大小

	通过设置line-height可以间接地设置行高，可以接收的值：
		1、直接接收一个大小
		2、可以指定一个百分数，则会相对于字体去计算行高
		3、可以直接传一个数值，则行高会设置字体大小相应的倍数
*/
.p1{
    font-size: 20px;
    /*line-height: 30px;*/
    /*line-height: 200%;*/
    line-height: 2;
}

.box{
    width: 200px;
    height: 200px;
    /*
    	文本默认是在行高中居中显示的，如果不设置行高，行高默认和字体是一样的高度，如果行高和父元素高度
    		一致，那么文本就会在父元素居中显示
    	对于单行文本来说，可以将行高设置为和父元素的高度一致，这样可以是单行文本在父元素中垂直居中
    */
    line-height: 200px;
}

.p2{
    line-height: 50px;
    /*
    	在 font 中也可以指定行高，在字体大小后可以添加 /行高，来指定行高，该值是可选的，如果不指定则会
    	使用默认值
    */
    font: 30px/50px "微软雅黑";
}

24、文本样式

● text-transform

可以用来设置文本的大小写，可选值：

none：默认值，该怎么显示就怎么显示，不做任何处理

capitalize：单词的首字母大写，通过空格来识别单词

uppercase：所有的字母都大写

lowercase：所有的字母都小写

.p1{
    text-transform: lowercase;
}

● text-decoration

可以用来设置文本的修饰，可选值：

none：默认值，不添加任何修饰，正常显示

underline：为文本添加下划线

overline：为文本添加上划线

line-through：为文本添加删除线

超链接会默认添加下划线，也就是超链接的 text-decoration 的默认值是 underline，如果需要去除超链接的

下划线则需要将该样式设置为 none

.p1{
    text-decoration: line-through;
}

a{
    text-decoration: none;
}

● letter-spacing和word-spacing

letter-spacing：用来设置字符之间的间距

word-spacing：用来设置单词之间的间距

这两个属性都可以直接指定一个长度或百分数作为值。正数代表的是增加距离，负数代表减少距离

.p3{
    letter-spacing: 10px;
    word-spacing: 120px;
}

● text-align

用于设置文本的对齐方式

可选值：

left：左对齐

right：右对齐

center：居中对齐

justify：两边对齐，如果文本有多行，让多行两边对齐，通过调整文本之间的空格的大小，来达到一个两

端对齐的目的

.p1{
    text-align: justify;
}

● text-indent

用来设置首行缩进

给它指定一个正值，会自动向右侧缩进指定的像素

给它指定一个负值，则会向左移动指定的像素

.p1{
    /*text-indent: 32px;*/
    text-indent: -10px;
}

25、盒子模型-边框

.box{
    /*
    	width和height只是设置盒子内容区的大小，而不是盒子的整个大小，盒子可见框的大小由内容区、
    	内边距和边框共同决定的
    */
    width: 100px;
    height: 100px;
    /*
    	为元素设置边框
    		要为一个元素设置边框必须指定三个样式
    			border-width: 边框的宽度
    				border-width 可以分别指定四个边框的宽度，
    					如: border-width:10px 20px 30px 40px，
    				border-width指定的四个值分别设置给上、右、下、左，按顺时针方向设置
    				border-width指定三个值，则设置给上、左右、下
    				border-width指定两个值，则设置给上下、左右
    				border-width指定一个值，则四边全都是该值
    				除了border-width，css还提供了border-xxx-width，xxx的值可能是top、right、
    					bottom、left
    			border-color: 边框的颜色
    				和宽度一样，color也提供四个方向的颜色，可以分别指定颜色
    				border-xxx-color和border-xxx-width类似
    			border-style: 边框的样式
    				可选值：
    					none: 默认值，没有边框
    					solid: 实线
    					dotted: 点状边框
    					dashed: 虚线
    					double: 双线
    				border-style也可以分别指定四个边框的样式，规则和width一致，同时它也提供
    					border-xxx-style
    */
    border-width: 10px;
    border-color: red;
    border-style: solid;
}

26、盒子模型-边框简写属性

● 大部分浏览器中，边框的宽度和颜色都是有默认值的，而边框的样式默认值都是none

● border

边框的简写样式，通过它可以同时设置四个边框的样式、宽度、颜色，而且没有任何的顺序要求；

border一指定就是同时指定四个边，不能分别指定

● border-top、border-right、border-bottom、border-left 可以单独设置四个边的样式，规则和border一

样，只不过它只对一个边生效

.box{
    border: red solid 10px;
    border-top: red solid 10px;
}

27、盒子模型-内边距

● 内边距(padding)，指的是盒子的内容区与盒子边框之间的距离，一共有四个方向的内边距，可以通过：

padding-top

padding-right

padding-bottom

padding-left 来设置四个方向的内边距

● 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距

● 使用padding可以同时设置四个边框的样式，规则和border-width一致

.box1{
    padding-top: 100px;
    padding-right: 100px;
}

.box2{
    padding: 100px;
}

28、盒子模型-外边距

● 外边距指的是当前盒子与其他盒子之间的距离，它不会影响可见框的大小，而是会影响到盒子的位置

● 盒子有四个方向的外边距

margin-top

margin-right

margin-bottom

margin-left

● 由于页面中的元素都是靠左靠上摆放的，所以注意，当我们设置上和左外边距时，会导致盒子自身的位置发生

改变，而如果是设置右和下外边距会改变其他盒子的位置

● 外边距也可以指定一个负值，如果外边距设置的是负值，则元素会向反方向移动

● margin还可以设置为auto，auto一般只设置给水平方向的margin；

如果只指定左外边距或右外边距的margin为auto，则指定的那一侧的外边距将设置为最大值

垂直方向外边距如果设置为auto，则外边距默认就是0

● 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，就可以使元素自动在父元素中居

中，所以我们经常将左右外边距设置为auto，以使子元素在父元素中水平居中

● 外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距，规则和paddin一样

.box{
    margin-top: 100px;
    margin-left: 100px;
    margin: 0 auto;
}

29、垂直外边距的重叠

● 在网页中相邻的垂直方向的外边距会发生外边距的重叠，所谓的外边距重叠指兄弟元素之间的相邻外边距会取

最大值而不是取和

● 如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            height: 100px;
            width: 100px;
            background-color: red;
            margin-bottom: 100px;
        }
        .box2{
            height: 100px;
            width: 100px;
            background-color: green;
            margin-top: 100px;
        }
        .box3{
            height: 200px;
            width: 200px;
            background-color: red;
            margin-bottom: 100px;
        }
        .box4{
            height: 100px;
            width: 100px;
            background-color: green;
            margin-top: 100px;
        }
    </style>
</head>
<body>

    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">
        <div class="box4"></div>
    </div>

</body>
</html>

30、浏览器默认样式

浏览器为了页面中没有样式时也可以有一个比较好的显式效果，所以为很多的元素都设置了一些默认的

margin和padding，而这些默认样式，正常情况下我们是不需要使用的，所以我们往往在编写样式之前需要将

浏览器中的默认的margin和padding统统的去掉

*{
    margin: 0;
    padding: 0;
}

32、内联元素的盒模型

● 内联元素不能设置 width 和 height

● 内联元素可以设置水平方向的内边距

● 内联元素可以设置垂直方向的内边距，但是不会影响页面的布局，不会影响页面的布局指的是如果在内联元素

的上边或下边有元素，如果增加垂直方向的内边距，它会将上边或下边的元素遮挡掉，上边和下边的元素不

会因为垂直方向的内边距增加而上移或下移

● 内联元素可以设置边框，但是垂直的边框不会影响到页面的布局

● 内联元素支持水平方向的外边距，水平方向的相邻外边距不会重叠，而是求和

● 内联元素不支持垂直外边距

33、display和visibility

● display

将一个内联元素变成块元素，可选值：

inline：可以将一个元素作为内联元素显示

block：可以将一个元素设置块元素显示

inline-block：将一个元素转换为行内块元素，可以使一个元素既有行内元素的特点又有块元素的特点，既

可以设置宽高，又不会独占一行

none：不显示元素，并且元素不会在页面中继续占有位置

● visibility

可以用来设置元素的隐藏和显示状态，可选值：

visible：默认值，元素默认会在页面显示

hidden：元素会隐藏不显示

使用 visibility：hidden；隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持

.ele{
    display: inline-block;
}
.ele1{
    visibility: hidden;
}

34、overflow

● 子元素默认是存在于父元素的内容区中，理论上讲子元素的最大高宽可以等于父元素内容区大小

● 如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示，超出父元素的内容，我

们称为溢出的内容

● 父元素默认是将溢出的内容在父元素外边显示，通过overflow可以设置父元素如何处理溢出内容，可选值：

visible：默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示

hidden：溢出的内容会被修剪，不会显示

scroll：会为父元素添加滚动条，通过拖动滚动条来查看完整内容，该属性不论内容是否溢出，都会添加水

平和垂直双方向的滚动条

auto：会根据需求自动添加滚动条，需要水平就添加水平，需要垂直就添加垂直，都不需要就都不加

35、文档流

● 文档流

文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中

● 元素在文档流中的特点

○ 块元素

■ 块元素在文档流中会独占一行，块元素会自上向下排列

■ 块元素在文档流中默认宽度是父元素的100%

■ 块元素在文档流中的高度默认被内容撑开

○ 内联元素

■ 内联元素在文档流中只占自身的大小，会默认从左向右排列，如果一行中不足以容纳所有的内联元素，则

换到下一行，继续自左向右排列

■ 在文档流中，内联元素的宽度和高度默认都被内容撑开

● 当元素宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距

36、浮动

● 块元素在文档流中默认垂直排列，所以多个块元素会自上向下依次排开，如果希望块元素在页面中水平排列，

可以是块元素脱离文档流

● 使用 float 来使元素浮动，从而脱离文档流，可选值：

none：默认值，元素默认在文档流中排列

left：元素会立即脱离文档流，向页面的左侧浮动

right：元素会立即脱离文档流，向页面的右侧浮动

● 当为一个元素设置浮动以后(float属性是一个非none的值)，元素会立即脱离文档流，元素脱离文档流以后，它

下边的元素会立即向上移动，元素浮动以后，会尽量向页面的左上或者是右上漂浮，直到遇到父元素的边框

或者内边距或者其他的浮动元素

● 如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过这个没有浮动的块元素

● 浮动元素不会超过它上边浮动的元素，最多最多是一样的高度

● 浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的

效果

● 在文档流中，子元素的宽度默认占父元素的全部。当元素设置浮动以后，会完全脱离文档流，块元素脱离文档

流以后，如果不设置高度和宽度，那么高度和宽度都被内容撑开

● 内联元素脱离文档流以后会变成块元素

37、高度塌陷

● 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高

● 但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致

父元素的高度塌陷

● 由于父元素的高度塌陷了，则父元素后面的所有元素都会向上移动，这样将导致页面布局混乱

38、解决高度塌陷

解决高度塌陷都是设置父元素

方案一

● 根据W3C的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context，简称BFC，该属性可以

设置打开或者关闭，默认是关闭的

● 当开启元素的BFC以后，元素将会具有如下特性

○ 父元素的垂直外边距不会和子元素重叠

○ 开启BFC的元素不会被浮动元素所覆盖

○ 开启BFC的元素可以包含浮动的子元素

● 如何开启BFC

○ 设置元素浮动(将父元素设置浮动)

使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致

下边的元素上移，不能解决问题

○ 设置元素绝对定位(设置父元素)

○ 设置元素为 inline-block(设置父元素)

可以解决问题，但是会导致宽度丢失，不推荐使用这种方式

○ 将元素的overflow设置为一个非visible的值

推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式

但是在IE6及以下的浏览器中并不支持BFC，所以使用这种方式不能兼容IE6。在IE6中虽然没有BFC，但是具有另

一个隐含的属性叫做 hasLayout，该属性的作用和 BFC类似，所以IE6浏览器可以通过 hasLayout 来解决该问题

开启方式很多，我们直接使用一种副作用最小的：

直接将元素的 zoom 设置为1即可

zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍

zoom：1 表示不放大元素，但是通过该样式可以开启 hasLayout，zoom这个样式，只在IE中支持，其他浏览器

都不支持

方案二

● 有时我们希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能。

● clear可以用来清除其他浮动元素对当前元素的影响，可选值：

none：默认值，不清除浮动

left：清除左侧浮动元素对当前元素的影响

right：清除右侧浮动元素对当前元素的影响

both：清除两侧浮动元素对当前元素的影响，清除对它影响最大的那个元素的浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            /*
            	清除box1浮动对box2产生的影响
            	清除浮动以后，元素会回到其他元素浮动之前的位置
            */
            clear: left;
        }
    </style>
</head>
<body>

    <div class="box1"></div>
    <div class="box2"></div>

</body>
</html>

解决高度塌陷二：可以直接在高度塌陷的父元素的最后添加一个空白的div，由于这个div并没有浮动，所以他是

可以撑开父元素的高度的，然后再对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基

本没有副作用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            border: 10px solid yellow;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .clear{
            clear: both;
        }
    </style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
        <div class="clear"></div>
    </div>

</body>
</html>

使用上面这种方式虽然可以解决高度塌陷问题，但是会在页面中添加多余的结构

我们可以通过after伪类来替换这个空的div。

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一

样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作

用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box1{
            border: 10px solid yellow;
        }
        .box1:after{
            /*添加一个内容*/
            content: "";
            /*转换为一个块元素*/
            display: block;
            /*清除两侧的浮动*/
            clear: both;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
    </style>
</head>
<body>

    <div class="box1">
        <div class="box2"></div>
    </div>

</body>
</html>

方案三

子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素，使用空 table 标签可以隔离父

子元素的外边距，阻止外边距的重叠

<div class="box1">
	<div class="box2"></div>
</div>
/*解决父子元素的外边距重叠*/
.box1:before{
    content: "";
    /*
    	display: table可以将一个元素设置为表格显示
    */
    display: table;
}

解决父元素高度塌陷：

.clearfix:after{
    content: "";
    display: block;
    clear: both;
}

同时解决高度塌陷和父子相邻元素垂直外边距重叠问题

.clearfix:before, .clear:after{
    content: "";
    display: table;
    clear: both;
}

39、相对定位

● 定位指的是将指定的元素摆放到页面的任意位置，通过定位可以任意地摆放元素

● 通过 position 属性来设置元素的定位，可选值：

static：默认值，元素没有开启定位

relative：开启元素的相对定位

absolute：开启元素的绝对定位

fixed：开启元素的固定定位（也是绝对定位的一种）

● 当开启了元素的定位(position属性值是一个非static的值)时，可以通过left、right、top、bottom四个属性来

设置元素的偏移量

left：元素相对于其定位位置的左侧偏移量

right：元素相对于其定位位置的右侧偏移量

top：元素相对于其定位位置的上边的偏移量

bottom：元素相对于其定位位置下边的偏移量

通常偏移量只需要使用两个就可以对一个元素进行定位，一般选择水平方向的一个偏移量和垂直方向的偏移

量来为一个元素进行定位

● 当元素的position属性设置为 relative 时，则开启了元素的相对定位

○ 当开启了元素的相对定位以后，如果不设置偏移量时，元素不会发生任何变化

○ 相对定位是相对于元素在文档流中原来的位置进行定位

○ 相对定位的元素不会脱离文档流

○ 相对定位会使元素提升一个层级

○ 相对定位不会改变元素的性质，块还是块，内联还是内联

40、绝对定位

● 当 position 属性值设置为absolute时，则开启了元素的绝对定位

● 绝对定位：

○ 开启绝对定位，会使元素脱离文档流

○ 开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化

○ 绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的(一般情况，开启了子元素的绝对定位都会

同时开启父元素的相对定位)，如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位

○ 绝对定位会使元素提升一个层级

○ 绝对定位会改变元素的性质，内联元素变成块元素；块元素的宽度和高度默认都被内容撑开

41、固定定位

当元素的position属性设置fixed时，则开启了元素的固定定位，固定定位也是一种绝对定位，它的大部分特点

都和绝对定位一样，不同的是：

● 固定定位永远都会相对于浏览器窗口进行定位

● 固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动

● IE6不支持固定定位

42、元素的层级(z-index)

如果定位元素的层级是一样的，而且多个元素之间存在覆盖现象，那么下边的元素会覆盖上边的，可以通过

z-index 属性来设置元素的层级，可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级，层级越

高，越优先显示

对于没有开启定位的元素不能使用 z-index

父元素的层级再高，也不会覆盖子元素

.box{
   	position: absolute;
    z-index: 100;
}

43、opacity

● 设置元素的透明背景

● opacity可以用来设置元素背景的透明，它需要一个 0-1 之间的值

0 表示完全透明

1 表示完全不透明

0.5 表示半透明

● opacity属性在 IE8 及以下的浏览器中不支持，IE8 及以下的浏览器需要使用如下属性代替：

alpha(opacity=透明度)

透明度需要一个 0-100之间的值

0 表示完全透明

100 表示完全不透明

50 半透明

这种方式支持 IE6，但是这种效果在 IE Tester 中无法测试

.box{
    opacity: 0.5;
    filter: alpha(opacity=50);
}

44、背景

● background-color

用来设置背景颜色

● background-image

用来设置背景图片

○ 语法：background-image: url(图片相对路径)

○ 如果背景图片大于元素，默认会显示图片的左上角

○ 如果背景图片和元素一样大，则会将背景图片全部显示

○ 如果背景图片小于元素大小，则会默认将背景图片平铺，以充满元素

● 可以同时为一个元素指定背景颜色和背景图片，这样背景颜色将作为背景图片的底色，一般情况下设置背景图

片时都会同时指定一个背景颜色

● background-repeat

用来设置背景图片的重复方式，可选值：

repeat：默认值，背景图片会双向重复(平铺)

no-repeat：背景图片不会重复，有多大就显示多大

repeat-x：背景图片沿水平方向重复

repeat-y：背景图片沿垂直方向重复

● background-position

背景图片默认是贴着元素的左上角显示，通过 background-position可以调整背景图片在元素中的位置

可选值：

该属性可以使用 top、right、left、bottom、center 中的两个值来指定一个背景图片的位置

top left 左上

bottom right 右下

如果只给出一个值，则第二个值默认是 center

也可以直接指定两个偏移量：

第一个值是水平偏移量

如果指定的是一个正值，则图片会向右移动指定的像素

如果指定的是一个负值，则图片会向左移动指定的像素

第二个值是垂直偏移量

如果指定的是一个正值，则图片会向下移动指定的像素

如果指定的是一个负值，则图片会向上移动指定的像素

● background-attachment

用来设置背景图片是否随页面一起滚动，可选值：

scroll：默认值，背景图片随窗口滚动

fixed：背景图片会固定在某一位置，不随页面滚动

当背景图片的 background-attachment 设置为 fixed 时，背景图片的定位永远相对于浏览器的窗口，即自己

设置的 background-position 都是相对于浏览器来定位的，所以不随窗口滚动的图片，我们一般都是设置给

body，而不是设置给其他元素

.box{
    background-color: #bfa;
    background-image: url(img/1.png);
    background-repeat: no-repeat;
    /*background-position: center;*/
    background-position: 100px 100px;
    background-attachment: scroll;
}

45、背景简写属性

background

● 通过该属性可以同时设置所有背景相关的样式

● 没有顺序要求，谁在前谁在后都行，也没有数量要求，不写的样式就使用默认值

.box{
    background: #bfa url(img/1.png) cneter center no-repeat fixed;
}

46、表格

在html中，使用table标签来创建一个表格

在 table 标签中使用 tr 来表示表格中的一行，有几行就有几个tr

在 tr 中需要使用 td 来创建一个单元格，有几个单元格就有几个td

<!-- border设置边框，width设置整个表格的宽度，align设置整个表格居中 -->
<table border="1" width="30%" align="center">
    <tr>
    	<td>A1</td>
        <td>A2</td>
        <!-- colspan用来横向合并单元格 -->
        <td colspan="1">A3</td>
        <!-- rowspan用来设置纵向的合并单元格 -->
        <td rowspan="2">A4</td>
    </tr>
    <tr>
    	<td>B1</td>
        <td>B2</td>
        <td>B3</td>
        <td>B4</td>
    </tr>
    <tr>
    	<td>C1</td>
        <td>D2</td>
        <td>D3</td>
        <td>D4</td>
    </tr>
    <tr>
    	<td>D1</td>
        <td>D2</td>
        <td>D3</td>
        <td>D4</td>
    </tr>
</table>

47、表格的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table{
            width: 300px;
            margin: 0 auto;
            border: 1px solid black;
            /*
                table和td边框之间默认有一个距离，通过border-spacing属性可以设置这个距离
            */
            border-spacing: 0px;
            /*
                border-collapse可以用来设置表格的边框合并，如果设置了边框合并，则
                border-spacing自动失效
            */
            border-collapse: collapse;
            /*设置背景样式*/
            background-color: #bfa;
        }
    </style>
</head>
<body>

    <table>
        <tr>
            <!--
                可以使用th标签来表示表头中的内容，它的用法和td一样，不同的是它会有
                一些默认效果
            -->
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>地址</th>
        </tr>
        <tr>
            <td>1</td>
            <td>孙悟空</td>
            <td>男</td>
            <td>花果山</td>
        </tr>
        <tr>
            <td>2</td>
            <td>猪八戒</td>
            <td>男</td>
            <td>高老庄</td>
        </tr>
        <tr>
            <td>3</td>
            <td>沙和尚</td>
            <td>男</td>
            <td>流沙河</td>
        </tr>
        <tr>
            <td>4</td>
            <td>唐僧</td>
            <td>男</td>
            <td>女儿国</td>
        </tr>
    </table>

</body>
</html>

48、长表格

有一些情况下表格是非常长的，这是就需要将表格分为三个部分，表头、表格的主体、表格底部

在 HTML 中为我们提供了三个标签：

thead 表头，thead中的内容，永远会显示在表格的头部

tbody 表格主体，tbody中的内容，永远都会显示在表格的中间

tfoot 表格底部，tfoot中的内容，永远都会显示在表格的底部

这三个标签的作用，就来区分表格的不同的部分，他们都是table的子标签，都需要直接写到table中，tr需要写

在这些标签中

如果表格中没有写 tbody，浏览器会自动在表格中添加 tbody，并且将所有的 tr 都放在 tbody 中，所以注意

tr 并不是 table 的子元素，而是 tbody 的子元素，通过 table > tr 无法选中行，需要通过 tbody > tr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <table>
        <thead>
            <tr>
                <th>日期</th>
                <th>收入</th>
                <th>支出</th>
                <th>合计</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10.24</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
            <tr>
                <td>10.24</td>
                <td>500</td>
                <td>200</td>
                <td>300</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td></td>
                <td></td>
                <td>合计</td>
                <td>100</td>
            </tr>
        </tfoot>
    </table>

</body>
</html>

49、表单

● 单选按钮

<input type="radio" name="gender" value="male"/>男
<input type="radio" name="gender" value="female" checked="checked" />女

● 多选框

<input type="checkbox" name="hobby" value="zq" />足球
<input type="checkbox" name="hobby" value="lq" />篮球
<input type="checkbox" name="hobby" value="ymq" checked="checked"/>羽毛球
<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球

● 下拉框

<select name="star">
    <option value="fbb">范冰冰</option>
    <option value="lxr">林心如</option>
    <option value="zbs" selected="selected">赵本山</option>
</select>

<!-- 如果select添加一个multiple="multiple",则下拉列表变为一个多选的下拉列表，所有的都会显示出来 -->
<select name="star" multiple="multiple">
    <option value="fbb">范冰冰</option>
    <option value="lxr">林心如</option>
    <option value="zbs" selected="selected">赵本山</option>
</select>

<!-- 在select中可以使用optgroup对选项进行分组，同一个optgroup中的选项是一组 -->
<select name="star">
    <optgroup label="女明星">
    	<option value="fbb">范冰冰</option>
    	<option value="lxr">林心如</option>
    </optgroup>
    <optgroup label="男明星">
    	<option value="ldh">刘德华</option>
        <option value="gfc">郭富城</option>
        <option value="zbs" selected="selected">赵本山</option>
    </optgroup>
</select>

u011533553

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html_css

1、meta标签 ● 网页所采用的编码字符集： meta 标签用来设置网页的一些元数据，比如网页的字符集，关键字，简介 meta 是一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个 / <meta charset="utf-8" /> ● 设置网页的关键字使用 meta 标签可以用来设置网页的关键字 <meta name="keywords" content="HTML5,JavaScript,前端,Java" /> ● 指定网页
复制链接

扫一扫