day04 css 浮动 常用的css属性 定位
一.浮动的特性:
1.浮动的元素脱标,(标签就不分什么行内,块什么的了,任何标签都具有浮动的特征: 可以任意设置宽高)
2.浮动的元素互相贴靠
3.浮动的元素有字围的效果,(只有一个盒子浮动,没浮动的盒子里如果是文字,会环绕在浮动盒子的周围,文字不会被覆盖)
4.收缩的效果,(因为块级标签在一行内显示了,看起来像是变成了行内块,盒子的宽度不是独占一行,而是根据内容的宽度来填充)
二.margin
1.margin的塌陷问题:
标准文档流下, 垂直方向会出现塌陷问题
浮动了, 垂直方向就不会出现塌陷问题
2.margin的盒子居中问题, 水平居中:
margin 0 auto; 在标准文档流下,盒子水平居中
margin 0 auto: 如果浮动了, 就不起作用(如何解决: 把浮动盒子放在新加入的隐藏的父盒子(宽度=子盒子的宽,并且overflow:hidden)里面, 让父盒子居中)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box1{
width: 400px;
height: 400px;
}
.main{
width: 100px;
overflow: hidden;
margin: 0 auto; #让父盒子居中,
}
.box2{
width: 100px;
height: 100px;
margin: 0 auto; #子盒子margin这句就没作用了, 可以删掉
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="main">
<div class="box2"></div>
</div>
</div>
</body>
</html>
三.css中有三种方式让盒子脱标: 浮动, 绝对定位, 固定定位
四.常用css的属性
1.文本属性: text-xxx属性可继承
文本对齐: text-align: right; (left, center, justify: 两端对齐,只适用于英文)
文本水平居中: text-align: center;
首行缩进: text-indent: 2em;
文本修饰: text-decoration: none; #常用做清除a标签默认的下划线(dicoration: 装饰)
: text-decoration: underline; #加下划线
: text-decoration: overline; #加上划线
: text-decoration: line-through; #加删除线
: text-decoration: inherit; #继承父标签的此属性(默认text-xxx就是继承父标签的,可以省略)
2.文本属性: line-xxx属性可继承
行高: line-height: 40px;
文本垂直居中:
单行文本垂直居中: ling-height=height的值
多行文本垂直居中: 算出多行文本的高度, 用padding-top: 顶下来(注意要保持盒模型不变,加padding就要减height)
3.字体属性: font-xxx属性可继承
字体大小:
font-size: 16px;
字体粗细:
font-weight: 400; (默认400没有px, 范围100~900: 400=normal,hold=700)
font-weight: border;
bold; #700
normal; #400
lighter;
inherit;
字体系列:
font-family: "华文行楷", "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
多个字体用逗号分隔, 表示从前往后在你的电脑上找这些字体, 如果都没有, 默认是宋体展示
sans-serif: 无衬线 serif: 有衬线
字体的综合设置
font: 14px/1.5 "华文行楷" #(字体大小/行高 字体)
font: 14px/21px "华文行楷" #这两一样的效果
4.背景设置: (背景: background)
1.背景色设置有三种方式:
方式一:单词
方式二:rgb,rgba表示法
#red green blue(0~255每种颜色都有256个)
#透明度 #0,0,0黑色, 255,255,255白色 #.5表示透明度
方式三:十六进制表示法
#就是rgb的十六进制表示
#两两分组, 如果三个小组里的都一样, 那么可以缩写
2.背景图片设置:
background-image: url(./bajie.jpg); #默认背景图填不满盒子时: 为平铺
background-repeat: no-repeat; #不重复, 填不满那不管; repeat: 这个是默认的; repeat-x: 只横向平铺; repeat-y: 只纵向平铺
background-position: 0 0; #定位,定的是背景图的位置: 两个值, x轴和y轴; 默认0,0为原坐标轴
background-position-x:0;
background-position-y:0;
background-position: center top; #让一个超级大图的中间部分在页面中显示
3.精灵图技术
用background-position做个截图:
做图片的性能优化, 把很多的小图片放在一张大图上, 用css的截图来切你需要的小图(因为img的src每次都发一次请求, 浪费资源)
1.先确定图片大小: 父盒子的宽高来搞
2.x,y的起始位置: 用background-position:负数; 来搞
4.背景图固定, 不随滚轮滚动
background-attachment: fixed; #(附件: 固定)
5.背景综合属性: 可使代码变少, 简化代码
background: url() no-repeat 0 -162px;
五.定位(有4种)
1. position: static; 静态定位; 默认是这个
2. position: relative; 相对定位
参考点:
相对于它自己原来的位置, 但是它的壳还在原来的地方占位置(形影分离)
特点:
1.如果仅仅设置标准文档流的盒子为相对定位, 那么跟普通的盒子没有任何区别
2.没脱标
作用:
1.可以做压盖, 层级提高了(但是不建议这样搞,因为留下的占地方的位置)
2.布局方案: 做父相子绝的参考
3.微调元素
压盖权重:
1.定位的大于标准的
2.如果两个相邻的盒子都有相对定位: 后写的层级压盖权重大; 但是可以用 z-index: 5; 来调整
相对定位属性:
position: relative;
top 0;
left 0;
right 0;
bottom 0;
3.position: absolute; 绝对定位
参考点: (单个盒子时)
1.当使用top属性时: 参考点是页面的坐标原点
2.当使用bottom时: 参考点是浏览器的最下边 #注意区分浏览器和页面的区别
特点:
1.脱标了, 不占原来位置(形影不离)
2.压盖: 层级提高了,调整层级使用绝对定位
绝对定位属性:
position: absolute;
top: 0;
left: 0;
应用:
1.子绝父相
父盒子用相对定位
子盒子设置绝对定位: 当使用top属性时, 绝对定位的参考点是父盒子的左上角
2.浮动和定位之间不受影响
大盒子使用浮动, 内部的小元素进行定位调整
父相子绝实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 1226px;
height: 300px;
position: relative;
margin: 0 auto;
}
.b{
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
top: 50%;
right: 0;
}
.a{
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
top: 50%;
left: 0;
}
</style>
</head>
<body>
<div class="father">
<span class="a"><</span>
<span class="b">></span>
</div>
</body>
</html>
4.position: fixed; 固定定位
内容总结
1.定位:
相对定位:
参考点: 相对于自己原来的位置
特点: 标准文档流下的相对定位,
如果一个标准文档流的盒子,仅仅设置了相对定位, 与普通的盒子一样
设置相对定位之后, 如果调整位置, 会留一个坑在那里
作用:
1.做子绝父相的参考
2.微调元素
3.提升层级(不建议)
绝对定位
参考点:
父子盒子嵌套, 如果父盒子设置了相对定位, (绝对定位, 固定定位:这两没有实战意义), 那么子盒子都是以父盒子的左上角为参考点
单个盒子设置绝对定位, 如果以top描述,以页面的左上角为参考点
如果以bottom描述, 以浏览器的左下角为参考点
特征:
非标准文档流下的绝对定位
脱标
提升层级, css建议用这个
浮动和定位一起使用时:
浮动通常用做大模块实现并排
定位小模块调整位置
使用子绝父相
文本水平垂直居中:
text-align: center;
line-height = height;
标准文档流盒子居中:
margin: 0 auto;
浮动的盒子居中:
把浮动的盒子外面搞个隐藏的父盒子, 并设置属性
overflow: hidden;
margin: 0 auto;