css 3
css3
一.浮动的特性
浮动之后,所有标签都可以设置宽高
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
float: left;
height: 300px;
width: 300px;
}
</style>
</head>
<body>
<span>
Alex
</span>
</body>
二.让浮动的盒子居中
1.标准文档流下
(1)让内容居中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
width: 100px;
background-color: #f22;
/*水平居中*/
text-align: center;
/*垂直居中,行高等于content的高*/
line-height: 100px;
}
</style>
</head>
<body>
<div class="father">
aaa
</div>
(2)让盒子居中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
height: 60px;
width: 100px;
background-color: #f22;
padding-top: 40px;
}
.child{
height: 20px;
width: 20px;
background-color: #2c99ff;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
2.浮动的情况下
(1)让内容居中(与标准文档流时做法相同)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
float: left;
height: 100px;
width: 100px;
background-color: #f22;
line-height: 100px;
text-align: center;
}
</style>
</head>
<body>
<div class="father">
aaa
</div>
</body>
(2)让盒子居中(给浮动的盒子加一个父盒子,设置宽度跟浮动的盒子宽度相同,并且overflow:hidden;
水平居中用margin: 0 auto;垂直方向居中要调整最外侧盒子的padding)
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
height: 60px;
width: 100px;
background-color: #f22;
padding-top: 40px;
}
.child{
float: left;
height: 20px;
width: 20px;
background-color: #2c99ff;
/*margin: auto auto;*/
margin-right: auto;
margin-left: auto;
}
.box{
height: 20px;
width: 20px;
overflow:hidden;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="father">
<div class="box">
<div class="child"></div>
</div>
</div>
(3)css有三种方式让盒子脱标
浮动
绝对定位
相对定位
三.文本属性和字体属性
文本属性
文本对齐(text-align)
text-align属性规定元素中的文本的水平对齐方式
属性值:center,left,right,justify(两端对齐)
设置水平对齐方式的前提是要让文本在块或行内快中,justifity只对英文起作用
颜色属性(color)
color的属性值可以有以下三种情况
纯英文颜色(red)
三原色(rgb(0-255,0-255,0-255))
透明度:
rgba(x,x,x,x)前三个元素是三原色的三个元素,最后一个元素调整透明度
十六进制(#0-f 0-f 0-f 0-f 0-f 0-f))
如果1 2 位3 4位5 6位数字相同,可以简写,如#112233==>#123
文本首行缩进(text-indent)
text-indent的属性值可以以px为单位,也可以以em为单位(更好)
文本属性(text-decoration)
属性值:none,underline,overline,line-through,inherit(继承父元素的text-decoration属性的值)
行高(line-heigh)
就是一行文本所占的高度
单行文本垂直居中： line-height = height
多行文本居中：
第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px
第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
字体属性
字体大小(font-size)
字体属性的属性值除了可以是多少px之外,还可以是inherit,表示继承父元素的字体大小值
字体粗细(font-weight)
属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细) | 100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值）
字体系列(font-family)
属性值是各种字体,如 "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。
四.background
background-color属性表示背景颜色
background-image属性表示设置背景图片(默认水平方向和竖直方向都是平铺)
background-image: url("链接地址");
background-repeat属性表示设置该元素的平铺方式
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
background-position属性设置
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
如果您仅规定了一个关键词，那么第二个值将是"center"。
默认值：0 0；
这两个值必须挨在一起。
background-position-x(左右移动)单位是px
background-position-y(上下移动)
如果是正的表示调整在页面中的位置
如果是负的,表示精灵图技术
background-attachment: fixed;
固定背景图
五.定位
默认：position:static; 静态定位
ralative:
如果仅仅设置标准文档流的盒子为相对定位，那么跟普通的盒子没有任何区别
不脱标
参考点：
相对于原来的位置
形影分离
作用：
1.层级提高，做压盖（不建议）
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.aaa{
width: 300px;
height: 200px;
background-color: #ff2233;
position: relative;
top: 100px;
}
.bbb{
width: 300px;
height: 200px;
background-color: #ffb300;
}
</style>
</head>
<body>
<div class="aaa"></div>
<div class="bbb"></div>
absolute
1.脱标：不占位置(脱标之后都可以设置宽高)
2.层级提高
(z-index:数字)调整层级
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.aaa{
width: 300px;
height: 200px;
background-color: #ff2233;
position: absolute;
top: 100px;
}
.bbb{
width: 300px;
height: 200px;
background-color: #ffb300;
}
</style>
</head>
<body>
<div class="aaa"></div>
<div class="bbb"></div>
</body>
子绝父相是为了什么
参考点：
单个盒子
如果以top描述，是以页面的左上角为参考点（跟浏览器的左上角区分）
如果以bottom描述，是以浏览器的左上角为参考点
父子盒子之间
如果父辈盒子设置相对定位。子盒子设置绝对定位，以父辈盒子的0,0为参考点
改变世界,改变自己!
