讲课笔记3——浮动margin失效的问题默认样式重置

Posted 2020-09-02 Booo

EO:搜索引擎优化，一般在网页里面只写一个h1标签，搜索引擎可以通过该h1标签里面的内容搜索你所写的网页(a标签和img标签最好写上title属性)
标准写法：
.logo {
        text-decoration: none;
        width: 144px;
        height: 62px;
        background: url(logo.jpg) no-repeat;
    }
a {
    display: block;
    text-indent: -999em;
    overflow:hidden;
}
<h1><a href="http://www.baidu.com" class="logo">淘宝网</a></h1>

*********************************************************************

行内元素不支持text-indent,line-height

margin会出现的问题：
1.margin-top和margin-bottom对行内元素会失效，left和right是起作用的。

2.对行内元素设置padding-top或者是padding-bottom的时候，文字本身的位置是不会发生变化的，但是由于设置了padding，盒子的高度是变化的。

3.一般不对行内元素设置padding-top,padding-bottom。

 

*********************************************************************

margin拖拽问题：给子元素设置margin-top，父元素跟着子元素移动

解决margin拖拽问题的问题：
给父元素设置overflow属性，属性值为hidden(overflow: hidden;)

 

*********************************************************************

 

盒子左右居中：    margin：0 auto；

 

*********************************************************************

<style>
        body,h1,h2,h3,h4,h5,h6 {font-size:20px; font-family:"微软雅黑",arial,sans-serif;}

        body,p,h1,h2,h3,h4,h5,h6,dl,dd,form,select {margin:0;}
        em{font-style:normal;}

        ol,ul {list-style:none; padding:0; margin:0;}
        a {text-decoration:none;}
        a:hover {text-decoration:underline;}
        img {border:none; vertical-align:top;}

        input {margin:0; padding:0;}
        textarea {margin:0; padding:0; resize:none; overflow:auto; outline:none;}

        th,td{padding:0;}
        table{border-collapse:collapse;}
               
        .clearfix:after { content:""; display:block; clear:both; }
        .clearfix { zoom:1; }
        .fl { float:left; }
        .fr { float:right; }

        html { overflow-x:hidden; }
   
    </style>