前端基础笔记05

一、伪类

    与类选择器相似，但是又有所不同

 <style>

   a:link{}

   a:visited{}

   a:hover{} 

   a:active{}  设置a标签被激活（被点击）的样式

 </style>

 a  注意：使用时顺序不可变      lv的包   ha哈哈  

 b  有些锚点类除了可以作用在a标签上，还可以作用在其他标签

  

  :link  只能用于a标签

  

  :visited  只能用于a标签

   

  :hover    其他标签也可以使用这个伪类

   div{

    width:100px;

    height:100px;

    background:red;

   }

   div:hover {

    background:blue;

   }

   

 

  :active   其他标签也可以使用这个伪类

  

   div{

    width:100px;

    height:100px;

    background:red;

   }

   div:active {

    background:blue;

   }

二、五彩导航可以得出

   a标签作为行内元素，设置宽高不起作用，需要转成行内块状元素 display：inline-block

 

   内容水平居中：text-align：center

       垂直居中：line-height：容器高度  ；若小于容器高度，内容向上移

                                          若大于容器高度，内容向下移

                                       

三、行高（line-height）

   行高的定义：两行相邻文本基线之间的距离（跟我们理解的字体高度+文本上间距+文本下间距 高度相同）

               顶线  中线  基线  底线 

   文字默认情况下在行内就是垂直居中，行高等于容器高，所以会垂直居中

四、盒子模型

 

   思想:万物皆盒子

   border-collapse：collapse/*去掉单元格之间的间隙*/

  

   注意：padding（盒子中的填充物）会改变盒子的大小

 

   计算盒子大小的公式

 

   盒子宽：border-left-width：+padding-left：+ width +padding-right：  + border-right-width：

   盒子高：border-top-width： +padding-top： + width +padding-bottom： + border-right-width：

   

  3.6特殊情况下padding不会改变盒子的大小

    当大盒子包含小盒子，并且大小盒子都是块级元素

 而且小盒子的宽是继承自大盒子的话，那么设置小盒子的padding-left或right

 不会改变小盒子的大小，而padding-top或bottom不可以

   4.6注意：很多标签默认的带有margin和padding

            所以布局时要清除margin和padding

 

         1.body默认的带有margin：8px的属性

 

         2.p标签默认的带有margin：font-size 0；

         3.h标签默认的带有margin-top和margin-botton

 

         4.ul默认的带有上下的margin以及左边的padding

  下午12：新闻部分  小点可能是图片设置为background：url() no-repeat left;

                    可以得到想要的结果

  注意：在计算宽高的时候不需要计算margin