day40 css
内容回顾:
1.浮动
非标准文档流
作用:实现元素并排: 第一个盒子会贴父盒子的边, 第二个盒子会贴第一个盒子的边
特性:只要浮动了, 就脱离标准文档流
只要浮动, 就有一个收缩效果, 就好像是把块搞成行内块的效果(因为你浮动,脱离了标准流,不具备了标准标签的块特征)
字围: 最开始的浮动就是做这个的
只要浮动了, 任意的标签都可以设置宽高
浮动带来的影响:
如果父盒子不设置高度, 子盒子浮动了, 因为子盒子脱离了标准文档流, 浮动不在页面中占位置, 撑不地父盒子的高度.
注意: 要浮动一起浮动, 有浮动,清除浮动(4种方式)
一.给父盒子设置固定高度, 后期不好维护
二.内墙法, 给浮动元素的后面加一个空的块级标签, 类名一般为clearfix, 设置该属性为: clear:both;清除左边右边浮动给我带来的影响
三.伪元素清除法
.clearfix:after{
content:'.';
clear:both;
display:block;
visibility:hidden;
height:0;
}
四.父标签加属性: overflow:hidden; 形成BFC
2.display
inline: 在一行显示, 不能设置宽高
block: 独占一行, 可以设宽高
inline-block: 在一行显示, 可以设宽高
none: 隐藏:不占位置
3.visibility: hidden :占位置
今日内容
一.浮动的特性:
1.浮动的元素脱标
2.浮动的元素互相贴靠
3.浮动的元素有字围的效果
4.收缩的效果
margin塌陷问题:
margin:如果不浮动,在标准文档流下, 垂直方向会出现塌陷问题
margin: 如果浮动了, 垂直方向就不会出现塌陷问题
margin的盒子居中问题, 水平居中:
margin 0 auto; 如果不浮动, 在标准文档流下,盒子水平居中
margin 0 auto: 如果浮动了, 就不起作用(如何解决: 把浮动盒子放在新加入的隐藏的父盒子里面)
<!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>
文本的水平居中:text-align: center;
文本的垂直居中:行高=盒子的高度
多行文本垂直居中: 算出多行文本的高度, 用padding-top: 顶下来
css中有三种方式让盒子脱标: 浮动, 绝对定位, 固定定位
二.常用css的属性
1.文本属性:
文本对齐: text-align: right; (left, center, justify: 两端对齐,只适用于英文)
首行缩进: text-indent: 2em;
文本修饰: text-decoration: none; #常用做清除a标签默认的下划线(dicoration: 装饰)
: text-decoration: underline; #加下划线
: text-decoration: overline; #加上划线
: text-decoration: line-through; #加删除线
: text-decoration: inherit; #继承父标签的此属性(默认text-xxx就是继承父标签的,可以省略)
行高: line-height: 40px;(单行文本居中ling-height=height的值)
2.字体属性
字体大小: font-size: 16px;
字体粗细: font-weight: 400; (默认400没有px, 范围100~900: 400=normal,hold=700)
border:
bold:
normal:
lighter:
inherit:
字体系列: font-family: "华文行楷", "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
多个字体用逗号分隔, 表示从前往后在你的电脑上找这些字体, 如果都没有, 默认是宋体展示
sans-serif: 无衬线 serif: 有衬线
3.综合设置:
font: 14px/1.5 "华文行楷"
font: 14px/21px "华文行楷" #这两一样的效果
4.背景设置:(背景: background)
背景色设置有三种方式:
red;
background-color: rgb(255,0,0); #red green blue(0~255每种颜色都有256个)
background-color: rgba(0,0,0,.5); #透明度 #0,0,0黑色, 255,255,255白色 #.5透明度
background-color: #ff0000; #就是rgb的十六进制表示
background-color: #f00; #两两分组, 如果三个小组里的都一样, 那么可以缩写
背景图片设置:
background-image: url(); #默认背景图填不满时: 为平铺
background-repeat: no-repeat; #不重复, 填不满那不管; repeat: 这个是默认的; repeat-x: 只横向平铺; repeat-y: 只纵向平铺
background-position: 0 0; #两个值, x轴和y轴;
background-position-x:0;
background-position-y:0;
background-position: center top; #让一个大图在一个页面顶部居中显示: center(中心显示)
用background-position做个截图: (精灵图技术: 做图片的性能优化, 把很多的小图片放在一张大图上, 用css的截图来切你需要的小图(因为img的src每次都发一次请求, 浪费资源))
图片大小: 父盒子的宽高来搞
x,y的起始位置: 用background-position:负数; 来搞
background-attachment: fixed; #(附件: 固定) #背景图固定, 不随滚轮滚动
background:(综合属性: 可使代码变少, 简化代码)
background: url() no-repeat 0 -162px;
三.定位
有4种:
1.默认是: position:static; 静态定位
2. position: relative; 相对定位
标准文档流下的相对定位:
单独设置盒子的相对定位不会对这个盒子有任何影响
一个盒子有了相对定位属性:就可以用top, left, right, bottom属性
如果两个相邻的盒子都有相对定位: 后写的层级压盖权重大; 但是可以用 z-index: 5; 来调整
不脱标
先要找个参考点: 它的参考点是它原来的位置, 但是它的壳还在原来的地方(形影分离);
作用: 1.层级提高, 可以做压盖, (但是不建议这样搞)
2.布局方案, 做子绝父相的参考
3.position: absolute; 绝对定位
非标准文档流下的绝对定位:
position: absolute;
脱标了; 不占位置
层级提高了
position: absolute:
top: 0;
left: 0;
css中: 调整层级使用绝对定位
先找个参考点:
单个盒子: 如果以 top描述: 它的参考点是页面的左上角, 坐标轴的(0,0)点
如果以bottom描述: 它的参考点是浏览器的最下边
一般应用: 子绝父相
父盒子设置相对定位
子盒子设置绝对定位, top时, 定位是父盒子的左上角
浮动和定位之间不受影响:
一般大盒子用浮动, 每个盒子的内部进行定位调整
<!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; 固定定位