认识达内从这里开始

认真做教育专心促就业

Web 前端知识体系精简 — CSS篇

发布：互联网
来源：互联网
时间：2017-06-17 14:00

Web前端技术由html、css和javascript三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言.而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学习新的知识点,因此对于初学者很难理清楚整个体系的脉络结构.在本文中,青岛IT培训小编将对Web前端知识体系进行简单的梳理,对应的每个知识点点到为止,不作详细介绍.目的是帮助大家审查自己的知识结构是否完善,如有遗漏或不正确的地方,希望共勉.

青岛IT培训

    二、CSS 篇

    css是用来对html进行修饰的一门语言.

    1、选择器

    css的选择器有很多种,常用的有类选择器、标签选择器、ID选择器、后代选择器、群组选择器、伪类选择器(before/after)、兄弟选择器(+~)、属性选择器等等.

    2、定位

    定位一般有相对定位(relative)、绝对定位(absolute)、固定定位(fixed),relative和absolute在移动端用的最多,fixed 在移动端有兼容性问题,因此不推荐使用,在移动端替代fixed的方案是 absolute+内部滚动.

    3、浮动

    设置float为left或right,就能使该元素脱离文档流,向左或向右浮动.一般在做宫格模式布局时会用到,如果子元素全部设置为浮动,则父元素是塌陷的,这时就需要清除浮动,清除浮动的方法也很多,常用的方法是在元素末尾加空元素设置clear:both, 更高级一点的就给父容器设置before/after来模拟一个空元素,还可以直接设置overflow:auto/hidden.除过浮动可以实现宫格模式,行内盒子(inline-block)和table也可以.

    4、盒子模型

    盒子模型是css最重要的一个概念,也是css布局的基石. 常见的盒子模型有块级盒子(block)和行内盒子(inline-block),盒子最关键的几个属性包括margin、border、padding和content,这几个元素可以设置盒子和盒子之间的关系以及盒子和内容之间的关系.还有一个问题是计算盒子的大小,需要注意的是,box-sizing属性的设置会影响盒子的width和height.只有普通文档流中块框的垂直外边距才会发生外边距合并.行内框、浮动框或绝对定位之间的外边距不会合并.青岛IT培训课程结合行业技术趋势及企业用人需求的变化,及时更新,课程至少每半年进行一次升级.

    5、Flex布局

    Flex布局的容器是一个伸缩容器,首先容器本身会更具容器中的元素动态设置自身大小;然后当Flex容器被应用一个大小时(width和height),将会自动调整容器中的元素适应新大小.Flex容器也可以设置伸缩比例和固定宽度,还可以设置容器中元素的排列方向(横向和纵向)和是否支持元素的自动换行.有了这个神器,做页面布局的可以方便很多了.注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效.

    6、transition(过渡) 和 transform(旋转)

    应用transform可以对元素进行平移(translate)、旋转(rotate)、放大缩小(scale)、倾斜(skew)等处理,而transition使css属性值(包括transform)在一段时间内平滑的过渡.使用transition和transform就可以实现页面的滑动切换效果.

    7、动画 Animation

    Animation首先需要设置一个动画函数,然后以这个动画的方式来改变元素的css属性之的变化,动画可以被设置为永久循环演示. 和transition相比,animation设置动画效果更灵活更丰富,二者还有一个区别是:transition只能通过主动改变元素的css值才能触发动画效果,而animation一旦被应用,就开始执行动画.

    8、Sprite图

    对于大型站点,为了减少http请求的次数,一般会将常用的小图标排到一个大图中,页面加载时只需请求一次网络, 然后在css中通过设置background-position来控制显示所需要的小图标.

    9、字体图标 iconfont

    所谓字体图标就是将常用的图标转化为字体资源存在文件中,通过在CSS中引用该字体文件,然后可以直接通过控制字体的css属性来设置图标的样式.

更多青岛IT培训相关资讯,请扫描下方二维码

青岛IT培训