经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTMLCSS » CSS » 查看文章
CSS面试知识整理（未完待续）
来源：cnblogs　　作者：依旧那片天　　时间：2018/11/6 9:58:05　　对本文有异议

手写clearfix

  1. .clearfix:after {
  2.     content: '';
  3.     display: table;
  4.     clear: both;
  5. }
  7. .clearfix {
  8.     *zoom: 1;
  9. }

 

flex布局

  1. .container {
  2.     display: flex;
  3. }
  5. .item {
  6.     flex: 1;
  7. }

 

flex-direction 主轴的方向

  1. flex-direction: row            // 主轴为水平方向，起点在左
  2. flex-direction: row-reverse    // 主轴为水平方向，起点在右
  3. flex-direction: column         // 主轴为垂直方向，起点在上
  4. flex-direction: column-reverse // 主轴为垂直方向，起点在下

 

justify-content 主轴的对齐方式

  1. justify-content: flex-start    // 向起点对齐
  2. justify-content: flex-end      // 向终点对齐
  3. justify-content: center        // 居中对齐
  4. justify-content: space-between // 两端对齐
  5. justify-content: space-around  // 平均分布

 

align-items 纵轴的对齐方式

  1. align-items: flex-start; // 向起点对齐
  2. align-items: flex-end;   // 向终点对齐
  3. align-items: center;     // 居中对齐
  4. align-items: stretch;    // 拉伸
  5. align-items: baseline;   // 基线对齐

 

align-content 纵轴的对齐方式

纵轴上留有空间

  1. align-content: flex-start;    // 向起点对齐
  2. align-content: flex-end;      // 向终点对齐
  3. align-content: center;        // 居中对齐
  4. align-content: stretch;       // 拉伸
  5. align-content: space-between; // 两端对齐
  6. align-content: space-around;  // 平均分布

 

水平居中

1.行内元素

  1. text-align: center;

 

2.块级元素

  1. width: 固定的宽度;
  2. margin: auto;

 

3.绝对定位 + left + margin

  1. position: absolute;
  2. left: 50%;
  3. width: 300px;
  4. height: 100px;
  5. margin: 负的宽度的一半;

 

垂直居中

1.行内元素

  1. height: 50px;
  2. line-height: 50px;

 

2.绝对定位 + left + margin

  1. position: absolute;
  2. top: 50%;
  3. left: 50%;
  4. width: 80px;
  5. height: 40px;
  6. margin-top: -20px;
  7. margin-left: -40px;

 

3.绝对定位 + transform

  1. position: absolute;
  2. top: 50%;
  3. left: 50%;
  4. width: 80px;
  5. height: 40px;
  6. transform: translate(-50%, -50%);

 

4.绝对定位 + margin

  1. position: absolute;
  2. top: 0;
  3. right: 0;
  4. bottom: 0;
  5. left: 0;
  6. widht: 100px;
  7. height: 50px;
  8. margin: auto;

 

三栏布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>三栏布局</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         html,body {
  12.             width: 100%;
  13.             height: 100%;
  14.         }
  15.         body {
  16.             display: flex;
  17.         }
  18.         .left,
  19.         .right {
  20.             width: 200px;
  21.             height: 100%;
  22.             background-color: yellow;
  23.         }
  24.         .main {
  25.             flex: 1;
  26.         }
  27.     </style>
  28. </head>
  29. <body>
  30.     <div class="left">left</div>
  31.     <div class="main">main</div>
  32.     <div class="right">right</div>
  33. </body>
  34. </html>
View Code

 

圣杯布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>圣杯布局</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body {
  12.             min-width: 600px;
  13.         }
  14.         .container {
  15.             padding: 0 200px;
  16.             overflow: hidden;
  17.         }
  18.         .container div{
  19.             float: left;
  20.         }
  21.         .main {
  22.             width: 100%;
  23.             height: 200px;
  24.             background-color: yellow;
  25.         }
  26.         .left,
  27.         .right {
  28.             position: relative;
  29.             width: 200px;
  30.             height: 200px;
  31.             background-color: #ccc;
  32.         }
  33.         .left {
  34.             left: -200px;
  35.             margin-left: -100%;
  36.         }
  37.         .right {
  38.             left: 200px;
  39.             margin-left: -200px;
  40.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <!-- 两边两栏宽度固定，中间栏宽度自适应 -->
  45.     <!-- 在HTML结构上中间栏在最前面 -->
  46.     <!-- container设置padding属性 -->
  47.     <header>圣杯布局</header>
  48.     <div class="container">
  49.         <div class="main">main</div>
  50.         <div class="left">left</div>
  51.         <div class="right">right</div>
  52.     </div>
  53.     <footer>footer</footer>
  54. </body>
  55. </html>
View Code

 

双飞翼布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>双飞翼布局</title>
  6.     <style>
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         body {
  12.             min-width: 600px;
  13.         }
  14.         .container {
  15.             overflow: hidden;
  16.         }
  17.         .container div{
  18.             float: left;
  19.         }
  20.         .main {
  21.             width: 100%;
  22.             height: 200px;
  23.             background-color: yellow;
  24.         }
  25.         .main-content {
  26.             margin: 0 200px;
  27.         }
  28.         .left,
  29.         .right {
  30.             width: 200px;
  31.             height: 200px;
  32.             background-color: #ccc;
  33.         }
  34.         .left {
  35.             margin-left: -100%;
  36.         }
  37.         .right {
  38.             margin-left: -200px;
  39.         }
  40.     </style>
  41. </head>
  42. <body>
  43.     <!-- 两边两栏宽度固定，中间栏宽度自适应 -->
  44.     <!-- 在HTML结构上中间栏在最前面 -->
  45.     <!-- 增加main-content，设置margin -->
  46.     <header>双飞翼布局</header>
  47.     <div class="container">
  48.         <div class="main">
  49.             <div class="main-content">main</div>
  50.         </div>
  51.         <div class="left">left</div>
  52.         <div class="right">right</div>
  53.     </div>
  54.     <footer>footer</footer>
  55. </body>
  56. </html>
View Code

 

CSS技巧

1.font快捷写法格式：

  1. body {
  2.     font: font-style font-variant font-weight font-size line-height font-family; 
  3. }

 

2.link的四种状态，需要按照下面的前后顺序进行设置：

  1. a:link 
  2. a:visited 
  3. a:hover 
  4. a:active

 

3.text-transform用于将所有字母变成小写字母、大写字母或首字母大写

 

4.font-variant用于将字体变成小型的大写字母

 

5.透明元素

  1. .element { 
  2.     filter:alpha(opacity=50);  // 兼容IE
  3.     -webkit-opacity: 0.5; 
  4.     -moz-opacity:0.5; 
  5.     opacity: 0.5; 
  6. }

 

6.CSS三角形

  1. .triangle { 
  2.     width: 0;
  3.     height: 0;
  4.     border: 50px solid;
  5.     border-color: transparent transparent #000 transparent;
  6. }

 

7.图片替换文字

  1. h1 { 
  2.     width:200px; 
  3.     height:50px;
  4.     background:url("h1-image.jpg") no-repeat;
  5.     text-indent:-9999px; 
  6. }

 

8.表格单元格等宽

automatic 列宽度由单元格内容设定 此算法有时会较慢，这是由于它需要在确定最终的布局之前访问表格中所有的内容
fixed 列宽由表格宽度和列宽度设定 固定表格布局与自动表格布局相比，允许浏览器更快地对表格进行布局

  1. .calendar {
  2.     table-layout: fixed;
  3. }

 

9.使用属性选择器用于空链接

当a元素没有文本值，但 href 属性有链接的时候显示链接：

  1. a[href^="http"]:empty::before {
  2.     content: attr(href);
  3. }

 

10.禁用鼠标事件

CSS3 新增的 pointer-events 让你能够禁用元素的鼠标事件

  1. .disabled { 
  2.     pointer-events: none; 
  3. }

 

11.模糊文本

  1. .blur {
  2.     color: transparent;
  3.     text-shadow: 0 0 5px rgba(0,0,0,0.5);
  4. }

 

12.禁止用户选中文本

  1. div {
  2.     user-select: none;
  3. }

 

13.清除手机tap事件后element 时候出现的一个高亮

  1. * {
  2.     -webkit-tap-highlight-color: rgba(0,0,0,0);
  3. }

 

14.box-sizing

没有设置box-sizing，css里写的width指的是content

设置了box-sizing，css里写的width指的是content + padding + border

  1. div {
  2.     box-sizing: border-box;
  3.     width: 100px;
  4.     height: 100px;
  5.     padding: 5px;
  6.     border: 5px solid #000;
  7.     background-color: yellow;
  8. }

 

15.隐藏没有静音、自动播放的影片

  1. video[autoplay]:not([muted]) {
  2.     display: none;
  3. }

 

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS热门文章

  • CSS实现文字两端对齐
  • 【WEB基础】HTML & CSS 基础入门（6）超链接
  • Javascript 对象 - 数学对象
  • 对移动端兼容适配的分析
  • Element FORM结合Vue实现横向排列表单项
  • 如何让一个input输入框居中
  • CSS Grid 布局完全指南(图解 Grid 详细教程)
  • css常见的各种布局上（两列布局）
  • vue+element导入导出excel
  • WEB前端动态背景集

    • CSS推荐文章

  • CSS布局概念与技术教程
  • 15 分钟带你感受 CSS :has() 选择器的强大 - xingba-coder
  • 现代 CSS 解决方案：文字颜色自动适配背景色！
  • 脚踏esbuild祥云，胸怀tsx利刃，身披scss羽衣，追寻前端的本质
  • 深入解析css-笔记
  • CSS 还原拉斯维加斯球数字动画
  • 震惊！CSS 也能实现碰撞检测？
  • 前端开发如何更好的避免样式冲突？级联层(CSS@layer)
  • 现代 CSS 解决方案：CSS 原生支持的三角函数
  • 利用css var函数让你的组件样式输出规范样式API，可定制性更高；

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号