qq_33834489的博客

背景居住object-fit:cover; object-position:left;

布局的效果跟圣杯的一样，代码有所不同。双飞燕布局的代码更加简单，只是多加了一个div用来布局。基础布局部分代码一样。main部分：style> #main {overflow: hidden;zoom: 1;}/*这里不需要加padding了*/ .m_content, .m_leftside, .m_rightside {float: left;} .m_

基础布局：div id="header">div>div id="main">div>div id="footer">div>重点来看main部分的代码style type="text/css"> #main { overflow: hidden; /*修整由子元素浮动引起的高度塌陷问题*/ zoom: 1;/*低版本ie下:触发hasl

这里详细总结了等高布局的八大方法 Click，我再谈谈实际项目中比较常用的，或者说比较简单的三种方法。图片模拟比如我们需要做一个上图的布局，那么需要截取这样一个侧边的小图片对侧边和内容部分包裹的元素进行背景平铺，用来模拟出侧边栏的高度跟内容高度一致的视觉效果。table布局只需要将需要等高的若干栏设置display属性为table-cell；若其中一列希

单列布局水平居中水平居中的页面布局中最为常见的一种布局形式，多出现于标题，以及内容区域的组织形式，下面介绍四种实现水平居中的方法（注：下面各个实例中实现的是child元素的对齐操作，child元素的父容器是parent元素）使用inline-block 和 text-align实现.parent{text-align: center;}.child{display: inli

视区相关单位vw, vh..简介以及可实际应用场景“视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。移动端vh vw真正的基准度量是layout viewport，也就是meta标签中viewport属性定义的值，默认980px。可以用document.document Elem...

最近看了很多这方面的文章，能搜到的基本看了个遍，但感觉还是似懂非懂，知道这个东西，很难说出这是个什么东西，先整理一些概念，慢慢消化，以后慢慢探索其中的原因。1、PX(CSS pixels)1.1 定义虚拟像素，可以理解为“直觉”像素，CSS和JS使用的抽象单位，浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px。1.2 注意在CSS规范中