整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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小时内与您取得联系。
