CSS面试知识整理（未完待续）

程序员文章站 2023-10-18 00:00:27

手写clearfix flex布局 flex-direction 主轴的方向 justify-content 主轴的对齐方式 align-items 纵轴的对齐方式 align-content 纵轴的对齐方式纵轴上留有空间水平居中 1.行内元素 2.块级元素 3.绝对定位 + left + ma ......

手写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>

view code

圣杯布局

<!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>

view code

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;
}

上一篇：缓解晕车症状只需七招

下一篇： PHP 强制下载文件代码

CSS面试知识整理（未完待续）

PHP/Javascript/CSS/jQuery常用知识大全详细整理第1/2页

Vue面试题及Vue知识点整理

前端面试知识点目录整理-华华学编程-SegmentFault思否