前端学习-css样式重要知识理解

╰半夏微凉° 2022-12-14 14:59 205阅读 0赞

## 样式 ##

## 1、元素 ##

代码中一个标签对应浏览器中的一个元素，元素大致有四部分组成，分别是margin外边距，border边框、padding内边距和内容，注释:（下图中的“系内”是内容，无关紧要）。  
html中margin值默认有8像素，可更改为0.  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center]

--------------------

## 2、定位 ##

定位：元素默认是没有开定位的，元素都是可以开定位的。

position定位种类有以下四类，其中static属于默认定位。

1、static静态定位（没有开定位），一般不使用。

2、fixd 固定定位（固定到窗口上）

position: fixed;

3、relative 相对定位（相对自己原有的位置进行定位）

position: relative;

4、absolute 绝对定位（在一定的范围内进行定位），使用绝对定位时，是**相对于上一级div**而言的，需要父亲-祖父-曾祖父（即最近上一级div）开启relative相对定位方可使用。

position: absolute;

难点：一个元素一旦开定位之后，就可以进行：

①top上（优先）、bottom下
    
       同时top和 bottom，然后再margin：auto，则依照margin：auto
    
       同时top和 margin：auto，则依照top
    
       同时bottom和 margin：auto，则依照bottom
    
    ②left左（优先）、right右 
    
       同时left和 right，然后再margin：auto，则依照margin：auto
    
       同时left和 margin：auto，则依照left
    
       同时right和 margin：auto，则依照right

## 3、margin ##

margin:0px 0px 15px 20px;

margin的参数，四个参数是按照顺时针方向实现的，上和右外边距是 0px，下外边距是 15px，而图像左侧的外边距是 20px。

## 4、如何使元素看不见 ##

`visibility:visible` 使元素可见

{ 
     visibility:visible
     }
     { 
     visibility:hidden
     }

`visibility:hidden` 使元素隐藏

## 5、overflow的使用 ##

overflow属性有四个值：visible (默认), hidden, scroll, 和auto。

①Visible：

假如不设置overflow属性，则默认的overflow属性值就是visible。

②Hidden：

默认值visible的相反的值就是hidden。它会将所有超出盒子的所有内容都给隐藏掉。

③Scroll：

设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。

④Auto：  
overflow的auto值很像scroll，它唯一解决的是在你不需要的时候也会出现滚动条的问题。

## 6、边框样式 ##

p.none { border-top-style:none}
    p.dotted { border-top-style:dotted}
    p.dashed { border-top-style:dashed}
    p.solid { border-top-style:solid}
    p.double { border-top-style:double}
    p.groove { border-top-style:groove}
    p.ridge { border-top-style:ridge}
    p.inset { border-top-style:inset}
    p.outset { border-top-style:outset}

对应样式显示如下，上下左右边框样式使用亦是如此：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/8a1618d2ec644222aa470dbfe13d5c0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYwNTI2Ng_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/3e7ead84208d4f0cb2fef1c5d0141739.png