这是我参与「第四届青训营」笔记创作活动的的第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; }