发表于： 2019-07-05 11:40:57
1 856
大家好，我是IT修真院郑州分院第17期的学员李亚兵，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网css（职业）任务八，九，深度思考中的知识点，首先来看一下做好的脑图吧：
这是任务89新学到的知识点，比起以往的任务来说新知识点多了太多，知识点比较复杂，比如说这个bootstrap，以前任务六七的时候用过栅格布局，当时刚开始看这个官方文档就看了很久，因为本人对新知识的理解速度太慢 ，bootstrap里面的文档当时感觉还是非常复杂， 还有导航栏，轮播图，栅格布局这些，难度对于前几个任务提高了很多，一时间难以适应，每一个新知识点我都理解的比较吃力，所以任务八比起前几个任务用时多了很多，计算了一下用时12天，但是由于领取的任务比较早，领完任务前几天没开始做，官网显示的用时是十八天，还是非常慢的。
任务八九深度思考：
1.如何实现轮播图？
<div class="bd-example">
<div class="carousel slide" data-ride="carousel" id="carouselExampleCaptions">
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#carouselExampleCaptions"></li>
<li data-slide-to="1" data-target="#carouselExampleCaptions"></li>
<li data-slide-to="2" data-target="#carouselExampleCaptions"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img alt="..." class="d-block w-100" src="img/16.png">
</div>
<div class="carousel-item">
<img alt="..." class="d-block w-100" src="img/17.png">
</div>
<div class="carousel-item">
<img alt="..." class="d-block w-100" src="img/18.png">
</div>
</div>
<a class="carousel-control-prev" data-slide="prev" href="#carouselExampleCaptions" role="button">
<span aria-hidden="true" class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" data-slide="next" href="#carouselExampleCaptions" role="button">
<span aria-hidden="true" class="carousel-control-next-icon"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>这个是我任务中使用的轮播图。
2.如何用css写一个简单的幻灯片效果页面？
CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。
transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。transition是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果（详情请看 http://www.w3school.com.cn/cssref/pr_transform.asp）
Animation字面的意思就是“动画” 属性：animation: name（绑定到选择器的 keyframe 名称） duration（延长的时间） timing-function（动画的速度曲线：linear（速度相同） ease（先低速后加速） ease-in （低速开始） ease-out （低速结束） ease-in-out （低速开始和结束） cubic-bezier(n,n,n,n)（从 0 到 1 的数值）） delay（动画开始前的延迟） iteration-count （播放的次数（n（播放次数）|infinite（无限循环）））direction （是否循环播放（normal（正常播放）|alternate（轮流反向播放）））fill-mode play-state;
例子：animation:marginLeft 10s linear 2s infinite 100 reverse paused
keyframes（关键帧）
书写格式为：@keyframes "动画名字"｛｝
内根据设置内容从“0%”到“100%”依次编写，注意“0%”一定不能把百分号省略！
可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束（from"就相当于"0%"而"to"相当于"100%",）
为了兼容浏览器，记得加各浏览器前缀（“chrome和safira：-webkit-”、“firefox:-moz-”、“opera:-o-”）
3.主流浏览器内核有哪几种？
什么是浏览器的内核？
浏览器最重要或者说最核心的部分叫做“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染网页。所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
2.它在浏览器中的作用是什么？
浏览器内核对于浏览器而言，是基础，是依托。如果没有了浏览器内核，那么浏览器是无法独立存在且产生作用的。它的存在，决定了网页的呈现的内容、格式以及效果。所以说，一个好的浏览器，一定是基于有一个稳定、高端、作用明显的浏览器内核的。
2.知识剖析
1.四大浏览器内核介绍
(1)Trident内核
(2)Gecko内核
(3)WebKit内核
(4)Blink内核
(1)TRIDENT内核
该内核程序在1997年的IE4中首次被采用，是微软在Mosaic代码的基础之上修改而来的，并沿用到IE11，也被普遍称作”IE内核”。Trident实际上是一款开放的内核，其接口内核设计的相当成熟，因此才有许多采用IE内核而非IE的浏览器(壳浏览器)涌现。由于IE本身的“垄断性”（虽然名义上IE并非垄断，但实际上，特别是从Windows 95年代一直到XP初期，就市场占有率来说IE的确借助Windows的东风处于“垄断”的地位）而使得Trident内核的长期一家独大。
微软很长时间都并没有更新Trident内核，这也导致了后面的两个后果： 一是Trident内核曾经几乎与W3C标准脱节（2005年） 二是Trident内核的大量 Bug等安全性问题没有得到及时解决，然后加上一些致力于开源的开发者和一些学者们公开自己认为IE浏览器不安全的观点，也有很多用户转向了其他浏览 器，Firefox和Opera就是这个时候兴起的。Trident内核的常见浏览器有：IIE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）；以及国产浏览器中的兼容模式。
(2)GECKO内核
Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) 也采用了该内核，Gecko的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。因为这是个开源内核，因此受到许多人的青睐，Gecko 内核的浏览器仍然还是Firefox (火狐) 用户最多，所以有时也会被称为Firefox内核。Gecko核心设计的相对成熟，在无法获取源码的情况下，开放程度仅次于IE。
(3)WEBKIT内核
Webkit:是苹果公司自主研发的内核，也是Safari浏览器使用的内核。 Webkit引擎包含渲染引擎WebCore和javascript引擎JSCore，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。Google Chrome、Opera及各种国产浏览器高速模式也使用Webkit作为内核。
(4)BLINK内核
Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎作为Chromium计划的一部分，并且在2013年4月的时候公布了这一消息。这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，并且在Chrome（28及往后版本）、Opera（15及往后版本）中使用。
4.什么是外边距重叠？重叠的结果是什么？
1.什么是外边距重叠？
外边距重叠指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的高度如果都是正边界，边界宽度是相邻边界宽度中最大的值。如果出现负边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。只有外边距才可以是负值，内边距不允许为负值。
2.外边距重叠的图示：
当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生合并。
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的顶和底边界也发生合并：
假设有一个空元素，它有边界，但是没有边框或填充。在这种情况下，顶边界与底边界就碰到了一起，它们会发生叠加：
3.外边距重叠的作用。
当我们上下排列一系列规则的块级元素时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离，这样各处距离就一致了。
4.外边距不重叠的情况。
水平margin永远不会重合
设置了overflow属性(visible除外)的元素和它的子元素之间的margin不会重叠
设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，和子元素之间也不重叠
设置了display:inline-block的元素，垂直margin不会重叠，和子元素之间也不重叠
根元素(如html)与body的margin不会重叠
5.防止外边距重叠的方法。
元素绝对定位postion:absolute;一般用在内层元素
内层元素 加float:left;或display:inline-block;
外层元素用padding增加边距
外层元素设置overflow:hidden;
内层元素透明边框border:1px solid transparent;
6. div+css的布局较table布局有什么优点？
1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。
2.布局精准，网站版面布局修改简单。
3.加快了页面的加载速度（最重要的）。
4.节约站点所占的空间和站点的流量。
5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。
table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）
1.容易上手。
2.可以形成复杂的变化，简单快速。
3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。
6.bootstrap有哪些常用组件？
BOOTSTRAP 包的内容
基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。
CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。
组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。
JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。
定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。
目前常用的BOOTSTRAP组件：
轮播图
下拉菜单
响应式导航栏
7.css有哪些方式可以实现垂直居中？
垂直居中就是竖向居中
接下来就讲解在css中实现垂直居中的几种方法：
1、单行文本垂直居中方法
说明：
该方式只适用于情况比较简单的单行文本，只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
2、多行文本垂直居中方法
说明：
2.1父级元素display:table-cell，vertical-align:middle；
2.2使用table来布局；
2.3多行内容居中，且容器高度可变，也很简单，给出一致的 padding-bottom 和 padding-top ；
3、div垂直居中：table
说明：
在table标签中，单元格框中的单元格内容是水平垂直居中的。
display:table此元素会作为块级表格来显示 类似table标签
display:table-cell 此元素会作为一个表格单元格显示 类似td 和 th标签
4、div垂直居中：inline-block
说明：
给元素设置dispaly：inline-block配合vertical-align：middle来垂直居中
5、div垂直居中：绝对定位之margin：auto
说明：
父元素相对定位，子元素绝对定位。 子元素的上下左右均设置0定位且设置margin：auto
6、div垂直居中：绝对定位之负值法
说明：
已知元素高度后，使用绝对定位将top设置为50%，mergin-top设置为内容高度的一半(height + padding) / 2的负值；内容超过元素高度时需要设置overflow决定滚动条的出现；top：50%元素上边界位于包含框中点，设置负外边界使得元素垂直中心与包含框中心重合；
7、div垂直居中：绝对定位之translate
8.margin负值在页面布局中有哪些应用？
margin负值的相关应用
1.页面上实现CSSsprite背景定位效果
关于页面上背景定位效果，可以参见我的文章“IE6下png背景不透明问题的综合拓展”有关页面上定位的demo实例页面
2.在流动性布局中的应用
流动性布局又称自适应布局，也称为宽度不固定布局。比如WordPress经典的两栏式不固定布局就是使用的margin负值实现的定位，属于左右margin负值在流动性布局中的应用，有兴趣的同学可以稍微看看框架的样式代码，会学到些东西的。还有一类两栏自适应需要用到margin的上下负值，尤其在一栏高度固定，另外一栏高度不定的两栏或多栏布局中。
高度不固定栏和高度固定的栏上下错开，均无浮动属性，高度不固定的栏margin-top一个负值，负值的大小就是高度固定栏的高度，这样，就实现了两栏在同一水平线上。且宽度自适应，由于没有浮动，所以不同担心内部存在clear:both属性，破快浮动。这里没有例子，讲得有点虚，您可以先把这个放一放，因为关于流动性布局（宽度自适应布局）我会好好地写一篇文章的，到时，有关margin负值在流动性布局中的应用我会好好的讲述的。
3.在选项卡等边框线的处理
下图显示的是一种比较常见的选项卡样式，旧版的迅雷首页就是这样子的选项卡。
◆如何用最简介最易维护的CSS代码写出这样的样式效果呢？
我其实已经在图上做了点小小的标注，使用margin-top:-1px;解决选项卡下边框显示的问题。
关于具体如何编写实现此效果，建议您狠狠地单击这里进入demo实例页面，会有所帮助的。
类似的，如果您要用四个div实现5条1像素的左右边框，就像表格一样的效果，就可以使用让每个div都有左右1像素的边框，然后margin-right:-1px;或是margin-left:-1px;让之间的边框重叠，这样就实现了四标签实现5边框的效果了。
4.图片与文字对齐问题
图片与文字默认是居底对齐了。所以当图片与文字在一起的时候往往都是不对齐的。尤其图片较小时就更加明显了，我看到很多人使用vertical-align:middle;对齐。在火狐下效果是不错，但是IE下，虽然是效果好了些，但还是不够。
如果，图片是个20像素*20像素左右的小图片，文字也差不多12px大，则使用vertical-align:text-bottom;是不错的个方法。还有个屡试不爽，兼容性不错的方法就是使用margin负值了。img标签是个很不错的标签，支持margin四个方向的正的和负的定位。一般img标签打头的小图标与文字对齐的话，img{margin:03px-3px0;}可以说是公式版的东西，能实现效果和兼容性俱佳的对齐效果。
大家好，我是IT修真院郑州分院第17期的学员李亚兵，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网css（职业）任务八，九，深度思考中的知识点，首先来看一下做好的脑图吧：
任务十因为就一个页面，所以在体积上来说比任务八九小多了，同时在难度方面跨度不算大，只是在之前的基础上面吧一些比较重要的知识点温习一遍，所以做的速度还是正常的，虽然任务的页面比较简单，但是用到的东西还是非常的全面，还有一个进图条，实现的方式就是hover效果，之前是单个hover，进度条用的则是父级hover子级，鼠标放在上面整个部位都会显示效果，这个是之前没有用过的。其余的属性由于刚用过不久所以不算是比较难。接下来看看任务中的深度思考吧，
1.如何改变默认radio和select的样式？
4.1 修改radio默认样式
需要用到的工具如下：
label标签；
:checked 选择器,匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。
1、兄弟选择器：
1、+ 选择器（相邻兄弟选择器），可选择紧接在另一元素后的元素，且二者有相同父元素。
2、~ 选择器，作用是查找某一个指定元素的后面的所有兄弟结点。
2 修改select默认样式
appearance 属性，可以让元素看上去像标准的用户界面元素。
2.自适应小屏幕设备时，该如何布局？
允许网页宽度自动调整
"自适应网页设计"到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签。
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js。
二、不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要
具体说，CSS代码不能指定像素宽度：
width:xxx px;
只能指定百分比宽度：
width: xx%; 或者 width:auto;
四、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
大家好，我是IT修真院郑州分院第17期的学员李亚兵，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网css（职业）任务十一，深度思考中的知识点，首先来看一下做好的脑图吧：
任务总共耗时5天：
首先这个任务难度不大，这个任务首先要求的是安装，认识sass，然后要求用sass中的嵌套和变量来写，要求用合理的命名规范和书写规范，之前写的选择器命名都是随意起的，书写规范更是一塌糊涂，这个任务意义在于规范代码。从这个任务开始以后写的任务书写和命名必须规范，这样的意义在于以后容易辨认和维护，学会安装和使用sass之后这个任务就变的简单多了。
接下来我们来看看任务中的深度思考点
1.如何使用less?
1、直接引入less.js
使用步骤：
1、到less官网，下载less文件
2、在编译器中新建一个less文件，引入到我们的html页面中（注意下面的和css的引入方式稍微有些不同哦，看rel）
<link href="css/style.less" rel="stylesheet/less"/>3、引入我们下载的less文件
<script src="js/less.min.js"></script>然后就可以使用了
好处：能获取到客户端的数据，从而进一步计算
坏处：在客户端解析less，造成性能浪费，不利于维护（不推荐）
2、koala编译器
使用步骤：
1、在koala-app.com中下载软件就可以
2、打开koala软件，然后将我们的less所在的文件夹拖拽到软件中
3、koala会自动读到less文件，然后点击less文件，单击右键，选择输出的路径以及编译后的css文件名，之后在右侧菜单栏点击执行编译即可（上面的选项，只要把自动编译勾选即可，输出方式可以选择normal也可以选择compress（压缩）的方式，搜可以，其他的不需要管）
4、编译成功，会在我们指定的文件夹中生成一个css文件，之后将这个css文件引入我们的html文件中即可
（推荐小白使用）
3、在服务器环境编译 利用node中的包管理器
使用步骤：
1、需要下载安装node环境，检测安装成功的方法在命令行输入npm，如果安装成功就会有一些信息，错了，就会报错
简单说一下打开命令行的方法（windows系统）win+R——输入cmd——enter——进入命令行——输入npm——按enter键
安装less:在命令行输入命令：npm i -g less@lateast之后按回车即可（检验是否安装成功，在命令行输入lessc，然后回车，安装成功会有一些信息，失败也会报错）
然后在命令行中进入我们存放less文件所在的文件夹，进入之后输入（如果我们的less文件名为style.less）lessc style.less > index.css（大于号后面是我们想要style.less编译为的css的文件名，我们这里把它命名为index.css）之后点击回车，我们的文件夹就会多一个index.css文件，之后也是引入css文件即可
4、在编译器中实时编译（配置稍微麻烦，但本人比较喜欢这一种）
这种方法也需要安装node，之后用npm安装less，和上面的安装方法一样
win+R——输入cmd——enter——进入命令行——输入npm——按enter键——npm i -g less@lateast之后按回车即可
然后打开我们的编译器（以webstorm为例，其他的也都大同小异）
点击文件（File）——找到Tools——File Watchers——找到右侧有个加号（+）——单击加号找到less选择less——弹出一个菜单，找到Program:后面让选择程序，找到我们安装的less程序
注：找到程序的方法：先找到C盘——users——用户（也可能是你的名字,自己起的）——AppData（如果这里找不到的话，可以找到这个菜单上面几个图标中的最后一个（Show Hidden Files and Directiories）即可找到）——Roaming——npm——lessc.cmd，选中之后，其它的不用管直接点击ok，然后再点ok即可
之后我们再去建一个less文件，它就会自动生成一个同名的css文件，把这个css文件引入我们的HTML文件中即可
我比较喜欢第四种，在实际的项目中，比较推荐的也是最后两种方法，对于初学者可能稍微麻烦，但熟悉之后就特别简单了
2、如何使用sass?
简而言之，Sass是一个CSS预处理器，它将特殊功能（如变量，嵌套规则和mixins（有时称为语法糖））添加到常规CSS中。目的是使编码过程更简单，更有效。让我们更详细地探讨一下。
什么是CSS预处理器？
CSS预处理器是一种脚本语言，它通过允许开发人员用一种语言编写代码然后将其编译成CSS来扩展CSS。Sass可能是最受欢迎的预处理器，但其他常见的例子包括Less和Stylus。
什么是SASS？
Sass（Syntactically Awesome Style Sheets）是CSS的扩展，使您可以使用变量，嵌套规则，内联导入等内容。它还有助于保持组织有序，并允许您更快地创建样式表。
Sass与所有版本的CSS兼容。使用它的唯一要求是必须安装Ruby。
如何使用Sass？
句法：
Sass包含两个语法选项：
1、SCSS (Sassy CSS)：使用.scss文件扩展名，完全符合CSS语法
2、Indented (简单地称为 'Sass')：使用.sass文件扩展名和缩进而不是括号; 它不完全符合CSS语法，但编写起来更快
请注意，可以使用sass-convert命令将文件从一种语法转换为另一种语法。
变量
与其他编程语言一样，Sass允许使用可存储可在整个样式表中使用的信息的变量。例如，您可以将颜色值存储在文件顶部的变量中，然后在设置元素的颜色时使用此变量。这使您可以快速更改颜色，而无需单独修改每一行。
例如：
1 2 3 4 5 6 |
|
将生成以下CSS：
1 2 3 4 |
|
嵌套
嵌套是一把双刃剑。虽然它提供了一种减少需要编写的代码量的绝佳方法，但如果不仔细执行，它也会导致过度限定的CSS。我们的想法是以一种模仿HTML层次结构的方式嵌套CSS选择器。
以下显示了使用嵌套的基本导航样式：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
CSS输出如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Partials
Partials是较小的Sass文件，可以导入到其他Sass文件中。将partials视为代码片段。使用这些代码片段，我们的CSS现在可以模块化并且更易于维护。部分通过使用前导下划线命名为_partial.scss来指定。
导入（Import）
使用局部模板，在@import指令，可以导入你的部分文件到当前文件，建立一个单一的CSS文件。请注意将为每个导入生成的HTTP请求使用的导入数量。
1 2 3 4 5 6 7 8 |
|
1 2 3 4 5 6 |
|
相应的CSS输出：
1 2 3 4 5 6 7 8 |
|
注意：导入partials时，您不需要包含文件扩展名或下划线。
mixins
使用预处理器的一个优点是能够采用复杂，冗长的代码并简化它。这就是mixins派上用场的地方！
例如，如果您需要包含供应商前缀，则可以使用mixin。看一下border-radius的这个例子：
1 2 3 4 5 6 7 8 9 |
|
注意顶部的@mixin指令。它的名称为border-radius，并使用变量$ radius作为参数。此变量用于设置每个元素的半径值。
稍后，调用@include指令以及mixin名称（border-radius）和参数（10px）。因此.box {@include border-radius（10px）; }。
生成以下CSS：
1 2 3 4 5 6 |
|
扩展/继承
该@extend指令被称为是Sass的最强大的功能之一。看到它在行动后，很明显为什么。
我们的想法是，使用此指令，您不必在HTML元素上包含多个类名，并且可以保持代码干燥。您的选择器可以继承其他选择器的样式，然后在需要时轻松扩展。现在这很强大。
Sass的优点：
能够在CSS中执行计算，允许我们执行更多的操作，例如将像素值转换为百分比。我们还可以访问标准数学函数，如加法，减法，乘法和除法。当然，可以组合这些功能来创建复杂的计算。
此外，Sass还包含一些内置函数来帮助操作数字。像percentage（），floor（）和round（）这样的函数就是一些例子。
3、less和sass有什么区别？
sass和less主要区别在于实现方式: less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。
一、less：Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
二、sass 与 less 的区别 ：
1、sass与less的安装 ：sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。less 在服务器端最容易的安装方式就是通过 npm（node.js 的包管理器）。less 在客户端使用【.less】（LESS源文件），只需要在官网载一个javascript脚本文件主【less.js】，然后在我们需要引入LESS源文件的html的中加入如下代码：
2、变量 ：sass 是以开头定义的变量，如：mainColor: #963; less 是以@开头定义的变量，如 @mainColor: #963;
3、作用域 ：sass 没有全局变量，满足就近原则，但是实际中可以将需要定义的全局属性放在base.scss 文件中。注意变量名重复； less 中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止。
4.如何使用gulp编辑less？
1、安装gulp-less
在命令行里使用npm install gulp-less --save-dev ;
2、配置gulpFile.js
2.1基本使用
1 2 3 4 5 6 7 8 | var gulp = require('gulp'), //获取gulp模块 less = require('gulp-less'); //获取gulp-less插件 gulp.task('testLess', function () { //创建gulp任务 gulp.src('src/less/index.less') //获取less文件路径 .pipe(less()) //执行less .pipe(gulp.dest('src/css')); //输出CSS文件路径}); |
2.2编译多个less文件
1 2 3 4 5 6 7 8 | var gulp = require('gulp'), //获取gulp模块 less = require('gulp-less'); //获取gulp-less插件 gulp.task('testLess', function () { //创建gulp任务 gulp.src(['src/less/index.less','src/less/detail.less']) //获取多个less文件路径 .pipe(less()) //执行less .pipe(gulp.dest('src/css')); //输出CSS文件路径}); |
2.3匹配符使用
1 2 3 4 5 6 7 8 | var gulp = require('gulp'), //获取gulp模块 less = require('gulp-less'); //获取gulp-less插件 gulp.task('testLess', function () { //创建gulp任务 gulp.src('src/less/*.less']) //获取所有less文件路径 .pipe(less()) //执行less .pipe(gulp.dest('src/css')); //输出CSS文件路径}); |
3.3多模块使用先编译再压缩
1 2 3 4 5 6 7 8 9 10 | var gulp = require('gulp'), less = require('gulp-less'), //确保本地已安装gulp-minify-css [cnpm install gulp-minify-css --save-dev] cssmin = require('gulp-minify-css'); gulp.task('testLess', function () { gulp.src('src/less/index.less') .pipe(less()) //执行编译 .pipe(cssmin()) //对编译后的CSS进行压缩<br> .pipe(gulp.dest('src/css'));}); |
大家好，我是IT修真院郑州分院第17期的学员李亚兵，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网css（职业）任务十二，深度思考中的知识点，首先来看一下做好的脑图吧：
任务耗时共三天：
在任务十二中认识和熟悉了sass的用法，比如说嵌套，这个东西算是比较简单，但是我的理解能力不太好，也用了几天的时间来理解，好在现在已经差不多了，变量和混合也知道咋用了，在做任务的过程中更加熟悉了sass这些用法接下来让我们看看任务十二中的深度思考点：
开发过程中应该遵守哪些编码规范和class命名规范？
基本准则
符合web标准，语义化html，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。
html规范
1、页面的第一行添加标准模式声明<!DOCTYPE html>
2、代码缩进：tab键设置四个空格（通常在软件右下角设置相应空格大小）
3、html中除了开头的DOC和'UTF-8'或者head里特殊情况可以大写外，其他都为小写，css类都为小写
4、建议为html根元素指定lang属性，从而为文档设置正确的语言lang="zh-CN"
5、不同doctype在不同浏览器下会触发不同的渲染模式< meta http-equiv="X-UA-Compatible" content="IE=Edge">
6、非特殊情况下样式文件必须外链至< head >...< /head>之间;非特殊情况下JavaScript文件必须外链至页面底部
7、尽可能减少div嵌套
8、在页面中尽量避免使用style属性,即style="…";写在相应的样式文件中
9、对于属性的定义，确保全部使用双引号，绝不要使用单引号
10、背景图片请尽可能使用sprite技术,减小http请求
11、给区块代码及重要功能(比如循环)加上注释,方便后台添加功能
12、不要使用@import,与<link>标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。
CSS规范
排版规范
1、如果是在html中写内联的css，则必须写成单行
2、每一条规则的大括号{前后加空格
3、属性名冒号之前不加空格，冒号之后加空格
4、每一个属性值后必须添加分号，并且分号后加空格
5、多个selector共用一个样式集，则多个selector必须写成多行形式
class命名
1、规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_
2、命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合
3、不允许通过1、2、3等序号进行命名；避免class与id重名
4、class用于标识某一个类型的对象，命名必须言简意赅
5、尽可能提高代码模块的复用，样式尽量用组合的方式
6、规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名
CSS书写规范
1CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
2去掉小数点前的“0”
3、简写命名——很多用户都喜欢简写类名，但前提是要让人看懂你的命名。
4、16进制颜色代码缩写——有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
5、长名称或词组可以使用中横线来为选择器命名。
6、不要随意使用Id——id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
那种规范才是最好的规范？
[建议] CSS 文件使用无 BOM 的 UTF-8 编码。 解释： UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。
2.2 缩进
[强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。 示例：
.selector{margin:0;padding:0;}
2.3 空格
[强制] 选择器 与 { 之间必须包含空格。 示例：
.selector{ }
[强制] 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。 示例：
margin:0;
[强制] 列表型属性值 书写在单行时，, 后必须跟一个空格。 示例：
font-family: Arial, sans-serif;
2.4 行长度
[强制] 每行不得超过 120 个字符，除非单行不可分割。 解释： 常见不可分割的场景为URL超长。 [建议] 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。 示例：
/* 不同属性值按逻辑分组 */background:transparent url(aVeryVeryVeryLongUrlIsPlacedHere)no-repeat00;/* 可重复多次的属性，每次重复一行 */background-image:url(aVeryVeryVeryLongUrlIsPlacedHere)url(anotherVeryVeryVeryLongUrlIsPlacedHere);/* 类似函数的属性值可以根据函数调用的缩进进行 */background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.04, rgb(88,94,124)),color-stop(0.52, rgb(115,123,162)) );
2.5 选择器
[强制] 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。 示例：
/* good */.post,.page,.comment{line-height:1.5;}/* bad */.post,.page,.comment{line-height:1.5;}
2.6 属性
[强制] 属性定义必须另起一行。 示例：
/* good */.selector{margin:0;padding:0;}/* bad */.selector{margin:0;padding:0;}
[强制] 属性定义后必须以分号结尾。 示例：
/* good */.selector{margin:0;}/* bad */.selector{margin:0}
通用
3.1 选择器
[强制] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。 解释： 在性能和维护性上，都有一定的影响。 示例：
/* good */#error,.danger-message{font-color:#c00;}/* bad */dialog#error,p.danger-message{font-color:#c00;}
3.2 属性缩写
[建议] 在可以使用缩写的情况下，尽量使用属性缩写。 示例：
/* good */.post{font:12px/1.5arial, sans-serif;}/* bad */.post{font-family: arial, sans-serif;font-size:12px;line-height:1.5;}
3.3 属性书写顺序
[建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。
解释：
Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相关属性包括：border / margin / padding / width / height 等
Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
Visual 相关属性包括：background / color / transition / list-style 等 另外，如果包含 content 属性，应放在最前面。
今天完成的事情：
今天没开始写任务，任务十三在写完之后因为视口的问题还没解决，所以还没提交任务，但是也就剩这个问题了，其他bug都处理完了，所以今天先处理深度思考和别的问题。
首先今天轮到我发微信公众号了，这个虽然上次发过，但是具体忘了怎么操作了。。。这个处理的比较快，不算是啥问题。
第二就是今天恶补了一下深度思考，由于wiki上面之前才补到任务七，前两天由于师兄提醒，这个再不更新就扣分了，趁着这个任务空挡先补一补吧，本来分就少，再给扣了以后就不好弄了。
今天总共补了四个任务思考，都写在上面了，写的应该还算比较详细的。所以补得速度比较难，因为以前急着做任务，所以任务中要求的深度思考的知识点很多都没有看，也没有认真思考，今天看这些深度思考大多都是没有遇见的问题，所以恶补一下还是非常有必要。
在今天的日报上面写完之后又做了做脑图，在wiki上面更新了一遍，补到了任务十二，实在是没搞多少东西，今天写的也够多了，就不再写那么多了。
明天计划的事情：
明天计划早上开始写任务十四，今天比较水，明天要尽快的提高效率了，不能再松懈了。
遇到的问题：
没写代码所以没啥问题，写代码问题就多了。
收获：
首先收获就是熟悉了以前急于做任务而忽略的深度思考中的知识点，这算是比较大的收获吧，但是由于深度思考中的知识点比较多，所以还是很多都么记全，等以后有空一定要熟悉熟悉，把这些知识点全部弄懂。
返回列表
评论