这篇文章主要介绍CSS高级用法有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
块元素指的是占据全部可用宽度的元素,并且在其前后都会换行。
块元素的例子:<h2>、<p>、<div>
可通过将左和右边距设置为"auto",来对齐块元素。
把左和右外边距设置为auto,指的是均等地分配可用的外边距。结果就是居中的元素:
。center{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.center {
margin: auto;
width: 70%;
background-color: #b0e0e6;
}
</style>
<title>CSS 水平对齐</title>
</head>
<body>
<div class="center">
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
</div>
<p>提示:如果宽度是 100%,则对齐没有效果</p>
<p><b>注释:</b>除非已经声明了 !DOCTYPE,否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。</p>
</body>
</html>
对齐元素的方法之一是使用绝对定位
.right{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
.right {
position: absolute;
right: 0px;
width: 100px;
background-color: #b0e0e6;
}
</style>
<title>使用 position 属性进行左和右对齐</title>
</head>
<body>
<div class="right">
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
<p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p>
<p>.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}</p>
</div><hr>
</body>
</html>
当像这样对齐元素时,对<body>元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同浏览器中出现可见的差异。
body{
margin:0;
padding:0;
}
.container{
position:relative;
width:100%;
}
.right{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
对齐元素的另一种方式是使用float属性:
.right{
float:right;
width:300px;
background-color:#b0e0e6;
}
CSS尺寸(Dimension)属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。
属性 | 描述 |
---|---|
height | 设置元素高度 |
line-height | 设置行高 |
max-height | 设置元素的最大行高 |
max-width | 设置元素的最大宽度 |
min-height | 设置元素的最小高度 |
min-width | 设置元素的最小宽度 |
width | 设置元素的宽度 |
可能的值:
值 | 描述 |
---|---|
auto | 默认,浏览器会自动计算出实际的高度。 |
length | 使用px、cm等单位定义高度。 |
% | 基于包含它的块级对象的百分比高度。 |
inherit | 从父元素继承height属性值。 |
CSS分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处:
相对于其正常位置来定位元素;
使用绝对值来定位元素;
以及元素的可见度。
属性 | 描述 |
---|---|
clear | 设置一个元素的侧面是否允许其他的浮动元素。 |
cursor | 规定当指向某元素之上时显示的指针类型。 |
display | 设置是否及如何显示元素。 |
float | 定义元素在哪个方向浮动。 |
position | 把元素放置到一个静态的、相对的、绝对的或固定的位置中。 |
visibility | 设置元素是否可见 |
CSS display属性
值 | 描述 |
---|---|
none | 此元素不会显示。 |
block | 此元素将显示为块级元素,前后有换行符。 |
inline | 默认。此元素会被显示为内联元素,前后无换行符。 |
inline-block | 行内块元素。 |
list-item | 此元素会作为列表显示。 |
run-in | 此元素会根据上下文作为块级元素或内联元素显示。 |
compact | 该值由于很少用,在CSS2.1中已被删除。 |
marker | 该值由于很少用,在CSS2.1中已被删除。 |
table | 此元素会作为块级表格来显示(类似<table>),表格前后有换行符。 |
inline-table | 此元素会作为内联表格来显示(类似<table>),表格前后无换行符。 |
table-row-group | 此元素会作为一个或多个行的分组来显示(类似<tbody>)。 |
table-header-group | 此元素会作为一个或多个行的分组来显示(类似<thead>)。 |
table-footer-group | 此元素会作为一个或多个行的分组来显示(类似<tfoot>)。 |
table-row | 此元素会作为一个表格行显示(类似<tr>)。 |
table-column-group | 此元素会作为一个或多个列的分组来显示(类似<colgroup>)。 |
table-column | 此元素会作为一个单元格列显示(类似<col>)。 |
table-cell | 此元素会作为一个表格单元格显示(类似<td>和<th>)。 |
table-caption | 此元素会作为一个表格标题显示(类似<caption>)。 |
inherit | 规定从父元素继承display属性的值。 |
注:
inline:默认。此元素会被显示为内联元素,前后无换行符。
block:此元素将显示为块级元素,前后有换行符。
比如在一个项目列表中,每项都是超链接,正常是鼠标移动到文字上才激活超链接,如果你把li设置为块级元素,那么鼠标移动到这个块上也就是这个li的范围就会激活超链接!
none:此元素不会被显示。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS display 属性</title>
<style type="text/css">
p {
display: inline
}
div {
display: none
}
span {
display: block
}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>
<p>而 div 元素不会显示出来!</p>
<div>div 元素的内容不会显示出来!</div>
<span>本例中的样式表把 span 元素设置为块级元素。</span>
<span>两个 span 元素之间产生了一个换行行为。</span>
</body>
</html>
拥有易用的导航条对任何网站都很重要。
通过CSS,可以把乏味的HTML菜单转换成漂亮的导航栏。
导航栏 = 连接列表。
导航栏需要标准的HTML作为基础。
导航栏基本上是一个链接列表,因此使用<ul>和<li>元素是非常合适的。
案例1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>导航栏基本上是一个链接列表</title>
<style>
ul.test {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<ul class="test">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>注释:</b>我们使用在测试链接中使用了 href="#"。在真实的网站中,应该是真实的 URL。</p>
</body>
</html>
案例2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>完整样式的导航栏实例</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a:link,
a:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #bebebe;
width: 100px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,
a:active {
background-color: #cc0000;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
案例3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>完整样式的导航栏实例</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a:link,
a:visited {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #bebebe;
width: 100px;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,
a:active {
background-color: #cc0000;
}
.向左浮动 {
float: left;
}
</style>
</head>
<body>
<ul>
<li class="向左浮动"><a href="#home">Home</a></li>
<li class="向左浮动"><a href="#news">News</a></li>
<li class="向左浮动"><a href="#contact">Contact</a></li>
<li class="向左浮动"><a href="#about">About</a></li>
</ul>
</body>
</html>
从列表中去掉圆点和外边距
ul{
list-style-type:none; /* 取消圆点 */
margin:0; /* 取消外边距 */
padding:0; /* 取消内边距 */
}
垂直导航栏:如果要构建垂直导航栏,只需要定义<a>元素的样式
display:block 把链接显示为块元素,可使整个链接区域可点击(不仅仅是文本)。
a{
display:block;
width:60px;
}
完整样式的导航栏:见上面的案例2
水平导航栏:
有2种创建水平导航栏的方法:使用行内显示和浮动列表项。
li{
display:inline; /* 行内显示 */
}
li{
float:left; /* 向左浮动显示列表项 */
}
a{
display:block; /* 块方式显示导航栏 */
width:60px; /* 宽度固定为60px */
}
两种方法都可以,但若需要链接拥有相同尺寸就只能使用浮动方法。
图片库:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS 图片库</title>
<style>
div.img {
margin: 3px;
border: 1px solid #bebebe;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
margin: 3px;
border: 1px solid #bebebe;
}
div.img a:hover img {
border: 1px solid #333333;
}
div.desc {
text-align: center;
font-weight: normal;
width: 150px;
font-size: 12px;
margin: 10px 5px 10px 5px;
}
</style>
</head>
<body>
<div class="img">
<a target="_blank" href="img/tulip_ballade.jpg" height="">
<img src="img/tulip_ballade_s.jpg" alt="Ballade" width="160" height="160">
</a>
<div class="desc">春意盎然</div>
</div>
<div class="img">
<a target="_blank" href="img/tulip_flaming_club.jpg">
<img src="img/tulip_flaming_club_s.jpg" alt="Ballade" width="160" height="160">
</a>
<div class="desc">繁花似锦</div>
</div>
<div class="img">
<a target="_blank" href="img/tulip_fringed_family.jpg">
<img src="img/tulip_fringed_family_s.jpg" alt="Ballade" width="160" height="160">
</a>
<div class="desc">在此处添加对图像的描述</div>
</div>
<div class="img">
<a target="_blank" href="img/tulip_peach_blossom.jpg">
<img src="img/tulip_peach_blossom_s.jpg" alt="Ballade" width="160" height="160">
</a>
<div class="desc">在此处添加对图像的描述</div>
</div>
</body>
</html>
以上是“CSS高级用法有哪些”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://my.oschina.net/fz17/blog/4808664