CSS基础 | 青训营笔记

106 阅读2分钟

这是我参与「第四届青训营」笔记创作活动的的第2天

录播中我不熟悉的部分整理如下

选择格式1

input输入框有个属性叫disabled表示输入项禁用 而[disabled]{background: #eee;}这种格式可以对所有禁用的输入框进行更改

选择格式2

input[type='password']{}

选择格式3

a[herf^="#"]{} 表示herf的值以#开头的会被选上

选择格式4

a[herf$=".jpg"]{} 表示属性的值以.jpg结尾的会被选上

伪类

1.状态性伪类

:focus{} 输入框聚焦

2.结构性伪类

input.error{} 只对input里的error类生效

选择器

亲子组合 A>B 选中B,如果它是A的子元素 兄弟组合 A~B 选中B如果它在A后且与A同级 相邻选择器 A+B 选中B如果它在紧跟在A的后面

透明度

#ff000069中的69相当于alpha值为0.41

特异度

css里当有多个选择器选中相同目标时特异度高的(出现次数低的)将会生效

显式继承

inherit让不可继承的属性变得可继承

boxsizing:border-box

一种计算方式将border也计算在width,height里

块级 & 行级 &行内块

block不和其他盒子并列摆放单独一行,inline不会换行知道一行排满width,height无效。display:inline-block 简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

overflow-wrap:break-word

表示如果行内没有多余的地方容纳该单词到结尾,则那些正常的不能被分割的单词会被强制分割换行。

Flex布局是什么?

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为>Flex布局。.box{ display: flex;}行内元素也可以使用Flex布局。.box{ display: inline-flex; } Webkit内核的浏览器,必须加上-webkit前缀。 .box{ display: -webkit-flex; display: flex; }