css基础知识笔记

css笔记

1.  a{
               /*去掉下划线*/
               text-decoration: none;
               /*字体颜色*/
               color: black;
           }
           /*鼠标悬浮的状态*/
           a:hover{
               color: rgb(254,0,0);
               font-size: 30px;
           }
   

2. 列表

   #nav{
       width: 250px;
   }
   .title{
       /*字体大小*/
       font-size: 18px;
       /*字体样式*/
       font-family: 宋体;
       /*字体变粗*/
       font-weight: bold;
       /*字体前面的间距*/
       text-indent: 2em;
       /*字体上下的高度*/
       line-height: 35px;
       background: red;
   }
   /*ul{*/
   /*    background: #c2bebe;*/
   /*}*/
   ul li{
       /*
       list-style：
           circle：空心圆
           none：去掉圆点
           decimal：数字
           square：正方形
       */
       list-style: none;
       /*行间距*/
       height: 30px;
       /*文字缩进*/
       text-indent: 1em;
   }
   a{
       /*超链接没有下划线*/
       text-decoration: none;
       /*超链接字体大小*/
       font-size: 14px;
       /*超链接字体颜色*/
       color: black;
   }
   /*超链接伪类*/
   a:hover{
       /*鼠标放上去变色*/
       color: orange;
       /*鼠标停留加下划线*/
       text-decoration: underline;
   }
   

3. 渐变

   https://www.grabient.com/
   

4. 盒子模型

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-678bHtxO-1610896215297)(C:\Users\66473\AppData\Roaming\Typora\typora-user-images\image-20210117173620375.png)]

   margin：外边距

   padding：内边距

   border：边框

   h1,a,ul,li,body{
               margin: 0;
               text-decoration: none;
               padding: 0;
           }
   

5. 头像制作

   div{
               /*标签宽度*/
               width: 100px;
               /*标签高度*/
               height: 100px;
               /*标签居中*/
               margin: 0 auto;
               /*正方形的四个角设置*/
               border-radius: 50px;
               /*导入图片*/
               background-image: url("../css2/images/img.png");
           }
   

6. display

   div{
               width: 100px;
               height: 100px;
               border: 1px solid red;
               display: inline;
   
           }
           span{
               width: 100px;
               height: 100px;
               border: 1px solid red;
               display: inline;
           }
           li{
               display: inline;
           }
   

   这个也是一种实现行内元素排列的一种方式，但是我们很多情况都是用float

7. float

   左右浮动 float

8. 父级边框塌陷问题

   clear

   /*
   clear: right; 右侧不允许有浮动元素
   clear: left; 左侧不允许有浮动元素
   clear: both; 两侧不允许有浮动元素
   clear: none;
   */
   

   1. 增加父级元素的高度~

   2. 增加一个空的div标签，清除浮动

      <div class="clear"></div>
      .clear{
          clear: both;
          margin: 0;
          padding: 0;
      }
      

   3. overflow

      1. 在父级元素中增加一个 overflow:hidden;
      

   4. 在父类添加一个伪类：after

      #app:after{
          content: '';
          display: block;
          clear: both;
      }
      

      小结：

      1. 浮动元素后面增加空div

         简单，代码中尽量避免空div

      2. 设置父元素的高度

         简单，元素假设有了固定的高度，就会被限制

      3. overflow

         简单，下拉的一些场景避免使用

      4. 父类添加一个伪类：after（推荐）

         写法稍微复杂一点，但是没有副作用，推荐使用！

   5. 对比

      1. display

         方向不可控制

      2. float

         浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题~