CSS3
虽然现在前端技能树愈加的复杂繁琐,但是CSS还是不得不学的东西
LESS/SCSS
- 计算属性
- 样式变量
- 混合
- 嵌套
伪元素与伪类
单冒号:用于 CSS3 伪类，双冒号::用于 CSS3 伪元素。对于 CSS2 中已经有的伪元素，例如 :before，单冒号和双冒号的写法 ::before 作用是一样的。
- :focus 聚焦伪类(当前页面活的焦点的元素)
- ::selection 选定伪元素(被鼠标点击拖动框出来的元素)
伪元素实例
浮动清除:
.clear:after {
content: '';
display: block;
clear: both;
}
画分割线:
.spliter::before, .spliter::after {
content: '';
display: inline-block;
border-top: 1px solid black;
width: 200px;
margin: 5px;
}
属性选择符
标签名[属性名]
p.s.
img[title] //带有title属性的img标签
a[href^="http://"] //http连接
a[href^="https://"] //https连接
a[href~="www"] //含有www的连接
子代选择器
- 空格 寻找所有小辈
寻找直系子代
- 寻找同辈
要选择的子元素:nth-child(在父级元素的位置) //所有父元素下的子节点都参与计数
p.s.
tr:nth-child(odd)//所有奇数的tr
父级元素 要选择的子元素类型:nth-of-type(在父级元素的位置) //只有对应类型的子节点参与计数
p.s.
body p:nth-child(3)//body内的第3个p
位置计数从1开始,odd为奇数,even为偶数,某数n (P.S. 3n)选取为所有某数 (P.S. 3)倍数的元素 ,之后再 + 某数为从第某数算起
p.s.
tr:nth-child(3n+4) //从第四个元素算起三的倍数
target选择器
众所周知,我们可以通过给a标签设置 # id的形式让页面进行跳转(页面跳转时# id会添加到当前url的最后).:target标签针对的就是id,用于获取当前正在被跳转的id(即此时出现在url内的id)可以通过为# id 和# id:target 设置不同的css样式做到很多很酷炫的事情
:not()选择符
区反选择符,括号内添加要取反的规则()
:empty
没有子元素的元素
input所属
- :enabled 所有启用的
- :disabled 所有禁用的
- : checked 单个被选中的
a所属
- :link 未被访问的
- :visited 访问过的
- :active 点击状态的
面试题补完计划
margin重叠
父子元素设置border, 相邻元素生成BFC布局
cookie 、sessionStorage、localStorage
cookie 存于本地,可由js编辑,长度相对较短,会发送给服务器,生命周期跟随页面
sessionSrorage 存于本地,长度高,生命周期跟随浏览器
localStorage 存于本地,长度高,生命周期跟随系统
BFC 布局(块级格式化上下文)
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
垂直居中
{
top:50;
transform:translateY(-50%);
}
{
left:0;
right:0;
margin:auto
}
{
text-align:center;
{
display:inline-block;
}
}
{
float:left;
postion: relative;
width:100%;
{
clear: left;
float: left;
position: relative;
left: 50%;
text-align: center;
{
display: block;
float: left;
position: relative;
right: 50%;
}
}
}
