display属性
作用：
规定元素以何种方式显示
说明：
常用于行内、块级、行内块三者转换
常用值：
[none]： 此元素是不可见的
[block]： 此元素将显示为块级元素，此元素前后会带有换行符
[inline]： 默认，此元素会被显示为内联元素，元素前后没有换行符
[inline-block]： 此元素将显示为行内块元素，可以设置宽高等属性
visibility属性
作用：
指定一个元素是否是可见的。
说明：
即使 visibility 设置为 hidden 也会占据页面上的空间。请使用 “display” 属性来创建不占据页面空间的不可见元素
常用值：
[visible]： 默认值，元素是可见的
[hidden]： 元素是不可见的
[collapse]： 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局，被行或列占据的空间会留给其他内容使用，如果此值被用在其他的元素上，会呈现为 "hidden"
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之其他属性</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.showdiv {
width: 300px;
height: 300px;
}
#div1 {
background-color: pink;
}
#div2 {
/* 以下两种隐藏元素方式的区别：display在隐藏元素之后，元素不会再占有原来标准流中的空间，visibility则与之相反，还会继续占有 */
/*display: none;*/
visibility: hidden;
background-color: skyblue;
}
#div3 {
background-color: yellowgreen;
}
</style>
</head>
<body>
<div id="div1" class="showdiv"></div>
<div id="div2" class="showdiv"></div>
<div id="div3" class="showdiv"></div>
</body>
</html>
overflow属性
作用：
指定如果内容溢出一个元素的框，会发生什么
说明：
该属性经常与white-space一起使用
常用值：
[visible]： 默认值，内容不会被修剪，会呈现在元素框之外
[hidden]： 内容会被修剪，并且其余内容是不可见的
[scroll]： 内容会被修剪，并且浏览器会显示滚动条以便查看其余的内容
[auto]： 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之其他属性</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.showdiv {
display: inline-block;
vertical-align: top;
width: 300px;
height: 400px;
margin: 100px 20px 0;
text-align: center;
line-height: 30px;
}
#div1 {
background-color: skyblue;
overflow: visible;
}
#div2 {
background-color: pink;
overflow: hidden;
}
#div3 {
background-color: greenyellow;
overflow: scroll;
}
#div4 {
background-color: orangered;
overflow: auto;
}
</style>
</head>
<body>
<div id="div1" class="showdiv">
<span>
长太息以掩涕兮，哀民生之多艰。<br/>
余虽好修姱以鞿羁兮，謇朝谇而夕替。<br/>
既替余以蕙纕兮，又申之以揽茝。<br/>
亦余心之所善兮，虽九死其犹未悔。<br/>
怨灵修之浩荡兮，终不察夫民心。<br/>
众女嫉余之蛾眉兮，谣诼谓余以善淫。<br/>
固时俗之工巧兮，偭规矩而改错。<br/>
背绳墨以追曲兮，竞周容以为度。<br/>
忳郁邑余侘傺兮，吾独穷困乎此时也。<br/>
宁溘死以流亡兮，余不忍为此态也！<br/>
鸷鸟之不群兮，自前世而固然。<br/>
何方圜之能周兮？夫孰异道而相安？<br/>
屈心而抑志兮，忍尤而攘诟。<br/>
伏清白以死直兮，固前圣之所厚。<br/>
悔相道之不察兮，延伫乎吾将反。<br/>
回朕车以复路兮，及行迷之未远。<br/>
步余马于兰皋兮，驰椒丘且焉止息。<br/>
进不入以离尤兮，退将复修吾初服。<br/>
制芰荷以为衣兮，集芙蓉以为裳。<br/>
不吾知其亦已兮，苟余情其信芳。<br/>
高余冠之岌岌兮，长余佩之陆离。<br/>
芳与泽其杂糅兮，唯昭质其犹未亏。<br/>
</span>
</div>
<div id="div2" class="showdiv">
<span>
长太息以掩涕兮，哀民生之多艰。<br/>
余虽好修姱以鞿羁兮，謇朝谇而夕替。<br/>
既替余以蕙纕兮，又申之以揽茝。<br/>
亦余心之所善兮，虽九死其犹未悔。<br/>
怨灵修之浩荡兮，终不察夫民心。<br/>
众女嫉余之蛾眉兮，谣诼谓余以善淫。<br/>
固时俗之工巧兮，偭规矩而改错。<br/>
背绳墨以追曲兮，竞周容以为度。<br/>
忳郁邑余侘傺兮，吾独穷困乎此时也。<br/>
宁溘死以流亡兮，余不忍为此态也！<br/>
鸷鸟之不群兮，自前世而固然。<br/>
何方圜之能周兮？夫孰异道而相安？<br/>
屈心而抑志兮，忍尤而攘诟。<br/>
伏清白以死直兮，固前圣之所厚。<br/>
悔相道之不察兮，延伫乎吾将反。<br/>
回朕车以复路兮，及行迷之未远。<br/>
步余马于兰皋兮，驰椒丘且焉止息。<br/>
进不入以离尤兮，退将复修吾初服。<br/>
制芰荷以为衣兮，集芙蓉以为裳。<br/>
不吾知其亦已兮，苟余情其信芳。<br/>
高余冠之岌岌兮，长余佩之陆离。<br/>
芳与泽其杂糅兮，唯昭质其犹未亏。<br/>
</span>
</div>
<div id="div3" class="showdiv">
<span>
长太息以掩涕兮，哀民生之多艰。<br/>
余虽好修姱以鞿羁兮，謇朝谇而夕替。<br/>
既替余以蕙纕兮，又申之以揽茝。<br/>
亦余心之所善兮，虽九死其犹未悔。<br/>
怨灵修之浩荡兮，终不察夫民心。<br/>
众女嫉余之蛾眉兮，谣诼谓余以善淫。<br/>
固时俗之工巧兮，偭规矩而改错。<br/>
背绳墨以追曲兮，竞周容以为度。<br/>
忳郁邑余侘傺兮，吾独穷困乎此时也。<br/>
宁溘死以流亡兮，余不忍为此态也！<br/>
鸷鸟之不群兮，自前世而固然。<br/>
何方圜之能周兮？夫孰异道而相安？<br/>
</span>
</div>
<div id="div4" class="showdiv">
<span>
长太息以掩涕兮，哀民生之多艰。<br/>
余虽好修姱以鞿羁兮，謇朝谇而夕替。<br/>
既替余以蕙纕兮，又申之以揽茝。<br/>
亦余心之所善兮，虽九死其犹未悔。<br/>
怨灵修之浩荡兮，终不察夫民心。<br/>
众女嫉余之蛾眉兮，谣诼谓余以善淫。<br/>
固时俗之工巧兮，偭规矩而改错。<br/>
背绳墨以追曲兮，竞周容以为度。<br/>
忳郁邑余侘傺兮，吾独穷困乎此时也。<br/>
宁溘死以流亡兮，余不忍为此态也！<br/>
鸷鸟之不群兮，自前世而固然。<br/>
何方圜之能周兮？夫孰异道而相安？<br/>
</span>
</div>
</body>
</html>
cursor属性
作用：
定义鼠标指针放在一个元素边界范围内时所用的光标形状
常用值：
[pointer]： 光标呈现为指示链接的指针 （一只手）
[text]： 此光标指示文本
[move]： 此光标指示某对象可被移动
[wait]： 此光标指示程序正忙 （通常是一只表或沙漏）
[help]： 此光标指示可用的帮助 （通常是一个问号或一个气球）
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之其他属性</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.showdiv {
display: inline-block;
vertical-align: top;
width: 300px;
height: 400px;
margin: 100px 20px 0;
text-align: center;
line-height: 30px;
}
#div1{background-color: skyblue;}
#div2 {background-color: pink;}
#div3 {background-color: greenyellow;}
#div4 {background-color: orangered;}
#div5 {background-color: mediumpurple;}
#div1:hover {
cursor: pointer;
}
#div2:hover {
cursor: text;
}
#div3:hover {
cursor: move;
}
#div4:hover {
cursor: wait;
}
#div5:hover {
cursor: help;
}
</style>
</head>
<body>
<div id="div1" class="showdiv"></div>
<div id="div2" class="showdiv"></div>
<div id="div3" class="showdiv"></div>
<div id="div4" class="showdiv"></div>
<div id="div5" class="showdiv"></div>
</body>
</html>
clear属性
作用：
指定段落的左侧或右侧不允许浮动的元素
说明：
该属性经常与overflow、:before、:alter等配合使用，进行浮动的清除
常用值：
[none]： 默认值，允许浮动元素出现在两侧
[left]： 在左侧不允许浮动元素
[right]： 在右侧不允许浮动元素
[both]： 在左右两侧均不允许浮动元素
详见：
CSS3之浮动及其清除
resize属性
作用：
指定一个元素是否可由用户调整大小
说明：
该属性经常用于对文本域 (textarea) 的大小进行固定，适用于计算其他元素的溢出值是不是visible
常用值：
[none]： 用户无法调整元素的尺寸
[both]： 用户可调整元素的高度和宽度
[horizontal]： 用户可调整元素的宽度
[vertical]： 用户可调整元素的高度
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之其他属性</title>
<style type="text/css">
.demo {
width: 200px;
height: 100px;
margin: 100px 0 0 100px;
border: 3px solid dimgray;
}
#area1 {
resize: both;
}
#area2 {
resize: horizontal;
}
#area3 {
resize: vertical;
}
#area4 {
resize: none;
}
</style>
</head>
<body>
<textarea id="area1" class="demo"></textarea>
<textarea id="area2" class="demo"></textarea>
<textarea id="area3" class="demo"></textarea>
<textarea id="area4" class="demo"></textarea>
</body>
</html>
z-index属性
作用：
指定一个元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于*
较低堆叠顺序的元素的上面*
说明：
该属性只作用于拥有定位属性的元素
常用值：
[auto]： 默认，堆叠顺序与父元素相等
[NUMBER]： 数字，设置元素的堆叠顺序
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之其他属性</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.showdiv {
position: absolute;
width: 300px;
height: 400px;
margin-top: 100px;
}
#div1 {
left: 100px;
background-color: skyblue;
}
#div2 {
left: 300px;
background-color: pink;
}
#div3 {
left: 500px;
z-index: 2;
background-color: greenyellow;
}
#div4 {
left: 700px;
background-color: mediumpurple;
}
div:hover {
z-index: 3;
transition: 120ms;
}
</style>
</head>
<body>
<div id="div1" class="showdiv"></div>
<div id="div2" class="showdiv"></div>
<div id="div3" class="showdiv"></div>
<div id="div4" class="showdiv"></div>
</body>
</html>
user-select属性
作用：
控制文本是否可以被选中
说明：
Safari中不支持该属性值，只能使用none或者text，或者是在html的标签属性中使用
eg：
/* firefox浏览器 / -moz-user-select / safari、chrome浏览器 / -webkit-user-select / IE浏览器* / -ms-user-select
常用值：
[none]： 元素和子元素的文本将无法被选中
[text]： 文本可以被选中
[auto]： 文本将根据浏览器的默认属性进行选择
[all]： 当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之其他属性</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.showdiv {
display: inline-block;
width: 300px;
height: 400px;
margin: 100px 0 0 130px;
background-color: rgba(0, 0, 0, .4);
}
#div1 {
user-select: none;
}
#div2 {
user-select: text;
}
#div3 {
user-select: auto;
}
#div4 {
user-select: all;
}
</style>
</head>
<body>
<div id="div1" class="showdiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, obcaecati, odio! Aliquid aspernatur ex officia sequi
similique sunt. Accusamus accusantium aliquid animi commodi consequuntur cum deserunt dolores dolorum earum eius enim
<span>
exercitationem facere facilis illo impedit itaque maiores necessitatibus nobis obcaecati odio placeat porro praesentium
quae, quam, quas quasi quo ratione repellat repudiandae rerum sapiente vel vitae voluptates.
</span>
</div>
<div id="div2" class="showdiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, obcaecati, odio! Aliquid aspernatur ex officia sequi
similique sunt. Accusamus accusantium aliquid animi commodi consequuntur cum deserunt dolores dolorum earum eius enim
<span>
exercitationem facere facilis illo impedit itaque maiores necessitatibus nobis obcaecati odio placeat porro praesentium
quae, quam, quas quasi quo ratione repellat repudiandae rerum sapiente vel vitae voluptates.
</span>
</div>
<div id="div3" class="showdiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, obcaecati, odio! Aliquid aspernatur ex officia sequi
similique sunt. Accusamus accusantium aliquid animi commodi consequuntur cum deserunt dolores dolorum earum eius enim
<span>
exercitationem facere facilis illo impedit itaque maiores necessitatibus nobis obcaecati odio placeat porro praesentium
quae, quam, quas quasi quo ratione repellat repudiandae rerum sapiente vel vitae voluptates.
</span>
</div>
<div id="div4" class="showdiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, obcaecati, odio! Aliquid aspernatur ex officia sequi
similique sunt. Accusamus accusantium aliquid animi commodi consequuntur cum deserunt dolores dolorum earum eius enim
<span>
exercitationem facere facilis illo impedit itaque maiores necessitatibus nobis obcaecati odio placeat porro praesentium
quae, quam, quas quasi quo ratione repellat repudiandae rerum sapiente vel vitae voluptates.
</span>
</div>
</body>
</html>
white-space属性
作用：
指定元素内的空白怎样处理
说明：
该元素经常与text-overflow属性一起使用
常用值：
[normal]： 默认值，空白会被浏览器忽略
[pre]： 空白会被浏览器保留。其行为方式类似HTML中的 <pre> 标签
[nowrap]： 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之其他属性</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.showdiv {
width: 300px;
margin: 100px 0 0 130px;
background-color: rgba(0, 0, 0, .2);
}
#div1 {
white-space: normal;
}
#div2 {
white-space: nowrap;
}
#div3 {
white-space: pre;
}
</style>
</head>
<body>
<div id="div1" class="showdiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, obcaecati, odio! Aliquid aspernatur ex officia sequi
similique sunt. Accusamus accusantium aliquid animi commodi consequuntur cum deserunt dolores dolorum earum eius enim
<span>
exercitationem facere facilis illo impedit itaque maiores necessitatibus nobis obcaecati odio placeat porro praesentium
quae, quam, quas quasi quo ratione repellat repudiandae rerum sapiente vel vitae voluptates.
</span>
</div>
<div id="div2" class="showdiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, obcaecati, odio! Aliquid aspernatur ex officia sequi
similique sunt. Accusamus accusantium aliquid animi commodi consequuntur cum deserunt dolores dolorum earum eius enim
<span>
exercitationem facere facilis illo impedit itaque maiores necessitatibus nobis obcaecati odio placeat porro praesentium
quae, quam, quas quasi quo ratione repellat repudiandae rerum sapiente vel vitae voluptates.
</span>
</div>
<div id="div3" class="showdiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, obcaecati, odio! Aliquid aspernatur ex officia sequi
similique sunt. Accusamus accusantium aliquid animi commodi consequuntur cum deserunt dolores dolorum earum eius enim
<span>
exercitationem facere facilis illo impedit itaque maiores necessitatibus nobis obcaecati odio placeat porro praesentium
quae, quam, quas quasi quo ratione repellat repudiandae rerum sapiente vel vitae voluptates.
</span>
</div>
</body>
</html>
text-overflow属性
作用：
指定当文本溢出包含它的元素，应该显示什么
说明：
该元素经常与white-space属性一起使用
常用值：
[clip]： 修剪文本
[ellipsis]： 显示省略符号来代表被修剪的文本
多行文字溢出显示省略号方法：
先设置父容器高度设置为指定值 （行高 × 将要显示文本行数）
selector {
overflow: hidden; 溢出隐藏
display: -webkit-box; 以box模式显示文本的父元素
-webkit-line-clamp: 2; 将要显示文本行数（可根据需要更改）
-webkit-box-orient: vertical;
}
代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之其他属性</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.showdiv {
width: 300px;
margin: 100px 0 0 130px;
background-color: rgba(0, 0, 0, .2);
white-space: nowrap;
overflow: hidden;
}
#div1 {
text-overflow: clip;
}
#div2 {
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div id="div1" class="showdiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, obcaecati, odio! Aliquid aspernatur ex officia sequi
similique sunt. Accusamus accusantium aliquid animi commodi consequuntur cum deserunt dolores dolorum earum eius enim
<span>
exercitationem facere facilis illo impedit itaque maiores necessitatibus nobis obcaecati odio placeat porro praesentium
quae, quam, quas quasi quo ratione repellat repudiandae rerum sapiente vel vitae voluptates.
</span>
</div>
<div id="div2" class="showdiv">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, obcaecati, odio! Aliquid aspernatur ex officia sequi
similique sunt. Accusamus accusantium aliquid animi commodi consequuntur cum deserunt dolores dolorum earum eius enim
<span>
exercitationem facere facilis illo impedit itaque maiores necessitatibus nobis obcaecati odio placeat porro praesentium
quae, quam, quas quasi quo ratione repellat repudiandae rerum sapiente vel vitae voluptates.
</span>
</div>
</body>
</html>
vertical-align属性
作用：
设置一个元素的垂直对齐方式
说明：
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
常用值：
[baseline]： 默认值，元素放置在父元素的基线上
[middle]： 把此元素放置在父元素的中部
[text-top]： 把元素的底端与父元素字体的顶端对齐
[text-bottom]： 把元素的底端与父元素字体的底端对齐
[top]： 把元素的顶端与行中最高元素的顶端对齐
[bottom]： 把元素的底端与行中最低的元素的顶端对齐
代码示例1：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之其他属性</title>
<style type="text/css">
#div1 {
width: 400px;
height: 400px;
margin: 200px auto;
background-color: rgba(0, 0, 0, .1);
/* 当父容器大于图像的高度时，要配合行高属性使用才能使图片居中 */
line-height: 400px;
}
img {
/* img标签是行内块元素，行内元素默认基线对齐，若想使其垂直居中，先要将其所在行设置居中 */
vertical-align: middle;
}
</style>
</head>
<body>
<div id="div1">
<img src="img/ironMan-square-small.JPG" alt="">I am Tony Stark!
</div>
</body>
</html>
代码示例2：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS3之其他属性</title>
<style type="text/css">
#div1 {
width: 400px;
margin: 200px auto;
background-color: rgba(0, 0, 0, .1);
}
img {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="div1">
<img src="img/ironMan-square-small.JPG" alt="">I am Tony Stark!
</div>
</body>
</html>
495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
