- 固定定位(fixed)
固定定位是绝对定位的一种特殊形式。它以浏览器窗口作为参照物来定义网页元素。当position属性的
取值为fixed时,即可将元素的定位模式设置为固定定位。
当对无素设置固定定位后,它将脱离标准文档流的控制,始终依据浏览器窗口来定义自己的显示位置。
不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化,该无素都会始终在浏览器窗口的固定位
置。
固定定位有两点:
1、固定定位的元素跟父亲没有任何关系,只认浏览器。
2、固定定位完全脱标,不占有位置,不随着滚动条滚动。
2.叠放次序(z-index )
当对多个元素同时设置定位时,定位元素之间有可能会发生重叠。
定位模式 是否脱标占有位置 是否使用边偏移 移动位置基准
1.静态static 不脱标正常模式 不可以 正常模式
2.相对定位relative 脱标,占有位置 可以 相对自身位置移动
3.绝对定位absolute 完全脱标,不占有位置 可以 相对定位父级移动位置
4.固定定位fixed 完全脱标,不占有位置 可以 相对浏览器移动位置
3.display显示
display设置或检索对象是否如何显示
display: none 隐藏对象(不占有位置)
display: block显示对象,除了转换为块级元素之外,同时还有显示元素的意思。
特点:隐藏之后,不再保留位置,下面的元素会跑上去。
/* display: none; /
/ 隐藏某个元素 display: block 显示某个元素 /
/ visibility: visible; 显示某个元素 /
visibility: hidden;
/ 隐藏某个元素 */
overflow溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible:不剪切内容也不添加滚动条。
hidden:不显示超过对象尺寸的内容,超出的部份隐藏掉。
scroll:不管超出内容否,总是显示滚动条。
auto:超出自动显示滚动条,不超出不显示滚动条。
CSS用户界面样式:鼠标样式,表单轮郭
4.鼠标样式cursor
- 我是箭头
- 我是小手
- 我是移动
- 我是文本
- 轮郭outline
是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用 textarea {
resize: none; /* 防止拖拽 /
outline: none; / 取消边框 */
}
6.vertical-align 垂直对齐
vertical-align不影响块级元素中心内容对齐,它只针对于行内元素或者行内块元素,特别是行内块元
素。通常用来控制图片/表单与文字的对齐。
vertical-align: baseline 基线对齐,默认的是文字和图片基线对齐
vertical-align: middle 垂直居中,
vertical-align: top 顶部对齐
vertical-align: bottom 底部对齐
- 溢出的文字隐藏white-space,text-overflow
white-space设置或检索对象内文本显示方式,通常我们使用于强制一行显示内容。
normal:默认处理方式
nowrap:强制在同一行内显示所有文本,直到文本结束或者遭遇br标签对象才换行。
li {
width: 260px;
height: 30px;
border: 1px solid red;
line-height: 30px;
white-space: nowrap; /* 强制在同一行内显示所有文本 /
text-overflow: ellipsis; / 溢出的部份用省略号替代 /
overflow: hidden; / 超出的部分隐藏 */
}
css3 层叠样式表的升级版本:层叠样式,对网页布局、字体、颜色、背景灯效果做出控制
css3新增的选择器
1.属性选择器
属性选择器可以根据元素特定属性的来选择元素。这样可以不用借助于类或id选择器。
注:类选择器,属性选择器,伪类选择器权重是10
属性选择器还有以下匹配规则(E表示选择器,att表示属性值,val表示匹配的内容)
选择器 简介
E[att] 具有att属性的E元素
E[att=val] 具有att属性且值为val的E元素
E[att^=val] 具有att属性且值以val开头的E元素
E[att$=val] 具有att属性且值以val结尾的E元素
E[att*=val] 具有att属性且值包含val的E元素
2.结构伪类选择器
结构伪类选择器主要根据文档结构来选择元素,常用于根据父级选择器里面的子元素 权重10
选择符 简介
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹配父元素中最后一个E元素
E:nth-child(n) 匹配父元素中的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个