CSS3新增的伪类有哪些 与 居中div的多种方法

6次阅读

共计 907 个字符,预计需要花费 3 分钟才能阅读完成。

CSS3 新增伪类有那些?

p:first-of-type: 选择属于其父元素的首个 <p> 元素
p:last-of-type: 选择属于其父元素的最后 <p> 元素
p:only-of-type: 属于父元素的特定类型的唯一子元素
p:only-child: 属于父元素的唯一子元素的每个 <p> 元素
p:nth-child(2): 选择父元素的第二个子元素
::after 在元素之前添加内容
::before 在元素之后添加内容
:enabled 已启用
:disabled 控制表单为禁用状态,不可点击
:checked 单选框或复选框被选中

如何居中 div
第一种方式:给 div 设置一个宽度,然后添加 margin:0 auto 属性.
div{
width:200px;
margin:0 auto;
}
第二种方式:让绝对定位的 div 居中
div{
position:absolute;
width:300px;
height:300px;
margin:auto;
top:0;
left:0;
bottom:0;
right:0;
background-color:pink;
}
第三种方式:水平垂直居中一
div{
position:absolute;
width:500px;
height:300px;
top:50%;
left:50%;
margin:0 0 0 -250px;
background-color:pink;
}
第四种方式:未知容器的宽高,利用 ’transform’ 属性
div{
position:absolute;
width:500px;
height:300px;
top:50%;
left:50%;
transform:translate(-50%,-50%)
background-color:pink;
}
第五种方式:利用 flex 布局,需考虑兼容性
container{
display:flex;
align-item:center;/* 垂直居中 */
justify-content:center;/* 水平居中 */
}
container div{
width:100px;
height:100px;
background-color:pink
}
每日两道前端面试题 20190307 希望睡一觉起来 阳光会出来.

正文完
 0