本文将从以下四个方面展开介绍:

  • 选择器
  • 样式表继承
  • css3部分特性
  • BFC

css选择器优先级策略

先附上个链接:css选择器参考手册

内联>id>class=属性选择器=伪类选择器>tag=伪元素选择器

优先级的特殊情况:!important

当在一个样式声明中使用一个 !important 规则时,此声明将覆盖任何其他声明。虽然技术上 !important 与优先级无关

样式表继承

CSS的一个主要特征就是继承,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

由于继承而发生样式冲突时,最近祖先获胜(最近原则)。

至于可以被继承的样式有哪些?那真是太多了,我就不展开了,这里附上详细链接

css3

老规矩咱先甩个链接哈哈哈我是不是太懒了→css3

然后我们挑几个来说一下:

一、flex和grid布局

关于这两个布局,阮一峰老师写的实在是太好了,我又想直接放链接了,不行不行我还是稍微简单的写一点吧

(但链接咱还是放这→flex教程   grid教程

1)flex

采用 Flex 布局的元素,称为  容器。它的所有子元素自动成为容器成员,称为 项目。

容器属性有:

flex-direction:row | row-reverse | column | column-reverse  决定项目的排列方向

flex-wrap:nowrap | wrap | wrap-reverse  决定项目是否换行以及如何换行

flex-flow:是flex-direction和flex-wrap的简写形式,默认值为row wrap

justify-content:flex-start | flex-end | center | space-between | space-around  定义了项目在横轴上的对齐方式

这里主要注意一下space-between和space-around

align-items:flex-start|flex-end|center|baseline|stretch 定义项目在纵轴上如何对齐

align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

项目属性有:

  • order:定义项目的排列顺序,数值越小越靠前
  • flex-grow:定义项目的放大比例,默认为0
  • flex-shrink:定义项目的缩小比例,默认为1
  • flex-basis:定义了在分配多余空间之前,项目占据的主轴空间,默认为auto
  • flex:flex-growflex-shrink 和 flex-basis的简写
  • align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性

2)grid

flex是轴线布局,是一维布局,grid是划分行和列,是二维布局

容器属性:

display:grid | inline-grid

grid-template-columns/rows:定义每一列/行的列宽

grid-row/column-gap:设置行间距/列间距

grid-auto-flow:row | column 决定排列顺序是先行后列还是先列后行

二、filter滤镜属性

这个属性可能你没用过或者没什么印象,但是它的确无处不在呢。

filter: none | blur()| brightness()| contrast()| drop-shadow()| grayscale()| hue-rotate()| invert()| opacity()| saturate()| sepia()| url();

最常见的是filter:blur( px),用于给图像设置高斯模糊,值越大越模糊

其他详细介绍请戳这里~

三、媒体查询&rem

媒体查询@media

当我们需要设计响应式页面时,媒体查询是非常有用的,@media可以针对不同的屏幕尺寸设置不同的样式。

语法:@media mediatype and | not | only (media feature)

mediatype:all / print / screen / speech

常见media feature:

max-width / min-width:设备页面最大最小可见区域宽度

orientation:portrait / landscape  竖屏还是横屏

rem

rem多用于移动端适配,首先我们先来区分一下rem和em

em相对于当前对象文本的字体尺寸,由于em会继承父元素的大小,所以页面层级越深换算就越复杂

rem相对于根元素的大小,可以做到只修改根元素就能调整所有元素大小

js设置根元素font-size:

假设我们设计稿为750px,设它的根元素font-size为100px,

<script type="text/javascript">
/*动态调整rem值,除以100*/
function setsize() {
var winW = document.documentElement.clientWidth,
winH = document.documentElement.clientHeight,
baseFontSize = 100,
baseWidth = 750,
winWidthSize = Math.min(winW, winH);
if (winWidthSize < 270) {
winWidthSize = 270;
}
var _html = document.getElementsByTagName('html')[0];
_html.style.fontSize =winWidthSize / baseWidth * baseFontSize + 'px';
}
setsize();
</script>

四、transform&animation

transform转换

css转换,可以对元素进行移动、缩放、转动、拉长或拉伸

语法:transform:转换方法

tranform-origin:更改转换元素的原点

2D转换方法:

translate(平移)、rotate(旋转)、scale(放缩)、skew(倾斜)、matrix(以上合并)

3D转换属性:

transform-style:flat | preserve-3d

perspective:设置从何处查看一个元素的角度

perspective-origin:设置一个3D元素的底部位置

backface-visibility:定义元素在不面对屏幕时是否可见

transition过渡

必须指定要添加效果的css属性和效果的持续时间,如transition:all 2s

过渡属性:

transition-property:应用过渡的css属性的名称

transition-duration:定义过渡效果花费的时间,默认为0

transition-timing-function:ease | linear |ease-in/out |cubic-bezier( ) 规定过渡效果的时间曲线

transition-delay:规定过渡效果何时开始,默认为0

animation动画

要创建 CSS3 动画,你需要了解 @keyframes 规则。

  • @keyframes 规则是创建动画,指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
  • 当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。
  • 在@keyframes中,请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
 /*把 "myfirst" 动画捆绑到 div 元素,时长:5 秒 */
div
{
animation: myfirst 5s;
} /* 当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变 */
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

五、BFC

什么是BFC?


BFC(Block Formatting Context)块级格式化上下文,是web中盒模型布局的css渲染模式,指一个独立的容器。

形成BFC的条件

  • 浮动元素,float除none以外的值
  • 定位元素,position(fixed,absolute)
  • display:inline-block,table-cell,flex,grid
  • overflow除visible以外的值

BFC的主要特性

  • 创建了BFC的元素中,子浮动元素也会参与高度的计算,即不会高度塌陷。
  • 与浮动元素相邻的,创建了BFC的元素,不能与浮动元素相互覆盖。
  • 创建了BFC的元素不会与他们的子元素发生外边距折叠。
  • 内部的Box会在垂直方向一个接一个放置。
  • BFC里面的子元素不会影响外面的元素。
 

前端校招知识体系之css的更多相关文章

  1. 前端校招知识体系之HTML5

    啥是HTML5?官方说HTML5 是下一代的 HTML... 本文主要介绍HTML5三个方面的知识,继续往下看看吧. 语义化标签 canvas&svg 响应式meta 一.语义化标签 语义化标 ...

  2. 前端知识体系之CSS及其预处理器SASS/LESS

    如果你是个前端设计师,很多时候我们都在写CSS,CSS是定义页面样式的脚本,并不是一种编程语言,只是一行行单纯的描述页面元素的样子,如果对英语熟练的话,它像说话一样简单,这里举个简单的例子: body ...

  3. web前端知识体系总结

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  4. 自己总结的web前端知识体系大全【欢迎补充】

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  5. web前端知识体系大全

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  6. web前端知识体系小结(转)

    1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的 ...

  7. 从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系!

    前言 见解有限,如有描述不当之处,请帮忙指出,如有错误,会及时修正. 为什么要梳理这篇文章? 最近恰好被问到这方面的问题,尝试整理后发现,这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目. ...

  8. web前端知识体系大全【欢迎补充】

    大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在一个视图中,形成一个完整的web前端知识体系,目的是想要颠覆人 ...

  9. web前端知识体系大全【转载】

    自己总结的web前端知识体系大全[欢迎补充]   1. 前言 大约在几个月之前,让我看完了<webkit技术内幕>这本书的时候,突然有了一个想法.想把整个web前端开发所需要的知识都之中在 ...

随机推荐

  1. python-登录保持

     cookies.Session import requests url1="http://127.0.0.1:5000/login" url2="http://127. ...

  2. 最全面的H5的背景音效素材(经过实践),分享给你!!!

    个人内心独白: 这两天在为一个H5的页面寻找一些相关音效,茫茫的网络,辣么大,真是想法设法翻遍你,不说废话了,看总结吧哦 方法总结(这才是重点,看这里): 1.如果是部分铃声截取的,我们可以来到铃声之 ...

  3. 认识.net Framework

  4. Django REST framework入门 (转自中文文档)

    快速入门 我们将创建一个简单的允许管理员用户查看和编辑系统中的用户和组的API. 项目设置 创建一个名为 tutorial 的新django项目,然后启动一个名为 quickstart 的新app. ...

  5. vue使用过滤器 filters:{}

    在项目开发过程中,经常会用到过滤器,下面就来说说我用的用法 我从后台获取到一个时间字段,是2017-03-23的格式,但是我要的是年月日分开显示,那就要用到过滤器了 在没有用过滤器的时候,是这样的: ...

  6. Java数据结构与算法(4):二叉查找树

    一.二叉查找树定义 二叉树每个节点都不能有多于两个的儿子.二叉查找树是特殊的二叉树,对于树中的每个节点X,它的左子树中的所有项的值小于X中的项,而它的右子树中所有项的值大于X中的项. 二叉查找树节点的 ...

  7. select标签的下拉框为图片的插件

    1 参考文献: [1] https://github.com/rvera/imag...[2] https://rvera.github.io/image... [3] http://webseman ...

  8. bootstrap插件bootstrap-select使用demo

    插件bootstrap-select官网 : https://developer.snapappointments.com/bootstrap-select/ bootstrap-select插件: ...

  9. 5-2 Django的路由层(urlconf) 2

    django2.0版的path 思考情况如下: urlpatterns = [ re_path('articles/(?P<year>[0-9]{4})/', year_archive), ...

  10. UVA 1380 A Scheduling Problem

    题目链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem ...