CSS面试复习(二):CSS的使用
一、CSS基础
1、选择器
选择器{
属性:值;
属性:值
}
作用:用于匹配HTML元素、分类和权重、解析方式和性能、值得关注的选择器
分类:
- 元素选择器a{}
- 伪元素选择器::before{}
- 类选择器 .link{}
- 属性选择器[type=radio]{}
- 伪类选择器 :hover{}
- ID选择器#id{}
- 组合选择器 [type=checkbox]+labei{}
- 否定选择器 :not(.link){}
- 通用选择器*{}
权重:
- ID选择器 #id{} +100
- 类 属性 伪类 +10
- 元素 伪元素 +1
- 其它选择器 +0
2、非布局样式
字体
- 字体族
- 多字体fallback
- 网络字体、自定义字体
- 网站:iconfont.cn
行高
- 行高的构成
- 行高相关的现象和方案
- 行高的调整
背景
边框
滚动
文本折行
装饰性属性
3、hack 和案例
二、CSS布局
1 、布局简介
2、 布局方式(表格)
3、 一些布局属性
4、 flexbox布局
5、 float布局
6 、inline-block布局
7 、响应式布局
8 、主流网站使用的布局方式
三、CSS效果
1 、box-shadow
2 、text-shadow_x264
3、 border-radius
4、 background
5、 clip-path
6、 3D-transform
四、CSS动画
1 、动画介绍
2 、transition动画(1)
4、 keyframes动画
5、 逐帧动画
CSS面试复习(二):CSS的使用的更多相关文章
- CSS面试复习(三):预处理器、工程化方案、三大框架中的CSS
一.预处理器 1.介绍 基于CSS的另一种语言.通过工具编译成CSS.添加了很多CSS不具备的特性.能提升CSS文件的组织 2.less嵌套 3 .sass嵌套 4. less变量 5.sass变量 ...
- CSS面试复习(一):HTML强化
1. HTML常见元素和理解 head类 meta:字符集.base:路径. a[href,target] img[src,alt] table td[colspan,rowspan] form[ta ...
- CSS基础语法(二) CSS的9种选择器
样式表的选择器 1.类选择器 根据HTML标签的class属性选择样式应用的属性 .类值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元素 #id值{ … } 3.标签选择器 ...
- web前端知识大纲:系列二 css篇
web前端庞大而复杂的知识体系的组成:html.css和 javascript 二.css 1.CSS选择器 CSS选择器即通过某种规则来匹配相应的标签,并为其设置CSS样式,常用的有类选择器.标签选 ...
- HTML&CSS面试高频考点(二)
HTML&CSS面试高频考点(一) ♥ 6. W3C盒模型与怪异盒模型 标准盒模型(W3C标准) 怪异盒模型(IE标准) 怪异盒模型下盒子的大小=width(content + bord ...
- CSS面试细节整理(二)
5.css盒模型: CSS 框模型 (Box Model) 规定了元素框处理元素内容.内边距.边框 和 外边距 的方式
- 总结CSS面试题目的考察点及常见布局问题整理
整理网上流传的若干份面试题目,突发奇想,总结关于CSS面试题目的考察点,发现问题大多围绕几个属性和几种题目,水平有限,仅供参考. 写这个博文内心有种莫名奇妙的自我谴责感,实在不应该把面试层叠样式“应试 ...
- web前端面试试题总结---css篇
CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...
- HTML和CSS的复习总结
HTML(Hypertext Markup Language)超文本标记语言:其核心就是各种标记!<html> HTML页面中的所有内容,都在该标签之内:它主要含<head>和 ...
随机推荐
- QML-关于Qt.rgba()颜色无法正常显示问题
GitHub:八至 作者:狐狸家的鱼 本文链接:关于Qt.rgba()颜色的正确写法 当在正常给color属性写颜色的时候,用十六进制能正常显示,但是用Qt.rgba()时,颜色无法正常显示出来. 按 ...
- CF528D Fuzzy Search
题意:给定k,只含有ACGT的字符串S和T,求T在S中出现了多少次. 字符匹配:如果S的[i - k, i + k]中有字符x,那么第i位可以匹配x. 解: 首先预处理:f[i][j]表示S的第i位能 ...
- AtCoder arc061C Snuke's Subway Trip
大意: 给你一张无向图,边有种类. 当你第一次/重新进入某种边时费用 + 1 在同一种边之间行走无费用. 求 1 到 n 的最小费用. 嗯...乍一看有一个很直观的想法:记录每个点的最短路的上一条边的 ...
- 利用selenium并使用gevent爬取动态网页数据
首先要下载相应的库 gevent协程库:pip install gevent selenium模拟浏览器访问库:pip install selenium selenium库相应驱动配置 https: ...
- 第十三篇-通过Button设置文本背景颜色
MainActivity.java package com.example.aimee.buttontest; import android.annotation.SuppressLint; impo ...
- 第十二节、尺度不变特征(SIFT)
上一节中,我们介绍了Harris角点检测.角点在图像旋转的情况下也可以检测到,但是如果减小(或者增加)图像的大小,可能会丢失图像的某些部分,甚至导致检测到的角点发生改变.这样的损失现象需要一种与图像比 ...
- 深入理解JS函数中this指针的指向
函数在执行时,会在函数体内部自动生成一个this指针.谁直接调用产生这个this指针的函数,this就指向谁. 怎么理解指向呢,我认为指向就是等于.例如直接在js中输入下面的等式: console.l ...
- 2017-12-15python全栈9期第二天第七节之运算符
#!/user/bin/python# -*- coding:utf-8 -*-print(3>4 or 4<3 and 1==1)print(1<2 and 3 <4 or ...
- 运维监控-使用Zabbix Server 创建 Actions
运维监控-使用Zabbix Server 创建 Actions 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. zabbix的action默认是关闭的,因此我们想使用它就得先启用哟. ...
- 【.NET】asp.net Redirect 图片路径
#需求: 前端通过<img>的src向服务端请求图片信息,如果不存在想要的图片,那么就返回一张默认路径下的图片: #实现: <img class="related_reso ...