【CSS】面试知识整理
手写clearfix
.clearfix:after {
content: '';
display: table;
clear: both;
}
.clearfix {
*zoom:;
}
flex布局
.container {
display: flex;
}
.item {
flex:;
}
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:;
padding:;
}
html,body {
width: 100%;
height: 100%;
}
body {
display: flex;
}
.left,
.right {
width: 200px;
height: 100%;
background-color: yellow;
}
.main {
flex:;
}
</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:;
padding:;
}
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>
双飞翼布局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
* {
margin:;
padding:;
}
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:;
height:;
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;
}
【CSS】面试知识整理的更多相关文章
- AOP面试知识整理,^_^-包括spring Aop
讲到java企业级开发框架,就不可避免的讲到 IOC,AOP,MCV 今天面试时被问到AOP,讲的很乱,这里整理笔记,包括AOP,spring-AOP的部分知识,错误的地方请小伙伴指出来. 谈谈你对A ...
- CSS面试细节整理（一）
最近面试时候发现自己最熟悉的css确实开发中好多细节没注意到,为了防止在栽跟头,打算从头到底捋一遍咯 语法部分: 1.css几种选择器的写法 (1)h1 em {color:red;} (后代选择器) ...
- CSS Font知识整理总结
1.什么是字体 字体是文字的外在形式,就是文字的风格,是文字的外衣.比如行书.楷书.草书,都是一种字体.同样一个字每个人写起来都会有差异,可以说每个人都有一套潜在的字体库.对于web页面来说,字体就是 ...
- CSS面试细节整理（二）
5.css盒模型: CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式
- JVM--Java核心面试知识整理（一）
JVM 基本概念 JVM 是可运行 Java 代码的假想计算机 ,包括一套字节码指令集.一组寄存器.一个栈. 一个垃圾回收,堆和 一个存储方法域.JVM 是运行在操作系统之上的,它与硬件没有直接的交互 ...
- 前端CSS部分知识整理
1.如何清除图片下方出现几像素的空白间隙? /*方法1:*/ img{display:block;} 方法2: /*img{vertical-align:top;}*/ 2.如何让文本垂直对齐文本输入 ...
- 面试知识整理-Java基础
三大特征:封装,继承,多态 多态:简单的说就是用同样的对象引用调用同样的方法但是做了不同的事情. 抽象:抽象是将一类对象的共同特征总结出来构造类的过程 包装,可以讲基本类型当做对象来使用,抽象只关心对 ...
- Java集合--Java核心面试知识整理（二）
目前CSDN,博客园,简书同步发表中,更多精彩欢迎访问我的gitee pages 目录 JAVA集合 2.1 接口继承关系和实现 2.2 List 2.2.1 ArrayList(数组) 2.2.2 ...
- 总结CSS面试题目的考察点及常见布局问题整理
整理网上流传的若干份面试题目,突发奇想,总结关于CSS面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考. 写这个博文内心有种莫名奇妙的自我谴责感,实在不应该把面试层叠样式“应试 ...
随机推荐
- Jmeter发送邮件功能SMTP Sampler
介绍Jmeter的发送邮件功能,使用的Sampler是SMTP Sampler,详细说明每个配置项的功能 从上往下介绍需要用到的配置项: Server settings Server: 服务器地址 P ...
- mybatis逆向工程没有报错,但是也没有pojo和Mapper文件问题
如果你使用的逆向工程是自己手写上去的配置文件,那么错误的范围就太大了.如果是你导入以前使用过的逆向工程,那么没有生成文件很可能是使用的操作系统不同. 原因:逆向工程中的路径问题,windows和mac ...
- 关于如何在电脑上安装adb来操作手机(Android)的方法及步骤
1.需要真实的安卓手机: 2.安卓手机需要开启USB调试模式,允许电脑进行调试(各个手机的开启方式可能不同,不知道的自行百度): 3.电脑需要安装ADB驱动,这里提供一个下载地址:https://ad ...
- Window中的Docker 拉取Mysql镜像 并在本地Navicate链接
首先本地 拉取mysql镜像 以下是所有mysql镜像 我自己下载的为5.6 下面 以5.6为例:(拉取mysql5.6镜像) docker pull mysql:5.6 创建一个容器 doc ...
- C语言博客作业6---结构体&文件
C语言博客作业6---结构体&文件 1.本章学习总结(2分) 1.1思维导图 请以思维导图总结本周的学习内容.如下图所示: 1.2.学习体会 描述本周学习感受,也可以在这里提出你不理解地方.对 ...
- C++实现串口的自动识别
1.首先需要遍历注册表得到所有可用的串口 将得到的每一个串口保存到向量vector中,代码如下: // 得到所有的串口号 vector<string> cnComm::getComPort ...
- java 继承内存分配
今天,复习的是继承的内存分配.我们知道,Java中内存可以初略分为堆.栈.方法区. package sort; class Person{ public int age; public String ...
- DLC 基本逻辑运算
逻辑代数:分析设计数字电路的数学基础是逻辑代数 变量的取值只能是 0 1 逻辑代数中只有三种基本逻辑运算,即 与 或 非 与逻辑运算: 只有决定一件事情的全部条件都具备时,这事件才成立.这样的因果关系 ...
- PHP实现防止SQL注入的2种方法
PHP简单实现防止SQL注入的方法,结合实例形式分析了PHP防止SQL注入的常用操作技巧与注意事项,PHP源码备有详尽注释便于理解,需要的朋友可以参考下! 方法一:execute代入参数 $var_V ...
- JS时间戳转时间
function timestampToTime(timestamp) { S = timestamp, T = new Date(1E3 * S), Format = function(Q){ret ...