首页 > > 网页制作 > css >

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 阴影技巧与细节

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签