一、CSS 的元素显示模式
1、元素显示模式的分类
1.1、块元素
常见的块元素:
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
<div>
标签是最典型的块元素。
块级元素的特点:
- 比较霸道,自己独占一行.
- 高度,宽度、外边距以及内边距都可以控制.
- 宽度默认是容器(父级宽度)的100%.
- 是一个容器及盒子,里面可以放行内或者块级元素.
注意:文字类的元素内不能放块级元素
<p>
标签主要用于存放文字,因此<p>
里面不能放块级元素,特别是不能放<div>
,同理<h1>~<h6>
等都是文字类块级标签,里面也不能放其他块级元素
1.2行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
等,其中<span>
标签是最典型的行内元素。有的地方也将行内元素称为内联元素.
行内元素的特点:
- 相邻行内元素在一行上,一行可以显示多个.
- 高、宽直接设置是无效的.
- 默认宽度就是它本身内容的宽度.
- 行内元素只能容纳文本或其他行内元素.
注意:链接里面不能再放链接.
特殊情况链接<a>
里面可以放块级元素,但是给<a>
转换一下块级模式最安全.
1.3行内块元素
常见的行内块标签:
<img />、<input />、<td>
行内块元素的特点:
- 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙.
- 一行可以显示多个(行内元素特点).
- 默认宽度就是它本身内容的宽度(行内元素特点).
- 高度,行高、外边距以及内边距都可以控制(块级元素特点).
二、元素显示模式转换
显示模式的属性是display ,作用:可以改变标签的特点.
转换为块元素:display:block;
转换为行内元素:display:inline;
转换为行内块:display: inline-block;
单行文字垂直居中
让文字的行高等于盒子的高度 , 就可以让文字在当前盒子内垂直居中
div {
/* 没有高时,行高也能撑大盒子,但是不是高的属性*/
height: 40px;
/* 行高等于高 */
line-height: 40px;
}
四、CSS的背景
1.背景颜色
background-color:red;
背景颜色
背景颜色默认是透明(transparent),我们也可以手动指定背景颜色为透明色
2.背景图片
background-image:url(“图片名称”); 背景图片
注意:背景图片后面的地址,千万不要忘记加 URL
background-image: url("./img/logo.png");
3.背景平铺
background-repeat
background-repeat: no-repeat;
- repeat 默认值 平铺
no-repeat
不平铺 不重复出现repeat-x
向水平方向进行平铺repeat-y
向垂直方向进行平铺
4.背景位置
background-position:x y;
水平位置 垂直位置
水平位置:left center right
垂直位置:top center bottom
第一种:参数是方位名词
如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
第二种:精确单位 (具体数值)
background-position: 10px 10px
- 如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
- 如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
第三种:混合使用
则第一个值是 x 坐标,第二个值是 y 坐标
五、背景固定
background-attachment: scroll或者fixed;
取值:scroll 滚动 ,fixed 固定
背景简写
background: 背景颜色 , 背景图片地址, 背景平铺, 背景图像滚动 , 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top ;
注意:不要又使用background-color 等等设置了以后 , 然后再来background
背景透明
background: rgba(0, 0, 0, 0.3);
RGB 值是 255,255,255 表示的颜色是白色,如果是 0,0,0 表示的就是黑色。
最后一个参数是 alpha 透明度,取值范围在 0~1之间