css

191 阅读2分钟

link

伪类选择器

这是p标签

p::first-line 块级元素的属性,第一行

p::first-letter 首个字符(可以是汉字,字符,不能是数字)

P::before(在文本前插入)

:nth-child() (选择指定的标签)

::selection (选中之后的变化)

:enabled(启用输入的边框)

:disabled(选择不启用的输入边框)

:link (点击的时候会发生改变)

:hover(鼠标放到超链接后发生的变化)

复合选择器,选择器

[href] 属性选择器 href^="http",href$="http"以http开头/结尾

p,b,span分组选择器,逗号分隔,id,类,属性..

p+b 相邻的兄弟选择器,即匹配到b

p~b 普通的兄弟选择器,匹配p后边所有的b(同等级)

布局模型,盒模型

float:left; 向左浮动

auto: 自适应

border-radius:7px; 将块元素的四角圆化 border-top-left-radius 左上角

border: 1px solid red; solid实线, dashed虚线, dotted点线

text-align: center; 水平居中 line-height:aapx 垂直居中

层叠和继承

优先级:外部引用样式<文档内嵌样式<元素内嵌样式 样式继承只适用于元素的外观, 布局不会继承.

绝对定位和相对定位

position:absolute(绝对定位) relative(相对定位) fixed(固定定位):相当于一个固定的窗口,即使窗口内容较多,出现在下一页,也不能通过滚动条下拉.

绝对定位:父容器使用相对定位,子元素使用绝对定位后,这样的位置不在于浏览器左上角,而是相对于父容器左上角,可以使用top,left,right,bottom,这四个元素在定位后才能生效.

使用相对定位和绝对定位后, 当屏幕放大或缩小,视图的位置也不会乱跑. 使用相对定位时,就算元素被偏移了,但是仍然占据着没偏移前的空间. 被设置了绝对定位的元素,在文档流中是不占据空间的,如果元素设置了绝对定位,那么它在文档流中的位置会被删除.