【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面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考. 写这个博文内心有种莫名奇妙的自我谴责感,实在不应该把面试层叠样式“应试 ...

随机推荐

ES6 实战项目构建 ES6+glup+express
ES6推出已经有几个年头了,平时也有学过一些基本语法,无奈实践经验太少.而且前端早已脱离了刀耕火种的时代,一些自动化构建工具像gulp.webpack等也需要熟练掌握.最近刚签了三方,闲暇之余就找了个 ...
SnapKit配置过程记录
第一步,从https://github.com/SnapKit/SnapKit下载源码的ZIP包,解压出来是这个样子的: 第二步,新建一个iOS工程(Swift版本的),并将SnapKit-devel ...
nginx+多个tomcat
学习nginx的时候遇到的问题:nginx怎么部署两台tomcat? upstream 在网上找的资源,我在nginx配置文件(nginx.conf)中添加了两个server.结果只显示第一个se ...
centos 下安装mulval工具
我这里采用的是centos 6.5版本系统 MulVAL是企业网络安全分析的工具.它使用漏洞扫描程序(OVAL / Nessus)作为攻击路径生成的数源,其中包括扫描结果和网络可访问性信息. 在这之前 ...
用SVG做background image
1 用utf8格式, 需要双引号“”替换为单引号,而且采用url encode编码,例如# 替换为 %23, body { background-image: url("data:imag ...
package.json文件解析
1.用途:管理你所安装的npm包的依赖,在开发过程中能清楚的查询安装的包的版本以及项目中使用的包依赖,便于开发组成员共享. 2.创建:可以手动创建也可以通过npm init 自动创建. 3.配置项: ...
Flask--WTForms
简介 WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进行验证. 安装:pip3 install wtforms 用户登录注册示例 1. 用户登录当用户登录时候,需要对用 ...
封装poi导出篇
前言先写的导入,以为导出会很简单,没想到导出的东西也不少,基于常用的几种样式和校验写了一个简单的导出,包括时间,数字,文字长度,下拉框,提示框校验,基础样式包括字体,字体颜色,背景颜色等功能,可以使 ...
Android 开发蓝牙开发
前言蓝牙开发其实分2个部分,一个是正常蓝牙功能的开发(比如Android蓝牙的互相连接.读取蓝牙列表.文件传输.蓝牙耳机等等).另外一个是BLE蓝牙开发(属于低功耗蓝牙设备,设备大多是血糖仪.蓝牙手 ...
Android APK反编译（二）
参考:APK反编译工具介绍 apktool 作用:资源文件获取,可以提取出图片文件和布局文件进行使用查看 dex2jar 作用:将apk反编译成java源码(classes.dex转化成jar文件) ...

【CSS】面试知识整理

【CSS】面试知识整理的更多相关文章

随机推荐

热门专题