CSS总结-----定位与盒子图

Myth丶恋晨 2022-06-08 10:51 180阅读 0赞

这一章主要说一说定位与解除浮动经常用到的知识点。

position：定位属性

<table> 
 <thead> 
  <tr> 
   <th align="center">absolute</th> 
   <th align="center">fixed</th> 
   <th align="center">relative</th> 
   <th align="center">static</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">绝对定位</td> 
   <td align="center">固定定位</td> 
   <td align="center">相对定位</td> 
   <td align="center">没有定位</td> 
  </tr> 
  <tr> 
   <td align="center">除static定位之外的第一个父元素</td> 
   <td align="center">相对于浏览器</td> 
   <td align="center">相对之前正常位置定位</td> 
   <td align="center">没有定位</td> 
  </tr> 
 </tbody> 
</table>

# 1.定位 #

提到定位应该先了解两个知识点：

## 1.相对定位 ##

相对定位是指相对于自己以前在标准流中的位置来定位。

*  **这里注意，相对定位并没有脱离标准流，会继续在标准流中占有空间。所以margin/padding等属性会影响到标准流的布局**
 *  **同时也要想到，既然没有脱离标准流，那自然要区分是块级，行内，还是行内块级元素**
 *  **同一个方向上的定位属性只能使用一个**

## 2.绝对定位absolute ##

绝对定位是相对于祖先元素或者body来定位，是相对于一个公共基准。当以body时，参考点是网页首屏，并不是整个网页。（默认情况下都是以body作为参考点）  
这里顺带提一下网页首屏：在我看来，网页首屏是指打开一个网页我们第一眼看到的那个界面

*  **不同于相对定位，绝对定位是脱离于标准流的，所以并不会在标准流中占位置。**
 *  **因此，绝对定位不区分块级元素/行内元素/行内块级元素**
 *  **absolute设置的绝对定位会从父元素开始向上直系查找(定位流中的父元素！即非static定位的元素)，直到html,这里要知道，html和body在位置上是有区别的**
 *  **当有多个可选父元素时，会优先选择最近的，就近原则**

（盒子绝对定位后是不能使用margin:0 auto;居中，可以使用left:50%）

## 3.固定定位fixed ##

*  固定定位是脱离标准流的，不会占用标准流的位置。
 *  不区分块级，行内，行内块级
 *  固定定位是相对于浏览器的定位，即滑动浏览器，他还是在那个位置。

## 4.静态定位static ##

默认的标准流

## 5.定位覆盖z-index ##

*  默认情况下定位元素会默认覆盖没定位的元素。
 *  默认情况下后面的定位元素会覆盖前面的定位元素。  
    所以我们引入z-index：number;  
    z-index中的值默认都是0，当设置了后谁的比较大就显示在前面。

**这个设置是有从父现象的，当父元素没有设置时，听自己的，当父元素设置后，听父元素的**

# 2.盒形图 #

![这里写图片描述][SouthEast]

content:内容：我们的标签内容  
padding：填充：类似于盒子里面的泡沫，不是我们的主题，只用于填充  
border：边框，即盒子主体  
margin:边界,即盒子与其他盒子之间的空间

下面一个个来说。

## 1.边框:border ##

下面说说边框的设定：

#### 1.同时设置四条边 ####

格式：

border:宽度 样式 颜色;
    border:20px solid red;
    //1.其中颜色默认黑色，可以省略
    //2.样式不能省略
    //3.宽度可以省略，默认有边框

#### 2.分别设置四条边（方向） ####

这是分别对四条边进行设置  
方法很简单：

border-top/right/bottom/left:宽度 样式 颜色；

#### 3.分别设置四条边（属性） ####

border-width/style/color:上 右 下 左；
    //省略左时，左边和右边一样
    //省略下，左时，和上右一样
    //只有上时，就像个正方形一样
    //四边形嘛，很好理解的

#### 4.分别设置四条边（属性+方向） ####

border-top/right/bottom/left+width/style/color:value;
    
    //设置得更具体

#### 5.其余设置四条边 ####

<table> 
 <thead> 
  <tr> 
   <th>取值</th> 
   <th align="center">属性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>border-bottom/top-left/right-radius</td> 
   <td align="center">设置左/右 -下/上角的形状</td> 
  </tr> 
  <tr> 
   <td>border-image</td> 
   <td align="center">设置所有边框图像</td> 
  </tr> 
  <tr> 
   <td>border-image-repeat/rounded/stretched</td> 
   <td align="center">摆放样式，平铺，铺满，拉伸</td> 
  </tr> 
  <tr> 
   <td>border-image-outset</td> 
   <td align="center">规定边框图像区域超出边框的量</td> 
  </tr> 
  <tr> 
   <td>border-image-source</td> 
   <td align="center">规定用作边框的图片</td> 
  </tr> 
  <tr> 
   <td>border-image-width</td> 
   <td align="center">规定图片边框的宽度</td> 
  </tr> 
 </tbody> 
</table>

## 2.填充:padding ##

#### 1.分别设置四条边（属性） ####

padding-top/right/bottom/left:value;
    //注意，这个只有距离

。

<table> 
 <thead> 
  <tr> 
   <th>取值</th> 
   <th align="center">属性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>auto</td> 
   <td align="center">浏览器计算内边距</td> 
  </tr> 
  <tr> 
   <td>length</td> 
   <td align="center">规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px</td> 
  </tr> 
  <tr> 
   <td>%</td> 
   <td align="center">规定基于父元素的宽度的百分比的内边距</td> 
  </tr> 
 </tbody> 
</table>

省略方法和之前一样：左–左下—左下右  
把它当成一个矩形来理解即可。

**设置内边距会影响到标签的宽度和高度。**  
**内边距是有背景颜色的**

## 3.边界(外边距)：margin ##

margin-top/right/bottom/left:value;
    //注意，这个只有距离

<table> 
 <thead> 
  <tr> 
   <th>取值</th> 
   <th align="center">属性</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>auto</td> 
   <td align="center">浏览器计算边界</td> 
  </tr> 
  <tr> 
   <td>length</td> 
   <td align="center">规定以具体单位计的边界值，比如像素、厘米等。默认值是 0px</td> 
  </tr> 
  <tr> 
   <td>%</td> 
   <td align="center">规定基于父元素的宽度的百分比的边界</td> 
  </tr> 
 </tbody> 
</table>

省略方法和之前一样：左–左下—左下右  
把它当成一个矩形来理解即可。

注意点：  
**1.外边距（边界）没有背景颜色。**

**2.边距会出现合并现象，并不会叠加，谁更大按谁的，可以理解为把小的边界包进去了。**

# 4.盒形图的数据 #

## 1，内容的宽高 ##

内容的宽高是指用width/height设置的宽度和高度。

## 2.元素的宽高 ##

宽/高=border+padding+width/height+padding+border

## 2.空间的宽高 ##

宽/高=margin+border+padding+width/height+padding+border++margin

[SouthEast]: /images/20220608/85f6e41d71f7450492a2326a391a41bd.png