CSS面试知识整理(未完待续)

2018-11-06 06:50:47来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:HTML之表格

下一篇:你所不知道的 CSS 阴影技巧与细节