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>
