Java学习笔记-Day45 CSS 层叠样式表（二）

 
 

一、盒子模型

 
所有HTML元素可以看作盒子，在CSS中，盒子模型是用来设计和布局时使用。

CSS盒子模型本质上是一个盒子，封装周围的HTML元素。

盒子模型包括：外边距 margin、边框border、内边距padding和内容content。

 

二、CSS的标准属性（续）

 

1、内外边距属性

 

1.1、外边距属性

 
外边距属性：设置对象四边的外部边距。

属性	描述	取值
margin	检索或设置对象四边的外部边距	复合属性，看独立属性（可以为负值）
margin-top	检索或设置对象顶边的外部边距	长度单位
margin-bottom	检索或设置对象底边的外部边距	长度单位
margin-left	检索或设置对象左边的外部边距	长度单位
margin-right	检索或设置对象右边的外部边距	长度单位

外边距属性的特殊说明：

• 内联块级元素和块级元素的可以设置外边距。

• 内联元素可以设置左、右两边的外边距。若要设置上、下两边的外边距，必须先使该元素变为块级元素或内联块级元素。

• 如果给margin提供四个参数值，将按上、右、下、左的顺时针的顺序作用于四边。

• 如果给margin提供两个参数值，第一个用于上、下两边，第二个用于左、右两边。

• 如果给margin提供三个参数值，第一个用于上边，第二个用于左、右两边，第三个用于下边。
   

1.2、内边距属性

 
内边距属性：设置对象四边的内部边距。

属性	描述	取值
padding	检索或设置对象四边的内部边距	长度单位 或 百分比
padding-top	检索或设置对象顶边的内部边距	长度单位 或 百分比
padding-bottom	检索或设置对象底边的内部边距	长度单位 或 百分比
padding-left	检索或设置对象左边的内部边距	长度单位 或 百分比
padding-right	检索或设置对象右边的内部边距	长度单位 或 百分比

 
内边距属性的特殊说明

设置内联块级元素和块级元素的内边距：

• 内联元素可以设置左、右两边的内边距。若要设置上、下两边的内边距，必须先使该元素变为块级或内联块级元素。

• 改变padding的值，就改变了content的大小，而改变margin的值，则不改变content的大小。
   

2、边框属性

 
边框属性：设置边框的特性。

属性	描述	取值
border	复合属性。设置对象边框的特性	·<line-width> | <line-style> | <color>
border-width	设置或检索对象边框宽度	<length> | thin | medium | thick
border-style	设置或检索对象边框样式	none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
border-color	设置或检索对象边框颜色	<color>
border-radius	设置或检索对象使用圆角边框	[ <length> | <percentage> ]
border-top/bottom/left/right-width	设置或检索对象顶/底/左/右边样式	<length> | thin | medium | thick

 

3、背景属性

 
背景属性：设置对象的背景特性。

属性	描述	取值
background	复合属性。设置或检索对象的背景特性	看独立属性
background-color	设置或检索对象的背景颜色	<color>
background-image	设置或检索对象的背景图像	url(img/user.jpg)(相对路径)
background-repeat	设置或检索对象的背景图像如何平铺填充	repeat-x | repeat-y | [repeat | no-repeat
background-attachment	设置或检索对象的背景图像是随对象内容滚动还是固定的	fixed(固定) | scroll（滚动）
background-position	设置或检索对象的背景图像位置	[<percentage> | <length> ] | [ left | center |right | top | bottom ]

 

4、文本属性

 
文本属性：定义文本的外观。

属性	描述	取值
text-transform	检索或设置对象中的文本的大小写	none | capitalize | uppercase |
white-space	检索或设置对象内空格的处理方式	normal | pre | nowrap | pre-wrap | pre-line
text-align	检索或设置对象中内容的水平对齐方式	left | right | center
word-spacing	检索或设置对象中的单词之间的最小，最大和最佳间隙	normal |长度单位
letter-spacing	检索或设置对象中的字符之间的最小，最大和最佳间隙	normal | 长度单位
text-indent	检索或设置对象中的文本的缩进	长度单位
vertical-align	检索或设置对象内容的垂直对齐方式	top | middle | bottom
line-height	检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离	长度单位

 

5、字体属性

 

属性	描述	取值
font	复合属性。设置或检索对象中的文本特性	看独立属性
font-style	设置或检索对象中的字体样式	normal | italic | oblique
font-weight	设置或检索对象中的文本字体的粗细	normal | bold | bolder | lighter | <integer>
font-size	设置或检索对象中的字体尺寸	<length> | <percentage> | <absolute-size> | <relative-size>
font-family	设置或检索用于对象中文本的字体名称序列	<family-name> | <generic-family>
font-variant	设置或检索对象中的文本是否为小型的大写字母	normal | small-caps

特殊字体的引入：

• 如果本机有，可以直接在css中书写。

	font-family: '迷你简太极';

• 如果特殊字体，本机没有，需要引入时：

	@font-face{
		font-family: myFirstFont;src: url(font/sansation_light.woff);
	}

 

6、列表属性

 
列表属性：设置列表项目的相关内容。

属性	描述	取值
list-style	复合属性。设置列表项目相关内容	看独立属性
list-style-image	设置或检索作为对象的列表项标记的图像	none | <url>
list-style-position	设置或检索作为对象的列表项标记如何根据文本排列	outside | inside
list-style-type	设置或检索对象的列表项所使用的预设标记	disc | circle | square

列表属性的特殊说明：

• 去掉列表表示符

	ul li{list-style:none;}

• 引入特殊的列表项图标（设置列表项的位置）

	li{
		list-style-image: url(images/08_11.jpg);
		list-style-position:inside;
	}

 

7、用户界面属性

 
用户界面属性：包括重设元素尺寸、盒尺寸以及轮廓等。

属性	描述	取值
outline	复合属性。设置或检索对象外的线条轮廓	复合属性，看独立属性
outline-width	设置或检索对象外的线条轮廓的宽度	<length> | thin | medium | thick
outline-style	设置或检索对象外的线条轮廓的样式	none | dotted | dashed | solid | double | groove | ridge | inset | outset
outline-color	设置或检索对象外的线条轮廓的颜色	<color>
cursor	设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。	default | none| pointer
text-overflow	当块容器overflow为非visible时，定义内联内容溢出其块容器是否截断或者添加(…)及自定义字符	clip | ellipsis

设定轮廓（outline）

	.test {
		width: 200px;
		padding: 10px;
		outline-width: 10px;
		outline-style: solid;
		outline-color: #f00;
		border: 3px solid #333;
	}

文本溢出

（1）单行文本溢出

	.danText {
		width: 200px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

（2）多行文本溢出

	.duoText {
		width: 200px;
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		word-break: break-all;
		-webkit-box-orient: vertical; /*子元素应该被水平或垂直排列*/
		-webkit-line-clamp: 3; /*3行后显示省略号*/
	}

 

三、CSS3

 

1、CSS3的简介

 
CSS3是CSS的最新版本，扩展了CSS2标准，目的是为网页元素提供更加丰富的显示效果。

CSS3核心功能如下：

（1）增加了如弹性魔盒、多列布局、动画等新增属性模块。
（2）扩展了CSS2的属性以及取值范围。
（3）增加了样式选择符。
（4）增加了多个取值单位。
（5）增加了多个语法以及函数用于页面元素的计算。
 

2、浏览器对CSS3的兼容性

 
低版本的浏览器对css3不能兼容，至少保证IE10以上才能兼容css3的属性（传统的网站中尽量不要使用CSS3）。

部分浏览器的版本需要声明私有CSS3属性。

高版本的浏览器对CSS3兼容性好。
 

3、浏览器CSS私有属性

 
浏览器供应商发布浏览器新版本时，对CSS的新属性一般使用私有属性命名，待CSS属性稳定后，在修改为w3c标准的属性命名。

-moz-：代表FireFox浏览器CSS3私有属性。
-ms-：代表IE浏览器私有属性。
-webkit-：代表safari、chrome浏览器私有属性。
-o-：代表opera浏览器私有属性。

.div {
	-moz-border-radius: 15px;  
	-webkit-border-radius: 15px; 
	border-radius: 15px; 
}

注意：内核命名会从上到下检索第一个可以执行的属性，避免浏览器中间版本对css3的不兼容。
 

4、CSS3的新样式属性

 

4.1、定位模块新增属性

 
position：检索对象的定位方式，新增了fix取值范围。
clip：对于绝对定位的元素进行矩形的剪切。
 

4.1.1、position属性

 
position：新增了sticky取值范围，初始时在网页上按照文档流显示位置显示，但是当出现网页滚动时，会吸附在网页的某一个位置上。

sticky与fixed的比较：

• 相同点：设定后都可以将元素固定到浏览器的某一个位置，而不会根据滚动条的滚动而消失在视线之外，都需要通过top、left等属性设定悬浮位置。
• 不同点： sticky初始时遵循文档流，fixed初始时悬浮不遵循文档流。
   

4.2、布局模块新增属性

 
display ：增加了用于弹性盒模型的取值范围（弹性盒模型适用于响应式布局），取值如下：

• box：原始的盒子模型。（已经过时）
• flex：新版本的盒子模型。
• inline-flex：新版本的内联盒子模型。
   

4.3、边框模块新增属性

 
border-radius 系列属性：设定边框的夹角为圆角，相关属性如下：

• border-radius：通过四个值来控制目标区域的夹角为圆角。

	border-radius: 50px 50px 50px 50px;

• border-top-left-radius：控制目标区域的左上角夹角为圆角。

	border-top-left-radius: 50px;

• border-top-right-radius：控制目标区域的右上角夹角为圆角。

	border-top-right-radius: 50px;

• border-bottom-right-radius：控制目标区域的右下角夹角为圆角。

	border-bottom-right-radius: 50px;

• border-bottom-left-radius：控制目标区域的左下角夹角为圆角。

	border-bottom-left-radius: 50px;

border-radius 系列属性的取值范围：

① length：圆角的半径长度。
② percentage：百分比（圆角半径的长度 = 边长*percentage）。
 

4.4、颜色模块新增属性

 
opcity：检索或设置对象的透明度。

取值范围：使用浮点数指定对象的不透明度。值被约束在[0.0~1.0]范围内，如果超过了这个范围，其计算结果将截取到与之最相近的值。
 

5、CSS3新属性模块

 

5.1、过渡（ transition ）

 
过渡（ transition ）：可以使目标元素以动画的效果完成样式变化（例如位置变化、颜色变化）。

属性名称	属性描述	取值范围
transition	以下四个属性的符合属性
transition-property	设置对象中的参与过渡的css属性	all：所有属性。 属性名称。 None：没有属性参与过度.。
transition-duration	设置对象过渡的持续时间	单位为s（秒）或ms（ms）
transition-timing-function	设置对象中过渡的动画类型	linear： 线性过渡。 ease： 平滑过渡。 ease-in： 由慢到快。 ease-out： 由快到慢。 ease-in-out： 由慢到快再到慢。
transition-delay	设置对象延迟过渡的时间	单位为s（秒）或ms（ms）

• 复合属性示例：

	transition:width,8s,ease,5s;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		/*初始化样式*/
		li {
			width:100px;
			border: 1px solid black;
		}

		/*鼠标悬浮样式*/
		li:hover {
			width:300px;
		}

		li {
			transition:width,8s,ease,5s;
		}
	</style>
	<body>
		<ul>
			<li class="propertyBackgroundColor">背景色过渡1</li>
			<li class="propertyBackgroundColor">背景色过渡2</li>
			<li class="propertyBackgroundColor">背景色过渡3</li>
		</ul>
	</body>
</html>

• 背景颜色变化案例（鼠标悬浮后背景颜色样式发生变化）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		/*初始化样式*/
		li {
			background-color: #eee;
		}

		/*鼠标悬浮样式*/
		li:hover {
			background-color: red;
		}

		li {
			/*设定使用转换的css属性,多个属性使用空格分开， 不是所有属性都可以转换的*/
			transition-property: background-color color;
			/*设定持续时间*/
			transition-duration: 2s;
			/*设定动画类型为由慢到快*/
			transition-timing-function: ease-in;
		}
	</style>
	<body>
		<ul>
			<li class="propertyBackgroundColor">背景色过渡1</li>
			<li class="propertyBackgroundColor">背景色过渡2</li>
			<li class="propertyBackgroundColor">背景色过渡3</li>
		</ul>
	</body>
</html>

 

5.2、转换（ Transform ）

 
转换（transform）：设定目标区域的转换方式（大小、旋转、位移等）。

转换分为2D转换和3D转换。

转换的css样式说明如下（后四项用于3D转换）：

 

5.2.1、2D转换

 
2D转换：在一个平面内进行元素的转换。

2D转换的核心功能如下：
（1）中心点设置.
（2）位置转换。
（3）大小转换。
（4）顺（逆）时针转动。
（5）扭曲转动。

2D转换属性设定：2d的全部转换功能都通过设定transform属性完成，但取值不同。

	/*设定元素在当前中心点位置，横轴纵轴增大2倍*/
	transform: scale(2,2);

中心点设置：设定逆时针转动、扭曲转动的中心点。默认为50%（元素的中心），中心点的设定以当前元素的左上角为基准，取值范围：百分比（常用）、长度。

	transform-origin:50% 50%;

2D转换的大小转换属性：

• scale(number,number)： 指定元素的2D缩放（x、y轴）比例。如果第二个参数未提供，则默认取第一个参数的值 。
• scalex(number)： 指定对象X轴的（水平方向）缩放比例。
• scaley(number)： 指定对象Y轴的（垂直方向）缩放比例。

	/*设定元素在当前中心点位置，横轴纵轴增大2倍*/
	transform: scale(2,2);

2D转换的位置转换属性：

• translate(percetange/length, percetange/length)： 指定对象的2D位移（x、y轴），如果第二个参数未提供，则默认值为0 。
• translatex(percetange/length)： 指定对象X轴（水平方向）的平移量。
• translatey(percetange/length)： 指定对象Y轴（垂直方向）的平移量。

	/*设定元素向右侧以及下侧移动20px*/
	transform: translate(20px,20px);

2D转换的顺（逆）时针转动属性：
rotate(deg)： 指定元素相对中心点的旋转角度，单位deg，可以为负值。

	transform-origin:50% 50%;
	transform:rotate(30deg);

2D转换的扭曲旋转：
skew(skewX,skewY)：设定元素在x、y轴的扭曲转动角度，单位deg。

	transform:skewX(89deg);
	transform:skewY(89deg);
	transform:skew(89deg,89deg);

 

5.3、动画（ animation ）

 
动画（animation）：代替传统的flash制作动画特效，复杂的动画效果都是由多个动画效果组成。

定义动画的步骤：

（1）声明动画：定义一组连续的css变化动作。
（2）绑定动画：将动画效果绑定给网页元素，声明动画执行方式。
 

5.3.1、声明动画

 
声明动画：使用@keyframes声明动画名称，使用百分比以及css属性声明动画的执行顺序以及执行内容（ @keyframes为css3新增语法规则）。

/* kfc是动画名 */
@keyframes kfc{
	/*百分比控制执行阶段*/
	0%{
		/*样式控制显示内容*/
		width: 100px;
		height:40px;
		background-color: orange;
	}
	25%{
		width: 200px;
		height:40px;
		background-color: cadetblue;
	}
	50%{
		width: 300px;
		height:40px;
		background-color: blue;
	}
	75%{
		width: 400px;
		height:40px;
		background-color: yellow;
	}
	100%{
		width: 500px;
		height:40px;
		background-color: aqua;
	}
}

 

5.3.1、绑定动画

 
绑定动画：使用动画对应的css属性将动画绑定到网页元素上，并规定动画执行的时间、方式等。相关css属性如下：

属性名称	属性描述	取值范围
animation-name	动画名称	与keyframes声明的动画名称对应。
animation-duration	动画的持续时间	取值范围时间，单位s、ms。
animation-timing-function	设置对象过渡的持续时间	linear： 线性过渡。 ease： 平滑过渡。 ease-in： 由慢到快。 ease-out： 由快到慢。 ease-in-out： 由慢到快再到慢。
animation-delay	动画延迟的时间	取值范围时间，单位s、ms。
animation-iteration-count	动画的循环次数	取值范围整数、 infinite（无限循环）。
animation-direction	动画在循环中是否反向运动	normal： 正常方向。 reverse： 反方向运行。 3. alternate： 动画先正常运行再反方向运行，并持续交替运行。 4.alternate-reverse： 动画先反运行再正方向运行，并持续交替运。
animation-fill-mode	设置元素结束动画时的状态	none： 默认值。不设置对象动画之外的状态。 forwards： 设置对象状态为动画结束时的状态 。 backwards： 设置对象状态为动画开始时的状态。
animation	动画的符合属性	其余属性值

	animation: animations 5s  ease-in-out 1s infinite alternate-reverse backwards;

• 代码案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1{
				width: 50px;
				height:40px;
				background-color: red;
			}
			
			.div1:hover{
				animation: kfc 10s;
			}
			
			
			@keyframes kfc{
				0%{
					width: 100px;
					height:40px;
					background-color: orange;
				}
				25%{
					width: 200px;
					height:40px;
					background-color: cadetblue;
				}
				50%{
					width: 300px;
					height:40px;
					background-color: blue;
				}
				75%{
					width: 400px;
					height:40px;
					background-color: yellow;
				}
				100%{
					width: 500px;
					height:40px;
					background-color: aqua;
				}
			}
		</style>
	</head>
	<body>
		<div class="div1">
			
		</div>
	</body>
</html>