【样式初始化、隐藏元素、display:block、visibility、百分比单位、最大最小宽高】04

15. 浮动问题补充

table在布局时也可以拥有漂亮的颜值，但却有以下的缺点：

• 太深的嵌套，如table>tbody>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了代码量
• 灵活性差，比如要将tr设置border等属性，是不行的，得通过td
• 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱
• 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱
• table需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间
• 不够语义，无论是计算机还是阅读代码的人在阅读时都觉得非常困难

16. 样式初始化

1. 很多标记，尤其是文字标记会有默认样式，而且部分默认样式在不同的浏览器中还会显示不同的效果，为了统一样式，需要对浏览器默认样式进行初始化
2. 通过浏览器的查看器中的布局查看元素是否有默认样式，我们常见的默认样式
   • body、p、ul、ol、dl、h1-h6等元素的外边距
   • ul、ol、dl等元素的内边距
   • h1-h6、b、strong等元素的加粗
   • i、em等元素的斜体
   • a元素各个状态的颜色和划线样式
   • li元素的list-style
3. 预定义样式，几乎大部分页面里都会用到的样式，适合放在我们初始化浏览器的位置：
   • 设置全部元素盒模型类型、字体大小、字体颜色
   • 禁止浏览器显示横向滚动条
   • 闭合浮动class类
   • 设置有高度的内联元素与文字的对齐方式

*{
    box-sizing: border-box;
    /* 检索量比较大，消耗性能 */
}

body{
    font-size: 14px;
    /* 字体样式继承 */

    line-height: 1.2;

    font-family: "微软雅黑"，"黑体",Arial, Verdana;

    color: #000; 
    /* 十六进制可以进行简写 */

    overflow-x: hidden;
    /* 横向滚动条清除 */
}

body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl{
    margin: 0;
}

/* 默认内填充 */
ul,ol{
    padding: 0;
    /* 继承 */
    list-style: none;
}

/* 默认为加粗 */
h1,h2,h3,h4,h5,h6,b,strong{
    font-weight: normal;
}

/* 斜体 */
i,em{
    font-style: normal;
}

/* 清除a标记的默认样式 */
a{
    color: black;
}

a:link{
    color: black;
    text-decoration: none;
}

a:visited{
    color: black;
    text-decoration: none;
}

a:hover{
    color: black;
    text-decoration: none;
}

a:active{
    color: black;
    text-decoration: none;
}

/* 清除浮动 */
.clearfix::after{
    display: block;
    content: "";
    clear: both;
}

17. 隐藏元素的方法

• display:none/block；通过让元素在页面不占位置的方式隐藏元素(无法获得hover状态)
• visibility:hidden/visible；通过让元素不可见隐藏元素(元素在页面中依然占位置，但是无法获得hover状态)
• opacity:0-1;改变元素的透明度，0为完全透明，1为不透明(完全透明时可以获得hover状态)

<div class="hidden1">123</div>
<div class="hidden2">456</div>

.hidden1{
    width: 200px;
    height: 200px;
    background-color: rgb(255,0,0);
    /* 不占位 */
    display: none; 
}
.hidden2{
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
}
.hidden1:hover{
    display: block;
    /* 不占位，摸不到 */
}

.hidden1{
    width: 200px;
    height: 200px;
    background-color: rgb(255,0,0);
   /* 不可见，依然占位 */
   visibility: hidden;
}
.hidden2{
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
}
.hidden1:hover{
    display: block;
    /* 占位，摸不到 */
}

.hidden1{
    width: 200px;
    height: 200px;
    background-color: rgba(255,0,0,0);
}
.hidden2{
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
}
.hidden1:hover{
    display: block;
    /* 占位，摸得到 */
}

.hidden1{
    width: 200px;
    height: 200px;
    background-color: rgb(255,0,0);
    opacity: 0.5;
}
.hidden2{
    width: 200px;
    height: 200px;
    background-color: cornflowerblue;
}
.hidden1:hover{
    display: block;
    /* 占位，摸得到 */
}

18. 百分比单位

• 字体的行高使用了百分比，表示字体大小的百分之多少

  p{
      font-size: 16px;
      /* 指的是字体大小的比例 */
      line-height: 1.2em;
  }
  

• width和height的百分比为父元素宽高的百分比(父元素高度必须固定，不能由内容撑开)

  p{
      /* 指父元素宽度的50% */
      width: 50%;
      /* 指父元素高度的50% */
      height: 80%;
  }
  

• padding和margin的百分比都是父元素的宽的百分比

  p{
      /* 父元素宽的的20% */
      padding-top: 20%;
  }
  

• background-position背景定位的百分比为元素宽/高-图片宽/高剩余尺寸的百分比

  div{
      width: 800px;
      height: 800px;
  
      /* background是一个复合样式 */
      background: url(../20200710/img/first.jpg) no-repeat yellow 50% 0;
      /* 
      50% 0
      父元素div-图片宽度
      */
  }
  

19. 最大最小宽高

当一个元素的宽高尺寸可变时，可以利用最大最小宽高控制范围，如可以配合上面的百分比宽高一起使用，做一个变化带有范围的效果：

• max-width(最大宽)
• min-width(最小宽)
• max-height(最大高)
• min-height(最小高)

p{
    /* width: 300px; */
    width: 70%;
    max-width: 400px;
    background-color: yellowgreen;
	
    /* max-height: 300px;
    overflow: auto; */

    min-height: 300px;
}