前端学习之大小、定位、轮廓相关属性

野性酷女 2023-05-21 15:16 22阅读 0赞

**width、height相关属性**

> **height:** 用于设置目标对象的高度。该属性值可以是任何有效的距离值。  
> ➢max-height: 用于设置目标对象的最大高度。如果此属性的值小于min-height属性的  
> 值，将会被自动转换为min-height属性的值。  
> ➢min-height: 用于设置目标对象的最小高度。如果此属性的值大于max-height属性的  
> 值，将会被自动转换为max-height属性的值。  
> \*\*width:\*\*用于设置目标对象的宽度。该属性值可以是任何有效的距离值。  
> ➢max-width: 用于设置目标对象的最大宽度。如果此属性的值小于min-width属性的值，  
> 将会被自动转换为min-width属性的值。  
> ➢min-width: 用于设置目标对象的最小宽度。如果此属性的值大于max-width属性的值，  
> 将会被自动转换为max-width属性的值。

**定位相关属性**

> ➢position: 用于设置目标对象的定位方式。设置为absolute,会允许将该对  
> 象漂浮于页面之上，无须考虑它周围内容的布局;设置为relative,会保持对象  
> 在正常的HTML流中，目标对象的位置将参照前一个对象的位置进行定位:  
> ➢z-index: 用于设置目标对象的漂浮层的层序，该值越大，漂浮层越浮于上面。此属性  
> 仅当position属性值为relative或absolute时有效。  
> ➢top:用于设置目标对象相对于最近一个具有定位设置的父对象的顶边偏移，要求同上  
> ➢right: 用于设置目标对象相对于最近一个具有定位设置的父对象的右边偏移，要求同上  
> ➢bottom:用于设置目标对象相对于最近一个具有定位设置的父对象的底边偏移，要求同上  
> ➢left: 用于设置目标对象相对于最近一个具有定位设置的父对象的左边偏移，要求同上  
> 如果设置postion属性为static,那么页面的left、top等定位属性设置失效

**轮廓的相关属性**

> **outine:** 是一个复合属性，可全面设置目标对象轮廓的颜色、线型、线宽三个属性。  
> ➢outline-color: 用于设置元素的轮廓颜色。  
> ➢outline-style: 用于设置元素的轮廓线型。支持的属性值有none、dotted、dashed、  
> solid、double. groove. ridge、 inset.、outset, 与边框线型各属性值的意义完全相同。.  
> ➢outline-width:用于设置目标元素的轮廓宽度。  
> ➢outline-offset: 用于设置目标元素的轮廓偏移距(就是轮廓与边框之间的距离)。