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

栏目: CSS · 发布时间: 5年前

内容简介:每日两道前端面试题20190307希望睡一觉起来 阳光会出来.

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:relative;
  width:500px;
  height:300px;
  top:50%;
  left:50%;
  margin:-150px 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

希望睡一觉起来 阳光会出来.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

群体的智慧

群体的智慧

[美] 詹姆斯·索罗维基 / 王宝泉 / 中信出版社 / 2010-10 / 33.00元

《纽约时报》榜首畅销书,《商业周刊》《福布斯》杂志最佳商业图书 21世纪商务人士必读书,了解群体智慧时代的决策模式 告诉我们如何过日子、如何选择领导人、如何做生意以及如何思考这个世界 我们当中的大多数人,不论是选民还是投资者,是客户还是经理人,似乎都相信宝贵的知识掌握在少数人手中,认为精英们做出的决策更加聪明,很少有人相信“乌合之众”也能像专家那样做得如此出色。 但《纽约客......一起来看看 《群体的智慧》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

随机密码生成器
随机密码生成器

多种字符组合密码