知识点一 盒子模型
知识点二 Reset CSS
知识点三 CSS 浮动
知识点四 CSS 定位
知识点一 盒子模型
盒子模型的组成
盒子模型贴图
html
#border
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
border:width style color;复合样式
border-width
border-style solid实线 dashed虚线 dotted点线 double双边框
border-color
一个值 代表4个方向都一样 上右下左 (顺时针)
两个值 上下 右左
三个值 上右左 下
四个值 都不一样
border-width 边框大小
border-right-width 右边框大小
border-bottom-width 下边框大小
border-top-width 上边框大小
border-style 边框样式
border-top-style 顶部边框类型
border-right-style 右边边类型
border-bottom-style 底部边框类型
border-1eft-style 左边边框类型
border-color 边框颜色
border-top-c0l0r 顶部边框颜色
border-right-color 右边边框频色
border-bottom 底部边框颜色
border-left-co1or 左边边框颜色
复合样式
border-top:
border-right:
*/
div{
width: 300px;
height: 300px;
background-color:purple;
border-style: solid;
border-width: 1px 5px 10px 15px ;
border-top-color: red;
border-right-color: black;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
html
#padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
padding: 10px 20px 30px 40px;
}
/*
padding内边距，边框与类客之间的距离 会撑大盒子
一个值的时候:代表四个方向值一样 上右下左(顺时针)
二个值 上下 右左
三个值 上 右左 下
四个值 都不一样
*/
</style>
</head>
<body>
<div>
捡起
</div>
</body>
</html>
html
#margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*
margin 外边距 元素与其他元素的距离(边框以外的距离)
一值 代表4个方向值一样顺时针2个值
margin:auto;快速左右居中
垂直方向: margin-bottom，margin-top 取两者之间的较大值
水平方向: margin-left ，margin-right 取两者之和
overflow :hidden;解决内边距重叠问题 超出隐藏 border
*/
div{
width: 200px;
height: 200px;
background: blue;
margin-right: auto;
}
.box{
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div>
</div>
<div class="box">
</div>
</body>
</html>
-----------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
height: 300px;
background: red;
overflow: hidden;
}
.box div{
width: 100px;
height: 100px;
background: blue;
margin: 100px;
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>
html
#总结盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 300px;
height: 300px;
background: red;
overflow: hidden;
}
.box div{
width: 100px;
height: 100px;
background: blue;
margin: 100px;
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>
html
#注意点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.pad{
width: 200px;
height: 200px;
background: chartreuse;
padding-left: 100px;
}
.mar{
width: 200px;
height: 200px;
background: blue;
border: 1px solid red;
}
.mar>div{
height: 100px;
width: 100px;
background: yellow;
margin-left: 100px;
margin-top: 200px;
/*会一起跑出去包括父类 maigin 定位：maigin-top:父元素设置边框*/
}
</style>
</head>
<body>
<div class="pad"></div>
<div class="mar"><div></div></div>
</body>
</html>盒子模型外边距存在问题
盒子模型内边距存在问题
盒子模型内外边距总结
知识点二 RESET CSS
RESETCSS
知识点三 CSS浮动
浮动
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.wrap{
width: 100px;
height: 100px;
background: red;
float: left;
}
.box{
width: 200px;
height: 200px;
background: blue;
float: left;
}
</style>
</head>
<body>
<div class="wrap"></div>
<div class="box"></div>
</body>
</html>
<!--
将窗体自上而下分成一行一行,
并在每行中按从左至右依次排放元素，称为文档流，也称为普通流
这个应该不难理解，HTML中全部元素都是盒模型，
盒模型占用一定的空间，依次排放在HTML中，形成了文档流。
------------------------------------------------------
元素脱离文档流之后，将不再在文档流中占据空间，
而是处于浮动状态(可以理解为漂浮在文档流的上方)
脱离文档流的元素的定位基于正常的文档流，
当一个元素脱离文档流后，
依然在文档流中的其他元素将忽略该元素并填补其原先的空间、
脱离文档流，
也就是将元素从普通的布局排版中拿走，
其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位、
-->高度塌陷
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
border: 1px solid red;
/*height: 50px;*/
/*overflow: hidden;*/
}
li{
list-style: none;
width: 50px;
height: 50px;
background: skyblue;
line-height: 50px;
text-align: center;
margin: 2px 5px;
float: left;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
/*visibility: hidden; <--可见度设为隐藏。注意它和display: none;是有区别的*/
</style>
</head>
<body>
<ul class="clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>visibility
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1.box1{
visibility: visible;
}
h1.box2{
visibility: hidden;
}
h1.box3{
display: block;
}
</style>
</head>
<body>
<h1 class="box1">这是可见标签</h1>
<h1 class="box2">这是不可见标签</h1>
<h1 class="box3">这是后面的标签</h1>
</body>
</html>知识点四 CSS 定位
定位
相对定位和绝对定位
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
/* position 定位
static静态定位(没有定位)，默认
relative 相对定位，相对于正常位置(原来没有定位之前的位置)进行定位，还要占据位置
abso1ute 绝对定位，没有占据位置，使元素完全脱离文档流
没有定位父级，则相对于整个文档发生偏移参考最近非static定位的父级进行定位
fixed 固定定定位，相对于浏览器窗口进行定位
给父级相对定位 子级绝对定位
方向词
left,right.top,bottom
margin-left
z-index g
*/
.box{
width: 300px;
height: 300px;
background: red;
/*position: relative;*/
/*top:50px;*/
/*left:50px;*/
}
.wrap{
width: 100px;
height: 100px;
background: chartreuse;
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<div class="wrap"></div>
<div class="box"></div>
</body>
</html>固定定位
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 300px;
height: 300px;
}
.box{
background: blue;
position: fixed;
bottom: 0;
right: 0;
}
</style>
</head>
<body style="height: 3000px">
<div class="wrap"></div>
<div class="box"></div>
</body>
</html>权重
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
width: 50px;
height: 50px;
position: absolute;
}
.box1{
background: red;
z-index: 1;
}
.box2{
background: royalblue;
z-index: 11;
}
.box3{
background: rosybrown;
}
.box4{
background: aqua;
}
.box5{
background: fuchsia;
}
</style>
</head>
<body>
<ul>
<li class="box1"></li>
<li class="box2"></li>
<li class="box3"></li>
<li class="box4"></li>
<li class="box5"></li>
</ul>
</body>
</html>