zoukankan html css js c++ java

CSS

一、CSS概述

1. CSS简介

CSS指层叠样式表（Cascading Style Sheets），样式定义如何显示HTML元素，样式通常存储在样式表中，可以理解为CSS就是给HTML化妆的。

2. CSS三种使用方式

l 内联方式

-样式定义在单个的HTML元素中

l 内部样式表

-样式定义在HTML页的头<head>元素中

l 外部样式表

-将样式定义在一个外部的CSS文件中（.css）

-由HTML页面引用样式表文件

2.1 内联样式

l 样式定义在HTML元素的属性style里

l CSS语法

-只需要将分号隔开的一个或多个属性/值对作为元素的style属性的值

-属性和属性值之间用冒号(:)连接

-多对属性之间用分号(;)隔开

2.1.1 演示：CSS内联样式

<p style="color:red; font-size:30px">CSS内联样式演示</p>

2.2 内部样式

l 样式定义在HTML文档头元素内

-在文档<head>元素内添加<style>元素

-在<style>元素中添加样式规则

-可以在当前页面内复用

2.2.1 演示：CSS内部样式

<!DOCTYPE html>

<html>

<head>

<style>

/*CSS注释是这样的，这里演示CSS的内部样式*/

p {

color:blue;

font-size:30px;

}

</style>

</head>

<body>

<p>CSS内部样式演示</p>

<p>内部样式可以在当前页面范围内复用</p>

</body>

</html>

2.3 外部样式

l 样式定义在独立的css文件中

-一个纯文本文件，后缀为.css

-该文件只能包含样式规则

-可以在多个页面复用

l 使用步骤

-创建外部样式文件

-引用该样式文件

在HTML中引用样式文件：<link rel="stylesheet" href="my.css" />

2.3.1 演示：CSS外部样式

step1：创建.css样式文件，路径是当前路径my.css文件

color:yellow;

font-size:30px;

}

step2：引用该样式文件

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>CSS外部样式演示</p>

<p>外部样式可以被多个页面复用</p>

</body>

</html>

二、CSS语法

1. CSS语法规范

l CSS：由多个样式规则组成

-每个样式规则有两个部分：选择器和样式声明。

2. CSS规则特性

l 继承性：父元素的CSS的声明可以被子元素继承，如字体、颜色等(不是所有声明都可以被继承)

l 层叠性：同一个元素若存在多个css规则，对于不冲突的声明可以叠加

l 优先级：同一个元素若存在多个css规则，对于冲突的声明以优先级高的为准（就近原则）

2.1 演示：CSS样式优先级

my.css文件配置

color:yellow;

}

color:red;

}

HTML配置

<!DOCTYPE html>

<html>

<head>

<style>

p {color:blue;}

p {color:pink;}

</style>

</head>

<body>

<p style="color:green;">CSS样式优先级演示</p>

</body>

</html>

三、CSS选择器

1. 元素选择器

l 通过元素名来选择CSS作用的目标：如：<p>、<h1>等

2. 类选择器

l 类选择器允许以一种独立于文档元素的方式来指定样式

-语法: .classname{color:red}

l 所有能够附带class属性的元素都可以使用此样式声明

-将元素的class属性的值设置为样式类名

l 可以将类选择器和元素选择器结合起来使用，以实现对某种元素中不同样式的细分控制

-语法：元素选择器.classname{}

2.1 演示：类选择器

<!DOCTYPE html>

<html>

<head>

<style>

.c1 {

color:red;

}

</style>

</head>

<body>

<h1 class="c1">CSS类选择器演示</h1>

<p class="c1">使用.类名的方式声明选择器</p>

</body>

</html>

2.2.2 演示：元素选择器.类选择器

<!DOCTYPE html>

<html>

<head>

<style>

p.c1 {

color:red;

}

</style>

</head>

<body>

<p>CSS类选择器演示</p>

<p class="c1">使用.类名的方式声明选择器</p>

</body>

</html>

3. id选择器

l id选择器以一种独立于文档元素的方式来指定样式(任何元素都有id,id是元素的唯一标识)

l 它仅作用于id属性的值

l 语法:#id{}

补充：id和class区别：如果选择多个元素使用class，选择唯一的元素使用id。

3.1 演示：id选择器

<!DOCTYPE html>

<html>

<head>

<style>

#id1 {

color:red;

}

</style>

</head>

<body>

<p id="id1">任何元素都有id,id是元素的唯一标识</p>

</body>

</html>

4. 选择器组

l 写出一组选择器，可以选中每个选择器所对应的目标的并集

l 选择器声明为以逗号(,)隔开的选择器列表

-将一些相同的规则作用于多个元素

4.1 演示：选择器组

<!DOCTYPE html>

<html>

<head>

<style>

h1,.c1,#id1 {

color:red;

}

</style>

</head>

<body>

<p id="id1">选择器组可以选中选择器所对应目标的并集</p>

<p class="c1">选择器组的声明以逗号隔开</p>

<p class="c1">选择器组的演示</p>

</body>

</html>

5. 派生选择器

l 派生选择器用来选择某元素下满足条件的子孙

-后代选择器：选择某元素的所有的后代（子+孙）元素

-子元素选择器：选择某元素的所有子元素

5.1 演示：派生选择器

<!DOCTYPE html>

<html>

<head>

<style>

/*后代选择器，选择元素的子孙*/

p u{ color:red;}

/*子选择器*/

p>b{ font-size:30px;}

</style>

</head>

<body>

<p id="id1">人生并<u>不像火车要通过每个站似的经过<b>每一个生活阶段</b>,人生总是直向前行走</u>，<b>从不留下什么。</b></p>

</body>

</html>

6. 伪类选择器

l 伪类用于设置同一个元素在不同状态下的样式

l 常用的伪类：

-link：向未被访问的超链接添加样式

-visited：向已访问的超连接添加样式

-active：向被激活的元素添加样式

-hover：当鼠标悬停至元素上方时，向该元素添加样式

-focus：当元素获取焦点时，向该元素添加样式

6.1 演示：link和visited

<!DOCTYPE html>

<html>

<head>

<style>

a:link {

color:red;

}

a:visited {

color:green;

}

</style>

</head>

<body>

<p>

</p>

</body>

</html>

6.2 演示：active

<!DOCTYPE html>

<html>

<head>

<style>

.btn:active {

background-color: green;

}

</style>

</head>

<body>

<p>

</p>

</body>

</html>

6.3 演示：hover

<!DOCTYPE html>

<html>

<head>

<style>

img:hover {

150px;

height:150px;

}

</style>

</head>

<body>

<p>

</p>

</body>

</html>

6.4 演示：focus

<!DOCTYPE html>

<html>

<head>

<style>

#t1:focus {

background-color:green;

}

</style>

</head>

<body>

<p>姓名：

</p>

</body>

</html>

四、CSS声明

1. border

l border属性：用来设置元素的边框

l 四边设置：

-border:width值 style值 color值

l 单边设置：

-border-left:width值 style值 color值

-border-right: width值 style值 color值

-border-top: width值 style值 color值

-border-bottom: width值 style值 color值

l 样式单位：

-%：百分比

-in：英寸

-cm：厘米

-mm：毫米

-pt：磅(1pt等于1/72英寸)

-px：像素(计算机屏幕上的一个点)

-em：1em等于当前的字体尺寸，2em等于当前字体尺寸的2倍

l 颜色表示方式

-十六进制：如#ff000，如果有两位一样可以只写一位数，如#FFAA66可以写成#FA6

-rgb(x,x,x)：RGB值，如rgb(255,0,0)

-rgb(x%,x%,x%)：RGB百分比值，每个值是255*x%得到rgb(x,x,x)值

-颜色英文单词：如red

l overflow：当内容溢出元素框时如何处理

-visible：默认值，元素的高度会自适应，只有给元素固定了高度才可能造成溢出

-hidden：隐藏

-scroll：滚动条，无论是否溢出都加滚动条

-auto：自适应，只有溢出才加滚动条

1.1 演示：四边设置

<!DOCTYPE html>

<html>

<head>

<style>

p {

border:1px solid red;

}

</style>

</head>

<body>

<p>四边设置边框</p>

</body>

</html>

1.2 演示：单边设置

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

border-left:15px solid red;

border-bottom:2px dashed blue;

}

</style>

</head>

<body>

<h1>单边设置边框</h1>

</body>

</html>

1.3 演示：溢出处理overflow

<!DOCTYPE html>

<html>

<head>

<style>

p {

border:1px solid red;

300px;

height:60px;

overflow:auto;

}

</style>

</head>

<body>

<p>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现

HTML（标准通用标记语言的一个应用）或XML（标准通用标记

语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态

地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行

格式化。

</p>

</body>

</html>

2. box

框模型（Box Model）定义了元素框处理元素内容、内边距、边框和外边距的方式。

width和height指内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

补充：对称设置外边距的特殊原则：当左右的值设置auto时，元素会水平居中。

2.1 演示：box model

<!DOCTYPE html>

<html>

<head>

<style>

#box{

70px;

margin:10px;

padding:5px;

}

</style>

</head>

<body>

<p id="box">box model</p>

</body>

</html>

打开浏览器，按F12调出调试界面，可以看到box model相关信息

2.2 演示：box边距设置

<!DOCTYPE html>

<html>

<head>

<style>

div {

border:1px solid red;

100px;

height:100px;

}

/*1.四个边设置相同的边距*/

#d1 {

padding:20px;

margin:40px;

}

/*2.四个边设置不同的边距*/

#d2 {

/*顺序是：上右下左*/

padding:10px 20px 30px 40px;

margin:10px 20px 30px 40px;

}

/*3单个边设置边距*/

#d3 {

padding-left:20px;

margin-bottom:30px;

}

/*4.对称设置边距*/

#d4 {

/*顺序：上下左右*/

padding:20px 40px;

margin:20px 40px;

}

/*5.对称设置外边距的特殊原则：

当左右的值设置auto时，元素会水平居中*/

#d5 {

margin:10px auto;

}

</style>

</head>

<body>

<h1>演示边距设置的5种方法</h1>

</body>

</html>

3. 背景

3.1 背景色

background-color属性用于为元素设置背景色，该属性接收任何合法的颜色值。

3.1.1 演示：背景色

<!DOCTYPE html>

<html>

<head>

<style>

h1{

border:5px solid red;

200px;

height:50px;

}

h1,#btn {

background-color:green;

}

</style>

</head>

<body>

<h1>演示背景色</h1>

<p>

</p>

</body>

</html>

3.2 背景图片

l background-image属性用于设置背景图片

-默认值是none，表示背景上没有放置任何图片

-如果需要设置一个背景图片，需要用起始字母url附带一个图像的URL值

-可以是相对路径或绝对路径的URL

l 默认情况下，背景图片在水平和垂直方向上重复出现，创建一种称为“墙纸”的效果

l background-repeat属性可以控制背景图片的平铺效果，取值如下：

-repeat：在垂直方向和水平方向重复，为重复值

-repeat-x：仅在水平方向重复

-repeat-y：仅在垂直方向重复

-no-repeat：仅显示一次

l background-position属性用于改变背景图片在元素中的位置，取值如下：

值	说明
x% y%	第一个值是水平位置，第二个值是垂直位置，表示沿着x轴(水平)和y轴(垂直)的百分比，左上角是0% 0%，右下角是100% 100%
x y	第一个值是水平位置，第二个值是垂直位置，表示沿着x轴(水平)和y轴(垂直)的绝对长度，左上角是0 0
left	在页面或者包含元素的左边显示
center	在页面或者包含元素的中间显示
right	在页面或者包含元素的右边显示
top	在页面或者包含元素的顶部显示
Bottom	在页面或者包含元素的底部显示

l 默认情况下，背景图像会随着页面的滚动而移动

l background-attachment属性来改变此特征

-默认值是scroll：默认情况下，背景随着文档滚动

-fixed：背景图像固定，并不会随着页面的其余部分滚动，常用于实现称之为水印的图像。

3.2.1 演示：背景图片设置

<!DOCTYPE html>

<html>

<head>

<style>

div {

border:1px solid red;

500px;

height:500px;

background-image:url('../img/airplane.png');

background-repeat:no-repeat;

background-position:top;

}

</style>

</head>

<body>

</body>

</html>

3.2.2 演示：背景图片滚动

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-image:url('../img/background.png');

background-repeat:repeat-y;

background-position:50% ;

background-attachment:fixed;

}

.airplane{

border:1px solid red;

100px;

height:150px;

margin:auto;

background-image:url('../img/airplane.png');

background-repeat:no-repeat;

background-position:center;

}

</style>

</head>

<body>

</body>

</html>

4. 文本格式化

4.1 控制字体

l 指定字体：font-family:v1,v2;

l 字体大小：font-size:30px;

l 字体加粗：font-weight:normal/bold;

4.1.1 演示：字体设置

<!DOCTYPE html>

<html>

<head>

<style>

p {

font-family:'微软雅黑';

font-size:30px;

font-weight:bold;

text-align:center;

}

</style>

</head>

<body>

</body>

</html>

4.2 控制文本格式

l 文本颜色：color:value;

l 文本排列：text-align:left/right/center;

l 文字修饰：text-decoration:none/underline;

l 行高：line-height:value(1.6em);

l 首行文字缩进：text-indent:value(2em);

补充：当行高=元素高度时，文字垂直居中。

4.2.1 演示：文本格式

<!DOCTYPE html>

<html>

<head>

<style>

#p1 {

color:red;

text-align:left;

line-height:1.6em;

}

#p2 {

color:green;

text-align:center;

text-decoration:underline;

line-height:1.6em;

text-indent:2em;

}

#p3 {

color:bule;

test-align:right;

}

</style>

</head>

<body>

<p id="p1">文本控制，这一行红色、居左(默认即可)、行高1.6字体大小</p>

<p id="p2">这一行绿色、居中、行高1.6字体大小、首行缩进2个字体大小、下划线</p>

<p id="p3">这一行蓝色、居右、其他默认设置</p>

</body>

</html>

4.2.2 演示：文字垂直居中

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

border:1px solid red;

text-align:center;

height:100px;

line-height:100px;

}

</style>

</head>

<body>

<h1>

垂直居中演示

</h1>

</body>

</html>

5. 表格样式

5.1 表格常用样式属性

表格同样可以使用box模型（边框、内边距、宽、高）以及文本格式化属性。

5.2 表格特有样式属性

l 如果设置了单元格的边框，相邻单元格的边框会单独显示，类似于双线边框

l border-collapse属性：合并相邻的边框

-设置是否将表格边框合并为单一边框

-border-collapse：separate/collapse;

补充：边框合并必须写在<table>上

5.3 演示：表格样式

<!DOCTYPE html>

<html>

<head>

<style>

table {

200px;

border:1px solid red;

padding:10px;

margin:30px;

border-collapse:collapse;

}

table td {

border:1px solid red;

}

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

6. 定位

6.1 定位简介

定位：定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。

定位分为：

l 流定位：元素默认排序

l 浮动定位

l 相对定位

l 绝对定位

l 固定定位

6.2 流定位

l 页面中的块级元素框从上到下一个接一个地排列

-每一个块级元素都会出现在一个新行中（比如<p>、<div>）

-元素框之间的垂直距离是由框的垂直外边距计算出来的

l 行内元素将在一行中从左到右水平排列

-不需要从新行开始

-可以使用水平内边距、边框和外边距调整它们的间距

6.3 浮动定位

l 浮动定位是指：

-让元素脱离普通流定位

-将浮动元素放置在父元素的左边或右边

-浮动元素依旧位于父元素之内

l 浮动的框可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动框的边框为止

-经常使用它来实现特殊的定位效果

l 语法：float:left/right;

补充：

浏览器渲染的规则：

1.父元素高度会自适应，以其内部流中的元素的高度为准。

2.浏览器认为文字很重要，无论如何都会将文字显示完整。

浮动定位：

作用：让元素左右排列

分类：左浮动、右浮动

浮动步骤：

-浮动的目标离队

-目标的弟弟跟上

-目标到达指定位置

规则：目标脱离流

右浮动：可以让元素按照倒序左右排列

左浮动：可以让元素按照正序左右排列

6.3.1 演示：右浮动

<!DOCTYPE html>

<html>

<head>

<style>

#d0,p {

border:1px solid black;

}

#d0 {

500px;

}

#d1 {

background-color:red;

}

#d2 {

background-color:green;

}

#d3 {

background-color:blue;

}

#d1,#d2,#d3 {

100px;

height:100px;

margin:10px;

float:right;

}

</style>

</head>

<body>

</div>

<p>向右浮动红绿蓝三个块元素</p>

</body>

</html>

6.3.2 演示：左浮动

<!DOCTYPE html>

<html>

<head>

<style>

#d0,p {

border:1px solid black;

}

#d0 {

500px;

}

#d1 {

background-color:red;

}

#d2 {

background-color:green;

}

#d3 {

background-color:blue;

}

#d1,#d2,#d3{

100px;

height:100px;

margin:10px;

}

#d1,#d2 ,#d3{

float:left;

}

</style>

</head>

<body>

</div>

<p>向左浮动红绿蓝三个块元素</p>

</body>

</html>

6.3.3 消除浮动定位影响

clear属性用于清除浮动所带来的影响，定义了元素哪边上不允许出现浮动元素。在哪个元素上加clear属性，该元素就不受影响，它会出现在所有浮动元素的下方。

l 语法：clear:none/left/right/both;

补充：消除浮动两种方法

1.父元素边框不需要显示

在受影响的元素上加clear

2.父元素边框要显示

a.在父元素内加空块

b.对此空块clear

c.空块会出现在浮动元素下方，因为空块还在，所以父元素高度不变

6.3.4 演示：消除浮动

<!DOCTYPE html>

<html>

<head>

<style>

#d0,p {

border:1px solid black;

}

#d0 {

500px;

}

#d1 {

background-color:red;

}

#d2 {

background-color:green;

}

#d3 {

background-color:blue;

}

#d1,#d2,#d3{

100px;

height:100px;

margin:10px;

float:left;

}

/*方法一：将下面受影响的元素clear*/

p {

clear:left;

}

/*方法二：父元素添加空块，将空块clear*/

#d4 {

clear:left;

}

</style>

</head>

<body>

</div>

<p>向左浮动红绿蓝三个块元素</p>

</body>

</html>

6.3.5 演示：照片墙

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color:#066;

}

ol {

/*border:1px solid #F00;*/

790px;

margin:20px auto;

/*去掉列表左侧的编号*/

list-style-type:none;

/*列表左侧自带内边距,将其清除*/

padding-left: 0;

}

li {

border:1px solid #ccc;

padding:10px;

margin:10px;

float:left;

background-color:#FFF;

}

p {

text-align:center;

font-family:"微软雅黑","文泉驿正黑","黑体";

font-weight:bold;

}

</style>

</head>

<body>

<div>

<ol>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ol>

</div>

</body>

</html>

6.4 相对定位

l 元素原本所占的空间不释放，不脱离流

l 元素框会相对于它原来的位置偏移某个距离

-设置垂直或水平位置，让元素相对于它的起点进行移动

l 设置元素为相对定位

-step1：首先需要设置position属性的值为relative

-step2：然后使用left属性或者right属性设置水平方向的偏移量

-也可以使用top属性或者bottom属性设置垂直方向的偏移量

6.4.1 演示：相对定位

要求：上面案例的照片墙添加需求，鼠标放到照片上，照片向右上角移动10px。

li {

/*相对定位*/

position:relative;

}

li:hover { /*设置偏移量*/

top:-10px;

left:10px;

}

6.5 绝对定位

l 将元素的内容从当前定位中移除，释放空间

l 并使用偏移属性来固定该元素的位置

-相对于最近的已定位祖先元素

-如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块，比如body元素

l 设置元素为绝对定位

-step1：首先需要设置position属性的值为absolute

-step2：然后使用left属性或者right属性设置元素的水平位置

-也可以使用top属性或者bottom属性设置元素的垂直位置

6.5.1 演示：绝对定位

<!DOCTYPE html>

<html>

<head>

<style>

div {

border:1px solid red;

318px;

margin:10px auto;

/*此处加position,只是为了方便子元素

以它为目标进行绝对定位.此div的位置

不需要变化,也不需要释放,所以采用相对

定位比较合适,偏移量却不需要设置.*/

position: relative;

}

p {

border:1px solid #0F0;

text-align:center;

/*设置绝对定位偏移*/

position:absolute;

bottom:200px;

318px;

background-color:#ccc;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

6.6 固定定位

l 将元素的内容固定在页面的某个位置

-元素从普通流中完全溢出，不占用页面空间

-当用户向下滚动页面时元素框并不随着移动

l 设置固定定位

-step1：首先需要设置position属性值为fixed

-step2：通过left、top、right以及bottom这些偏移属性来定义元素位置(直接定义元素位置，而不是偏移)

6.6.1 演示：固定定位

<!DOCTYPE html>

<html>

<head>

<style>

div {

border:1px solid #f00;

height:2000px;

}

a {

background-color:#ccc;

/*去掉下划线*/

text-decoration:none;

/*固定定位，靠右10px，靠下30px*/

position:fixed;

right:10px;

bottom:30px;

}

</style>

</head>

<body>

<div>

<p>演示:固定定位，将"顶部"固定在页面右下角。</p>

</div>

</body>

</html>

6.7 定位属性

属性	说明
Position	规定元素的定位类型，可取值为： Static/relative/absolute/fixed
偏移属性	Top/bottom/left/right属性，用于定义元素框的偏移位置
z-index	设置元素的堆叠顺序
Float/clear	浮动定位属性
补充：使用position属性和偏移属性实现流定位、相对定位、绝对定位和固定定位，使用float属性实现浮动定位，其他属性为辅助属性。

6.8 堆叠顺序

一旦修改了元素的定位方式，则元素可能会发生堆叠，可以使用z-index属性来控制元素框出现的重叠顺序。

l z-index属性：

-值为数值：数值越大表示堆叠顺序更高，即离用户更近

-拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，即元素的显示会接近页面表面

-可以设置为负值，表示离用户更远

6.8.1 演示：堆叠顺序

要求：鼠标悬停的图片显示在最前面

<!DOCTYPE html>

<html>

<head>

<style>

div {

800px;

height:600px;

background-color:#066;

margin:20px auto;

position:relative;

}

#i1,#i2,#i3 {

position:absolute;

}

#i1 {

left:200px;

top:150px;

}

#i2 {

left:300px;

top:100px;

}

#i3 {

left:100px;

top:50px;

}

img:hover {

z-index:999;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

7. 列表样式

7.1 list-style-type

l list-style-type属性用于控制列表中列表项标识的样式

-无序列表：出现在各列表项旁边的圆点

-有序列表：可能是字母、数字或另外某种技术体系中的一个符号

无序列表取值<ul>	有序列表取值<ol>
none：无标记	none：无标记
disc：实心圆、为默认值	decimal：数字(如1,2,3)，为默认值
circle：空心圆	lower-roman：小写罗马数字(如i，ii，iii)
square：实心方块	upper-roman：大写罗马数字（如I，II，III）

7.2 list-style-image

list-style-image属性使用图像来替换列表项的标记，取值为：url()，指定图像作为有序或无序列表项的标志。

7.3 演示：列表样式

<!DOCTYPE html>

<html>

<head>

<style>

ul {

list-style-type:circle;

}

ol {

list-style-type:upper-roman;

}

.img {

list-style-image:url(../images/add.png);

}

</style>

</head>

<body>

<ul>

</ul>

<ol>

<li>Python</li>

<li>Shell</li>

</ol>

</body>

</html>

8. 显示方式

8.1 默认显示方式

元素默认的显示方式：

l 块元素：从上至下，可以设置宽高，如<h1>、<p>、<div>等

l 行内元素：从左至右，不能设置宽高，如<span>、<a>等

l 行内块：从左至右，可以设置宽高，如<input>、<img>等

补充：除了默认的显示效果外，可以使用display属性来修改元素框的显示方式，即改变生成框的类型。

元素默认显示方式归纳表
显示方式	特点	包含元素
块	有宽高，上下排列	h、p、ol、ul、li、div、table、form
行内	无宽高，左右排列	span(i、em、b、strong、u、del)、a、label
行内块	有宽高、左右排列	Img、input、select、textarea

8.2 改变显示方式

可以使用display属性改变显示方式，取值如下：

l none：不显示该元素，释放其占用位置

l block：将元素显示方式设置为块，如可以将行内元素<a>转换为块元素

l inline：将元素显示方式设置为行内，如可以将块元素<p>转换为行内元素

l inline-block：将元素显示方式设置为行内块，如可以将行内元素<span>转换为行内块元素

8.3 演示：改变显示方式

<!DOCTYPE html>

<html>

<head>

<style>

p {

display: inline;

}

span {

display: block;

}

img {

display: block;

}

img:hover {

display:none;

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

<div>

</div>

</body>

</html>

9. 鼠标形状

9.1 改变属性形状

l 默认情况下，光标会根据用户的操作发生改变

-当鼠标悬停在一个连接上时，光标将从指针形状变为手状形状

-当鼠标悬停在文本区域时，会显示I 形状

-当鼠标悬停在一个按钮上时，光标会显示为箭头

l 可以使用cursor属性指定显示给用户的鼠标光标类型（形状）

-可以为用户提供一种可视化的暗示，提示可以进行的操作

9.2 cursor属性

l cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

l 可取值：

-default

-pointer

-crosshair

-text

-wait

-help等

9.3 演示：改变鼠标形状

<!DOCTYPE html>

<html>

<head>

<style>

#a1:hover {

cursor:default;

}

#a2:hover {

cursor:pointer;

}

#a3:hover {

cursor:crosshair;

}

#a4:hover {

cursor:text;

}

#a5:hover {

cursor:wait;

}

#a6:hover {

cursor:help;

}

</style>

</head>

<body>

<a href="#" id="a1">default</a>

<a href="#" id="a2">pointer</a>

<a href="#" id="a3">crosshair</a>

</body>

</html>

查看全文

相关阅读:
记录相关操作
 mysql数据类型
 完整性约束
 表相关操作
 MySQL存储引擎
 库相关操作
 linux学习笔记2---命令cd
linux学习笔记命令篇1---命令ls
linux常用命令系列
 redis34--string 操作

原文地址：https://www.cnblogs.com/jmwm/p/7379654.html