Open zptime opened 3 years ago
兼容性:IE7 及之前版本不支持
div {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
div {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
兼容性:IE8 不支持
div {
width: 200px;
height: 200px;
background: green;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box {
height: 600px; // 去掉高度,只能垂直居中
display: flex;
justify-content: center;
align-items: center;
}
.box > div {
background: green;
width: 200px;
height: 200px;
}
将父盒子设置为 table-cell
元素,可以使用 text-align:center
和 vertical-align:middle
实现水平、垂直居中。
比较完美的解决方案是利用三层结构模拟父子结构
<p class="outerBox tableCell"></p>
<p class="ok"></p>
<p class="innerBox">tableCell</p>
<p></p>
<p></p>
<style>
/*table-cell实现居中,将父盒子设置为table-cell元素,设置text-align:center,vertical-align:
middle;子盒子设置为inline-block元素*/
.tableCell {
display: table;
}
.tableCell .ok {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.tableCell .innerBox {
display: inline-block;
}
</style>
对子盒子实现绝对定位,利用 calc 计算位置
<p class="outerBox calc"></p>
<p class="innerBox">calc</p>
<p></p>
<style>
/_绝对定位,clac 计算位置_/ .calc {
position: relative;
}
.calc .innerBox {
position: absolute;
left: -webkit-calc((500px - 200px)/2);
top: -webkit-calc((120px - 50px)/2);
left: -moz-calc((500px - 200px)/2);
top: -moz-calc((120px - 50px)/2);
left: calc((500px - 200px) / 2);
top: calc((120px - 50px) / 2);
}
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
</style>
<article class="main">
<div class="left">左</div>
<div class="right">右</div>
<div class="center">
中
<h2>浮动布局</h2>
</div>
</article>
.left{float: left; width: 300px; height: 100px; background: #631D9F;}
.right{float: right; width: 300px; height: 100px; background: red;}
.center{margin-left: 300px; margin-right: 300px; background-color: #4990E2;}
.main::after{ content:''; display: block; clear: both; // 清除浮动}
<article class="main">
<div class="left">左</div>
<div class="center">
中
<h2>绝对定位</h2>
</div>
<div class="right">右</div>
</article>
.left{position: absolute; left: 0; width: 300px; background-color: red;}
.center{position: absolute; left: 300px; right: 300px; background-color: blue;}
.right{position: absolute; right: 0; width: 300px; background-color: #3A2CAC;}
.main {
width: 100%;
display: table;
}
.left,
.center,
.right {
display: table-cell;
}
.left {
width: 300px;
background-color: red;
}
.center {
background-color: blue;
}
.right {
width: 300px;
background-color: red;
}
.main {
display: flex;
}
.left {
width: 400px;
background-color: red;
}
.center {
background-color: blue;
word-break: break-word;
}
.right {
background-color: red;
width: 400px;
}
.div {
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
以上 5 种实现三栏布局的方式的优缺点:
常用css效果
彻底搞定 vertical-align 垂直居中不起作用疑难杂症
BFC(块级格式化上下文)
描述:具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。
触发条件:只要元素满足下面任一条件即可触发 BFC 特性
特性及应用:
div 水平垂直居中
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景
重排
(reflow),性能较差;重绘
(repaint),性能较高;重绘
,性能较高;CSS 预编译器比较:Sass, Scss, Less, Stylus
img 元素底部为何有空白
浏览器 IMG 图片原生懒加载 loading="lazy"
Chrome 浏览器(76 以上版本 2019 年)的 IMG 图片和 IFRAME 框架会支持原生懒加载特性,使用 loading="lazy"语法。
如何获取 loading 属性值
元素 focus 时,页面不滚动不定位的 JS 处理
键盘可访问性
<span>,<div>
等标签,不要重置 outline,基本上键盘可访问性就已经及格了。<form>
表单元素,如果里面有 type 为 submit 类型的按钮,则浏览器天然支持单行输入框的回车提交行为。a 标签的 target 属性
功能:点击一个链接,如果这个链接浏览器已经打开过,则刷新已经打开的链接窗口;如果这个链接没有打开过,则使用新窗口打开这个链接页面
实现:设置链接元素和表单元素的 target 属性值为目标 URL 地址值。如:
<a href="blank.html" target="blank.html">空白页</a>
无外链的 CSS 开发策略
让 CSS flex 布局最后一行列表左对齐的 N 种方法
justify-content 对齐问题描述:在 CSS flex 布局中,justify-content 属性可以控制列表的水平对齐方式,例如 space-between 值可以实现两端对齐。但是,如果最后一行的列表的个数不满,则就会出现最后一行没有完全垂直对齐的问题。
CSS 伪类
scroll 相关 api
HTML audio 音频 API
神奇的 CSS 滤镜与混合模式
CSS filter:hue-rotate 色调旋转滤镜实现按钮批量生产
CSS 创意与视觉表现
纯 CSS 滚动指示器
CSS 滚动指示器:滚动指示器指的是页面的顶端会有一个进度条,指示滚动的进度。
CSS 实现文字下面波浪线动画
CSS scroll-snap 滚动事件停止及元素位置检测
CSS Scroll Snap:可以让网页容器滚动停止的时候,无需任何 JS 代码的参与,浏览器可以自动平滑定位到指定元素的指定位置。兼容性非常好,移动端几乎可以放心使用。
如何 disabled 禁用所有表单 input 输入框元素
CSS3 的 box-sizing,怪异盒模型
弹性 flex 布局