CSS3的大小、定位、轮廓相关属性

ゝ一世哀愁。 2022-03-22 13:10 280阅读 0赞

CSS还提供了大小相关属性来控制HTML组件的大小，例如通过width属性控制HTML组件的宽度，通过height属性控制HTML组件的高度。使用这种大小相关的属性允许我们自定义HTML组件的大小。

# width、height相关属性 #

大小相关属性主要用于设置目标对象的宽度、高度，包括最大宽度、高度，以及最小宽度、高度。常用的大小相关属性有如下几个。

<table> 
 <tbody> 
  <tr> 
   <td style="width:109px;">height</td> 
   <td>用于设置目标对象的高度。该属性值可以是任何有效的距离值。</td> 
  </tr> 
  <tr> 
   <td style="width:109px;">max-height</td> 
   <td>用于设置目标对象的最大高度。如果此属性的值小于min-height属性的值，将会被自动转换为min-height属性的值。该属性值可以是任何有效的距离值。</td> 
  </tr> 
  <tr> 
   <td style="width:109px;">min-height</td> 
   <td>用于设置目标对象的最小高度。如果此属性的值大于max-height属性的值，将会被自动转换为max-height属性的值。该属性值可以是任何有效的距离值。</td> 
  </tr> 
  <tr> 
   <td style="width:109px;">width</td> 
   <td>用于设置目标对象的宽度。该属性值可以是任何有效的距离值。</td> 
  </tr> 
  <tr> 
   <td style="width:109px;">max-width</td> 
   <td>用于设置目标对象的最大宽度。如果此属性的值小于min-width属性的值，将会被自动转换为min-width属性的值。该属性值可以是任何有效的距离值。</td> 
  </tr> 
  <tr> 
   <td style="width:109px;">min-width</td> 
   <td>用于设置目标对象的最小宽度。如果此属性的值大于max-width属性的值，将会被自动转换为max-width属性的值。该属性值可以是任何有效的距离值。</td> 
  </tr> 
 </tbody> 
</table>

## 1.CSS3新增的box-sizing属性 ##

在默认情况下，如果指定width、height属性，只是指定该元素的内容区的宽度、高度，对该元素的内补丁区、边框区、外补丁区所占的空间不产生任何效果。如下方图片展示了width、height属性的作用。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>大小相关属性</title>
    </head>
    <body>
    	<div style="width:200px;height:40px;background-color:#ddd;
    	background-clip:content-box;">
    	CSS3学习
    	</div>
    	
    	<div style="width:200px;height:40px;background-color:#ddd;
    		background-clip:content-box;
    		border:30px solid #555;
    		padding:30px;">
    	CSS3学习
    	</div>
    </body>
    </html>

上面定义了两个<div>元素，它们的width和height属性具有相同的属性值，只是第二个设置了内填充区和边框区。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70][]

CSS 3新增了box-sizing属性来设置width、height控制哪些区域的宽度、高度，这样就可以让开发者控制起来更加方便。例如有些时候，开发者需要控制的并不是该元素内容的宽度、高度，而是该元素整体（包括padding区、border整体的宽度和高度），该属性支持如下几个属性值：

*  content-box：设置width、height控制元素的内容区宽度和高度。
 *  padding-box：设置width、height控制元素的内容区加内补丁区的宽度和高度。
 *  border-box：设置width、height控制元素的内容区加内补丁区再加边框区的宽度和高度。

下方图片展示了box-sizing属性的功能：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 1][]

上面页面中定义了3个<div>元素，其width、height属性都被设置成 200px、100px，其中第一个<div>元素的box-sizing属性为content-box，这表示该元素的内容区高度为100px，宽度为200px；第二个<div.../>元素的boxsizing属性为padding-box，这表示该元素的内容区加内补丁区的高度为100px，宽度为200px；第三个<div>元素的box-sizing属性为border-box，这表示该元素的内容区加内补丁区再加边框区的高度为100px，宽度为200px。当将box-sizing设置为border-box后，指定width、height 属性将可控制该元素整体的宽度、高度，这一点非常有用。

## 2.CSS3新增的resize属性 ##

CSS3还新增了一个resize属性，该属性用于指定是否允许用户通过拖动来改变元素的大小。该属性支持如下几个属性值。

1.  none：设置不允许用户通过拖动来改变组件的大小。
2.  both：设置不允许用户通过拖动来改变组件的高度和宽度。
3.  horizontal：设置不允许用户通过拖动来改变组件的宽度。
4.  vertical：设置不允许用户通过拖动来改变组件的高度。
5.  inherit：继承自父元素的resize属性值。这是默认值。

resize属性对于所有设置了overflow的HTML组件有效，绝大部分主流浏览器如Firefox、Opera、Chrome都已支持该属性。下方图片展示了resize属性的功能：

![20190128153513853.png][]

## 3.CSS3新增的calc函数 ##

calc用于动态计算HTML的高度和宽度。假如我们希望设置一个元素的宽度等于父容器宽度的80%再减去80px。此时就需要借助calc函数来计算。使用calc还可以非常方便的实现自适应布局。calc函数的语法是直接传入一个表达式即可，支持+、-、\*、/等常见的数学运算符。

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<title>calc函数</title>
    	<style type="text/css">
    		body>div {
    			width:200px; 
    			height:100px;
    			overflow: auto;
    			resize: both;
    			border: 2px solid #555;
    		}
    		div>div {
    			border:1px solid black;
    			display:inline-block;
    			margin:5px;
    			box-sizing: border-box;
    			width:calc(50% - 14px);
    			height:calc(100% - 10px);
    		}
    	</style>
    </head>
    <body>
    	<div style="">
    		<div>第一块</div>
    		<div>第二块</div>
    	</div>
    </body>
    </html>

如下图所示，无论我们如何调整页面中作为父容器的<div>元素，总可以看到两个子<div>元素平方父容器的空间。

![20190130111337509.png][]

# 定位相关属性 #

定位相关属性用于设置目标组件的位置，包括是否漂浮于页面之上，通过使用漂浮的<div.../>元素，可自由移动页面元素的位置，从而可在页面上产生动画效果。常用的定位相关属性如下：

<table> 
 <tbody> 
  <tr> 
   <td>position</td> 
   <td>用于设置目标对象的定位方式。此属性设置为absolute，会允许将该对象漂浮于页面之上，根本无须考虑它周围内容的布局；设置为relative ，会保持对象在正常的HTML流中，目标对象的位置将参照前一个对象的位置进行定位；设置为static，则目标对象仅以页面作为参照系。</td> 
  </tr> 
  <tr> 
   <td>z-index</td> 
   <td>用于设置目标对象的漂浮层的层序，该值越大，漂浮层越浮于上面。此属性仅当position属性值为relative或absolute时有效。此属性对窗口控件（如&lt;select.../&gt;元素）没有影响。</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td>用于设置目标对象相对于最近一个具有定位设置的父对象的顶边偏移，此属性仅当设置了对象的position属性为absolute和relative时有效。</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>用于设置目标对象相对于最近一个具有定位设置的父对象的右边偏移，此属性仅当设置了对象的position属性为absolute和relative时有效。</td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td>用于设置目标对象相对于最近一个具有定位设置的父对象的底边偏移，此属性仅当设置了对象的position属性为absolute和relative时有效。</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>用于设置目标对象相对于最近一个具有定位设置的父对象的左边偏移，此属性仅当设置了对象的position属性为absolute和relative时有效。&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

对于下方图片中postion属性为absolute的<div.../>将完全不受页面其他元素的影响，直接基于页面定位；如果设置postion属性为relative，<div.../>将受到其他元素的影响，会基于页面中的文本元素定位；如果设置postion属性为static，那么页面的left、top等定位属性设置失效。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 2][]

# 轮廓相关属性 #

轮廓相关属性主要用于让目标对象周围有一圈“光晕”效果，这圈光晕不会占用页面实际的物理布局。通过轮廓相关属性，可设置该“光晕”的颜色、线宽、线型等属性。轮廓相关属性有如下几个。

*  outline：这是一个复合属性，可全面设置目标对象轮廓的颜色、线型、线宽三个属性。
 *  outline-color：用于设置组件的轮廓颜色。
 *  outline-style：用于设置组件的轮廓线型。该属性支持的属性值有none、dotted、dashed、solid、double、groove、ridge、inset、outset，这些属性值与前面介绍边框线型时各属性值的意义完全相同。
 *  outline-width：用于设置目标组件的轮廓宽度。
 *  outline-offset：用于设置目标组件的轮廓偏移距（就是轮廓与边框之间的距离）。

下方图片示范了轮廓相关属性的功能，**需要源码的可以在我的资源库下载，有什么问题可以在下方留言。   [点击前往][Link 1]**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 3][]

总结：这次主要介绍了CSS3提供的大小、定位和轮廓相关属性，我们可以通过width、height属性来控制HTML组件的大小，也可以通过position、left、top等属性来定位HTML组件。除此之外，还介绍了如何使用outline属性为HTML组件添加轮廓。

\------------如果大家喜欢[湮顾千古][Link 2]的博客，可以点击左上角的关注哦。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70]: /images/20220322/dbd9b7e27ff94173b055fda7590cb4ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 1]: /images/20220322/26d71ec94ca946688e94611feb016fdb.png
[20190128153513853.png]: /images/20220322/892cb2d13f774fa8bcfac285768e3121.png
[20190130111337509.png]: /images/20220322/aa2501a062154559aeb1a6db67efb0b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 2]: /images/20220322/f1eb33c36f744bbd858ab770975821e0.png
[Link 1]: https://download.csdn.net/download/sujin_/10944352
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 3]: /images/20220322/5541f71665984259ac2c4b433d3a91d5.png
[Link 2]: https://blog.csdn.net/sujin_