目录:
一些例子:
float 属性
定义元素在哪个方向浮动,浮动元素会生成一个块 级框,直到该块级框的外边缘碰到包含框或者其他的浮动框为止:
<style>
img
{
float:right;
}
</style>
ps:
图像是右浮动,文本流将环绕在它左边
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
ps:
把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻(图片廊)
clear 属性
指定元素两侧不能出现浮动元素:
<style>
.text_line
{
clear:both;
margin-bottom:2px;
}
</style>
ps:
元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性
一些例子
为图像添加边框和边距并浮动到段落的右侧:
<style>
img
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}
</style>
ps:
图像向右浮动,黑色虚线边界添加到图像,添加了边缘的0px的顶部和右侧margin,15px底部margin,和20px左侧的margin的图像,使得文本远离图片
让标题和图片向右侧浮动:
<style>
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
ps:
div元素是120像素宽,它包含了图像。div元素会向右浮动,Margins被添加到div使得文本远离div。borders和padding被添加到div框架的图片和标题中
让段落的第一个字母浮动到左侧:
<style>
span
{
float:left;
width:1.2em;
font-size:400%;
font-family:algerian,courier;
line-height:80%;
}
</style>
ps:
第一个字嵌入在span元素中,这个span元素的宽度是当前字体大小的1.2倍,这个span元素是当前字体的400%,line-height为80%,文字的字体为"Algerian"
创建一个网页页眉、页脚、左边的内容和主要内容:
<style>
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
}
div.header,div.footer
{
padding:0.5em;
color:white;
background-color:gray;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:160px;
margin:0;
padding:1em;
}
div.content
{
margin-left:190px;
border-left:1px solid gray;
padding:1em;
}
</style>
元素的水平对齐
margin属性
可任意拆分为左,右页边距设置自动指定,结果都是出现居中元素:
<style>
.center
{
margin:auto;
width:70%;
background-color:#b0e0e6;
}
</style>
ps:
如果宽度是 100%,对齐是没有效果的
position 属性
使用绝对定位:
<style>
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
</style>
ps:
绝对定位与文档流无关,所以它们可以覆盖页面上的其它元素
float 属性
<style>
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
</style>
padding属性
css中一个简单的设置垂直居中对齐的方式就是头部顶部使用 padding:
<style>
.center
{
padding: 70px 0;border: 3px solid green;
}
</style>
如果要水平和垂直都居中,可以使用 padding 和 text-align: center:
<style>
.center
{
padding: 70px 0;border: 3px solid green;
text-align: center;
}
</style>
组合选择符
说明了两个选择器直接的关系
后代选取器
匹配所有指定元素的后代元素:
<style>
div p
{
background-color:yellow;
}
</style>
子元素选择器
只能选择作为某元素子元素的元素:
<style>
div>p
{
background-color:yellow;
}
</style>
相邻兄弟选择器
选择紧接在另一元素后的元素,且二者有相同父元素:
<style>
div+p
{
background-color:yellow;
}
</style>
ps:
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器
普通相邻兄弟选择器
选取所有指定元素的相邻兄弟元素:
<style>
div~p
{
background-color:yellow;
}
</style>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>css整理</title>
</head>
<body>
<style>
img {
float: right;
}
</style><!--右浮动-->
<style>
.thumbnail {
float: left;
width: 110px;
height: 90px;
margin: 5px;
}
</style><!--图片廊-->
<style>
.text_line {
clear: both;
margin-bottom: 2px;
}
</style><!--清除浮动-->
<style>
img {
float: right;
border: 1px dotted black;
margin: 0px 0px 15px 20px;
}
</style><!--例子-->
<style>
div {
float: right;
width: 120px;
margin: 0 0 15px 20px;
padding: 15px;
border: 1px solid black;
text-align: center;
}
</style><!--例子-->
<style>
span {
float: left;
width: 1.2em;
font-size: 400%;
font-family: algerian,courier;
line-height: 80%;
}
</style><!--例子-->
<style>
div.container {
width: 100%;
margin: 0px;
border: 1px solid gray;
}
div.header, div.footer {
padding: 0.5em;
color: white;
background-color: gray;
clear: left;
}
h1.header {
padding: 0;
margin: 0;
}
div.left {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
div.content {
margin-left: 190px;
border-left: 1px solid gray;
padding: 1em;
}
</style><!--例子-->
<style>
.center {
margin: auto;
width: 70%;
background-color: #b0e0e6;
}
</style><!--自动指定-->
<style>
.right {
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
}
</style><!--绝对定位-->
<style>
.right {
float: right;
width: 300px;
background-color: #b0e0e6;
}
</style>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
}
</style>
<style>
.center {
padding: 70px 0;
border: 3px solid green;
text-align: center;
}
</style>
<style>
div p {
background-color: yellow;
}
</style><!--后代选取器-->
<style>
div > p {
background-color: yellow;
}
</style><!--子元素选择器-->
<style>
div + p {
background-color: yellow;
}
</style><!--相邻兄弟选择器-->
<style>
div ~ p {
background-color: yellow;
}
</style><!--普通相邻兄弟选择器-->
</body>
</html>