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

最新推荐文章于 2024-06-24 11:02:57 发布

居靖

最新推荐文章于 2024-06-24 11:02:57 发布

阅读量274

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/m0_73886399/article/details/129991930

版权

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

overflow属性：

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

值	描述
visible	默认值，溢出内容不会被修剪，会呈现在元素框之外
hidden	溢出内容将不可见
scroll	溢出内容会被修剪，但可以通过滚动条查看隐藏部分
auto	由浏览器决定如何处理溢出部分

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 进行定位。

相对定位与绝对定位区别
	相对定位	绝对定位
position取值	relative	absolute
文档流中原位置	保留	不保留
定位参照物	直接父元素	非static的父元素

居靖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS：布局与定位、overflow属性、border属性、圆角边框：border-radius、边框阴影：box-shadow、文档流定位、浮动定位和层定位。

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

扫一扫