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>
