CSS3之其他常用属性
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 sequisimilique 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 praesentiumquae, 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 sequisimilique 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 praesentiumquae, 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 sequisimilique 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 praesentiumquae, 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 sequisimilique 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 praesentiumquae, 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 sequisimilique 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 praesentiumquae, 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 sequisimilique 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 praesentiumquae, 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 sequisimilique 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 praesentiumquae, 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 sequisimilique 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 praesentiumquae, 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 sequisimilique 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 praesentiumquae, 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>
CSS3之其他常用属性相关推荐
- 传智播客html css3笔记,传智播客详解Css3九大常用属性
在Css3的学习和实际操作中,我们经常会接触到一些常用属性,比如字体.文本.列表和背景等.下面,传智播客将对常用的Css3九大属性进行详解. 1.传智播客详解Css3九大常用属性-字体 l Font- ...
- html5中css新增的属性,css3有哪些新增属性？常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
- Html5和Css3的基础标签及常用属性
H5 H5的常用标签及属性: 新增和废弃 新增的结构(布局) 标签:section.artcle.nav.footer.header.hgroup.Aside.figure 新增的其他标签: Vide ...
- css2.0圆角,CSS圆角效果-CSS3常用属性集合
CSS3使用注意项:早期的firefox chrome 等某些游览器中也实现了部分CSS3,所以为了兼容部分,在CSS3中的编写,需要如此: {-moz-border-radius: 4px; -we ...
- 前端常用属性知识点--文档
清除浮动带来的影响--.clearfix .clearfix{ *zoom:1; } .clearfix::after{content: "";display: block;cle ...
- 2021-11-15 入门前端VScode必装的常用插件, HTML+CSS常用属性速记.
Html + Css 学习 一.VSCode常用 //1. VScode常用快捷键 * 新建文件:ctrl + N * 切换自动换行:alt + Z * 复制当前行:ctrl + C:ctrl + V ...
- HTML笔记——④css样式表、选择器、常用属性
HTML笔记--④css样式表.选择器.常用属性 一 CSS 1.1 CSS语法 1.2 CSS样式表 1.2.1 内部样式表 1.2.2 外部样式表 1.2.3 行内样式表 1.3 CSS常用属性 ...
- 从零开始学前端 - 5. CSS常用属性
作者: 她不美却常驻我心 博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享 每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
- css3中的box-sizing属性
盒子宽度.高度计算公式: css元素宽度 = width + padding + border css元素高度 = height + padding + border css3之前,当我们需要呈现一个 ...
最新文章
- 获取后台集合并遍历_java集合类汇总，终于出总结了，再也不用担心混淆了
- 安卓按键精灵_月薪3w的按键精灵大神都是从这个命令开始起步的
- oracle 2018 版本,Oracle 最新版本变化 转帖
- 第五章--加载内核Kernel.bin
- Kafka科普系列 | 轻松理解Kafka中的延时操作
- 1年工作经验8月份大厂面试全记录
- 程序员离职代码交接_程序员离职大半个月，被老板命令回单位讲代码，员工：一次1万...
- linux拷贝到新建文件夹命令行,Linux创建文件touch，复制文件cp，tab补全，链接文件ln命令...
- 要和解？盒马集市已入驻微信小程序
- 如何评价程序员相亲约在肯德基反被拉黑？
- SpringSecurity系列（四） Spring Security 实现权限树形菜单
- Ubuntu：back up whole system
- 页面最上方的搜索和logo叫什么_JS实现京东首页之页面顶部、Logo和搜索框功能...
- 作为管理者，就不要总等着领导给你布置任务了
- js切换图片会闪动_解决js控制元素背景图片切换时的闪屏问题
- 实验室信息管理系统的进化史
- python文件起名字的时候不要用模块的名字，不然会默认导入本地的文件，找不到你要的模块方法，会报错AttributeError: module ‘random‘ has no attribute ‘
- 关于Nginx服务器的一些粗略认识
- PyInstaller 的安装和使用（python生成exe文件）_联网安装
- 1 PDFLib9的安装 及 demo
热门文章
- 牛客网做题笔记--洗牌问题
- hdu 1568 Fibonacci(fibonacci通项＋对数性质)
- cocos2d-x传智播客_Hanselminutes播客167-与Jeremy Miller进行的配置约定
- python使用tkinter库，封装操作excel为GUI程序
- Amazing grace 奇异恩典
- 【蓝桥杯】三羊献瑞-算法题JAVA解
- 从软件管理后台看其匠心所在
- 使用cephadm安装ceph octopus
- datagridview取消默认选中_DataGridView点击空白处和失去焦点后取消选择和关闭默认选择第一行C#Winform...
- 18_NumPy数组ndarray中提取，删除满足条件的元素，行和列