CSS自学笔记（8）:CSS拓展（一）

时间 2019-12-10

标签 css 自学笔记拓展栏目 CSS 繁體版

原文原文链接

CSS元素对齐

可使用margin属性类进行元素的水平对齐css

水平对齐块元素时，能够将块元素的margin属性定义为"auto"，这里须要注意的是，应该要声明!DOCTYPE，不然在IE8以及如下版本的浏览器中是无效的。html

div{

width:70%;
background-color:#F90;
}margin-left:auto; margin-right:auto;

这里是将div元素的左右边距都定义成了auto，平均分配可用外边距，结果就是将div元素居中显示。浏览器

咱们也能够为左右外边距定义不一样的值(长度值、百分比等)，能够在水平方向调整元素的位置。ssh

使用position属性来进行左和右的对齐布局

这里使用绝对定位来对齐元素网站

div{

right:0px;
width:300px;
background-color:#F90;
}position:absolute;

咱们也可使用float属性进行左和右的对齐spa

.right
{

width:300px;
background-color:#F90;
}float:right;

注：当进行元素对齐时，可能会由于浏览器的关系致使显示的BUG，在IE8以及如下版本的浏览器中使用元素对齐时，应该要声明!DOCTYPE设计

CSS元素尺寸

咱们能够经过定义CSS的尺寸属性来控制元素的高宽。同时也能够控制元素之间的距离3d

CSS 尺寸属性

属性	描述
height	设置元素的高度。
line-height	设置行高。
max-height	设置元素的最大高度。
max-width	设置元素的最大宽度。
min-height	设置元素的最小高度。
min-width	设置元素的最小宽度。
width	设置元素的宽度。

img.normal 
{
height: auto
}

img.big 
{
height: 160px
}

img.small 
{
height: 30px
}

这里咱们也能够用长度值/百分比来定义尺寸属性。指针

同时也能够用尺寸属性空值行间距

p.small {line-height: 80%}
p.big {line-height: 200%}

CSS元素分类

咱们能够经过CSS分类属性控制元素的显示方式以及显示位置。

CSS 分类属性 (Classification)

属性	描述
clear	设置一个元素的侧面是否容许其余的浮动元素。
cursor	规定当指向某元素之上时显示的指针类型。
display	设置是否及如何显示元素。
float	定义元素在哪一个方向浮动。
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility	设置元素是否可见或不可见。

利用CSS的分类属性，咱们能够定义不少元素的类型，显示方式，显示位置等。

咱们能够指定光标的类型

在这里我们可以改变光标的状态！！

例如，实现一个简单的页面布局

 1 <html>
 2 <head>
 3 <meta charset="utf-8" />
 4 <style type="text/css">
 5 div.container {
 6     width:100%;
 7     margin:0px;
 8     border:1px solid;
 9     line-height:150%;
10 }
11 div.top, div.bottom {
12     padding:0.5em;
13     color:white;
14     background-color:gray;
15     clear:left;
16 }
17 h1.top {
18     padding:0;
19     margin:0;
20 }
21 div.left {
22     float:left;
23     width:160px;
24     margin:0;
25     padding:1em;
26 }
27 div.content {
28     margin-left:190px;
29     border-left:1px solid gray;
30     padding:1em;
31 }
32 </style>
33 </head>
34 <body>
35 <div class="container">
36     <div class="top">
37         <h1 class="top">页眉部分</h1>
38     </div>
39     <div class="left">
40         <p>正文左侧部分，能够定义菜单</p>
41     </div>
42     <div class="content">
43         <h2>正文部分</h2>
44         <p>正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分</p>
45         <p>正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分正文部分</p>
46     </div>
47     <div class="bottom">页脚部分</div>
48 </div>
49 </body>
50 </html>

CSS 导航条

一个网站额导航栏是很是重要的，一个简单易用的导航栏那就更重要了。经过CSS，能够将你的导航栏设计的更漂亮。

网站的导航栏就是能跳转到其它地方的列表，因此它是以html为基础的列表，能够经过<ul>和<li>元素来实现多样化的导航栏。

ul {
	list-style-type:none;
	margin:0;
	padding:0;
}
a:link, a:visited {
	display:block;
	font-weight:bold;
	color:#FFFFFF;
	background-color:#085;
	width:120px;
	text-align:center;
	padding:4px;
	text-decoration:none;
	text-transform:uppercase;
}
a:hover, a:active {
	background-color:#DDD;
}

定义以上的CSS属性，能够实现一个很简单的垂直的导航栏(其实就是带有超连接的列表)。

一样也能够实现一个水平方向的导航栏