admin管理员组

文章数量:1122852

专题

它们本身的宽度如何计算 高度如何计算----当时的想法是？

以后补 他们三个能否嵌套块级元素 行内元素

还有特殊的a标签

块级元素

块级元素高由内容撑起，宽默认100%，可以自己设置元素宽高。

块级元素独占一行，特点就是只要块级元素出现了，就得清场，有它的空间其他的东西别想出现。

块级元素内边距外边距上下左右都有效。

块级元素可以嵌套

块级元素的默认排列方式为竖着。

1.宽高

块级元素的高是由内容撑起，宽度默认100%，网页有多大，宽度就有多大。

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;}</style></head><body><div></div></body>
</html>

 宽高设置有效

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;width:100px;height: 50px;}</style></head><body><div></div></body>
</html>

高度对比--是否有内容

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;}</style></head><body><!-- 无内容 --><!-- <div></div> --><!-- 有内容 --><div>1111</div></body>

2.换行

块级元素独占一行，即使一行有剩余空间，自己不需要，也不让别人用

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;width:100px;height: 50px;}</style></head><body><div>1111</div><div>2222</div></body>
</html>

只有元素浮动/定位或把自己设为行内元素/行内块元素才会一行有多个div

浮动 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;width:100px;height: 50px;float: left;}</style></head><body><div></div><div></div></body>
</html>
定位 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;width:100px;height: 50px;}.xx{position: absolute;top:8px;left:120px;}</style></head><body><div></div><div class="xx"></div></body>
</html>
行内元素 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;width:100px;height: 50px;/* 设为行内元素 行内元素宽高由内容决定 */display: inline;}</style></head><body><div>111</div><div class="xx">222</div></body>
</html>

行内块 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border:1px solid #008000;width:100px;height: 50px;/* 行内块 */display: inline-block;}</style></head><body><div></div><div></div></body>
</html>

 3.内外边距

注意:这里的外边距会出现一个外边距塌陷问题。

 外边距塌陷

外边距塌陷

 已知div的上下外边距都是10px，那么一个div高为52px,两个div高为104px,加上div中间的外边距总和20px,那么总高为124px, 但是图上高为114px。--------这就是外边距塌陷

面对这种情况，解决办法如下，在一个margin-top/bottom上就直接设置好自己想要的外边距。

比如直接在第一个div上设置margin-top为20px

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 消除页面的内外边距 */body,html{padding: 0;margin: 0;}div{border:1px solid #008000;width:100px;height: 50px;/* 上外边距为10px */margin-top: 10px;/* 下外边距为10px */margin-bottom: 10px;}</style></head><body><div></div><div></div></body>
</html>

外边距

块级元素可以设置上下左右外边距，上下左右外边距都生效。不过设置上下左右边距时，页面效果上边距和左边距更强势些，先依从它们。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 消除页面的内外边距 */body,html{padding: 0;margin: 0; }div{border:1px solid #008000;width:100px;height: 50px;/* 上外边距为10px */margin-top: 10px;/* 下外边距为10px */margin-bottom: 10px;margin-left:10px;margin-right:10px;}</style></head><body><div></div><div></div></body>
</html>

 内边距

块级元素设置可以设置内边距，上下左右内边距都有效。

设置内边距以前

设置内边距以后 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 消除页面的内外边距 */body,html{padding: 0;margin: 0; }div{border:1px solid #008000;width:100px;height: 50px;padding-top: 10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;}</style></head><body><div>1111</div><div>2222</div></body>
</html>

4.嵌套

块级元素可以嵌套

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/* 消除页面的内外边距 */body,html{padding: 0;margin: 0; }{width:300px;height: 100px;border: 1px solid #000000;}.dd{width:100px;height: 50px;border: 1px solid #FFC0CB;}</style></head><body><div class="cc"><div class="dd"></div></div></body>
</html>

 5.默认排列方式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width:100px;height:100px;border: 1px solid #1E90FF;}</style></head><body><div></div><div></div><div></div></body>
</html>

行内元素

行内元素没有宽高，设置宽高也无效，它的宽高由内容撑起

行内元素共用一行，空间不够才换行。就跟大家平时挤公交地铁一样，只要挤的进去，就绝不等下一辆。

行内元素内边距上下左右都有效，外边距左右有效，上下无效。

行内元素可以嵌套

行内元素的默认排列方式为横着。

行内元素不会随着网页缩放。

1.宽高

行内元素设置宽高无效

设置宽高前 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered;}</style></head><body><span></span></body>
</html>
设置宽高后 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered;width:10px;height: 10px;}</style></head><body><span></span></body>
</html>

 宽高由内容撑起

标题 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered;width:10px;height: 10px;}</style></head><body><span>1111</span><span>22</span></body>
</html>

2.换行

行内元素不会独占一行，在同一行内会有多个行内元素，当一行占满，才会换行。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered;width:10px;height: 10px;}</style></head><body><span>1111</span><span>22</span><span>33333333333333333333333333</span></body>
</html>

一行占满问题？浏览器一行是指宽度，网页宽度由滑动条控制，理论上来说就是无限的

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered;width:10px;height: 10px;}</style></head><body><span>1111</span><span>22</span><span>33333333333333333333333333</span><span>4444444444444444444444444444444444444444444444444444444444444444</span><span>555555555555555555555555555555555555555555555555555555555555</span><span>666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666666</span><span>77777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777777666666666666777777777777777777777777777777777777777777777777777777777777777777777777777</span><span>888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888888</span></body>
</html>

希望它换行可以把把转换为块级元素。

3.内边距

上下左右内边距设置都有效

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{padding: 100px;}span{border:1px solid orangered;	padding-top:10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;}</style></head><body><span>1111</span></body>
</html>

 注意：如果不在body里加内边距，上边框线就看不见。

 

4. 外边距

左右有效 上下无效

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin:0;padding:0;}span{border:1px solid orangered;	margin-top:40px;margin-bottom: 40px;margin-left: 40px;margin-right: 40px;}</style></head><body><span>1111</span></body>
</html>

5.不会随着网页变化，保持原样

 6.嵌套

行内元素能嵌套

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered;	margin-top:40px;margin-bottom: 40px;margin-left: 40px;margin-right: 40px;}{border:1px solid cornflowerblue;}</style></head><body><span>1111<span class="cc">22222</span></span></body>
</html>
试着嵌套块级元素，也不知道成功没 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered;	margin-top:40px;margin-bottom: 40px;margin-left: 40px;margin-right: 40px;}{border:1px solid cornflowerblue;width:300px;height: 300px;}</style></head><body><span>1111<div class="cc">22222</div></span></body>
</html>

7.默认排列方式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span{border:1px solid orangered;	}</style></head><body><span>1111</span><span>2222</span><span>333</span><span>4444</span></body>
</html>

行内块元素

行内块元素没有宽高，宽高可由内容撑起，元素设置宽高有效

行内块元素共用一行，空间不够才换行。就跟大家平时挤公交地铁一样，只要挤的进去，就绝不等下一辆

行内块元素内边距上下左右都有效，外边距左右有效，上下无效

行内块元素可以嵌套

行内块元素的默认排列方式为横着

行内块元素不会随着网页缩放

1.宽高

行内块自身没有宽高，宽高由内容撑起来，设置宽高有效。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{display: inline-block;border:1px solid #008000;}</style></head><body><div></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{display: inline-block;border:1px solid #008000;}</style></head><body><div>111</div></body>
</html>


<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin: 0;padding: 0;}div{display: inline-block;border:1px solid #008000;color:orangered;width:100px;height:100px;}</style></head><body><div>111</div></body>
</html>

2.换行

行内块元素也是不会独占一行，在同一行内会有多个行内元素，当一行占满，才会换行。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{display: inline-block;border:1px solid #008000;}</style></head><body><div>111</div></body>
</html>

3.内边距

上下左右内边距设置有效

注意：奇怪今天的浏览器自带空隙了

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{display: inline-block;border:1px solid #008000;padding-top:10px;padding-bottom: 10px;padding-left: 10px;padding-right: 10px;}</style></head><body><div>111</div></body>
</html>

4.外边距

行内块元素上下左右外边距都有效

设外边距前 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin: 0;padding: 0;}div{display: inline-block;border:1px solid #008000;}</style></head><body><div>111</div></body>
</html>

设外边距后 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin: 0;padding: 0;}div{display: inline-block;border:1px solid #008000;margin-top: 10px;margin-bottom: 10px;margin-left:10px;margin-right: 10px; }</style></head><body><div>111</div></body>
</html>

5.是否会随网页自动缩放

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin: 0;padding: 0;}div{display: inline-block;border:1px solid #008000;}</style></head><body><div>111</div></body>
</html>

6.能否嵌套

可以嵌套

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin: 0;padding: 0;}div{display: inline-block;border:1px solid #008000;}</style></head><body><div>111<div>22222</div></div></body>
</html>

7.多个排列一起默认方式

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{margin: 0;padding: 0;}div{display: inline-block;border:1px solid #008000;color:orangered;}</style></head><body><div>111</div><div>22222</div><div>3333</div></body>
</html>

本文标签： 专题

版权声明：本文标题：专题 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1701511952a423056.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。