CSS 基础知识(二)

学习爬虫需要一些前端的知识，虽说不需要非常专业的前端，但是基础还是要的，所以在学习爬虫之前，先来学习一下前端的一些基础知识。

01 - 元素溢出

所谓溢出，就是超过了一定范围(如长度)。

  • 什么是css的元素溢出

当子元素(标签)的尺寸超过父元素(标签)的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来完成。

overflow的设置项：

  1. visible 默认值, 显示子标签溢出部分。

  2. hidden 隐藏子标签溢出部分。

  3. auto 如果子标签溢出，则可以滚动查看其余的内容。

代码示例：

<style>
    .box1{
        width: 100px;
        height: 200px;
        background: red;
        /* 在父级上设置子元素溢出的部分如何显示 */
        /* overflow: hidden; */
        overflow: auto;
    }
    .box2{
        width: 50px;
        height: 300px;
        background: yellow;
    }
</style>

<div class="box1">
    <div class="box2">hello</div>
</div>

效果如下：

 

 

 

说明：

  • overflow样式属性是设置子标签溢出的显示方式

  • 常用使用{overflow:hidden;}来解决元素溢出

 

02 - CSS的显示特性



    

  • 

    display属性的使用
    



    • 





display 属性是用来设置元素的类型及隐藏的，常用的属性有：


    

  • 

    none 元素隐藏且不占位置
    



    • 

  • 

    inline 元素以行内元素显示
    



    • 

  • 

    block 元素以块元素显示
    



    • 

  • 

    inline-blcok 行内块 表示将其他元素类型转换为行内块元素，使其具有行内块元素的特点
    



    • 





示例代码：




<style>
    .box{
        /* 将块元素转化为行内元素 */
        display:inline;
    } 

    .link01{
        /* 将行内元素转化为块元素 */
        display:block;
        background: red;

    }

    .con{
        width:200px;
        height:200px;
        background:gold;

        /* 将元素隐藏 */
        display:none;
    }

</style>

<div class="con"></div>
<div class="box">这是第一个div</div>
<div class="box">这是第二个div</div>
<a href="#" class="link01">这是第一个链接</a>
<a href="#" class="link01">这是第二个链接</a>




效果如下：




说明：


行内元素不能设置宽高， 块元素或者行内块元素可以设置宽高


常见的块级元素默认的元素类型都是blcok


常见的内联元素默认的元素类型都是inline


常见的行内块元素默认的元素类型都是inline-blcok


重点: block和none的使用 : 一对应用，可以表示显示与隐藏


通常隐藏元素使用 display:none。


 


03 - CSS的元素类型




元素就是标签，在html叫标签，在css叫元素，例如：div，img等。而元素类型主要有三类：块状元素、内联元素、可变元素。






    

  • 

    元素分类
    



    • 





1. 块状元素/块级/块元素


    

      

    • 

      可以直接设置宽高,块级元素通常都是以一个盒子的形式在浏览器中显示
      



      • 

    • 

      块级独占一行，并且是从上到下进行排列的
      



      • 

    • 

      作用:块级元素用来嵌套行内元素或者其他元素类型作为网页布局的盒子
      



      • 

    • 

      常用的块状元素有：div、p、h1...h6、ol、ul、dl、table、address、blockquote 、form 、fieldset(表单字段集)、colgroup-col(表单列分组元素)、table-tr-td
      



      • 



    





2. 行内元素/内联元素


    

      

    • 

      无法直接设置宽高大小，由自身的内容决定
      



      • 

    • 

      默认在一行内逐个显示的，在页面中最小单位也是矩形
      



      • 

    • 

      有一个常见的bug:内联元素设置margin-top/bottom会失效，依然遵循盒模型的布局规则
      



      • 

    • 

      行内元素主要有img、input、label、br、span等。
      



      • 



    





3. 可变元素 - button 根据当前需求上下文改变元素类型


    

      

    • 

      可变元素为根据上下文语境决定该元素为块元素或者内联元素。 
      



      • 

    • 

      可变元素主要有button、iframe、script 和del 等。
      

      • 

    



04 - CSS的盒子模型




所谓的盒子模型就是把HTML页面的元素看作一个矩形盒子，矩形盒子是由内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成。






    

  • 

    css盒子模型的介绍
    



    • 





所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。


CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。


盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。


 


盒子模型示意图如下：




 


 


 


不同部分的说明：


    

  • 

    Margin(外边距) - 清除边框外的区域，外边距是透明的。
    



    • 

  • 

    Border(边框) - 围绕在内边距和内容外的边框。
    



    • 

  • 

    Padding(内边距) - 清除内容周围的区域，内边距是透明的。
    



    • 

  • 

    Content(内容) - 盒子的内容，显示文本和图像。
    



    • 





 


    

  • 

    盒子模型相关样式属性
    



    • 





    

      

    • 

      盒子的内容宽度(width)，注意：不是盒子的宽度
      



      • 

    • 

      盒子的内容高度(height)，注意：不是盒子的高度
      



      • 

    • 

      盒子的边框(border)
      



      • 

    • 

      盒子内的内容和边框之间的间距(padding)
      



      • 

    • 

      盒子与盒子之间的间距(margin)

      



      • 



    





设置宽高：


设置盒子的宽高，此宽高是指盒子内容的宽高，不是盒子整体宽高。




width:200px;  /* 设置盒子的宽度，此宽度是指盒子内容的宽度，不是盒子整体宽度(难点) */ 
height:200px; /* 设置盒子的高度，此高度是指盒子内容的高度，不是盒子整体高度(难点) */




设置边框：


设置一边的边框，比如顶部边框，可以按如下设置：




border-top:10px solid red;




说明:


其中10px表示线框的粗细；solid表示线性；red表示边框的颜色


设置其它三个边的方法和上面一样，把上面的'top'换成'left'就是设置左边，换成'right'就是设置右边，换成'bottom'就是设置底边。


四个边如果设置一样，可以将四个边的设置合并成一句：




border:10px solid red;




设置内间距padding：


设置盒子四边的内间距，可设置如下：




padding-top：20px;     /* 设置顶部内间距20px */ 
padding-left:30px;     /* 设置左边内间距30px */ 
padding-right:40px;    /* 设置右边内间距40px */ 
padding-bottom:50px;   /* 设置底部内间距50px */




上面的设置可以简写如下：




padding：20px 40px 50px 30px; /* 四个值按照顺时针方向，分别设置的是 上 右 下 左  
四个方向的内边距值。 */




padding后面还可以跟3个值，2个值和1个值，它们分别设置的项目如下：




padding：20px 40px 50px; /* 设置顶部内边距为20px，左右内边距为40px，底部内边距为50px */ 
padding：20px 40px; /* 设置上下内边距为20px，左右内边距为40px*/ 
padding：20px; /* 设置四边内边距为20px */




设置外间距margin：


外边距的设置方法和padding的设置方法相同，将上面设置项中的'padding'换成'margin'就是外边距设置方法。


盒子的真实尺寸：


盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为：


    

      

    • 

      盒子宽度 = width + padding左右 + border左右
      

      • 

    • 

      盒子高度 = height + padding上下 + border上下
      

      • 

    



说明：


    

  • 

    盒子模型的5个主要样式属性：
    

    • 

      

    • 

      width：内容的宽度(不是盒子的宽度)
      

      • 

    • 

      height：内容的高度(不是盒子的高度)
      

      • 

    • 

      padding：内边距。
      

      • 

    • 

      border：边框。
      

      • 

    • 

      margin：外边距
      

      • 

    

  • 

    盒子的真实尺寸只会受到宽度、高度、边框、内边距四个属性的影响，不会受到外边距属性的影响。
    

    • 



    

  • 

    知识点回顾
    



    • 





本节主要讲CSS四个知识点：
1、元素溢出的处理，overflow属性及属性值使用；


2、元素显示特性，display属性及属性值使用；
3、元素三种类型的介绍；


4、元素盒子模型的5个属性应用，每个元素(标签)都有一个盒子模型，同事拥有盒子的5个属性样式。


 




工欲善其事，必先利其器！












            

            
posted @ 
2023-02-02 00:05 
全栈测试开发日记 
阅读(57) 
评论(0) 
 
收藏 
举报