手写clearfix
.clearfix:after { content: ''; display: table; clear: both;
} .clearfix { *zoom: 1;
}
flex布局
.container { display: flex;
} .item { flex: 1;
}
flex-direction 主轴的方向
flex-direction: row // 主轴为水平方向，起点在左
flex-direction: row-reverse // 主轴为水平方向，起点在右
flex-direction: column // 主轴为垂直方向，起点在上
flex-direction: column-reverse // 主轴为垂直方向，起点在下
justify-content 主轴的对齐方式
justify-content: flex-start // 向起点对齐
justify-content: flex-end // 向终点对齐
justify-content: center // 居中对齐
justify-content: space-between // 两端对齐
justify-content: space-around // 平均分布
align-items 纵轴的对齐方式
align-items: flex-start; // 向起点对齐
align-items: flex-end; // 向终点对齐
align-items: center; // 居中对齐
align-items: stretch; // 拉伸
align-items: baseline; // 基线对齐
align-content 纵轴的对齐方式
纵轴上留有空间
align-content: flex-start; // 向起点对齐
align-content: flex-end; // 向终点对齐
align-content: center; // 居中对齐
align-content: stretch; // 拉伸
align-content: space-between; // 两端对齐
align-content: space-around; // 平均分布
水平居中
1.行内元素
text-align: center;
2.块级元素
width: 固定的宽度;
margin: auto;
3.绝对定位 + left + margin
position: absolute;
left: 50%;
width: 300px;
height: 100px;
margin: 负的宽度的一半;
垂直居中
1.行内元素
height: 50px;
line-height: 50px;
2.绝对定位 + left + margin
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 40px;
margin-top: -20px;
margin-left: -40px;
3.绝对定位 + transform
position: absolute;
top: 50%;
left: 50%;
width: 80px;
height: 40px;
transform: translate(-50%, -50%);
4.绝对定位 + margin
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
widht: 100px;
height: 50px;
margin: auto;
`
三栏布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三栏布局</title>
<style>
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
body {
display: flex;
}
.left,
.right {
width: 200px;
height: 100%;
background-color: yellow;
}
.main {
flex: 1;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</body>
</html>
圣杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 600px;
}
.container {
padding: 0 200px;
overflow: hidden;
}
.container div{
float: left;
}
.main {
width: 100%;
height: 200px;
background-color: yellow;
}
.left,
.right {
position: relative;
width: 200px;
height: 200px;
background-color: #ccc;
}
.left {
left: -200px;
margin-left: -100%;
}
.right {
left: 200px;
margin-left: -200px;
}
</style>
</head>
<body>
<!-- 两边两栏宽度固定，中间栏宽度自适应 -->
<!-- 在HTML结构上中间栏在最前面 -->
<!-- container设置padding属性 -->
<header>圣杯布局</header>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>
View Code
双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 600px;
}
.container {
overflow: hidden;
}
.container div{
float: left;
}
.main {
width: 100%;
height: 200px;
background-color: yellow;
}
.main-content {
margin: 0 200px;
}
.left,
.right {
width: 200px;
height: 200px;
background-color: #ccc;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
</style>
</head>
<body>
<!-- 两边两栏宽度固定，中间栏宽度自适应 -->
<!-- 在HTML结构上中间栏在最前面 -->
<!-- 增加main-content，设置margin -->
<header>双飞翼布局</header>
<div class="container">
<div class="main">
<div class="main-content">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</body>
</html>
CSS技巧
1.font快捷写法格式：
body { font: font-style font-variant font-weight font-size line-height font-family;
}
2.link的四种状态，需要按照下面的前后顺序进行设置：
a:link
a:visited
a:hover
a:active
3.text-transform用于将所有字母变成小写字母、大写字母或首字母大写
4.font-variant用于将字体变成小型的大写字母
5.透明元素
.element { filter:alpha(opacity=50); // 兼容IE
-webkit-opacity: 0.5; -moz-opacity:0.5; opacity: 0.5;
}
6.CSS三角形
.triangle { width: 0; height: 0; border: 50px solid; border-color: transparent transparent #000 transparent;
}
7.图片替换文字
h1 { width:200px; height:50px; background:url("h1-image.jpg") no-repeat; text-indent:-9999px;
}
8.表格单元格等宽
automatic 列宽度由单元格内容设定 此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容
fixed 列宽由表格宽度和列宽度设定 固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局
.calendar { table-layout: fixed;
}
9.使用属性选择器用于空链接
当a元素没有文本值，但 href 属性有链接的时候显示链接：
a[href^="http"]:empty::before { content: attr(href);
}
10.禁用鼠标事件
CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件
.disabled { pointer-events: none;
}
11.模糊文本
.blur { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
12.禁止用户选中文本
div { user-select: none;
}
13.清除手机tap事件后element 时候出现的一个高亮
* { -webkit-tap-highlight-color: rgba(0,0,0,0);
}
14.box-sizing
没有设置box-sizing，css里写的width指的是content
设置了box-sizing，css里写的width指的是content + padding + border
div { box-sizing: border-box; width: 100px; height: 100px; padding: 5px; border: 5px solid #000; background-color: yellow;
}
15.隐藏没有静音、自动播放的影片
video[autoplay]:not([muted]) { display: none;
}
如果你依然在编程的世界里迷茫，不知道自己的未来规划，可以加入前端学习进阶内推交流群685910553（前端资料分享）。里面可以与大神一起交流并走出迷茫。
新手可免费领取学习资料，看看前辈们是如何在编程的世界里傲然前行不停更新最新的教程和学习方法（详细的前端项目实战教学视频），
有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入
网友评论