前端开发 - CSS - 下
CSS:
12.display
13.浮动介绍
14.浮动4大特性
15.float小米案例
16.浮动的产生和解决方案
17.margin塌陷问题,margin:0 auto,善于使用父亲的paddin而不是margin
18.文本属性和字体属性，多行文本垂直居中，font-family
12.display
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .box1{ /*将块级元素转为成行内元素 不能设置宽高*/ display: inline; /*转为 行内快元素*/ /*display: inline-block;*/ width: 200px; height: 40px; border: 1px solid red; } .box2{ margin-top:20px; width: 200px; height: 40px; border: 1px solid green; } span{ background-color: yellow; width: 100px; height: 40px; /*将行内元素转换为块级元素*/ display: block; /*隐藏标签，不占位置*/ /*display: none;*/ /*隐藏标签，占位置*/ visibility: hidden; } img{ width: 300px; height: 300px; /*隐藏当前的标签*/ /*display: none;*/ } </style> </head> <body> <div class="box1">内容</div> <div class="box1">内容</div> <div class="box2">内容</div> <span>alex</span> <span>alex</span> <!--form表单中的input textarea select都是行内块状元素--> <img src="./homesmall1.png" alt=""> <img src="./homesmall2.png" alt=""> </body> </html>
13.浮动介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 300px; height: 300px; background-color: red; float: left; } .box2{ width: 400px; height: 400px; background-color: green; float: left; } </style> </head> <body> <!-- 浮动是css里面布局最多的一个属性 效果：两个元素并排了，并且两个元素都能够设置宽度和高度 四个特性： 1.浮动的元素脱标 2.浮动的元素互相贴靠 3.浮动的元素有”字围“效果 4.紧凑的效果 --> <div class="box1"></div> <div class="box2"></div> </body> </html>
14.浮动4大特性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>浮动的元素脱标</title> <style type="text/css"> *{ padding: 0; margin: 0; } .box1{ width: 200px; height: 200px; background-color: red; float: left; } .box2{ width: 400px; height: 400px; background-color: yellow } span{ background-color: green; float: left; width: 300px; height: 50px; } </style> </head> <body> <!-- 浮动的元素脱标:脱离了标准文档流 小红盒子浮动了，脱离了标准流，此时小黄这个盒子就是标准文档流中 的第一个盒子，所以就渲染到了左上方。浮动元素 “飘起来了” --> <div class="box1">小红</div> <div class="box2">小黄</div> <!-- span标签不需要转换为块级元素，也能够设置宽高. 所有的标签一旦设置浮动，能够并排，都不区分行内，块状元素，设置宽高 --> <span>span标签</span> <span>span标签</span> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> span{ background-color: red; float: left; } .box1{ width: 100px; height: 400px; float: left; background-color: red; } .box2{ width: 150px; height: 200px; float: left; background-color: yellow; } .box3{ width: 300px; height: 300px; float: left; background-color: green; } </style> </head> <body> <!--<span>文字</span>--> <!--<span>文字</span>--> <!-- 如果父元素(body)有足够的空间，那么3哥紧靠着2哥，2哥紧靠着1哥，1哥靠着边 如果没有足够的空间，那么3哥就会紧靠1哥 如果没有足够的空间靠着1哥，自己往边靠 --> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字围效果</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ float: left; } p{ background-color: blue; } </style> </head> <body> <!--所谓字围效果： 当div浮动，p不浮动 div挡住了p，div的层级提高，但是p中的文字不会被遮盖，此时就形成了 字围效果 关于浮动我们强调一点，浮动这个元素，我们初期一定要遵循一个原则 永远不是一个盒子在单独浮动，要浮动就要一起浮动 --> <div> <img src="./homesmall1.png" alt=""> </div> <p> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字 </p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>紧凑效果</title> <style type="text/css"> div{ float: left; background-color: red; } </style> </head> <body> <!--收缩：一个浮动元素，如果没有设置width，那么就自动收缩为文字的宽度 (这点跟行内元素很像) 如果想制作整个网页，就是通过浮动来实现并排 --> <div> alex </div> </body> </html>
15.float小米案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米首页结构图</title> <style type="text/css"> /*布局第一步清除样式*/ *{ padding: 0; margin: 0; } /*清除ul样式,去掉点*/ ul{ list-style: none; } .topbar{ height: 40px; background-color: black; } .container1{ width: 1226px; height: 40px; /*background-color: yellow;*/ margin: auto; } .topbar_nav{ float: left; width: 375px; height: 40px; background-color: red; } .userinfo{ float: right; width: 140px; height: 40px; background-color: coral; margin-right: 15px; } .topbar_cart{ float: right; width: 120px; height: 40px; background-color: green; } .header{ width: 100%; height: 110px; } .container2{ width: 1226px; height: 110px; margin: auto; } .logo{ float: left; width: 62px; height: 55px; background-color: darkorchid; margin-top: 22px; } .nav{ float: left; width: 780px; height: 110px; background-color: burlywood; } .search{ float: right; width: 296px; height: 50px; background-color: purple; margin-top: 25px; } .contant{ width: 1226px; height: 460px; background-color: red; margin: 0 auto 14px; } .contant_list{ float: left; width: 234px; height: 460px; background-color:deepskyblue ; } .lunbo{ float: left; width: 992px; height: 460px; background-color: antiquewhite; } .shop{ width: 1226px; height: 170px; margin: 0 auto; /*background-color: yellow;*/ } .shop .channel{ float: left; width: 234px; height: 170px; background-color: yellowgreen; } .shop .adv{ float: left; width: 992px; height: 170px; } .shop .adv ul li{ float: right; width: 316px; height: 170px; background-color: red; margin-left: 14px; } </style> </head> <body> <div class="topbar"> <div class="container1"> <div class="topbar_nav">导航条</div> <div class="topbar_cart">购物车</div> <div class="userinfo">用户登录</div> </div> </div> <div class="header"> <div class="container2"> <div class="logo">logo</div> <div class="nav">导航</div> <div class="search">搜索</div> </div> </div> <div class="contant"> <div class="contant_list">内容选择列表</div> <div class="lunbo">轮播</div> </div> <div class="shop"> <div class="channel">导购</div> <div class="adv"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </div> </body> </html>
16.浮动的产生和解决方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用浮动带来的问题</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ width: 1126px; /*子元素浮动 父盒子一般不设置高度*/ /*出现这种问题 我们要清除浮动带来的影响*/ /*height: 300px;*/ } .box1{ float: left; width: 200px; height: 400px; background-color: red; } .box2{ float: left; width: 300px; height: 200px; background-color: yellow; } .box3{ float: left; width: 400px; height: 100px; background-color: green; } .father2{ width: 1126px; height: 600px; background-color: purple; } </style> </head> <body> <div class="father"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </div> <div class="father2"> </div> </body> </html>
四种解决方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>清除浮动：给父盒子设置高度</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 600px; /*给父盒子设置高度，这种方式不灵活。如果哪天公司产品突然要改， 要求父盒子高度变大，而且不仅一个地方，那么我们不可能去找源码 去手动修改*/ height: 40px; } div ul li{ float: left; width: 150px; height: 40px; background-color: red; } .box{ width: 800px; height: 200px; background-color: yellowgreen; } </style> </head> <body> <div> <ul> <li>python</li> <li>web</li> <li>linux</li> </ul> </div> <div class="box"> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>clear:both</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 600px; } div ul li{ float: left; width: 150px; height: 40px; background-color: red; } .clear{ clear: both; } .box{ width: 800px; height: 200px; background-color: yellowgreen; } </style> </head> <body> <div> <ul> <li>python</li> <li>web</li> <li>linux</li> <!--给浮动元素最后面加一个空的div，并且该元素不浮动， 然后设置clear:both 清除别人对我的浮动影响--> <!--内墙法--> <!--无缘无故增加了div元素 结构冗余--> <div class="clear"></div> </ul> </div> <div class="box"> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>伪元素清除法</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } div{ width: 600px; } div ul li{ float: left; width: 150px; height: 40px; background-color: red; } /*伪元素选择器*/ .clearfix:after{ /*必须要写这三句话*/ content: ""; clear: both; display: block; } /*很多网站使用清除浮动的方法*/ /*.clearfix:after {*/ /*visibility: hidden;*/ /*clear: both;*/ /*display: block;*/ /*content: ".";*/ /*height: 0*/ /*}*/ .box{ width: 800px; height: 200px; background-color: yellowgreen; } </style> </head> <body> <div class="clearfix"> <ul> <li>python</li> <li>web</li> <li>linux</li> </ul> </div> <div class="box"> </div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>overflow:hidden(超出部分隐藏)</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ list-style: none; } .box{ width: 600px; overflow: hidden; } .box ul li{ float: left; width: 150px; height: 40px; background-color: red; } .box2{ width: 800px; height: 200px; background-color: yellowgreen; } </style> </head> <body> <div class="box"> <ul> <li>python</li> <li>web</li> <li>linux</li> </ul> </div> <div class="box2"> </div> </body> </html>
17.margin塌陷问题,margin:0 auto,善于使用父亲的paddin而不是margin
1.margin塌陷问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin塌陷问题</title> <style type="text/css"> *{ padding: 0; margin: 0; } /*.father{*/ /*width: 400px;*/ /*overflow: hidden;*/ /*border: 1px solid gray;*/ /*}*/ .box1{ width: 300px; height: 200px; background-color: red; margin-bottom: 20px; /*float: left;*/ } .box2{ width: 400px; height: 300px; background-color: green; margin-top: 50px; /*float: left;*/ } </style> </head> <body> <div class="father"> <!--当给两个兄弟盒子 设置垂直方向上的margin 那么以较大的为准，我们称这种现象叫塌陷 浮动的盒子垂直方向不塌陷 --> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
2.margin:0 auto
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>margin：0 auto</title> <style type="text/css"> *{ padding: 0; margin: 0; } div{ width: 780px; height: 50px; background-color: red; /*水平居中盒子*/ margin: 0 auto; /*文字居中*/ text-align: center; /*float: left;*/ } </style> </head> <body> <!-- 1.使用margin:0 auto;水平居中盒子 必须有width，要有明确width，文字水平居中使用text-align: center; 2.只有标准流下的盒子才能使用margin:0 auto; 当一个盒子浮动了，固定定位了，绝对定位了，margin:0 auto 不能用了 3.margin:0 auto；居中盒子，而不是居中文本。 文字水平居中使用text-align: center; --> <div> 文字 </div> </body> </html>
3.善于使用父亲的paddin而不是margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } .father{ /*width: 300px;*/ width: 270px; /*height: 300px;*/ height: 270px; background-color: blue; /*border: 1px solid red;*/ padding-left: 30px; padding-top: 30px; } .xiongda{ width: 100px; height: 100px; background-color: orange; /*margin-left: 30px;*/ /*margin-top: 30px;*/ } </style> </head> <body> <!--因为父亲没有border，那么儿子margin实际上踹的是 "流" 踹的是行 所以父亲就掉下来 --> <div class="father"> <div class="xiongda"> </div> </div> </body> </html>
18.文本属性和字体属性，多行文本垂直居中，font-family
1.文本属性和字体属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本属性和字体属性</title> <style type="text/css"> div{ width: 300px; height: 100px; /*background-color:red;*/ border: 1px solid red; /*设置字体大小 px：像素 rem em % */ font-size: 20px; /*normal:正常 bold:粗体 bolder:更粗 lighter:更细 inherit:继承父元素字体的粗细值 100~900:设置具体粗细，400相当于normal，而700相当于bold*/ font-weight: 700; /*从第一个开始尝试找*/ font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif; /*left right center justify 两端对齐只针对英文*/ text-align: center; /* none:默认。定义标准的文本 underline:定义文本下的一条线 overline:定义文本上的一条线 line-through:定义穿过文本下的一条线 inherit:继承父元素的text-decoration属性的值 后面添加颜色可以改变线的颜色 */ text-decoration: none; color: blue; /*设置鼠标的形状*/ cursor: pointer; /*行高 规律： 当行高=盒子的高度时，文本会垂直居中 */ line-height: 100px; /*设置首行缩进 单位：以em为准 1em=font-size*/ text-indent: 2em; } </style> </head> <body> <div> 内容 </div> </body> </html>
2.多行文本垂直居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多行文本垂直居中</title> <style type="text/css"> div{ /* 当一个盒子的高度是200px的时候，若设置行高为30px，共有四行， 则(200-30*4)/2=40px,这时候需要设置padding-top:40px,并且 height：(200-40) */ width: 300px; height: 200px; /*height: 160px;*/ border: 1px solid red; /*line-height: 30px;*/ /*padding-top: 40px;*/ line-height: 50px; } </style> </head> <body> <div> 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </div> </body> </html>
3.font-family
使用font-family注意几点：
1.网页中不是所有字体都能用哦，因为这个字体要看用户的电脑里面装没装，
比如你设置： font-family: "华文彩云"; 如果用户电脑里面没有这个字体，
那么就会变成宋体
页面中，中文我们只使用： 微软雅黑、宋体、黑体。
如果页面中，需要其他的字体，那么需要切图。 英语：Arial 、 Times New Roman
2.为了防止用户电脑里面，没有微软雅黑这个字体。
就要用英语的逗号，隔开备选字体，就是说如果用户电脑里面，
没有安装微软雅黑字体，那么就是宋体：
font-family: "微软雅黑","宋体"; 备选字体可以有无数个，用逗号隔开。
3.我们要将英语字体，放在最前面，这样所有的中文，就不能匹配英语字体，
就自动的变为后面的中文字体：
font-family: "Times New Roman","微软雅黑","宋体";
4.所有的中文字体，都有英语别名，
我们也要知道： 微软雅黑的英语别名：
font-family: "Microsoft YaHei";
宋体的英语别名： font-family: "SimSun";
font属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
5.行高可以用百分比，表示字号的百分之多少。
一般来说，都是大于100%的，因为行高一定要大于字号。
font:12px/200% “宋体” 等价于 font:12px/24px “宋体”;
反过来，比如： font:16px/48px “宋体”;
等价于 font:16px/300% “宋体”
