一、什么是盒子模型
盒子模型：
就是将网页中每一个元素 看成一个个的盒子。
一个盒子：
盒子内容 content
盒子内容到盒子边的填充物 padding
盒子边框 border
盒子和盒子之间的距离 margin
二盒子边框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子边框</title>
<style type="text/css">
/*盒子模型设计,设计整体布局的时候就应该讲边框设计好，粗细颜色，线的状态*/
div{
border: 1px solid red;
width: 20px;
height: 20px;
border-top:2px dotted yellow;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
三、盒子外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid red;
/* 下外边距 */
/*margin-bottom: 5px;*/
/* 能够同时设置四个方向的外边距 */
/* 一个值 表示4个方向采用相同的设置 */
/*margin: 5px;*/
/* 两个值 第一个值表示上下方向的设置 第二个值表示左右方向的设置 */
/*margin: 5px 10px;*/
/* 三个值： 上 左右 下 */
/*margin: 5px 10px 20px;*/
/* 四个值 ：顺时针设置 上 右 下 左 */
margin: 5px 6px 7px 8px;
}
/*#xx{
margin-top: 10px;
}*/
</style>
</head>
<body>
<div id="">
</div>
<div id="xx">
</div>
</body>
</html>
四、内边距
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内边距</title>
<style type="text/css">
div{
/*设置宽度和高度是包括边框和边框内部的区域*/
border: 1px solid red;
width: 10px;
height: 10px;
/*单独的设置上边*/
padding-top: 30px;
/*单独的设置下边*/
padding-bottom: 10px;
/*设置上下和左右*/
padding: 10px 10px;
/*同理设置上 左右 下||设置四个边||上下左右*/
}
input{
/*文本框中的高度可以用内边距来撑开行高*/
padding: 10px 10px;
}
</style>
</head>
<body>
<div>
</div>
<input type="text" name="" id="" value="输入框" />
</body>
</html>
五、标准文档流
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*
* display：行级元素默认值为inline
*/
span{
border: 1px solid red;
width: 100px;
height: 100px;
/*display: block;*/
}
/*
* display：块级元素默认值为block
*/
div{
border: 1px solid blue;
width: 100px;
height: 100px;
/*display: inline*/
/* 将元素同时拥有行和块级元素的特点 */
/* 能设置宽度和高度 且能在同一行 */
/*display: inline-block;*/
/* 将元素隐藏 */
display: none;
}
</style>
</head>
<body>
<!--
标准文档流中：
块级元素 ： 独占一行 可以设置宽度和高度等 h1-h6 p div
行内元素/内联元素 ： 内容撑开宽度和高度 不可以单独设置宽度和高度 多个内联可以在同一行
span image a...
-->
<span id="">
我是span1
</span>
<span id="">
我是span2
</span>
<div id="">
我是div1
</div>
<div id="">
我是div2
</div>
</body>
</html>
六、浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.wrapper{
padding:5px;
border:1px solid blue;
/*height: 120px;*/
/*overflow: hidden;*/
}
.con{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
.div_after{
/* 清除浮动 */
clear: both;
}
/* 伪类after 在某个选择器末尾 进行操作 */
.wrapper:after{
/* 1.添加内容为"" */
content: "";
/* 2.将这块内容区域设置为块元素 */
display: block;
/* 3.将这块区域两侧的浮动清除 */
clear: both;
}
</style>
</head>
<body>
<!--
4种解决边框塌陷的方案
1.添加空标签 然后设置清除两侧浮动 恢复正常效果
2.设置塌陷标签的高度(x)
3.overflow设置塌陷标签 值为hidden 塌陷标签不要设置高度 (推荐)
4.伪类after[等价于第一种方式](推荐)
-->
<div class="wrapper">
<div class="con">
</div>
<div class="con">
</div>
<div class="con">
</div>
<!--<div class="div_after">
</div>-->
</div>
</body>
</html>
------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
border: 1px solid red;
width: 300px;
/*height: 150px;*/
/*overflow: scroll;*/
/*overflow: auto;*/
overflow: hidden;
}
</style>
</head>
<body>
<div id="">
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</div>
</body>
</html>
七、定位
1.绝对定位
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>position属性</title>
<style type="text/css">
body {
margin: 0;
}
div {
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
border: 1px #666 solid;
margin: 10px;
position: relative;
}
#first {
background-color: #f2bb6f;
border: 1px #B55A00 dashed;
}
#second {
background-color: #003580;
border: 1px #0000A8 dashed;
/*
* 绝对定位是默认根据body的边框进行偏移的 它不会保留原来的位置
* 如果它的某个父级标签设定了定位 一般都是相对定位 则根据设定了相对定位的父级标签
* 进行偏移
*/
position: absolute;
/*right: 30px;*/
/*top: 30px;*/
z-index: 999;
}
#third {
background-color: #f3f3f3;
border: 1px #395E4F dashed;
position: absolute;
z-index: 2;
}
</style>
</head>
<body>
<!--
需求： 1.将第二个盒子设置绝对定位 并使用right向左偏移30px 查看效果
2.将其父元素设置相对定位再查看效果
-->
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------
2.fixed固定位置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>fixed的使用</title>
<style>
body {
height: 1000px;
}
div:nth-of-type(1) {
/*第一个div设置绝对定位*/
width: 100px;
height: 100px;
background: red;
}
div:nth-of-type(2) {
/*第二个div设置固定定位*/
width: 50px;
height: 50px;
background: yellow;
/* 固定定位 狗皮膏药 */
position: fixed;
}
</style>
</head>
<body>
<!--
需求： 1.将第一个<div>元素设置为绝对定位
2.将第二个<div>元素设置固定定位，并使用top使其距离顶部50%
-->
<div>div1</div>
<div>div2</div>
</body>
</html>
--------------------------------------------------------------------------------------
3.relative相对定位
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>position属性</title>
<style type="text/css">
body {
padding: 20px;
}
div {
margin: 10px;
padding: 5px;
font-size: 12px;
line-height: 25px;
}
#father {
border: 1px #666 solid;
padding: 0px;
}
#first {
background-color: #f2bb6f;
border: 1px #B55A00 dashed;
}
#second {
background-color: #003580;
border: 1px #0000A8 dashed;
position: relative;
/*
* 相对定位：相对于原来的位置进行偏移 原来的位置会保留
*/
/* 通过方向属性调整定位元素的位置 */
/* 值：正数：到某个方向的距离 */
top: -50px;
/*bottom: ;*/
left: 10px;
/*right: ;*/
}
#third {
background-color: #f3f3f3;
border: 1px #395E4F dashed;
}
</style>
</head>
<body>
<!--
需求： 1.将第一个盒子设置为相对定位 并使用top向上偏移20px 使用left向右偏移20px
2.将第三个盒子设置为相对定位 并使用right向左偏移20px 使用bottom向上偏移30px
-->
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------
4.z-index属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>z-index属性</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font: 12px/1.5 Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\\5b8b体,sans-serif;
color: #666;
}
ul li{
list-style: none;
}
#content{
border: 1px solid rgb(216,216,216);
margin: 10px;
width: 350px;
height: 190px;
padding: 8px;
box-sizing: border-box;
border-radius: 5px;
position: relative;
}
#content ul li{
line-height: 20px;
}
#content ul img{
border-radius: 5px;
}
.tipBg{
width: 331px;
height: 16px;
background-color: black;
/*0 - 1 */
opacity: 0.3;
}
.tipBg,.tipText{
position: absolute;
top: 116px;
}
.tipText{
color: white;
width: 331px;
text-align: center;
}
</style>
</head>
<body>
<div id="content">
<ul>
<li><img src="image/maple.jpg" alt="香山红叶" /></li>
<li class="tipText">京秋魅力•相约共赏香山红叶</li>
<li class="tipBg"></li>
<li>时间：11月16日 星期六 8:30</li>
<li>地点：朝阳区西大望路珠江帝景K区正门前集合</li>
</ul>
</div>
</body>
</html>
-----------------------------------------------------------------------------------------------