CSS3一些值得注意的地方

最新推荐文章于 2022-08-20 15:36:27 发布

Huhui-coder

最新推荐文章于 2022-08-20 15:36:27 发布

阅读量340

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/qq_40299179/article/details/81150934

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

杂乱的知识点

em:大小尺寸是希望与父级的字号建立关联。

rem:大小尺寸是希望与根级(html)的字号建立关联。

16px=1em

:target 定义通过超链接（miao点）所跳转的目标区块的样式定义

 :target{
     background-color: black;
 }

DRY:不要重复你的代码

outline:5px solid deeplink （描边）可以用 outline-offset属性控制它与边缘属性的间距

 .content{

        width: 200px;

        height: 200px;

        background-color: #B5AAB0;

        outline: 5px solid deeppink;

        outline-offset: -15px;

    }//创造一个内联的描边

backgroud-position:right bottom 可以设置背景图片放置在整个区域的右下；

backgroud-position:right 20px bottom 10px;后面的数字为相对前面方位的偏移值。

backgroud-position:默认是以padding-box为边界的，backgroud-orgin：可以设置backgroud-position的边界口

backgroud-orgin:conten-box 则是以内容盒子作为边界的

calc()方案用在backgroud-position中 backgroud-position:calc(100%-30px) calc(100%-10px);

用运算的方式解决问题

可以用两个元素实现内联元素有圆角边框的效果：“ 内部的元素，使用border-radius:”/

打造条纹背景用 backgroud:liner-gradient(#fb3 50%,#58a 50%);和backgroud-size:100% 30px; 原理就是把渐变当做完全的背景图片，

       再用backgroud-size设置背景图片的大小

       平分的两个色块 

   background: linear-gradient(#fb5 50%,#58a 50%);

backgroud:line-gradient(to right,#fb3 50%,#58a 50%) 垂直条纹

关于工作中的CSS3问题

什么是CSS Hack

? Hack即不合法但是生效的写法

? 主要用于区分不同的浏览器

? 缺点：难理解难维护易失效

? 替代方案：特性检测针对性加class

? 标准属性写在前面，hack写在后面。

html面试

1.doctype的意义是什么？

? 让浏览器以标准模式渲染，让浏览器知道元素的合法性

2.HTML，XHTML,HTML5的关系

? HTML是属于SGML

? XHTML属于XML,是HTML进行XML严格化的结果

? HTML5不属于SGML或者XML，比XHTML宽松

3.HTML有什么变化

? 新的语义化元素

? 表单增强

? 新的API（离线，音视频，图形，实时通信，本地存储，设备能力）

? 分类和嵌套变更

4.em和i有什么区别

? em是语义化的标签，表示强调

? i是纯样式的标签，无意义，现在一般用来做icon图标

5.语义化的意义是什么

? 开发者便于理解

? 机器容易理解 (SEO)

? semantic microdata 把页面元素进行标记，更一步语义化

6.哪些元素可以自闭合

? 表单input

? 图片img

? br hr

? meta link

7.HTML和DOM 的关系

? HTML是”死”的

? DOM是由HTML解析而来的，是活的

? JS可以维护DOM

8.property(特性) 和attribute(属性)的区别

? attribute一旦确定就不会改变

? property是会改变的

9.form的作用有哪些

? 直接提交表单

? 使用submit/reset按钮

? 便于浏览器保存表单

? 第三方库可以整体取值

? 第三方库可以进行表单验证

css面试题

1.css样式（选择器）的优先级

? 计算权重确定

? ！important

? 内联样式

? 后写的优先级高

2.雪碧图的作用

? 减少http的请求数

? 可以减少图片的大小

? 结合CSS3 sprite animation 写出动画效果

.box{
            background: url('img.png');
            width: 160px;
            height: 185px;
            background-size: 1120px 212px;
            -webkit-animation: demo 2s steps(7) infinite;
        }
        @-webkit-keyframes demo{
            0%{ background-position: 0 0 }
            100%{ background-position: -1120px 0}
        }

<div class="box">
    <div class="girl"></div>
</div>

3.自定义字体的使用场景

? 宣传/品牌/banner等固定文案

? 字体图标

4.base64的使用

? http://www.letuknowit.com/images/wg.png”/> 也可以这样显示：　　我们把图像文件的内容直接写在了HTML 文件中，这样做的好处是，节省了一个HTTP 请求。坏处呢，就是浏览器不会缓存这种图像。大家可以根据实际情况进行自由取舍。

? 适用于小图片

? base64的体积约为原图发4/3

5.伪类和伪元素的区别

? 伪类表状态

? 伪元素是真的有元素

? 前者单冒号，后者双冒号

6.如何美化checkbox

? label[for] 和id

? 隐藏原生的input

? :checked +label 是变换样式

7.实现两栏布局或者三栏布局的方式

? 表格布局

? float+margin 布局

? inline-block布局

? flexbox布局

8.position:absolute / fixed有什么区别

? 参照物不同

? absolute 相对于最近的relative或者absolute方式定位的元素

? fixed 相对于viewport 视口进行定位

9.inline-block 为什么会有间隙

? 原因：字符间距

? 解决：消灭字符—在html中不要留有空隙

? 消灭间距—设置font-size:0;

10.如何清除浮动

? 浮动元素不在标准文档流中，可能会超出父元素，从而对其他元素产生影响，对布局也产生影响。

使用伪元素方法

.clearfix:after{
     content:".";        
     display:block;        
     height:0;        
     clear:both;        
     visibility:hidden;        

}

11.如何适配移动端的页面

? viewport

? rem/viewport/media query

? 设计上：隐藏折行自适应

12.CSS动画的实现方式有几种

? transition —过渡动画

? keyframes(animation) —关键帧动画

13.过渡动画和关键帧动画的区别

? 过渡动画需要有状态变化

? 关键帧动画不需要状态变化

? 关键帧动画能控制更精细

14.如何实现逐帧动画

? 使用关键帧动画

? 去掉补间（steps）

15.css动画的性能

? 性能好

? 部分情况下优于JS

? 但JS可以做到更好

? 部分高危属性 box-shadow。。

CSS布局

技巧性布局为主

flexbox(弹性盒布局)/grid(网格布局)

实现左边固定宽度，右边自适应

.container{
            width: 800px;
            height: 200px;
            display: flex;
            border:1px solid #333;
        }
        .left{
            background-color: red;
            width: 200px;
            display: flex;
        }
        .right{
            background-color: blue;
            display: flex;
            flex: 1;
        }

<div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>

实现垂直水平居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                display: flex;
                display: -webkit-flex;
                border: 1px solid #0000FF;
                height: 200px;
                width: 400px;
                align-items:center;   //垂直居中
                justify-content:center; //水平居中
            }
            .item{
                width: 50px;
                height: 40px;
                border: 1px solid #00C1B3;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
        </div>
    </body>
</html>

flex-direction 属性决定主轴的方向（即项目的排列方向）。
? .box { flex-direction: row | row-reverse | column | column-reverse;}
flex-wrap 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。
.box{ flex-wrap: nowrap | wrap | wrap-reverse;}
flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box { flex-flow: || ;}
justify-content justify-content 属性定义了项目在主轴上的对齐方式。
? .box { justify-content: flex-start | flex-end | center | space-between | space-around;}
align-items align-items属性定义项目在交叉轴上如何对齐。
? .box { align-items: flex-start | flex-end | center | baseline | stretch;}
align-content align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
? .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

响应式布局

? rem/viewport/media query

? 1rem=16px

@media (max-width:320px){
    html{
        font-size:20px;
    }
}

利用媒体查询，动态改变html元素的font-size,借助rem.实现响应式

以设备宽度作为视口大小

? 通过隐藏区块的办法来实现响应式

? 通过折行的办法来实现响应式

常用布局方法

? table表格布局

? float浮动+margin ————float 会使元素变为BFC,使其可以设置宽高，

? inline-block布局

? flexbox布局——最合适的布局方式

display 确定元素的显示类型

? display:block/inline/inline-block

position 确定元素的位置

? static/relative/absolute/fixed 与left/top/bottom/right 相关

CSS动画

实现逐帧动画

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>css3逐帧动画</title>
        <style>
        @keyframes run{
            0%{
                background-position: 0 0;
            }
            8.333%{
                background-position: -140px 0;
            }
            16.666%{
                background-position: -280px 0 ;
            }
            25.0%{
                background-position: -420px 0 ;
            }
            33.333%{
                background-position: -560px 0 ;
            }
            41.666%{
                background-position: -700px 0 ;
            }
            50.0%{
                background-position: -840px 0 ;
            }
            58.333%{
                background-position: -980px 0 ;
            }
            66.666%{
                background-position: -1120px 0 ;
            }
            75.0%{
                background-position: -1260px 0 ;
            }
            83.333%{
                background-position: -1400px 0 ;
            }
            91.666%{
                background-position: -1540px 0 ;
            }
            100%{
                background-position: 0 0 ;
            }
        }
        @-webkit-keyframes run{
            0%{
                background-position: 0 0;
            }
            8.333%{
                background-position: -140px 0;
            }
            16.666%{
                background-position: -280px 0 ;
            }
            25.0%{
                background-position: -420px 0 ;
            }
            33.333%{
                background-position: -560px 0 ;
            }
            41.666%{
                background-position: -700px 0 ;
            }
            50.0%{
                background-position: -840px 0 ;
            }
            58.333%{
                background-position: -980px 0 ;
            }
            66.666%{
                background-position: -1120px 0 ;
            }
            75.0%{
                background-position: -1260px 0 ;
            }
            83.333%{
                background-position: -1400px 0 ;
            }
            91.666%{
                background-position: -1540px 0 ;
            }
            100%{
                background-position: 0 0 ;
            }
        }
        div{
            width:140px;
            height:140px;
            background: url(http://images2015.cnblogs.com/blog/754767/201606/754767-20160601000042992-1734972084.png) ;
            animation:run 1s steps(1, start) infinite;
                -webkit-animation:run 1s steps(1, start) infinite;
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>

Huhui-coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS3一些值得注意的地方

杂乱的知识点em:大小尺寸是希望与父级的字号建立关联。rem:大小尺寸是希望与根级(html)的字号建立关联。16px=1em:target 定义通过超链接（miao点）所跳转的目标区块的样式定义 :target{ background-color: black; }DRY:不要重复你的代码outline:5px solid deeplink （描...
复制链接

扫一扫

专栏目录