复合选择器
- 后代选择器
- 子类选择器
- 并集选择器
- 链接伪类选择器
-
a:link 选择所有未被访问的链接
-
a:visited 选择所有已被访问的链接
-
a:hover 选择鼠标上的链接
-
a:active 鼠标按下并未弹起时
5.:focus伪类选择器
用于选取获得焦点的表单元素,用于<input>
类表单标签。
元素显示模式
分为块元素和行内元素
块元素
大概有<h1>~<h2>,<p>,<div>,<ul>,<ol>,<li>
特点:
- 独自占领一行
- 宽度高度内外边距可以自己决定
- 宽度默认100%
- 可以装其他块元素和行内元素
注意:如<h1>~<h2>,<p>
等文字类块级标签里面不能放其他块级标签。
行内元素
大概有<a>,<strong>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>
特点:
- 一行可以显示多个
- 高度与宽度直接设置是无效的
- 默认宽度是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意:<a>
标签里不能放置<a>
标签,但可以放置块级标签。
行内块元素
即同时具有块元素与行内元素的特点,有<img/>,<input/>,<td>
等。
特点:
- 在一行内,可以显示多个元素,但它们中间存在空白间隙
- 有默认的宽度,即内容的宽度
- 可以自行设置高度与宽度
元素显示模式的转换
转换为块元素:
display: block;
转换为行内元素:
display: inline;
转换为行内块元素:
display: inline-block;
背景
1.背景图片
常用于制作logo,插入大型图片和小装饰图片。
background-image: none\url(url);
2 背景平铺
使用背景图片一般默认为平铺。
background-repeat: repeat\no-repeat\repeat-x\repeat-y;
repeat 全铺开
no-repeat 不铺开
repeat-x\repeat-y 向x轴铺开和向y轴铺开
3 背景图片位置
改变图片在背景中的位置
background-position: x,y;
可以使用方位名词,如:top,bottom,left,right,也可以使用参数精准单位,如:px,em等,还可以使用混合单位。
4 背景图像固定
background-attachment属性设置背景图像是否固定或者随着页面其余部分滚动。后期可以制作视差滚动的效果。
background-attachment: scroll\fixed;
scroll 背景图像随着内容而滚动
fixed 把背景图像固定
5 背景属性复合写法
非固定型写法
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 图片位置;
6 背景颜色半透明
background-color: rgba(0, 0, 0, 0.3);
实例操作
设计图片链接的方式
第一步 将<a>
标签设定为行内块元素或者块元素
第二步 插入背景图地址
第三步 设置背景图的属性值
第四步 将背景图所在的盒子添加链接伪类选择器
浮动
浮动的特性:
- 浮动会脱离标准流,即浮动的盒子不再保留原先的位置
- 浮动元素会在一行内显示并且会在顶部对齐
- 浮动元素会具有行内块元素的特性
常与标准流父级搭配
浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流
清除浮动
常常用于父级盒子没有设定高度时,为了防止两个盒子重叠而采取清除浮动的措施。
清除浮动的本质:清除浮动元素脱离标准流造成的影响。
清除浮动的策略:闭合浮动。
清除浮动的方法:
- 添加额外标签(隔墙法)
- 在父级添加overflow属性
- 在父级添加after 为元素
- 在父级添加双伪元素
具体操作:
1 在浮动元素末尾加入一个空标签(必须为块元素),如
<div style="clear: both\left\right"></div>
2 在父级盒子加入属性值overflow,如
overflow: hidden\auto\scroll;
3 添加以下代码
4 添加以下代码