CSS:
???12.display
???13.浮动效果
???14.浮动特性
???15.浮动产生的问题和解决方法
???16.float京东导航栏
???17.position
???18.z-index
???19.京东案例
12.display
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>display</title> ???<style type="text/css"> ???????div{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: red; ???????????/* 控制元素隐藏 不占位置 */ ???????????/*display: none;*/ ???????????/*控制元素隐藏 占位置 影响后面盒子的布局*/ ???????????/*visibility: hidden;*/ ???????????/*转为 行内块元素*/ ???????????/*display: inline-block;*/ ???????????/*将 块级元素转换为 行内元素 不能设置宽高*/ ???????????display: inline; ???????} ???????a{ ???????????/*display: block;*/ ???????????/*display: inline-block;*/ ???????????width: 300px; ???????????height: 300px; ???????????background-color: yellow; ???????} ???????img{ ???????????/* 行内块元素 一般转化块级元素 */ ???????????/*display: block;*/ ???????????display: inline; ?/*转为行内元素 依然可设置宽高 没必要转换 ?*/ ???????????width: 100px; ???????????height: 100px; ???????} ???</style></head><body> ???<div>123</div> ???<div>987</div> ???<a href="#">百度一下</a> ???<img src="./images/homesmall1.png" alt="python"></body></html>
13.浮动效果
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>浮动</title> ???<style type="text/css"> ???????.wrap div{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: red; ???????????border: 1px solid black; ???????????/* ???????????文档流：可见元素在文档中的显示位置； ???????????浮动产生的效果： ???????????????浮动可以使元素按指定位置排列，直到遇到父元素的边界或者另一个元素的边界停止 ???????????*/ ???????????/* left 左浮动 左侧为起始，从左往右依次排列*/ ???????????float: left; ???????????/* right 右浮动 右侧为起始，从右往左依次排列 ?*/ ???????????/*float: right;*/ ???????????/*float: none;*/ ???????} ???</style></head><body> ???<div class="wrap"> ???????<div>1</div> ???????<div>2</div> ???????<div>3</div> ???????<div>4</div> ???????<div>5</div> ???????<div>6</div> ???????<div>7</div> ???????<div>8</div> ???????<div>9</div> ???</div></body></html>
14.浮动特性
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>浮动特性</title> ???<style type="text/css"> ???????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????.wrap div{ ???????????width: 200px; ???????????height: 200px; ???????????border: 1px solid black; ???????} ???????.box1{ ???????????background-color: red; ???????????float: left; ???????} ???????.box2{ ???????????background-color: yellow; ???????????margin-left: 20px; ???????} ???????.box3{ ???????????background-color: green; ???????} ???????.container{ ???????????/*width: 300px;*/ ???????????/*height: 300px;*/ ???????????background-color: chartreuse; ???????????float: left; ???????} ???????span{ ???????????float: left; ???????????background-color: blue; ???????????width: 100px; ???????????height: 100px; ???????} ???????/* ???????文档流：可见元素在文档中的排列位置 ???????浮动效果： ???????????1.浮动可以使元素脱离文档流，不占位置 ???????????2.浮动会使元素提升层级 ???????????3.浮动可以使块元素在一行内排列，不设置宽高时，可以使元素适应内容 ???????????4.浮动可以使行内元素支持宽高 ???????*/ ???</style></head><body> ???<div class="wrap"> ???????<div class="box1"></div> ???????<div class="box2"></div> ???????<div class="box3"></div> ???</div> ???<div class="container">哈哈</div> ???<div class="container">我们</div> ???<span>嘿嘿</span></body></html>
15.浮动产生的问题和解决方法
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>浮动产生的问题和解决方法</title> ???<style type="text/css"> ???????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????/* 通常页面布局时，父盒子的高度不需要设置，通过子盒子 自动填充父盒子；*/ ???????.wrap{ ???????????width: 800px; ???????????/*height: 500px;*/ ???????????background-color: red; ???????????margin: 0 auto; ???????????overflow: hidden; ???????} ???????.wrap div{ ???????????float: left; ???????} ???????.wrap1{ ???????????width:200px; ???????????height: 400px; ???????????background-color: yellow; ???????} ???????.wrap2{ ???????????width:350px; ???????????height: 400px; ???????????background-color: green; ???????????margin-left: 25px; ???????} ???????.wrap3{ ???????????width:200px; ???????????height: 400px; ???????????background-color: blue; ???????????margin-left: 25px; ???????} ???????#clearfix{ ???????????float: none; ???????????clear: both; ???????} ???????/* 官方推荐的解决办法 最长使用的解决办法*/ ???????/* ???????.wrap:after{ ???????????visibility: hidden; ???????????clear: both; ???????????display: block; ???????????content: ‘.‘; ???????????height: 0; ???????}*/ ???????/* ???????浮动产生的问题： ???????????父元素不设置高度时，子元素设置了浮动，不会撑开父元素的高度，因为子元素不占位置了！ ???????解决办法： ???????????1.给父盒子设定固定高度；缺点：不灵活； ???????????2.给浮动元素最后一个加一个空的块级元素，且该元素为不浮动float:none，设置clear:both,就会撑开盒子。 ???????????????缺点：结构冗余 ???????????3.官方推荐：推荐使用： ???????????????.wrap:after{ ???????????????????visibility: hidden; ???????????????????clear: both; ???????????????????content: ‘.‘; ???????????????????display: block; ???????????????????height: 0; ???????????????} ??????????4.推荐使用：给父元素添加overflow:hidden ?eg: .warp{overflow: hidden;} ???????*/ ???</style></head><body> ???<div class="wrap"> ???????<div class="wrap1"></div> ???????<div class="wrap2"></div> ???????<div class="wrap3"></div> ???????<!--<div id="clearfix"></div>--> ???</div></body></html>
16.float京东导航栏
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>float京东导航栏</title> ???<style type="text/css"> ???????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????.wrap{ ???????????width: 100%; ???????????margin: 0 auto; ???????????background-color: rgba(240,243,239,0.73) ???????} ???????.wrap .header{ ???????????width: 1245px; ???????????height: 40px; ???????????margin: 0 auto; ???????????background-color: rgba(227,228,229,0.73) ???????} ???????.header_l,.header_r{ ??????????float: left; ???????} ???????.header_l img{ ???????????width: 20px; ???????????height: 20px; ???????} ???????.header_l span{ ???????????color: rgba(126,126,126,0.98); ???????????font-size: 12px; ???????????height: 40px; ???????????line-height: 40px; ???????????text-align: center; ???????} ???????.header_l{ ???????????margin: 5px 0 0 30px; ???????} ???????.header_r{ ???????????margin-left: 250px; ???????????width: 915px; ???????} ???????.header_r ul li{ ???????????list-style: none; ???????????height: 40px; ???????????line-height: 40px; ???????????float: left; ???????????padding: 0 10px; ???????} ???????.header_r ul li a{ ???????????text-decoration: none; ???????????color: rgba(126,126,126,0.98); ???????} ???????.header_r ul li a:hover{ ???????????color: red; ???????} ???</style></head><body> ???<!--最外层的父盒子--> ???<div class="wrap"> ???????<!--导航--> ???????<div class="header"> ???????????<div class="header_l"> ???????????????<img src="./images/fav.ico" alt="一个logo"> ???????????????<span>北京</span> ???????????</div> ???????????<div class="header_r"> ???????????????<ul> ???????????????????<li><a href="">你好，请登录 <span>免费注册</span></a></li> ???????????????????<li class="spacer"></li> ???????????????????<li><a href="#">我的订单</a></li> ???????????????????<li class="spacer"></li> ???????????????????<li><a href="#">我的京东</a></li> ???????????????????<li class="spacer"></li> ???????????????????<li><a href="#">京东会员</a></li> ???????????????????<li class="spacer"></li> ???????????????????<li><a href="#">企业采购</a></li> ???????????????????<li class="spacer"></li> ???????????????????<li><a href="#">客户服务</a></li> ???????????????????<li class="spacer"></li> ???????????????????<li><a href="#">网站导航</a></li> ???????????????????<li class="spacer"></li> ???????????????????<li><a href="#">手机京东</a></li> ???????????????</ul> ???????????</div> ???????</div> ???????<!--中心内容--> ???????<div class="content"></div> ???????<!--底部--> ???????<div class="footer"></div> ???</div></body></html>
17.position
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>position</title> ???<style type="text/css"> ???????*{ ???????????padding: 0; ???????????margin: 0; ???????} ???????div{ ???????????width: 200px; ???????????height: 200px; ???????} ???????.box1{ ???????????background-color: red; ???????????position:relative; ???????????top: 50px; ???????????left: 30px; ???????} ???????.box2{ ???????????background-color: yellow; ???????????position:absolute; ???????????top:150px; ???????} ???????.box3{ ???????????background-color: green; ???????????position:absolute; ???????????left: 100px; ???????????top:10px; ???????} ???????.father{ ???????????width: 300px; ???????????height: 300px; ???????????background-color: gray; ???????????margin-top: 50px; ???????????position: relative; ???????} ???????.child{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: red; ???????????position: absolute; ???????????top:20px; ???????????left: 20px; ???????} ???????.aside_logo{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: yellow; ???????????/* 固定定位*/ ???????????position: fixed; ???????????bottom: 20px; ???????????right:20px; ???????; ???????} ???????/* ????????static ： 默认值 ????????relative : 相对定位 ???????????1. 不设置偏移量的时候，对元素没有任何影响 ???????????2. 相对定位可以提升层级关系。 ???????????3. 相对定位是相对于自身定位。 ???????absolute : 绝对定位 ???????????1. 可以提升层级关系 ???????????2. 脱离文档流 ???????????3. 在没有父级元素定位时，以浏览器的左上角为基准定位的。 ???????????4. 有父级的情况下，父级设置相对定位（绝对位置），子集设置绝对定位，是以父盒子进行定位的。 ???????????????（父相子绝） 来设置位置的调整 ???????fixed : 固定定位 ???????*/ ???</style></head><body> ???<!--<div class="box1"></div>--> ???<!--<div class="box2"></div>--> ???<!--<div class="box3"></div>--> ???<div class="father"> ???????<div class="child"> ???????</div> ???</div> ???<ul> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???????<li>1</li> ???</ul> ???<div class="aside_logo"></div></body></html>
18.z-index
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>z-index</title> ???<style type="text/css"> ???????div{ ???????????width: 100px; ???????????height: 100px; ???????????position: absolute; ???????} ???????.box1{ ???????????background-color: red; ???????????top: 50px; ???????????z-index: 1; ???????} ???????.box2{ ???????????background-color: green; ???????????/*border-radius: 5px 10px 15px 20px;*/ ???????????border-radius: 50%; ???????????z-index: 20; ???????} ???????.box3{ ???????????background-color: yellow; ???????} ???</style></head><body> ???<div class="box1"></div> ???<div class="box2"></div> ???<div class="box3"></div></body></html>
19.京东案例
<!DOCTYPE html><html lang="cn"><head> ???<meta charset="UTF-8"> ???<title>京东案例</title> ???<!-- ????网页布局： ???????上下 结构 ???????上中下 结构 ???????上左右下 结构： 1-2-1 结构 ???????上左中右下 结构： 1-3-1 结构 ???--> ???<style type="text/css"> ???????*{padding: 0;margin: 0} ???????ul>li {list-style: none;} ???????a{text-decoration: none;} ???????.wrap{width: 100%;background-color: rgba(240,243,239,0.98)} ???????.container{width: 1300px;overflow: hidden;margin: 0 auto} ?/*overflow:hidden 用在float:left 可以撑开背景*/ ???????.container div{float: left} ???????.c_l{width: 200px;height: 500px;background-color: green;} ???????.c_c{width: 800px;height: 500px;background-color: red; ???????????margin-left: 5px} ???????.c_r{width: 200px;height: 500px;background-color: yellow; ???????????margin-left: 5px;} ???????.c_l ul li{ ???????????padding: 5px 0 5px 10px; ???????} ???????.c_l ul li a{ ???????????color: #868686; ???????} ???????.c_l ul li a:hover{ ???????????color: red; ???????} ???????.c_l ul li:hover { ???????????background-color: gray; ???????} ???????.center_image{ ???????????width: 600px; ???????????height: 500px; ???????????float: left; ???????} ???????.c_c ul li{ ???????????float: right; ???????????position: relative; ???????????right: 2px; ???????????top: 5px; ???????} ???????.c_c ul li img{ ???????????width: 200px; ???????????height: 165px; ???????} ???????.c_r{ ???????????position: relative; ???????} ???????.c_r p{ ???????????color: green; ???????????background-color: gray; ???????????width: 90px; ???????????height: 70px; ???????????line-height: 70px; ???????????text-align: center; ???????????position: absolute; ???????} ???????.c_r .p1{ ???????????left: 95px; ???????????top: 30px; ???????} ???????.c_r .p2{ ???????} ???</style> ???</head><body> ???<div class="wrap"> ???????<div class="container"> ???????????<div class="c_l"> ???????????????<ul> ???????????????????<li><a href="#">家用电器</a></li> ???????????????????<li><a href="#">家用电器</a></li> ???????????????????<li><a href="#">家用电器</a></li> ???????????????????<li><a href="#">家用电器</a></li> ???????????????????<li><a href="#">家用电器</a></li> ???????????????????<li><a href="#">家用电器</a></li> ???????????????????<li><a href="#">家用电器</a></li> ???????????????????<li><a href="#">家用电器</a></li> ???????????????????<li><a href="#">家用电器</a></li> ???????????????????<li><a href="#">家用电器</a></li> ???????????????????<li><a href="#">家用电器</a></li> ???????????????</ul> ???????????</div> ???????????<div class="c_c"> ???????????????<img src="./images/homesmall1.png" alt="" class="center_image"> ???????????????<ul> ???????????????????<li><a href=""><img src="./images/homesmall2.png" alt=""></a></li> ???????????????????<li><a href=""><img src="./images/homesmall1.png" alt=""></a></li> ???????????????????<li><a href=""><img src="./images/homesmall2.png" alt=""></a></li> ???????????????</ul> ???????????</div> ???????????<div class="c_r"> ???????????????<div> ???????????????????<p class="p1">哈哈哈</p> ???????????????????<p class="p2">嘿嘿嘿</p> ???????????????</div> ???????????</div> ???????</div> ???</div></body></html>前端开发 - CSS - 下
原文地址：https://www.cnblogs.com/alice-bj/p/8972260.html