样式初始化+元素类型+外边距合并

Posted chen-tan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了样式初始化+元素类型+外边距合并相关的知识,希望对你有一定的参考价值。

浏览器默认给边距,去除浏览器默认样式

<!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>
?

元素:

  1. 块级元素

    常见p,div,h1-h6,table,form等

    默认占据一行,自动换行,支持添加高,宽

    h1,p不能套块级元素

    支持margin,padding

    可以放任何内容,主要用来布局

  2. 行级元素

    不自动换行,只占据内容所占的位置

    不支持添加宽度和高度

    不能套块级元素

    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>

```

 

以上是关于样式初始化+元素类型+外边距合并的主要内容,如果未能解决你的问题,请参考以下文章

框模型中的外边距合并问题

[CSS]垂直外边距合并的问题

margin代码啥意思

解决垂直外边距合并的几种办法

BFC与垂直外边距合并问题

外边距合并现象