浏览器默认给边距,去除浏览器默认样式
<!doctype html><html> <head> <title>样式初始化</title> <style> /* *通配符选择器，选择页面中所有元素，内外边距都设为0*/ *{margin:0px;padding:0;} /* 多元素选择器，用”,“隔开，能够节省性能*/ body,h1,h2,h3,h4{margin:0px;} /*<!--去除列表提示符-->*/ ul,ol{list-style:none;} /*选择页面所有a标签，去掉a标签划环线*/ a{text-decoration:none;} img{broder:none}/*不设置，仅在ie的低版本中存在兼容性问题*/ </style> </head> <body> </body></html>?
元素：
- 块级元素
常见p,div,h1-h6,table,form等
默认占据一行，自动换行，支持添加高，宽
h1,p不能套块级元素
支持margin，padding
可以放任何内容，主要用来布局
- 行级元素
不自动换行，只占据内容所占的位置
不支持添加宽度和高度
不能套块级元素
margin左右有效，上下无效
padding上下无效，左右无效，只对自身有效
常见a , b , i , del等
<!doctype html><html> <head> <title>元素类型的转换</title> <style> *{margin:0px;padding:0;} div{width:400;height:400;color:red; /*隐藏元素*/ display:none; /*变为块级元素/也有显示的意思*/ dispaly:block; /*变为行内元素*/ display:inline; /*以行内元素的形式排列以块级元素样式显示*/ display:inline-block; } p{display:inline-block;} </style> </head> <body> <div> 安阳师范学院 </div> <p> 位属安阳 </p> </body></html>
## 外边距合并
```html
<!doctype html>
<html>
<head>
<title>外边距合并</title>
<style>
div,p{width:200px;height:300px;display:inline-block;
margin-botton:100px;background:red;}
p{background:blue;}
</style>
</head>
<body>
<!--垂直方向的合并：
当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大
解决方法：加border
-->
<div>
<p>
</p>
</div>
</body>
</html>
```
原文地址：https://www.cnblogs.com/Chen-Tan/p/12238168.html
时间： 2024-11-08 13:05:39