CSS：布局与定位、overflow属性、border属性、圆角边框：border-radius、边框阴影：box-shadow、文档流定位、浮动定位和层定位。

落日映苍穹つ 2024-03-24 15:31 2阅读 0赞

盒子模型常用属性：border(边框)、padding(内边距）、margin(外边距）。

### overflow属性： ###

用于指定溢出内容的处理方式。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td><span style="color:#0d0016;">值</span></td> 
   <td><span style="color:#0d0016;">描述</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#0d0016;">visible</span></td> 
   <td><span style="color:#0d0016;">默认值，溢出内容不会被修剪，会呈现在元素框之外</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#0d0016;">hidden</span></td> 
   <td><span style="color:#0d0016;">溢出内容将不可见</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#0d0016;">scroll</span></td> 
   <td><span style="color:#0d0016;">溢出内容会被修剪，但可以通过滚动条查看隐藏部分</span></td> 
  </tr> 
  <tr> 
   <td><span style="color:#0d0016;">auto</span></td> 
   <td><span style="color:#0d0016;">由浏览器决定如何处理溢出部分</span></td> 
  </tr> 
 </tbody> 
</table>

### border属性： ###

border-style：dashed(虚线）、dotted(小圆点虚线）、solid(实线）、double（双实线）、none（无）、hidden（隐藏边框）。

border-color:边框颜色。

border-width：边框宽度。

border：width style color

当边框宽度具有4个或1个参数值时：将按 上-->右-->下-->左，顺序作用在边框上。

当边框宽度具有3个参数值时：将按 上-->左+右-->下，顺序作用在边框上。

当边框宽度具有2个参数值时：将按 上+下-->左+右，顺序作用在边框上。

### 圆角边框：border-radius： ###

border-top-right-radius：设置右上角圆角，其余同理。

1个参数时：四个脚都相同。

2个参数时：交叉对称相等：左上角=右下角，右上角=左下角。

3个参数时：左上角——>右上角+左下角——>右下角。

4个参数时：按顺时针方向。左上角、右上角、右下角、左下角。

### 边框阴影：box-shadow： ###

> 格式：box-shadow: h-shadow v-shadow \[blur\] \[spread\] \[color\] \[inset\];

其中：

h-shadow参数是必须的，用于指定水平阴影的位置，该值允许取负值。

v-shadow参数是必须的，用于指定垂直阴影的位置，该值允许取负值。

blur：用于指定模糊距离。

spread：用于指定阴影的尺寸。

color：用于指定阴影的颜色。

inset：用于将外部阴影（outset）改为内部阴影。

2个参数时：h-shadow(水平位置)、v-shadow(垂直位置）。

4个参数时：h-shadow、v-shadow、blur(模糊距离）、color。

5个参数时：h-shadow、v-shadow、blur(模糊距离）、spread(阴影尺寸）、color。

6个参数时：h-shadow、v-shadow、blur(模糊距离）、spread(阴影尺寸）、color、inset(内部)。

盒子模型：margin的合并：垂直方向合并，水平方向不合并。

图片、文字水平居中 ：text-align：center；

div水平居中：margin：0 auto；

### 文档流定位： ###

元素分类：block、inline、inline-block。

元素类型转换：display属性。

block元素特点：

• 独占一行。

• 元素的height、width、margin、padding都可设置。

常见的block元素：

<div>、<p>、<h1>...<h6>、

inline元素特点：

• 不单独占用一行

• width、height不可设置

• width就是它包含的文字或图片的宽度，不可改变

常见的inline元素：<span>、<a>

**inline元素之间有一个间距问题，可以在div内用font-size：0；来去除。**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			#a{
    				width: 300px;
    				margin: 100px auto;
    				font-size: 0;   /* 去掉间隙 */
    			}
    			a{
    				display:inline-block;   /* 可以设置链接的宽和高 */
    				width: 80px;
    				color: white;
    				height: 30px;
    				font-size: 14px;
    				text-align: center;
    				line-height: 30px;
    				text-decoration: none;
    				border-bottom: 1px solid #ccc;
    			}
    			a:hover{
    				color: white;
    				border-color: #ccc;
    				border: 1px solid;
    				border-left-color: white;
    				border-right-color: white;
    				border-top-color:white;
    			}
    		</style>
    		<title></title>
    	</head>
    	<body>
    		<div id="a">
    			<a href="#">链接1</a>
    			<a href="#">链接2</a>
    			<a href="#">链接3</a>
    		</div>
    	</body>
    </html>

**block从上到下独占一行，inline从左到右占据一行。**

**display：none; 元素不会被显示。**

**display：block； 显示为block元素。**

**display：inline； 显示为inline元素。**

### **浮动定位：** ###

float属性：left（左浮动）、right（右浮动）、none（不浮动）。

clear属性：清除浮动：left、right、both（清除左右两边的浮动）。

### 层定位： ###

p osition属性 ：

static（默认值）：没有定位，元素出现在正常的流中top, bottom, left, right ， z-index 无效

fixed （固定定位）：相对于 **浏览器窗口**进行定位top, bottom, left, right ， z-index 有效 当拖拽页面

滚动条时，该元素不会随之滚动。

relative（相对定位）：相对于其 **直接父元素**进行定位top,bottom,left,right，z-index 有效 ，并保持

未定位前的形状及所占空间。

absolute（绝对定位）：相对于 **static**  **定位以外的第一个父元素**进行定位top, bottom, left, right ，

z-index 有效 当拖拽页面滚动条时，该元素随之滚动。

z-index属性：值大在上面。

定位为 relative 的元素脱离正常的文档流中，但 其在文档流中的 **原位置依然存在。**

定位为 absolute 的层脱离正常文本流，但与 relative的区别 : 其在正常流中的 **原位置不再存在。**

relative定位的层总是相对于其 **直接父元素** ，无论其父元素是什么定位方式。

对于 absolute 定位的层总是相对于其 **最近的定义为** **absolute** **或** **relative** **的父层** ，而这个父层并不

一定是其直接父层。

对于 absolute 定位的层,如果其父层中都未定义 absolute 或relative，则其将相对 **body** 进行定位。

<table style="width:500px;">  相对定位与绝对定位区别  
 <tbody> 
  <tr> 
   <td></td> 
   <td>相对定位</td> 
   <td>绝对定位</td> 
  </tr> 
  <tr> 
   <td>position取值</td> 
   <td>relative</td> 
   <td>absolute</td> 
  </tr> 
  <tr> 
   <td>文档流中原位置</td> 
   <td>保留</td> 
   <td>不保留</td> 
  </tr> 
  <tr> 
   <td>定位参照物</td> 
   <td>直接父元素</td> 
   <td> <p>非static的父元素</p> </td> 
  </tr> 
 </tbody> 
</table>