Method of measuring row height:

Single line of text is centered vertically

One of the places we use the most line height is: you can make a single line of text vertically aligned in the center of the box

The line height of the text is equal to the height of the box

Row height = upper distance + content height + lower distance

The upper and lower distances are always equal, so the text appears to be centered vertically .

Three relations between row height and height

If the line height is equal to the height text will be vertically centered

If the line height is greater than the height, the text will be lower

If the line height is less than the height, the text will be higher

Case: Navigation bar

Mouse over the effect:


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*1. 变化样式 有大小  一行显示  我们想到了 行内块元素*/
		a {
			/*一定要进行模式转换 行内块*/
			display: inline-block;
			width: 100px;
			height: 30px;
			/*行高等于高度 可以让单行文本呢垂直居中*/
			line-height: 30px;
			background-color: pink;
			/*可以让文字水平居中*/
			text-align: center;
			color: #fff;
			text-decoration: none;
		}
		/*2. 鼠标经过 变化底色 和 文字的颜色*/
		a:hover {
			background-color: orange;
			color: yellow;
		}
	</style>
</head>
<body>
	<a href="#">新闻</a>
	<a href="#">体育</a>
	<a href="#">汽车</a>
	<a href="#">好用</a>
</body>
</html>

CSS background

Background-color

background-color:颜色值;   默认的值是 transparent  透明的

Background image (background-image)

background-image : none | url (url) 
parameter effect

none No background image (default)

url Specify background image using absolute or relative address
background-image : url(images/demo.png);
Note : We advocate the background behind the picture address, url without the quotation marks .

parameter	effect
none	No background image (default)
url	Specify background image using absolute or relative address

Case: Background image presentation

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.bg {
			width: 800px;
			height: 500px;
			background-color: pink;
			/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
			background-image: url(images/l.jpg);
		}
	</style>
</head>
<body>
	<div class="bg">
		12312312312312312312312312312
	</div>
</body>
</html>

Background-repeat

background-repeat : repeat | no-repeat | repeat-x | repeat-y 
parameter effect

repeat The background image is tiled vertically and horizontally (default)

no-repeat Background image is not tiled

repeat-x The background image is tiled horizontally

repeat-y The background image is tiled vertically

parameter	effect
repeat	The background image is tiled vertically and horizontally (default)
no-repeat	Background image is not tiled
repeat-x	The background image is tiled horizontally
repeat-y	The background image is tiled vertically

Case: Background image tile

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.bg {
			width: 800px;
			height: 500px;
			background-color: pink;
			/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
			background-image: url(images/l.jpg);
			/*默认的是平铺图 repeat*/
			/*background-repeat: repeat;*/
			/*背景图片不平铺*/
			/*background-repeat: no-repeat;*/
			/*横向平铺 repeat-x*/
			/*background-repeat: repeat-x;*/
			/*纵向平铺*/
			background-repeat: repeat-y;
		}
	</style>
</head>
<body>
	<div class="bg">
		12312312312312312312312312312
	</div>
</body>
</html>

Background-position focus

background-position : length || length

background-position : position || position 
parameter value

length Percentage | Length value composed of floating-point numbers and unit identifiers

position top | center | bottom | left | center | right noun

note:

The background-image attribute must be specified first

Position is followed by x and y coordinates. You can use position nouns or precise units.

If you specify two values, both of which are azimuth names, the order of the two values is irrelevant . For example, left top and top left have the same effect

If only one position noun is specified, the other value will be centered by default.

If position is followed by precise coordinates, then the first one must be x and the second one must be y

If only one value is specified, the value must be the x coordinate, and the other one is centered vertically by default

If the specified two values are a mixture of precise units and bearing names, the first value is the x coordinate, and the second value is the y coordinate

The most used in actual work is the center alignment of the background image.

parameter	value
length	Percentage \| Length value composed of floating-point numbers and unit identifiers
position	top \| center \| bottom \| left \| center \| right noun

Case: background position

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.bg {
			width: 800px;
			height: 500px;
			background-color: pink;
			/*背景图片 1. 必须加url 2. url 里面的地址不要加 引号*/
			background-image: url(images/l.jpg);
			/*背景图片不平铺*/
			background-repeat: no-repeat;
			/*背景位置*/
			/*background-position: x坐标 y坐标;*/
			/*background-position: right top; 右上角*/
			/*background-position: left bottom; 左下角*/
			/*background-position: center center; 水平居中 垂直居中*/
			/*则两个值前后顺序无关 因为是方位名词*/
			/*background-position:  center left; */
			/*如果只指定了一个方位名词，另一个值默认居中对齐*/
			background-position: top; 
		}
	</style>
</head>
<body>
	<div class="bg">
		12312312312312312312312312312
	</div>
</body>
</html>

Case: Align the box on the left side of the small picture

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.icon {
			width: 150px;
			height: 35px;
			background-color: pink;
			background-image: url(images/sina.png);
			background-repeat: no-repeat;
			background-position: 10px center;
		}
	</style>
</head>
<body>
	<div class="icon"></div>
</body>
</html>

Background-attachment

Background attachment is to explain whether the background is rolling or fixed
background-attachment : scroll | fixed 
parameter effect

scroll The background image scrolls with the content of the object

fixed Fixed background image

parameter	effect
scroll	The background image scrolls with the content of the object
fixed	Fixed background image

Case: background attachment

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			height: 3000px;
			background-image: url(images/sms.jpg);
			background-repeat: no-repeat;
			/*这种写法一般是我们以后 超大背景图片的做法 背景定位*/
			background-position: center top;
			/*背景固定的*/
			background-attachment: fixed;
		}
		p {
			font-size: 30px;
			color: #fff;
		}
	</style>
</head>
<body>
	<p>天王盖地虎，小鸡炖蘑菇</p>
</body>
</html>

Background shorthand

background: The writing order of attribute values is officially not mandatory. For readability, I suggest you write as follows:

background: background color background picture address background tile background scroll background position;
background: transparent url(image.jpg) repeat-y  scroll center top ;

Case: background shorthand

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			height: 3000px;
			/*background-color: #ccc;
			background-image: url(images/sms.jpg);
			background-repeat: no-repeat;
			background-position: center top;
			background-attachment: fixed;*/
			/*background: 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置;*/
			background: #ccc url(images/sms.jpg) no-repeat fixed center top;
		}
		p {
			font-size: 30px;
			color: #fff;
		}
	</style>
</head>
<body>
	<p>天王盖地虎，小鸡炖蘑菇</p>
</body>
</html>

Case: Comprehensive case of link navigation bar

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.nav {
			/*让里面的6个链接 居中对齐水平  这句话对 行内元素 行内块元素都有效果的*/
			text-align: center;
		}
		.nav a {
			/*有大小的 因为a 是行内元素 不能直接设置宽度和高 必须要转换 行内块元素*/
			display: inline-block;
			width: 120px;
			height: 50px;
			/*行高等于盒子的高度 就可以让单行文本垂直居中*/
			line-height: 50px;
			color: #fff;
			/*background-color: pink;*/
			text-decoration: none;
			/*背景简写*/
			background: url(images/bg.png) no-repeat;
		}
		/*鼠标经过nav里面的链接， 背景图片更换一下就好了*/
		.nav a:hover {
			background-image: url(images/bgc.png);
		}
	</style>
</head>
<body>
	<div class="nav">
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
		<a href="#">网站首页</a>
	</div>
	<a href="#">123</a>
</body>
</html>

Transparent background (CSS3)

background: rgba(0, 0, 0, 0.3);
The last parameter is the alpha transparency range of 0~1

We are accustomed to omit the 0 of 0.3 and write background: rgba(0, 0, 0, .3);

Note : Translucent background means that the background of the box is translucent, and the content inside the box will not be affected

Because it is CSS3, versions lower than ie9 are not supported.

Case: Transparent background

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.alpha {
			width: 300px;
			height: 300px;
			background: rgba(0, 0, 0, .2);
		}
	</style>
</head>
<body>

	<div class="alpha">
		哒哒哒
	</div>
</body>
</html>

Background summary

Attributes effect value

background-color background color Predefined color value/Hexadecimal/RGB code

background-image Background picture url (image path)

background-repeat Whether to tile repeat/no-repeat/repeat-x/repeat-y

background-position Background position length/position are the x and y coordinates respectively, remember that if there is an exact numerical unit, you must follow the writing method of X first, then Y

background-attachment Fixed or scrolling background scroll/fixed

Background shorthand simpler Background color background picture address background tile background scroll background position; they have no order

Transparent background Make the box translucent background: rgba(0,0,0,0.3); must be followed by 4 values

(CSS learning record): CSS background (background)

Line-height

Row height measurement

Single line of text is centered vertically

Case: Navigation bar

CSS background

Background-color

Background image (background-image)

Case: Background image presentation

Background-repeat

Case: Background image tile

Background-position focus

Case: background position

Case: Align the box on the left side of the small picture

Background-attachment

Case: background attachment

Background shorthand

Case: background shorthand

Case: Comprehensive case of link navigation bar

Transparent background (CSS3)

Case: Transparent background

Background summary

Guess you like

Attributes	effect	value
background-color	background color	Predefined color value/Hexadecimal/RGB code
background-image	Background picture	url (image path)
background-repeat	Whether to tile	repeat/no-repeat/repeat-x/repeat-y
background-position	Background position	length/position are the x and y coordinates respectively, remember that if there is an exact numerical unit, you must follow the writing method of X first, then Y
background-attachment	Fixed or scrolling background	scroll/fixed
Background shorthand	simpler	Background color background picture address background tile background scroll background position; they have no order
Transparent background	Make the box translucent	background: rgba(0,0,0,0.3); must be followed by 4 values