CSS中的居中对齐
内容居中对齐：
text-align:center盒子居中对齐：
margin:0 auto;
行高
浏览器默认文字大小：16px
行高：是基线与基线之间的距离
行高=文字高度+上下边距
注意：一行文字行高和父元素高度一致的时候，垂直居中显示。
行高的单位
| 行高单位 | 文字大小 | 值 |
|---|---|---|
| 20px | 20px | 20px |
| 2em | 20px | 40px |
| 150% | 20px | 30px |
| 2 | 20px | 40px |
总结：单位除了像素以为，行高都是与文字大小乘积。
| 父行高单位 | 父元素文字大小 | 子元素文字大小 | 子行高 |
|---|---|---|---|
| 40px | 20px | 30px | 40px |
| 2em | 20px | 30px | 40px |
| 150% | 20px | 30px | 30px |
| 2 | 20px | 30px | 60px |
总结：
上节已经讲过：行高大小会被继承
不带单位时，行高是和子元素文字大小相乘，em和%的行高是和父元素文字大小相乘。行高以像素为单位，就是定义的行高值。
推荐行高使用像素为单位。
盒子模型
边框 border
Border-top-style:
solid 实线
dotted 点线
dashed 虚线Border-top-color 边框颜色
Border-top-width 边框粗细
.box{ width: 300px; height: 390px; background: #999; border-top-style: solid; /*边框线型*/ border-top-color: red; /*边框颜色*/ border-bottom-style: dotted; border-bottom-color: green; border-left-color: yellow; border-left-style: dashed; border-left-width: 10px; }边框属性的连写
特点：没有顺序要求，线型为必写项。
border-right: blue solid 5px;
四个边框值相同的写法
border: blue solid 5px;
特点：没有顺序要求，线型为必写项。
边框合并
border-collapse:collapse;
<head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table{ width: 500px; height: 300px; border:red solid 1px; border-collapse: collapse; } td{ border:red solid 1px; } </style> </head> <body> <table cellspacing="0"> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html> 
边框合并，细线表格 
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .username{ border:0 none; outline-style: none;/*去掉轮廓线，轮廓线就是当输入框获得焦点时的边框线 */ background: #eeccee; border: 1px dashed green; } .username:focus{ background: #ddeedd; } .email{ border: 0 none; outline-style: none; border-bottom: 1px dotted red; } .search{ border: 0 none; outline-style: none; border:1px solid #999; background: url('search.png') no-repeat right; } </style> </head> <body> <label for="myuser">用户名：</label><input type="text" class="username" id="myuser"><br/> 邮箱：<input type="text" class="email"><br/> 搜索一下：<input type="text" class="search"> </body> </html>特别注意：
获取焦点
轮廓线
取消边框的兼容性好的写法
label for id的用法
内边距
padding-left | right | top | bottom
.box{ padding-left: 10px; padding-right: 20px; padding-top: 30xp; padding-bottom: 50px; }padding连写
padding: 20px; 上右下左内边距都是20px
padding: 20px 30px; 上下20px 左右30px
padding: 20px 30px 40px; 上内边距为20px 左右内边距为30px 下内边距为40
padding: 20px 30px 40px 50px; 上20px 右30px 下40px 左 50px
内边距撑大盒子的问题
影响盒子宽度或高度的因素：
内边距影响盒子的宽度或高度
边框影响盒子的宽度或高度
盒子的宽度=定义的宽度+边框宽度+左右内边距
提问：
一个大盒子宽度500px,高度300px.一个小盒子宽度300px,高度150px.请画出让小盒子在大盒子内部居中。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .min{ width: 300px; height: 150px; background: #eeffee; } .box{ width: 300px; height: 150px; padding-left: 100px; padding-top: 75px; padding-bottom: 75px; padding-right: 100px; background: #ffeeff; } </style> </head> <body> <div class="box"> <div class="min"></div> </div> </body> </html> 
继承的盒子一般不会被撑大
包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。(水平方向不会被撑大，垂直方向会)
练习
新浪导航条
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .nav{ height: 40px; background: #eee; border-top: 3px orange solid; border-bottom:1px solid #aaa; } .nav-con{ width: 1000px; /*background: #aaa;*/ height: 100%; margin 0 auto; } a{ font:12px 微软雅黑; color: #444; display: inline-block; height: 40px; text-decoration: none; line-height: 40px; padding: 0 12px; } a:hover{ background: #bbb; } </style> </head> <body> <div class="nav"> <div class="nav-con"> <a href="#">设为首页</a> <a href="#">手机新浪网</a> <a href="#">移动客户端</a> </div> </div> </body> </html> 
外边距
margin-left | right | top | bottom
外边距连写
margin: 20px; 上下左右外边距20PX
margin: 20px 30px; 上下20px 左右30px
margin: 20px 30px 40px; 上20px 左右30px 下 40px
margin: 20px 30px 40px 50px; 上20px 右30px 下40px 左50px
垂直方向外边距合并
垂直方向的两个盒子一个设置上外边距，一个设置下外边距，取的设置较大的值。
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .one{ width: 200px; height: 200px; background: orange; margin-bottom: 20px; } .two{ width: 200px; height: 180px; background: yellow; margin-top: 50px; } </style> </head> <body> <div class="one"></div> <div class="two"></div> </body> </html>1. 实践上上面两个盒子垂直方向间距只有50px;因为浏览器做了优化。
2. 边距合并问题只发生在块级元素之间
嵌套的盒子外边距塌陷
嵌套的盒子，直接给子盒子设置处置方向外边距的时候，会发生外边距塌陷
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .father{ width: 300px; height: 300px; background: pink; } .son{ width: 100px; height: 100px; background: yellow; margin-top: 80px; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html> 
外边距塌陷
解决方法:
1 给父盒子设置边框
2 给父盒子overflow:hidden;
bfc 格式化上下文
行内元素可以定义左右的内外边距，上下会被忽略掉。
行内块可以定义内外边距
Fireworks的基本使用
新建文件 ctrl+n
打开文件 ctrl+o
调出和隐藏标尺 ctrl+r
清除辅助线： 视图---辅助线----清除辅助线
放大镜 z 放大镜状态下alt+鼠标左键 缩小
抓手 快捷键 空格
测量距离：
先拉出2根辅助线
切换到指针工具
将光标放到2根辅助线之间，按住shift键
练习
行业动态
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .news{ width: 238px; height: 166px; border: 1px solid #D9E0EE; border-top: 3px solid #FF8400; margin: 0 auto; } .news-title{ height: 35px; line-height: 35px; padding-left: 12px; border-bottom: 1px solid #D9E0EE; } ul,li{ list-style: none; margin: 0; padding: 0; } ul{ margin-top: 8px; } li{ padding-left: 19px; background: url('li_bg.jpg') no-repeat 9px 11px; line-height: 23px; font-size: 13px; } a{ text-decoration: none; } a:link{ color: #666; } a:hover{ color: blue; } </style> </head> <body> <div class="news"> <div class="news-title">行业动态</div> <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> </ul> </div> </body> </html>爱宠知识
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body , ul , li{ margin: 0; padding: 0; } .content{ width: 260px; height: 327px; margin: 0 auto; border: 1px solid #009900; background: url('bg.gif'); } .content .title{ height: 23px; margin: 10px 0px 5px 10px; border-left: 4px solid #C9E143; font: 16px 微软雅黑; padding-left: 11px; color: #fff; } ul{ background: #fff; /*height: 279px;*/ margin-left: 10px; margin-right: 10px; } ul,li{ list-style: none; } li{ height: 30px; border-bottom: 1px dashed #999; margin:0 10px; background: url('tb.gif') no-repeat left center; padding-left: 16px; } li a{ line-height: 31px; text-decoration: none; color: #0066CC; } </style> </head> <body> <div class="content"> <div class="title">爱宠知识</div> <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> </ul> </div> </body> </html>个人资料
<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*body{ margin: 0; padding:0; }*/ .content{ width: 208px; height: 384px; margin: 0 auto; border:1px solid #CECECE; } .title{ background: #ECEDEE; padding-left: 9px; height: 25px; font:12px/25px 微软雅黑; color: #686868; } .content .pic{ width: 180px; height: 180px; border: 1px solid #CECECE ; margin:10px 0px 11px 13px; } .content .blink{ height: 31px; text-align: center; font-size: 14px; color: #9090AA; } .content .blink img{ margin-left: 10px; } .content .weibo{ height: 38px; text-align: center; border-bottom: 2px dotted #D1D1D1; margin:0px 14px 15px 13px; } .content .weibo input{ background: #EEEEF2 url('vb.jpg') no-repeat 2px center; width: 69px; height: 23px; } .content .friend{ text-align: center; margin-left: 13px; margin-right: 14px; /*border-bottom: 1px dotted #D1D1D1;*/ } .content .friend input{ width: 69px; height: 23px; margin-bottom: 5px; } </style> </head> <body> <div class="content"> <div class="title"> 个人资料 </div> <div class="pic">  </div> <div class="blink"> V闪闪  </div> <div class="weibo"> <input type="button" value="微博"> </div> <div class="friend"> <input type="button" name="" value="加好友"> <input type="button" name="" value="发纸条"> <input type="button" name="" value="写留言"> <input type="button" name="" value="加关注"> </div> </div> </body> </html>
作者：对方不想理你并向你抛出一个异常
链接：https://www.jianshu.com/p/48f52e9a2fe1
共同学习，写下你的评论
评论加载中...
作者其他优质文章
