HTML+CSS知识点-周4.md

一、图片下方的空白间距

图片下方默认会出现4px的空白，(随着父级的字体大小有所不同)

解决方法1	给图片的父级添加 font-size：0; line-height:0
解决方法2	给图片添加vertical-align 属性，值不为baseline
解决方法3	把图片转换成块级元素 display：block

二、元素可见性

visibility:visible; 元素默认可见
visibility:hidden; 元素不可见，隐藏，但是占位的
display:none; 隐藏元素，不显示也不占位

三、单行文本溢出显示省略号

   .p1 {
        width: 200px;
        background-color: red;
        white-space: nowrap;/* 文本强制不换行 */
        text-overflow: ellipsis;/*文本溢出显示省略号*/
        overflow: hidden;/*必需要结合盒子溢出隐藏*/
   }

四、多行文本溢出显示省略号

方法一：利用webkit内核的扩展属性(因为只有webkit内核支持，效果好兼容性不好)

   .p2 {
        width: 200px;
        background-color: skyblue;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        /*必需要结合的属性，将元素设置为弹性盒模式*/
        -webkit-line-clamp: 4;/*设置文本显示的行数*/
        -webkit-box-orient: vertical;
        /*必需要结合的属性，设置弹性盒对象的子元素，垂直排列*/
   }

方法二：利用伪元素模拟省略号，兼容性相对好，但是效果不太好

   .p3 {
        position: relative;
        width: 240px;
        height: 120px;
        /*盒子高度要设置为line-height的倍数（表示要显示的倍数几倍就是几行）*/
        background-color: gold;
        line-height: 30px;
        /* overflow: hidden; */盒子溢出隐藏
   }

     
   .p3::after {
         position: absolute;
         right: 0;
         bottom: 0;
         /*通过定位设置到父元素的右下角*/
         content: '...';
         /*用伪元素添加...显示省略号*/
         /* background-color: gold; */
         padding-left: 20px;//是让伪元素变宽点
         background: linear-gradient(to right, transparent, gold 60%);
         /*往右渐变到60%后面40%全为gold色*/-添加渐变色使文字逐渐隐藏
    }

五、标签的嵌套规则

1、块元素里面可以嵌套块元素、行内元素、行内块(特殊情况：一些特殊语义的块标签不能再嵌套块标签，比如：h1-h6 和 p标签里面不能再嵌套 div, 一些固定搭配的标签，不能随意嵌套其他的标签比如：ul ,ol 直接子元素只能是li)

2、行内元素不能嵌套块级元素，可以嵌套行内和行内块元素( a标签（行内元素）里面可以套块元素，a标签里面不能再嵌套a标签，显示为兄弟关系不能父级 )

六、BFC

1、BFC概念（是什么？）

Block Formatting Context 块级格式化上下文

Formatting Context，指的是页面中的一个渲染区域，并且拥有一套渲染规则，他决定子标签如何定位，以及与其他标签的相互关系和作用。

BFC , 块级格式化上下文,指的是页面中的一个渲染区域，只有Block-level BOX （块级盒子）参与,该区域中拥有一套渲染规则来约束块级盒子的布局，且与外部无关。

2、如何生成BFC

以下情况是目前学到的能够生成BFC的情况:
- 根元素 html
- float属性值不为 none (ul、li 浮动本身也是一个bfc会有高度ul就不用clearfix)
- overflow 属性值不为 visible
- display 属性值为 inline-block
- position属性值为 absolute/fixed

3、BFC的特性

①、内部的块标签会在垂直方向一个接一个的放置
*②、垂直方向的距离由margin决定，属于同一个BFC的两个相邻的标签外边距会发生重叠
③、每个标签的左外边距和包含它的块的左边界相接触，有margin-left,即使浮动标签也是如此
*④、BFC区域不会与float的标签区域发生重叠 (.box1左浮动.box2不重叠在其右边紧排其不设置宽度自动占满一行去除.box1的宽度，实现右侧自适应效果)
*⑤、计算BFC的高度时，浮动子元素也参与计算(ul设overflow：hidden即会有高度，有li的高度)
⑥、BFC就是页面中的一个隔离的独立容器，容器里的子标签不会影响到外部标签，反之，外部标签也不会影响bfc内部的标签。

4、BFC解决的问题？

1）、外边距折叠


## 2.md-三、垂直外边距合并问题
### 1、垂直方向margin-top传递问题(父子关系)


- 当父元素没有padding\border\float\position\overflow时，给子元素设置margin-top会把父元素一块儿带下来即父元素也会有margin-top

- 解决: 

   - 给父元素添加1px的上padding或者border,子元素margin-top少1px

   - 可以用父元素的padding-top实现同样式的效果



### 2、相邻元素的外边距合并（兄弟关系）

- 两同级标签，上一个设置margin-bottom:40px,下一个设置margin-top:60px，最后两者之间的外边距会合并为数值较大的那个值(60px)，不是数值相加(100px)

根据特性第②条，属于同一个BFC的两个相邻的标签外边距会发生重叠( 父子外边距重叠、兄弟关系边距重叠)

解决方法：让标签处于不同的BFC区域中就不会重叠


    父子边距重叠： 给父元素设置生成BFC的属性

    兄弟边距重叠： 给其中任意一个添加一层BFC父级

2)、实现自适应两栏或三栏布局（根据特性④）

两栏布局，左侧固定宽度，右侧栏自适应（随浏览器尺寸变化缩小放大）

三栏布局，左右两栏固定宽度，中间栏自适应(随浏览器尺寸变化缩小放大)

   <!-- 两栏 :  
        .left  设置宽度，左浮动
        .right  宽度自动占满父级，设置overflow:hidden
    -->
    <div class="cols">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    
    <!-- 
        三栏：
        标签顺序：先写左右栏，再写中间栏
        .left1   设置宽度，左浮动
        .right1  设置宽度，右浮动
        .center  宽度自动占满父级，设置overflow:hidden
     -->
    <div class="cols">
        <div class="left1"></div>
        <div class="right1"></div>
        <div class="center"></div> 
    </div>

3）、防止文字环绕图片排列（根据特性④）

浮动的元素会覆盖不浮动的元素，文字会环绕图片排列，把文字所在标签设置为BFC,可以避免文字环绕

4）、清除浮动

根据第⑤条特性，计算BFC的高度时，浮动子元素也参与计算，所以可以通过bfc清除浮动，例如给浮动元素父级添加overflow:hidden;

七、布局方案

1、两栏自适应

方法一： BFC-右侧自适应设overflow：hidden;

   <!-- 两栏   
        .left  设置宽度，左浮动
        .right  宽度自动占满父级，设置overflow:hidden
    -->
    <div class="cols">
        <div class="left"></div>
        <div class="right"></div>
    </div>

方法二：左绝对定位-右侧自适应设padding-left+块级子元素inner


.left 左侧栏固定宽，设置绝对定位 position:absolute;会脱离文档流，right会被覆盖一部分

.right 右侧栏宽度自动，给其添加padding-left:200px，并且添加子元素 .inner , 把右侧栏的内容放在.inner里面 


     .left{
           position: absolute;
           left: 0;
           top:0;
           width: 200px;
           height: 300px;
           background-color: rgb(202, 150, 252);
     }
        
     .right{
           padding-left: 200px;
     }
        
     .inner{
            background-color: coral;
            height: 300px;
     }

     <div class="cols">
       <div class="left"></div>
       <div class="right">
           <div class="inner">hello world</div>
       </div>
     </div>

2、三栏自适应

方法一：BFC-左侧左浮动，右侧右浮动，中间自适应设overflow：hidden;

   <!-- 三栏
   
        标签顺序：先写左右栏，再写中间栏

        .left1  设置宽度，左浮动

        .right1  设置宽度，右浮动

        .center 宽度自动占满父级，设置overflow:hidden

    -->

    <div class="cols">
        <div class="left1"></div>
        <div class="right1"></div>
        <div class="center"></div> 
    </div>

方法二：圣杯布局

先中间后左右,中间宽100%左右固定宽,三个都左浮动,左右都设margin-left,中间main会左右部分覆盖----三个在一行

container设左右的内边距为左右侧的宽值----内缩

左右侧设相对定位 position: relative;位移到最左右侧----外翻

为了使主体内容优先加载，标签顺序 .main .left .right
.main 宽度设置 100% ，.left 宽度 200px .right 宽度240px
.main ,.left ,.right 三栏都左浮动
.left添加margin-left:-100%; 拉到最左边，.right 添加margin-left:-240px; 拉到三栏的右边，.main被左右两边栏覆盖

   圣杯布局解决覆盖问题：

 - 给父级.container添加padding:0 240px 0 200px; 这个时候.mian 宽度正常，左右两栏同时被挤到中间

 - 给.left 添加position:relative;left:-200px; 往左移

 - 给.right 添加position:relative;right:-240px; 往右移

   <div class="container">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
   </div>

   .container {
         height: 500px;
         padding: 0 240px 0 200px;
   }     
   .main {
         float: left;
         width: 100%;
         height: 100%;
         background-color: red;
   }      
   .left {
         position: relative;
         left: -200px;
         float: left;
         margin-left: -100%;
         width: 200px;
         height: 100%;
         background-color: green;
    }
    .right {
         position: relative;
         right: -240px;
         float: left;
         margin-left: -240px;
         width: 240px;
         height: 100%;
         background-color: yellow;
    }

方法三：双飞翼布局

先中间后左右,中间宽100%左右固定宽,三个都左浮动,左右都设margin-left,中间main会左右部分覆盖----三个在一行

main中间再设块子元素inner，inner设左右margin值

为了使主体内容优先加载，标签顺序 .main .left .right
.main 宽度设置 100% ，.left 宽度 200px .right 宽度240px
.main ,.left ,.right 三栏都左浮动
.left添加margin-left:-100%; 拉到最左边，.right 添加margin-left:-240px; 拉到三栏的右边.main被左右两边栏覆盖


   双飞翼解决覆盖的问题：

 - 给.main添加一层子元素 .main-inner 

 - 给 .main-inner 添加外边距  margin:0 240px 0 200px;把主体内容都放在 .mian-inner里面

   <div class="container">
        <div class="main">
            <div class="inner">
                hello
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
   </div>

   .container {
            height: 500px;
   }
   .main {
            float: left;
            width: 100%;
            height: 100%;
            background-color: red;
    }
    .left {
            float: left;
            margin-left: -100%;
            width: 200px;
            height: 100%;
            background-color: green;
    }
    .right {
            float: left;
            margin-left: -240px;
            width: 240px;
            height: 100%;
            background-color: lightseagreen;
    }
    .inner {
            margin: 0 240px 0 200px;
            background-color: skyblue;
    }

八、等高布局

多列布局，其中一列变高，其他几列等高变化

方法一：利用内外边距相抵消的原理，给每一列设置

padding-bottom: 9999px;
margin-bottom: -9999px;
把背景撑得很大，再抵消padding的占位
优点：结构简单，兼容性比较好
缺点：伪等高,需要合理控制padding-bottom、margin-bottom

   .container{
            width: 1000px;
            border: 2px solid black;
            margin: 0 auto;
            overflow: hidden;
   }
   .left{
            float: left;
            width: 300px;
            background-color: pink;
            padding-bottom: 9999px;
            margin-bottom:-9999px;
   }
   .center{
            float: left;
            width: 400px;
            background-color: lightgreen;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
   }
   .right{
            float: left;
            width: 300px;
            background-color: lightskyblue;
            padding-bottom: 9999px;
            margin-bottom: -9999px;
   }

方法二: 给每个多列添加对应多层共同父级,再设margin-left

有几列添加几层父级，给父级设置不同的背景色，通过margin调整几层父级的位置,错开呈现多列背景。最后通过负margin把内容列调整到对应的背景上。
优点：真等高，兼容性好
缺点：结构复杂,理解相对困难

   <div class="container">
        <div class="bg2">
            <div class="bg3 clearfix">
                  <div class="left">
                  <div class="center">
                  <div class="right">
            </div>
        </div>
   </div>

   .container {
            width: 1000px;
            border: 2px solid black;
            margin: 0 auto;
            background-color: pink;
   }
   .bg2 {
            background-color: lightgreen;
            margin-left: 300px;
   }      
   .bg3 {
            background-color: lightskyblue;
            margin-left: 400px;
   }
   .left {
            float: left;
            width: 300px;
            margin-left: -700px;
   }
   .center {
            float: left;
            width: 400px;
            margin-left: -400px;
   }     
   .right {
            float: left;
            width: 300px;
   }

九、常见兼容问题处理

1、ie中图片边框问题

ie中图片放在a标签中会显示边框

解决方法

    img{
        border:none;
    }

2、ie8以下背景简写属性语法兼容

背景简写属性的每个值之间应该添加空格，如果出现如下遗漏空格的情况，标准浏览器时可以正常显示，但是再ie8及以下浏览器就不能显示图片

    background: url("...")no-repeat center;

解决方法：按照标准语法，在多个值之间添加空格

    background: url("...") no-repeat center;

3、透明度兼容

rgba() 透明颜色 ie低版本不支持
opacity:0.5; 标准浏览器支持，ie低版本不支持
filter:alpha(opacity=50) ie支持

4、ie低版本的兼容问题（了解）

① ie6及以下浏览器，定义小高度的盒子失效

解决方法

   .box{
        height:1px;
        font-size: 0;//添加
        line-height: 0;//添加
        overflow: hidden;//添加
   }

② ie6浏览器中，标签浮动产生双倍外边距。

解决方法：给浮动元素添加 _display:inline;

   li{
        float:left;
        margin-left:10px;
        _display:inline;    /* 针对ie6有效 */
   }

③ ie7及以下浏览器，子元素设置相对定位，父元素的overflow:hidden;失效

解决方法：给父元素也添加position:relative;

  .parent{
          position: relative;
          overflow: hidden;
   }
  .child{
          position: relative;
          left: 150px;
   }

④ ie7及以下浏览器，块元素转行内块，不在一行显示

解决方法

   div{
        display:inline-block;
        *display:inline;//添加
        *zoom:1;//添加
   }

⑤ ie7及以下浏览器，li中出现两个及以上子元素浮动时，li之间出现空白问题

解决方法：给li添加vertical-align:top;

   li{
        vertical-align:top;
   }

补充:
    如果需要从服务器环境中打开页面,可以安装插件  live server , 打开页面选择 open with live Server

十、css Hack技术

css Hack是通过一些特殊方式去处理不同浏览器之间的兼容问题，某些情况使用css Hack处理兼容能事半功倍。滥用css Hack会影响页面性能，并且维护困难，所以应当避免大量使用css Hack技术。

1、条件Hack

ie从10及以上的版本都不支持条件hack，所以以下代码在ie9及以下才会显示

    <!--[if ie]>

        <p>这个段落只有ie会显示</p>

    <![endif]-->

关键字

大于 gt 大于等于 gte

    <!--[if gt ie 8]>

        <p>这个段落只有ie8以上会显示</p>

    <![endif]-->

小于 lt 小于等于 lte

    <!--[if lt ie 8]>

        <p>这个段落只有ie8以下会显示</p>

    <![endif]-->

等于

    <!--[if ie 8]>

        <p>这个段落只有ie8会显示</p>

    <![endif]-->

2、属性级hack

属性级hack就是给css的属性添加特殊符号来处理不同版本浏览器的兼容

    _ : ie6及以下版本浏览器识别

    * ：ie7及以下版本浏览器识别

    \0: ie8及以上浏览器识别


   .box{
        background-color: red;  /*所有浏览器识别*/
        _background-color:yellow;
        *background-color:lightblue;
        background-color: hotpink\0;
   }

3、选择符级hack

*html 选择ie6及以下浏览器

*+html 只选择ie7浏览器

   .box{
        background-color: red;
   }
   *html .box{
            background-color: yellow;
   }
   *+html .box{
            background-color: lightblue;
   }

十一、滑动门技术

为了使特殊形状的背景能够自适应元素中文本内容得多少，出现滑动门技术。比如微信导航。

主要使利用背景定位和padding撑开盒子宽度。

具体实现：先给a标签，给a背景图定到左边，给a添加合适得padding-left，再往a当中添加span标签，给span标签设置同样得背景定位在右边，给span添加padding-right (a和span都要转换成块级)

   <ul>
        <li>
            <a href="#">
                <span>首页页</span>
            </a>
        </li>
        <li>
            <a href="#">
                <span>帮助与反馈</span>
            </a>
        </li>
   </ul>

   ul li a{
        display: block;
        padding-left: 16px;
        background: url("https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/3w4CwHw.png") no-repeat left;

   }

   ul li a span{
        display: block;
        background: url("https://res.wx.qq.com/a/wx_fed/weixin_portal/res/static/img/3w4CwHw.png") no-repeat right;
        padding-right: 16px;
   }

十二、网页tdk设置

title设置：网页的标题，尽量强调重点的内容，首页一般写整个网站的标题和整体概述，其他页面概括本页面的主题，（注意：每个页面的标题不要）
description 设置：网页描述，需要高度概括网页内容，切忌过分堆砌，不能太长，每个页面不能相同（不是必须设置，根据具体页面要求）
keywords 设置：网页关键字，列举出几个页面的重要的关键字

   <title>XX商城-手机,电脑...</title>
   
   <meta name="description" content="....">
   
   <meta name="keywords" content="...">

网站icon设置
生成icon图标 http://www.bitbug.net/

   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">