css综合

说一说你平时写代码遵守的编码规范

  • css的“:”后加个空格
  • “{”前加个空格
  • “}”单独成行
  • 每条声明后都加上分号
  • 用“-”代替连续单词间的空格

垂直居中有几种实现方式,给出代码范例

  • 绝对定位
position: absolute; 
top: 50%;
transform: translateY(-50%); /*这是CSS3新属性,也可以用 margin-top: -150px;即自身高度的一半 */
width: 400px;
height: 300px;
  • vertical-align
.box:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; /*在把box设置vertical-align: middle即可实现居中*/
}
  • table-cell
display: table-cell;  
vertical-align: middle; 
  • flex
body {
            display: flex;  /*对父元素设置flex*/
            align-items: center; 

jsbin

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS编码规范 命名规范:语义化标签优先;基于功能命名、基于内容命名、基于表现命名;简略、明了、无后患 书写规范:...
    饥人谷_哈噜噜阅读 329评论 0 0
  • 1.说一说你平时写代码遵守的编码规范 命名技巧语义化标签优先基于功能命名、基于内容命名、基于表现命名简略、明了、无...
    谨言_慎行阅读 216评论 0 0
  • CSS综合 1. 编码规范 HTML说一说你平时写代码遵守的编码规范HTML: 用两个空格来代替制表符(tab)...
    熊蛋子17阅读 418评论 0 0
  • 最近,根据尼尔森公司最新发布的《2017年新能源市场洞察调研报告》显示,2017年中国有买车意向的消费者里,近三成...
    企信宝阅读 252评论 0 1
  • 借酒浓。给你情义,当成必然。给你机会,当成陷阱。给你感情,当成假装。给你真情义,你说有病。给你关怀,你说虚情假意。...
    小鲫化龙阅读 152评论 0 0