论坛

标题: h1{ background-color:#96C; margin:0;}值为0还是没反应！ [打印本页]

作者: 好勤奋的小孩 时间: 2017-7-23 21:18
标题: h1{ background-color:#96C; margin:0;}值为0还是没反应！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2.4.盒子模型padding内边距margin外边距</title>
<style>
.box1{background-color:#03C;width:500px;height:400px;padding:40px 10px 20px 5px;
}
.box2{background-color:#C30;width:500px;height:400px;padding:40px 10px 20px 5px;margin:30px;
}
.box3{background-color:#0F0;width:500px;height:400px;padding:40px 10px 20px 5px;
}
p{ background:#F36;}
h1{ background-color:#96C; margin:0;}
h2{ background-color:#FF0;}
body{margin:0;}
</style>
</head>
<body>
<p>div是元素贴元素，但是p和h标签不会自动紧贴，他们标签自带有间隙</p>

<h1>div是元素贴元素，但是p和h标签不会自动紧贴，他们标签自带有间隙,去掉间隙的办法就是margin：0，即可靠边贴，整个大页面最顶的是整个body设置为margin：0，即可顶部贴边</h1>

<p>div是元素贴元素，但是p和h标签不会自动紧贴，他们标签自带有间隙</p>

<h2>div是元素贴元素，但是p和h标签不会自动紧贴，他们标签自带有间隙</h2>

<p>div是元素贴元素，但是p和h标签不会自动紧贴，他们标签自带有间隙</p>

<h2>做页面前记得先设置通用选择器*{margin:0;padding:0}，页面居中的方法：{margin:0 auto;}自动居中，适合任何浏览器</h2>

<div class="box1">盒子模型,假如style中没设置宽高，则盒子的大小跟着文字的多少变动，所以要设置内外边距，padding的各种值，
1、如果padding的值是一个值，那么代表上下左右内边距都相同，padding：10px；
2、如果有两个值，则第一个代表值上下内边距，第二个值代表左右；padding：10px  20px；
3、如果有三个值，第一个值代表上，第二个值代表左右，第三个值代表下；padding：10px 20px 10px；
4、如果有四个值，第一个值上，第二个值右，第三个值下，第四个值左；padding：10px 20px 10px 30px；顺时针记忆
5、单独定义某一个内边距，如只调左内边距，padding-left:200px;调其他单边同理left right top bottom。
排后面的值会覆盖前面的值，
原来box盒子是500px，加上padding左右是20px后，整个盒子的宽会变成540px，所以加padding后要在width剪掉padding所占的值，即width应为460px！
</div>
<div class="box2">盒子模型,假如style中没设置宽高，则盒子的大小跟着文字的多少变动，所以要设置内外边距，padding的各种值，
1、如果padding的值是一个值，那么代表上下左右内边距都相同，padding：10px；
2、如果有两个值，则第一个代表值上下内边距，第二个值代表左右；padding：10px  20px；
3、如果有三个值，第一个值代表上，第二个值代表左右，第三个值代表下；padding：10px 20px 10px；
4、如果有四个值，第一个值上，第二个值右，第三个值下，第四个值左；padding：10px 20px 10px 30px；顺时针记忆
5、单独定义某一个内边距，如只调左内边距，padding-left:200px;调其他单边同理left right top bottom。
排后面的值会覆盖前面的值，
原来box盒子是500px，加上padding左右是20px后，整个盒子的宽会变成540px，所以加padding后要在width剪掉padding所占的值，即width应为460px！
上下左右外边距：margin:30px，左右上下与padding同样，不同的是margin外边距不会改变盒子的大小
</div>
<div class="box3">盒子模型,假如style中没设置宽高，则盒子的大小跟着文字的多少变动，所以要设置内外边距，padding的各种值，
1、如果padding的值是一个值，那么代表上下左右内边距都相同，padding：10px；
2、如果有两个值，则第一个代表值上下内边距，第二个值代表左右；padding：10px  20px；
3、如果有三个值，第一个值代表上，第二个值代表左右，第三个值代表下；padding：10px 20px 10px；
4、如果有四个值，第一个值上，第二个值右，第三个值下，第四个值左；padding：10px 20px 10px 30px；顺时针记忆
5、单独定义某一个内边距，如只调左内边距，padding-left:200px;调其他单边同理left right top bottom。
排后面的值会覆盖前面的值，
原来box盒子是500px，加上padding左右是20px后，整个盒子的宽会变成540px，所以加padding后要在width剪掉padding所占的值，即width应为460px！
</div>
</body>
</html>

作者: 潜意式 时间: 2017-7-24 19:18
HTML标题居中可以用text-align:center属性，因为h系列标签本身为块级元素，设置这个属性后就能让文字居中。

欢迎光临论坛 (http://bbs.qinxue.com/)