CSS常用样式及定位笔记

CSS 02

2019/10/22 8:57:44

---

常用样式

文字样式

-	字体大小
		font-size:长度+单位;
-	文字颜色
		color:颜色值;
-	内容横向位置
		text-align:left/center/right;
-	内容纵向位置:
		vertical-align:
			-	top		:	顶部对齐
			-	middle	:	中间对齐
			-	bottom	:	底部对齐
			-	text-top:	文字顶部对齐.
			-	text-bottom:	文字底部对齐

-	文本样式 (斜体)
		font-style:oblique;
-	文字加粗
		font-weight:bold;
-	文字修饰
		text-decoration:
			-	underline	:	下划线
			-	overline	:	上划线
			-	line-through:	删除线

-	文本行高(设置一行文本的高度)
		line-height:长度+单位;
		注意:	文本行高等于元素高度时, 一行文字相当于垂直居中
-	字体设置:
		font-family:字体名称;

-	CSS3版本 安装临时字体 (只在当前页面生效)
		步骤:
			1.	安装字体
				@font-face{
					font-family:自定义字体名称;
					src:url("字体地址");
				}
			2.	使用安装的字体
				选择器{
					font-family:字体名称;
				}

-	文字阴影
		text-shadow:x偏移 y偏移 [阴影模糊距离] 阴影颜色;

边框 *

边框不占用元素的宽高. 

格式1:
	一次指定四个方向的边框 (宽度+样式+颜色)
	border:宽度 样式 颜色值;

格式2:
	单独指定某一个方向边框的宽度 / 样式 / 颜色.
	左:	border-left:宽度 样式 颜色值;
	上:	border-top:宽度 样式 颜色值;
	右:	border-right:宽度 样式 颜色值;
	下:	border-bottom:宽度 样式 颜色值;


边框样式:
	-	实现	:	solid
	-	虚线	:	dashed
	-	点 	:	dotted

边框圆角

格式1.	
	一次指定四个角的圆角宽度值.
	border-radius:长度+单位;

格式2.
	单独指定每个角的圆角宽度值.
	上左:	border-top-left-radius:长度+单位;
	上右:	border-top-right-radius:长度+单位;
	下左:	border-bottom-left-radius:长度+单位;
	下右:	border-bottom-right-radius:长度+单位;

边框宽度值 支持百分比, 表示占用元素宽和高的百分比

边框阴影

​ 格式:
​ box-shadow:x偏移 y偏移 [阴影模糊大小] 阴影大小 阴影颜色;

处理溢出边框的内容

格式:
	overflow:
		-	visible	:	默认值 , 溢出显示.
		-	hidden	:	溢出隐藏		*
		-	scroll	:	添加滚动条
		-	auto	:	当溢出时, 自动添加滚动条	

表格的边框双线问题

设置给 table 如下的样式:
	border-collapse:collapse;

CSS盒模型 ( 框模型 ) ***

指的是元素在网页中 占用空间大小 的计算模型.

占用的宽度的空间:
	元素自身宽度+左右边框宽度+左右内边距+左右外边距.

占用的高度的空间:
	元素自身高度+上下边框宽度+上下内边距+上下外边距.

内边距 padding ***

指的是元素的内容 距离 自身边框的距离.

格式1.
	一次指定四个方向的内边距
	padding:长度+单位;

格式2.
	通过一个样式, 分别指定上下 和 左右的内边距.
	padding: 上下内边距 左右内边距;

格式3.
	通过一个样式, 分别指定 上,右,下,左的内边距
	padding:上 右 下 左;

格式4.
	单独指定每一个方向的内边距
	左:	padding-left:长度+单位;
	右:	padding-right:长度+单位;
	上:	padding-top:长度+单位;
	下:	padding-bottom:长度+单位;

外边距 margin ***

指的是元素的边框 距离 其他元素 盒模型的距离. 值可以是负数.

格式1.
	一次指定四个方向的外边距
	margin:长度+单位;

格式2.
	通过一个样式, 分别指定上下 和 左右的外边距.
	margin: 上下外边距 左右外边距;

格式3.
	通过一个样式, 分别指定 上,右,下,左的外边距
	margin:上 右 下 左;

格式4.
	单独指定每一个方向的外边距
	左:	margin-left:长度+单位;
	右:	margin-right:长度+单位;
	上:	margin-top:长度+单位;
	下:	margin-bottom:长度+单位;

外边距的特殊使用方式: 了解

1.	可以通过指定左右外边距的值 为 auto , 来实现自动居中.
2.	两个块元素之间, 上下外边距不会累加. 值较大者生效.
3.	外边距可以设置负数

鼠标形状 *

cursor	:
	-	default	:	默认鼠标形状,  跟随场景自动变化.
	-	pointer	:	手指形状 , 常用于提示用户 元素可点击.
	-	text	:	焦点形状(工字形)
	-	wait	:	等待
	-	help	:	帮助
	-	progress:	进行中	

列表样式 *

取消列表前置的数字 或 小圆点.

list-style-type:none;

透明度 *

opacity:0-1的浮点数字.
当值为1时, 表示不透明.
当值为0时, 表示完全透明.
当值为0.5时 , 半透明.

定位 ****

用于控制元素在网页中显示的位置 

默认定位 ( 静态定位 ) *****

默认定位情况下, 元素分为三类:
	1.	块元素:		独占一行, 可以设置宽度和高度.	例如: div , p ,ul ,ol ,li 等等
	2.	行内元素:	与其它元素共享一行, 从左至右排列. 一行排满时自动换行. 宽度和高度无法设置, 由内容撑开. 例如: span,b,i等等
	3.	行内块元素:	与其它元素共享一行, 从左至右排列, 一行排满时自动换行, 可以设置宽度和高度, 例如: img, button ,input等等

在默认定位情况下,  通过display样式, 调整元素的显示分类:
	display:
		-	block			:	块元素
		-	inline			:	行内元素
		-	inline-block	:	行内块元素
		-	none			:	不显示.

浮动定位 掌握

格式:	
	float:left/right;

浮动已经脱离了原有的默认定位方式. 
浮动极易引起周围元素的 显示错乱.

清除浮动带来的影响:
	控制元素的某个方向不允许出现浮动:
	clear:left/right/both;

相对定位

作用: 元素相对于自身当前位置, 进行x和y轴的移动.

格式:
	position:relative;

特点:
	元素偏移后, 依然占用原有的网页空间, 偏移后的元素 采用覆盖方式显示.

绝对定位

作用: 根据body的边框, 来确定自身的位置;
	  如果元素存在一个 设置了相对/绝对/固定定位的 祖先元素 .  就变成了根据这个祖先元素的边框来确定自身的位置;

格式:
	position:absolute;

特点:
	元素不再占用任何的网页空间 ,采用覆盖显示.

固定定位

作用:	根据浏览器的边框, 来固定自身的位置. 不会因为内容的滑动而滑动

格式:	
	position:fixed;

特点:
	 不占用网页空间 ,采用覆盖显示

相对定位 / 绝对定位 / 固定定位 确定自身位置的方式:

这三种定位, 都是通过如下四种样式来完成位置确定的:

	1.	left:长度+单位;
	2.	top:长度+单位;
	3.	right:长度+单位;
	4.	bottom:长度+单位;

在相对定位中:
	表示元素相对与当前自身位置 , 进行指定方向的偏移.
	例如:	想让元素 向右移动10个像素:
			left:10px 或 right:-10px
	例如:	想让元素 向上移动10个像素
			bottom:10px 或 top:-10px;

在绝对定位中:
	默认情况下是: 距离body四个边框的距离
	存在相对/绝对/固定定位祖先元素时: 距离此祖先元素四个边框的距离.
	
	设置bottom:0px时, 不是距离body底边0px , 而是浏览器窗口;

在固定定位中:
	距离浏览器某个方向边界的 距离;