今日份学习总结

         今天的课程内容非常重要，主要讲了盒模型，如下是今日的知识点总结：

一、伪类链接选择器

       1、 a标签  a:link{ 链接的默认样式 }   a:visited{ 链接访问过后的样式 }   a:hover{ 鼠标悬停的样式 }   a:active{ 鼠标按下的样式 } 。
       2、hover 伪类选择器   ele:hover可以用到别的标签中；hover伪类选择器只能用于父子关系,也可以用于自己， 如果要实现兄弟之间的hover,用相邻选择器。

二、盒模型

         可以把一个标签看成一个盒子。这个盒子里有以下几项内容：盒子里内容的宽高（盒子宽高） width height；内间距、内填充 盒子里内容与边框之间的距离 padding；边框 围绕着内容和内填充区域的线 border；外间距 两个盒子之间的距离 margin。

         1、 盒子里内容的宽高：在没有设置宽高的情况下，宽度默认撑开整个父元素，高度由内容撑开；单位取值：px；   百分比（参照父元素来说）； em  1em =16px  相对父元素的字体大小来说的；  rem  相对单位相对于html根元素字体大小来说的；auto:自动，浏览器会自动计算出宽高，一般用于水平居中等。max-width:最大宽度，min-width:最小宽度， max-height:最大高度，min-height:最小高度。

          2、盒子的内间距（内填充）：盒子里内容与边框之间的距离 padding；padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;  复合写法：要那个内间距就写那个，其余写0或许0px。padding: 20px；只有一个值：上  下  左  右  都是20px；padding: 20px 40px; 只有两个值：上下  左右；padding: 20px 30px 40px; 只有三个值：上  左右  下；padding: 20px 30px 40px 50px; 四个值：上 右 下 左。

          3. 盒子的边框：border: 20px solid yellow;  border-width:边框的宽度  单位：像素；注意：只写一个border-width设置不上边框的宽的，得写上边框的线型，一个边框必须要有边框的宽度和边框的线型。border-style：边框的线型：soild 单实线，double 双实线，dashed 条状虚线，dotted 点状边框，none 没有边框。border-color:边框的颜色：关键词  red，十六进制色值，rgb()，rgba() 。边框也会增大盒模型，也就是会使盒子宽高变大。

           4. 盒子的外间距：两个盒子之间的距离， 可以为负值，auto浏览器自动计算。

三、怪异盒模型·

       box-sizing: border-box;  当盒子设置内间距和边框的时候，会增大盒子。则为了使大小不变，谁设置了就给谁加box-sizing:border-box;   标准盒模型不能进行内减（边框和内间距），默认值就是标准盒模型：box-sizing: content-box;

四、外间距的应用——水平居中

       margin: 100px auto;  必须是块级标签才能实现水平居中；必须设置宽度 。如果不设置宽度，则是默认撑开整个父元素，水平居中的效果就显示不出来了。

五、实现文本居中

       单行文本实现水平垂直居中 ：水平居中  text-align: center;   垂直居中：行高=高度   line-height: 200px;  200px是高度的值。

六、CSS显示和隐藏

       display: none；隐藏该元素并且该元素所占的空间也不存在了。display: block; 显示元素。

       visibility: hidden； 隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。 visibility: visible 显示元素。