div+css布局
1. position属性：⽤于定义⼀个元素是否：absolute（绝对），relative（相对），static（静态），或者fixed（固定）
1.1 absolute：绝对定位，距top和left的距离，⼀般与js结合使⽤，⽐如页⾯漂浮的⼴告。
1.2 relative：相对定位，指的是相对⾃⼰默认的位置。
1.3 static：默认
1.4 fixed：固定
2. z-index属性：决定层的先后顺序和覆盖关系，值⾼的元素会覆盖值⽐较低的元素
<-align：横向排列：left  right  center
4.line-height：指定⾏⾼，垂直居中
5.display: 设置元素是否是：⾏内元素（inline）、块状元素（block）、⾏内块状元素（inline-block）或者none隐藏标签作⽤
6.overflow：设置层内的内容超出层所能容纳的范围处理⽅式，为该属性设置visible值时，⽆论层的⼤⼩，内容都会显⽰出来。当设置hidden值时      ，会隐藏超出层⼤⼩的内容。当设置值为scroll时，不管内容是否超出层的范围，选中此选项都会为层添加滚动条。⽽值使⽤auto值时，只在内        容超出层的范围时才会显⽰滚动条。
三、设置浮动（float）和清除浮动（clear）
专⽤来摆放标签的位置⽤的，⽽不是绝对位置和相对位置。absolute和relative是⽤来实现漂浮⽤的
⽤display：inline  可以，但是不兼容
3.1 float：设置区块漂浮属性，允许⽹页制作者将⽂本环绕在⼀个元素的周围，可以使⽤左漂浮left，右漂浮right值
。
3.2 clear：清除  left  both
加div  clear
回顾上⼀页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/*需求：设置sb⾥⾯的每⼀个li标签的边框*/
#sb li{
border: 1px solid red;
}
ul:last-child li{
border: 10px solid blue;
color: red;
font-size: 10px;
background-color: yellow;
width: 100%;
height: 30px;
font-weight: bold;
text-decoration: underline;
text-indent: 10px;
text-align: center;
line-height: 30px;
background-image: url("路径");
background-repeat: no-repeat;
background-position: 10px 10px;
}
</style>
</head>
<body>
<!--
课前回顾：
1.css基本使⽤
css：层叠式样式表美化HTML标签
2.使⽤⽅式？4种
style
<style></style>
<link rel="stylesheet" href="">
<style>
@import:url("");
</style>
3.选择器在标签上设置记号⽅便利⽤css设置样式
选择器：
ID选择器  +id属性    #
类选择器  +class属性      .
元素选择器标签本⾝
后代选择器空格
⼦代选择器  >
5.⽂本属性和图⽚属性
-->
<!-- #sb>li{border} -->
<ul id="sb">  <!-- ul-谢凯进的⽗亲 -->
<li>item1</li><!-- li——⼉⼦谢凯1 -->
<li>item2</li><!-- li——⼉⼦谢凯2 -->
<ul><!-- ul  谢凯5-⼥⼉ -->
<li>item1</li><!-- li  谢凯5的⼉⼦1 -->
<li>item2</li><!-- li  谢凯5的⼉⼦2 -->
<li>item3</li><!-- li  谢凯5的⼉⼦3 -->
<li>item4</li><!-- li  谢凯5的⼉⼦4 -->
</ul>
<li>item3</li><!-- li——⼉⼦谢凯3 -->
<li>item4</li><!-- li——⼉⼦谢凯4 -->
</ul>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</body>
</html>
1.盒模型介绍
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
<style type="text/css">
/*通配符选择器*/
*{
padding: 0px;
margin: 0px;
}
/*标签选择器*/
div{
display: inline-block;
width: 100px;
height: 100px;
}
#oDiv{
background-color: red;
/*外边距*/
margin-right: 100px;
/*设置盒模型中的内填充*/
padding-left: 20px;
/*边框*/
/*border: 20px solid blue;*/
border-right: 30px solid blue;
}
#oDiv2{
background-color: yellow;
}
p{
width: 300px;
height: 200px;
background-color: red;
margin: 0 auto;
}
</style>
</head>
<body>
<!--
HTML中所有的块状标签都可以称为⼀个盒模型
盒模型的作⽤：美化页⾯，⽅便设计。
可以设置宽度和⾼度以及其他属性都可以做到。⽬前最流⾏的盒模型标签是属于：div
盒模型的组成：
外边距:margin
margin:  1px 1px;
margin-top
margin-bottom
margin-left
margin-right
内填充:padding
padding-left
padding-right
padding-top
padding-bottom
边框:border
border-left:
...
内容:content
控制标签居中显⽰
margin:0px auto;
-->
<div id="oDiv">
我唐烨怕过谁？
</div>
<div id="oDiv2">
</div>
<p>居中对齐</p>
</body>
</html>
2.布局中常⽤的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.oBox{
width: 100px;
height: 100px;
background-color: red;
/*绝对定位*/
position: absolute;
top: 100px;
left: 200px;
}
.oBox2{
width: 300px;
height: 300px;
background-color: yellow;  /*绝对定位*/
position: absolute;
top: 300px;
left: 300px;
}
.oBox3{
width: 100px;
height: 100px;
cssclass属性background-color: green;
/*相对定位*/
position: relative;
top: 20px;
left: 10px;
}
#oDiv{
width: 200px;
height: 200px;
background-color: yellow;  /*fixed*/
position: fixed;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<!-- css布局常⽤的属性 -->
<!--
1.position属性
针对的是所有标签的定位
background-position：针对的图⽚属性
absolute绝对定位
将标签脱离整个⽂档流。
top  left
relative 相对定位
随着⽗容器的变化⽽变化
-->
<div class="oBox">
</div>
<div class="oBox2">
<div class="oBox3"></div>
</div>
<div id="oDiv">
⼴告
</div>
1 <br>
2 <br>
3 <br>
4 <br>
5 <br>
1 <br>
2 <br>
3 <br>
4 <br>
5 <br>
</body>
</html>
3.布局中常⽤的属性z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
/*绝对定位*/
position: absolute;
}
#oDiv1{
background-color: red;
top: 50px;
left: 50px;
z-index: 1;
}
#oDiv2{
background-color: blue;
z-index: 2;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。