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

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与垂直外边距合并问题

外边距合并现象