面试总结

1 滚动条的样式
定高 overflow-y:auto;

image.png

2垂直居中

position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin: auto;
 html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
.content {
            width: 300px;
            height: 300px;
            background: orange;
            margin: 0 auto; /*水平居中*/
            position: relative; /*脱离文档流*/
            top: 50%; /*偏移*/
            transform: translateY(-50%);
            /*margin-top: -150px;   或者*/
        }

flex布局

html,body{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
}
body{
  display:flex;
 align-items: center; /*定义body的元素垂直居中*/
  justify-content: center; /*定义body的里的元素水平居中*/
}
.orange{
  width:300px;
  height:300px;
  background:orange;
}

清除浮动
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1 92
  • 1. 居中不定高div样式 参考:http://www.haorooms.com/post/css_div_juz...
    darr250阅读 4,690评论 0 7
  • HTML5面试题总结1.基础问题 = 和 == 和 === 的区别?= : 用于赋值 == : 用于判断 === ...
    LorenaLu阅读 1,231评论 0 4
  • 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:...
    秀才JaneBook阅读 2,591评论 0 25
  • 也许NBA不应该和高考关联起来讨论,但高考期间,印象中总会有一场NBA篮球总决赛,也许同样都是“大考”吧! 说到N...
    陈晖篮球阅读 429评论 0 0