day12 css样式
目录
1.标签分类
2.浮动布局
3.margin塌陷
4.定位postion
5.背景图
一. 标签分类
默认在标准文档流
行内标签
span,a,em,i,strong,b,input,img
特点:
1.在一行内显示
2.不能设置宽高,如果不设置宽 默认是字体的大小
ps: 块级元转行内 很少使用
ps:行内标签又包括了行内块标签。属性数display：inline-block
经典标签：input， img
块级标签
div p ul ol li dl dt form table h1~h6
特点:
1.独占一行
2.可以设置宽高,如果不设置宽,默认是父元素100%的宽度
标签分类的属性display，表示要显示 什么状态，可以改变标签属性取值范围inline | block | inline-block | none
ps:一个行内转行内块用的最多
二. 浮动布局
设计初衷是文字环绕
（
marge：0 auto 让一个普通标准文档流下盒子水平居中
垂直居中：父盒子的高度减子盒子的高度除2
）
浮动现象：1. 脱离标准文档流 （不在 页面占位置）
2. 贴边显示
3.文字怀绕
4.收缩现象（一旦给元素设置了浮动，就可以任意设置宽度）
问题：
一旦给子元素设置浮动,父元素不设置高度,因为浮动元素脱标了,不在页面上占位置,撑不起父元素 的高度
清除浮动的方式：
1.给父盒子设置固定高度（不易维护）
2.内墙法
clear:both; 清除左右两边浮动带来的影响
在最后一个浮动元素的后面加一个空的块级元素(标准文档流),并且设置该元素为
缺点: 代码冗余
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#header{
width: 100%;
/*height: 100px;*/
}
.container{
width: 1226px;
/*height: 100%;*/
background-color: black;
margin: 0 auto;
}
.logo{
width: 55px;
height: 55px;
background-color: darkorange;
float: left;
margin-top: 22px;
}
.list_header{
width: 500px;
height: 100px;
background-color:deepskyblue ;
float: left;
}
.form{
width: 250px;
height: 48px;
background-color: darkcyan;
float: right;
margin-top: 28px;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<div class="logo"></div>
<div class="list_header"></div>
<div class="form"></div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
3.伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#header{
width: 100%;
/*height: 100px;*/
}
.container{
width: 1226px;
/*height: 100%;*/
background-color: black;
margin: 0 auto;
}
.logo{
width: 55px;
height: 55px;
background-color: darkorange;
float: left;
margin-top: 22px;
}
.list_header{
width: 500px;
height: 100px;
background-color:deepskyblue ;
float: left;
}
.form{
width: 250px;
height: 48px;
background-color: darkcyan;
float: right;
margin-top: 28px;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div id="header">
<div class="container clearfix">
<div class="logo"></div>
<div class="list_header"></div>
<div class="form"></div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
4. overflow:hidden
给父元素添加了overflow hidden也能清除浮动
牵扯了css定制的规则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
#header{
width: 100%;
/*height: 100px;*/
}
.container{
width: 1226px;
/*height: 100%;*/
background-color: black;
margin: 0 auto;
overflow: hidden;
}
.logo{
width: 55px;
height: 55px;
background-color: darkorange;
float: left;
margin-top: 22px;
}
.list_header{
width: 500px;
height: 100px;
background-color:deepskyblue ;
float: left;
}
.form{
width: 250px;
height: 48px;
background-color: darkcyan;
float: right;
margin-top: 28px;
}
</style>
</head>
<body>
<div id="header">
<div class="container">
<div class="logo"></div>
<div class="list_header"></div>
<div class="form"></div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
ps:布局规则 给一个盒子一旦设置了overflow：hidden|scroll
设置了overflow：hidden 这个盒子就会形成BFC 上下文管理
凡是在BFC中的盒子，有一个布局规则：
父元素的规则也会得到计算
ps:浮动给标签打来的影响：脱离标准流
三. margin塌陷
水平方向 两个margin加起来的距离
垂直：会出现塌陷问题，一个100px的口和一个50px的口会重叠
标准文档流下margin垂直也会出现塌陷，浮动margin不会出现问题
解决方案：给一个盒子设置就好了
四. 定位
position:static;静态 默认的
position: relative;相对定位
参考点:以原来的位置为参考点
现象:
1.压盖现象(一般不用)
2.微调元素
布局方案:
子绝父相
position: absolute; 绝对定位
参考点:
单独设置绝对定位,以页面左上角为参考点
有子绝父相,以最近的父辈元素的左上角为参考点
现象:
1.脱标
2.压盖现象(常用)
position: fixed; 固定定位
参考点:浏览器的左上角
现象:
0.固定在网页上不变
1.脱标
2.压盖(一般不用)
作用:
固定导航栏,小广告,回到顶部
relative相对定位
设置相对定位对盒子没影响，但是对多四个属性 top left (往右) right （往左） bottom
以原来的位置为参考点
现象： 1. 压盖现象 2. 可以微调元素
（vertical-align:middle 设置基线 多用于input，在这里看到的 所以就补充在这儿了。啦啦啦）
absolute 绝对对位 （相对对位一般和绝对定位联合使用，子绝父相）
参考点：单独设置绝对对位以页面左上角为参考点 子绝父相里以父为参考点
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mi购物车案例</title>
<style>
.shop{
width: 100px;
height: 40px;
background-color: #000;
float: right;
line-height: 40px;
position: relative;
text-align: center;
border-radius: 4px;
}
.shop a{
text-decoration: none;
width: 100px;
height: 40px;
display: block;
color: #fff;
font-size: 14px;
}
.shop .content{
width: 300px;
height: 100px;
background-color: red;
position: absolute;
top: 40px;
left: -200px;
display: none;
}
.shop:hover{
display: block;
}
</style>
</head>
<body>
<div class="shop">
<a href="#">购物车</a>
<div class="content"></div>
</div>
</body>
</html>
fixed 固定定位
参考点是浏览器的左上角
z-index 设置优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding-top: 80px;
}
.fix_header{
width: 100%;
height: 80px;
/**/
background-color: black;
position: fixed;
top: 0;
left: 0;
bottom: 10px;
z-index: 10;
}
p.active{
position: relative;
color: red;
}
</style>
</head>
<body>
<div class="fix_header"></div>
<p>aaaaaaaaaaaivy</p>
<p>ivy</p>
<p>ivy</p>
<p>ivy</p>
<p>ivy</p>
<p>ivy</p>
<p>ivy</p>
<p>ivy</p>
<p class="active">what's the weather like?</p>
<p>ivy</p>
<p>ivy</p>
<p>ivy</p>
</body>
</html>
z-index
z-index只应用在定位的元素，默认z-index:auto;
z-index取值为整数，数值越大，它的层级越高
如果元素设置了定位，没有设置z-index，那么谁写在最后面的，表示谁的层级越高。
从父现象。通常布局方案我们采用子绝父相，比较的是父元素的z-index值，哪个父元素的z-index值 越大，表示子元素的层级越高。
五 背景图
background-color:颜色
background-img: url 写地址
background-position 切图
