- 回顾
标签——被替掉（使用标签选贼器）
锚点
form 和 table——重要
input select option textarea
table tr td th thead tbody
Css样式：
选择器************
id 类 标签 并集 交集 属性 兄弟 后代 子….… hover
css属性：
文本不再说了
布局：
margin
padding
background
border
position：
相对定位：相对于自己做定位。占位，还是原来的位置。一般是微调
绝对定位做包含块：
默认是相对于浏览器
有了包含块相对于包含块
display
float：left right 用完清除
- 目标
padding和margin
position
background
- 内容
3.1 padding和margin
早期的IE中（6）——iE模型
box-sizing: content-box|border-box|inherit;
content-box ：宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。———— w3c盒子模型
border-box ：为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。————ie盒子模型
<style>
div{
width:100px;
height:100px;
border:20px solid #000;
background: red;
/*padding-top:20px;
padding-left:20px;
padding-right:20px;
padding-bottom: 20px;*/
/*padding: 20px;上下左右都是20*/
padding:10px 20px 30px 40px;/*上右下左：顺时针转的*/
/*padding:10px 20px;上下 左右*/
/*padding:10px 30px 40px;上 左右 下*/
}
#div1{
margin-bottom:100px;
box-sizing: border-box;/*widht：内容 pading border*/
}
#div2{
margin-bottom:100px;
box-sizing: content-box;
}
</style>
</head>
<body>
<div id="div1">我是王老师，今年18岁我是王老师，今年18岁</div>
<div id="div2">我是王老师，今年18岁</div>
</body>
3.2 盒子横向布局和纵向布局margin的区别
上下求最大
左右求和
/*margin：上下的距离是求最大*/
#div1{
margin-bottom:30px;
/*box-sizing: border-box;widht：内容 pading border*/
}
#div2{
margin-top:30px;
box-sizing: content-box;
}
ul li{
float: left;
width:100px;
height:100px;
background: green;
list-style:none
}
#li1{
margin-right: 10px;
}
#li2{
margin-left:10px;
}
3.3 定位
3.3.1定位的方式
-
标准文档流定位:默认标签应该如何显示就是标准文档流定位。
在标准文档流中所有的宽高和内容的东西，浏览器父框都认识。 -
float浮动定位：
让块状元素失去独占一行的特性
bug：子框没办法将父框撑开。但是占位还有。清除浮动。
没有脱离文档流。
- 绝对定位：postion属性：{fixed relative absolute}
绝对定位脱离文档流，这个标签不占位（所以：标签可以重叠到一起）
3.3.2 position属性
fixed：脱离文档流，并且不会随着滚动条而滚动。
<style>
*{
padding:0px;
margin:0px;
}
#content{
width:100%;
height:900px;
background: red;
}
#gg{
background: url(../../img/第一次/red.jpg);
background-size:cover;
width:400px;
height:100px;
position: fixed;/*绝对定位：相对于浏览器*/
/*rleft:100px;*/
right:100px;
top:100px;
/*bottom: 100px;*/
}
</style>
</head>
<body>
<div id="content">
</div>
<div id="gg"></div>
</body>
position:relative相对定位：
相对路径：从当前出发
绝对路径：经纬度 100 100
地球 中国 河南 郑州 金水 杨金 牛顿国际 A 6 学术办公室 1号桌。
相对定位：
相对于自己做定位
绝对定位：
相对有浏览器做定位。
/距离自己左侧原本的位置为10/
<style>
div{
width:100px;
height:100px;
margin: 10px;
}
#div1{
background: red;
}
#div2{
background: yellow;
}
#div3{
background: blue;
}
/*相对定位一般不用他做布局。占位还是原来的。
1)微调
2）给绝对定位做参考物。
* */
#div2{
position: relative;/*相对自己移动，但是占位还在原来的位置*/
left:120px;
top:-110px;
}
</style>
</head>
<body>
<div id="div1">
1
</div>
<div id="div2">
1
</div>
<div id="div3">
1
</div>
</body>
position:absolute——绝对定位：
滚动条动他也动。界面的固定位置。
相对于的绝对：参照物（包含块）
：经度100 维度100
：房间的右上角——相对于房间。（房间就是一个参照物——这个人必须在房间里）
<style>
#father{
width:900px;
height:400px;
border:10px solid #000;
margin:auto;
position: relative;/*绝对定位也行，但是父也不占位。包含块布局的时候一般父相对*/
}
#son,#son1{
width:100px;
height:100px;
position: absolute;
}
#son{
border: 2px solid #0000FF;
z-index: 1000;
left:0px;
top:0px;
}
#son1{
border:4px solid #FFFF00;
left:10px;
top:10px;
}
</style>
祝福墙（1）：
z-index：优先级
3.4 精灵图
#father{
width:1000px;
height:600px;
background-image: url(../../img/c.jpg);
background-repeat: no-repeat;/*是否重复：横向平铺 纵向普通 全部平铺 不平铺*/
background-position:100px 100px;/*x:left center right y:top center bottom 数字*/
/*background-size: contain;*/
background-color: #000000;
background: url(../../img/c.jpg) no-repeat 100px 100px #000;
}
**概念：**将大量的小图标整合到一张图上，可以节约加载速度。（一个小图标 占位2kb 4-5个小图整合一块3kb 可以节约空间 加载速度块）
一张大图如何区分显示内容：background属性 postion： 第一个:左右 left right center 百分比 像素 值上下：top bottom center
**意义：**小图标整合成一张大图，依赖background进行显示（position属性）
<style>
#div1{
width:70px;
height:70px;
background: url(xiaotu.png);
}
#div2{
width:70px;
height:70px;
background: url(xiaotu.png);
background-position: -70px -0px;
margin: 10px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
3.5 案例
1.九宫格
- 导航
<style>
*{margin: 0px;padding: 0px;}
#menu{
border-top:5px solid #fff;
border-bottom: 5px solid blue;
background: #EFEFEF;
}
#menu:after{
content: "";display: block;clear: both;
}
#menu span{
float:left;width:200px;
line-height:30px;text-align: center;
font-weight: bolder;
position: relative;/*包含块*/
}
#menu span ul{
list-style: none;
position: absolute;/*绝对定位相对有 span*/
left: 0px;top: 35px;
border:1px solid blue;
border-top: none;
width:200px;
display: none;
}
#menu span:hover{
background:blue;
}
#menu span:hover ul{
display: block;
}
</style>
- 总结
display：inline block none
float：清除浮动
定位：
标准文档流 浮动 绝对
position属性——top bottom left right z-index
fixed：不占
absolute
relative：占位
static:默认
简单讲了一点backgrouond：没有
5387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
