知识点一 盒子模型
知识点二 Reset CSS
知识点三 CSS 浮动
知识点四 CSS 定位
知识点一 盒子模型
盒子模型的组成
盒子模型贴图
#border<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>/*border:width style color;复合样式border-widthborder-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>#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>#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>#总结盒子模型<!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>#注意点<!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浮动
浮动
<!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中，形成了文档流。
------------------------------------------------------
元素脱离文档流之后，将不再在文档流中占据空间，
而是处于浮动状态(可以理解为漂浮在文档流的上方)
脱离文档流的元素的定位基于正常的文档流，
当一个元素脱离文档流后，
依然在文档流中的其他元素将忽略该元素并填补其原先的空间、脱离文档流，
也就是将元素从普通的布局排版中拿走，
其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位、
-->高度塌陷
<!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
<!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 定位
定位
相对定位和绝对定位
<!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,bottommargin-leftz-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>固定定位
<!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>权重
<!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>