整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ext-align: 屬性規定元素中的文本的水平對齊方式;
margin 是設置對象四邊的外延邊距，被稱為外補丁或外邊距。
這兩個屬性相信大家都知道是什么，但是在實際的應用中，總是會有一些疑問？或者不知道該怎么用，接下來上代碼
1，text-align的水平對齊
```css
.text{
width: 1000px;
height: 40px;
background: pink;
text-align: center;/* 文字水平居中*/
}
```
```html
<p class="text">月亮不睡你不睡，你是禿頭小寶貝</p>
```
如果用瀏覽器打開是能看出來文字在寬度為1000的范圍內是水平居中的，一點毛病沒有。但是如果把p標簽換成了span標簽，你會發現它就無法居中了，因為span標簽是個內聯元素，不認識寬度和高度，也就是說當前span標簽的寬度其實就是文字撐開的寬度，沒有剩余的空間，所以text-align就無法進行水平居中。
```html
<span class="text">月亮不睡你不睡，你是禿頭小寶貝</span>
```
2，margin:0 auto的對齊
我們知道margin:0 auto,是讓一個元素在哪個范圍里水平居中，那么前提還是得有一個寬度，比如
```html
.all{width: 1600px;}
.text{
width: 1000px;
height: 40px;
background: pink;
margin: 0 auto;
}
<div class="all">
<p class="text">月亮不睡你不睡，你是禿頭小寶貝</p>
</div>
```
因為.all有個寬度為1600px，所以.text的寬度1000在1600的范圍里有剩余600的空間，所以margin:0 auto是可以進行元素的水平居中，但是如果.text里沒有寬度1000，那么元素是不會進行居中的，因為p標簽是個塊元素，塊元素的寬度不寫則為100%，這時.text的寬度就變成了1600，沒有剩余空間，所以無法進行居中。
同樣，如果p標簽換成了內聯元素的標簽如span，也是無法進行居中的，因為span不認識寬度和高度
```html
.text{
width: 1000px;
height: 40px;
background: pink;
margin: 0 auto;;
float:left; }
```
如果添加了左浮動(float：left)這時margin:0 auto，也無法進行水平居中，因為給元素添加了浮動，就相當于轉了元素類型為inline-block（內聯塊元素），那么內聯元素是不支持margin:0 auto的。
總結：
1,如果是內聯元素或者內聯塊元素想讓在容器中水平居中就可以用text-align:center,前提是必須得有一個剩余空間，并且加給父元素，因為text-align屬性可以繼承。常用的內聯元素和內聯塊元素標簽有，a span b strong i em input img select textarea等
2,如果是塊元素想讓讓標簽在容器中水平居中就用margin:0 auto;前提也是要有一個范圍的剩余空間。
常用的塊元素標簽有p h1 h2 h3 h4 h5 h6 form div ul li ol dl dt dd等
s實現淘寶購物車類似功能：
主要有添加商品
增加和減少商品數量
根據增加、減少或選擇的商品獲取金額
實現商品價格的計算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>購物車</title>
</head>
<style type="text/css">
h1{
text-align: center;
}
table{
margin: 0 auto;
}
body{
font-size: larger;color: crimson;
background-image: url(img/2.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
table th,table td{
}
</style>
<body >
<h1>購物車:真劃算</h1>
<table border="1" >
<tr>
<!--文本th-->
<th>商品</th>
<th >單價</th>
<th>顏色</th>
<th>庫存</th>
<th>好評率</th>
<th>操作</th>
</tr>
<tr>
<td>面膜</td>
<td >150</td>
<td>白色</td>
<td>100</td>
<td>88%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcar(this)"/>
</td>
</tr>
<tr>
<td>口紅</td>
<td >350</td>
<td>白色</td>
<td>166</td>
<td>82%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcar(this)"/>
</td>
</tr>
<tr>
<td>鼠標</td>
<td >150</td>
<td>黑色</td>
<td>99</td>
<td>75%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcar(this)"/>
</td>
</tr>
<tr>
<td>鍵盤</td>
<td >120</td>
<td>黑色</td>
<td>50</td>
<td>80%</td>
<td align="center">
<input type="button" value="加入購物車" onclick="add_shoppingcar(this)"/>
</td>
</tr>
</table>
<h1> 購物車</h1>
<table border="1">
<thead>
<tr>
<th>商品</th>
<th >單價</th>
<th>數量</th>
<th>金額</th>
<th>刪除</th>
</tr>
</thead>
<tbody id="goods">
<!--<tr>
<td>面膜</td>
<td>150</td>
<td align="center">
<input type="button" value="-" id="jian" onclick="change(this,-1);"/>-->
<!--readonly規定輸入字段為只讀-->
<!--<input id="text" type="text" size="1" value="1" readonly="readonly" />
<input type="button" value="+" id="add" onclick="change(this,1);"/>
</td>
<td> <input id="money" size="1" value="80"></input></td>
<td align="center">
<input type="button" value="X" onclick="del(this)" />
</td>
</tr>-->
</tbody>
<tfoot>
<tr>
<td colspan="3" align="center" >總計</td>
<td id="total"></td>
<td>元</td>
</tr>
</tfoot>
</table>
</body>
<script type="text/javascript">
//this js中指當前對象
function add_shoppingcar(btn){
var tr=btn.parentNode.parentNode;
var tds=tr.getElementsByTagName("td");
var name=tds[0].innerHTML;
var price=tds[1].innerHTML;
var tbody=document.getElementById("goods");
var row=tbody.insertRow();//insertRow表格開頭插入新行
row.innerHTML="<td>"+name+"</td>"+
"<td>"+price+"</td>"+
"<td align='center'>"+
"<input type='button' value='-' id='jian' onclick='change(this,-1)' />"+
"<input id='text' type='text' size='1' value='1' readonly='readonly' />"+
"<input type='button' value='+' id='add' onclick='change(this,1)' />"+
"</td>"+
"<td>"+price+"</td>"+
"<td align='center'>"+
"<input type='button' value='X' onclick='del(this)'/>"+
"</td>"+
"</tr>"
total();
}
//增加減少數量，用n正負1來表示點擊了加減按鈕
function change(btn,n){
//獲取數量的三個input對象
var inputs=btn.parentNode.getElementsByTagName("input");
//獲取原來的數量
var amount=parseInt(inputs[1].value);
//當amount=1時不能再點擊"-"符號
//用n<0來表示點擊了減button
if(amount<=1 && n<0){
return;
}
//根據加減來改變數量
inputs[1].value=amount + n;
實現效果：
這個適合初學者的指南中，你將學習如何創建一個響應式電子郵件模板。你將跟隨逐步說明以及代碼片段設計一個在任何設備上都看起來很棒的電子郵件模板。
這個項目非常適合渴望掌握電子郵件設計基礎的新手！
（本文視頻講解：java567.com）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
