（一）水平对齐
1.使用margin属性水平对齐
可通过将左和右外边距设置为 "auto"，来对齐块元素。
除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中是无效的。
我要评论.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
如果宽度是 100%，则对齐没有效果。
2.使用 position 属性进行左和右对齐
对齐元素的方法之一是使用绝对定位
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
3.使用float属性来进行左和右对齐
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
（二）尺寸
尺寸属性：
height 设置元素高度
line-height 设置行高
max-height 设置元素最大高度
max-width 设置元素最大宽度
min-height 设置元素最小高度
min-width 设置元素最下宽度
width 设置元素宽度
（三）分类
分类属性用来控制如何显示元素
clear 设置元素侧面是否允许其他浮动元素
cursor 设置显示的光标类型
crosshair 十字线
pointer 一只手
move 四个方向键
e-resize 向东移动
n-resize 向北移动
text 文本输入光标
wait 加载
help 问号
display 规定元素应该生成的框的类型
none 该元素不会被显示
block 显示为块级元素
inline 显示为内联元素，前后没有换行符
float 定义元素那个方向浮动
position 把元素放置到静态的，相对的，绝对的或者固定的位置中
visibility 设置元素是否可见
默认可见，hidden隐藏
（四）导航条
导航栏 = 链接列表
导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素是非常合适的：
ul
{
list-style-type:none;
margin:0;
padding:0;
} 去掉圆点和外边距
list-style-type:none - 删除圆点。导航栏不需要列表项标记。
把外边距和内边距设置为 0 可以去除浏览器的默认设定。
a
{
display:block;
width:60px;
} 构建垂直导航栏
display:block - 把链接显示为块元素可使整个链接区域可点击，同时也允许我们规定宽度。
width:60px - 块元素默认占用全部可用宽度。我们需要规定 60 像素的宽度。
li
{
display:inline;
}构建水平导航栏的方法之一是将 <li> 元素规定为行内元素
li
{
float:left;
}
a
{
display:block;
width:60px;
} 对列表项进行浮动
float:left - 使用 float 来把块元素滑向彼此。
display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。
width:60px - 由于块元素默认占用全部可用宽度，链接无法滑动至彼此相邻。我们需要规定 60 像素的宽度。
<ul> <li><a href="default.asp">Home</a></li> <li><a href="news.asp">News</a></li> <li><a href="contact.asp">Contact</a></li> <li><a href="about.asp">About</a></li> </ul>
（五）图片透明度
opacity 来定义透明度
值的设置从0.0到1.0，值越小，越透明
hover效果
img
{
opacity:0.4;
}
img:hover
{
opacity:1.0;
}
透明框中的文本
<!DOCTYPE html>
<html>
<head>
<style>
div.background
{
width: 400px;
height: 266px;
background: url('/i/tulip_peach_blossom_w.jpg') no-repeat;
border: 1px solid black;
}
div.transbox
{
width: 338px;
height: 204px;
margin:30px;
background-color: #ffffff;
border: 1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox p
{
margin: 30px 40px;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>
</body>
</html>
首先，我们创建一个 div 元素 (class="background")，它有固定的高度和宽度、背景图像，以及边框。然后我们在第一个 div 内创建稍小的 div (class="transbox")。"transbox" div 有固定的宽度、背景色和边框 - 并且它是透明的。在透明 div 内部，我们在 p 元素中加入了一些文本。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论