CSS 基础知识

语义化标签

什么是语义化标签

语义化的HTML就是正确的标签做正确的事情，能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。（有特定含义的标签）

为什么要做到语义化？

有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。（方便SEO-搜索引擎优化

在没有CSS的时候能够清晰的看出网页的结构，增强可读性。（增强可读性）

便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。（便于开发和维护）

支持多终端设备的浏览器渲染。（帮助特殊设备访问）

总结：方便SEO（搜索引擎优化）、特种设备进行优化

标签分类

行内元素和块级元素

区域划分

div:无语义化标签

语义化结构元素（都是块级元素）

优点：每块区域含义清晰、有利于SEO（搜索引擎优化）、帮助特殊设备。

​

：用于表示页面或某个区域的头部。

​​

: 用于表示导航栏。

​​

： 用于表示跟周围主题相关的附加信息。

​​

：用于表示文章或其他可独立存在的内容。

​​

：用于表示一个整体的一部分主题。

​​

：用户表示页面或某个区域的底部。

​

补充：br+回车：换行（换几行就在结尾+几个）

css术语

注释

用于描述代码的功能，浏览器自动忽略。

书写格式：/注释内容/ 快捷键：ctrl+/

大小单位为：像素px

规则

规则：选择器+声明块

选择器：该样式应用到哪些元素。

书写格式：选择器{属性：属性值}

HTML如何应用CSS的样式？

外部样式表：在HTML的head标记里通过link标签（输入对应css文件地址）引入CSS文件。（常用）

内部样式表：在HTML的head标记里通过style标签书写css代码。

行内样式表（内嵌样式表）：在开始标记里通过style属性书写CSS。

注：若三种样式表样式一致，则优先选择就近的样式。（就近原则）

行内样式表>内部样式表>外部样式表

选择器

由一个一个的规则（选择器和声明块：属性名和属性值）构成的

选择器：简单选择器（a{}）和复合选择器(div>a{})

元素选择器

选中页面上的所有该元素。

书写格式：元素名{声明块}

类选择器

选中页面上所有有该类名的元素。

乱数假文：lorem+回车（占位、占空间）

书写格式：.类名{声明块}

取类名要求

不能是纯数字或者数字开头 望文知意

Class=”取名区域”

驼峰命名法：leftTopRight left-top-right left_top

一个元素可以有多个类名。

id选择器

书写格式：#id名{声明块}

一个元素只能有一个id名

一个id名只能在页面上出现一次

子级选择器

书写格式：父元素>子元素{声明块}

只能一层一层的进行选择（必须是父子关系）

后代选择器

书写格式：祖先元素 后代元素（空格隔开）

选择器

扩展：代码检查

快捷键：F12.

1、在页面上右键选择检查，选中代码的某一个元素则会出现对应区域和相应的样式外观。

2、点击左上角“箭头”符号，在文本中进行选择，会出现对应内容的元素和外观代码。

组合选择器

包含子级选择器和后代选择器

自由组合两种或以上的选择器

*：通配符（匹配到页面上所有的元素）

注：会被其他选择器所覆盖

属性选择器

[type=text]{属性声明块}

补充：

input：显示一个框

<input type="text" placeholder="内容">

text-indent:首行缩进

并集选择器

可以同时选择多个标签进行样式设置，分别用逗号隔开。

伪类选择器（伪类 - CSS（层叠样式表） | MDN）(单冒号）

：first-child

父元素>子元素：first-child 匹配父元素的第一个孩子

父元素>子元素：last-child 匹配父元素的最后一个孩子

:nth-child(数字）

数字表示匹配父元素的第几个孩子

:nth-child(公式:an+b）n从0开始

:nth-child(关键词），odd选中的奇数 even选中的偶数

a标签配套的伪类选择器

1、link : 访问前（href必须要有属性值才能生效）

2、visited：访问后

3、hover ：鼠标悬停（移入）

4、active：访问时

顺序：link-visited-hover-active（lv-hate）

注：hover可以拿出来单独使用，给某一个元素设置效果。

:nth-of-type() 匹配父元素的第n个孩子（同类型）

伪元素选择器(双冒号）

在元素前后加内容

格式：元素::before{content:’内容’} 前

元素::after{content:’内容’} 后

注：添加的内容，必须加上引号。

选中第一行

格式：元素::first-line{样式}

选中第一个字

格式：元素::first-letter{样式}

选中用户选中的部分

格式：元素::selection{样式}

并列选择器

a,b,c,{}用于表示统一格式（不需要在同一个盒子里，全篇都可以）

限定选择器：

元素+某一个选择器，用.隔开

设置背景图

1、先设置需要插入背景图的盒子尺寸：背景图的尺寸=盒子的尺寸

2、background-image:url(图片路径)

盒模型

分类

不同的元素产生的盒子类型可能不同。

一个元素产生什么样的盒子，取决取它CSS的display属性。默认值为：inline

行盒：display:inline 块盒：display:block 不生成盒子：display:none 行内块盒子：display:inline-block

盒子的组成(除了内容都可用方位）

Margin:外边距 与其他盒子之间的距离

书写格式：margin：20px 30px(上下和左右）

可以让元素在水平方向上居中：width要有值，水平方向margin自动。Margin-left/right:auto margin:0px auto margin:auto

Border：边框

书写格式：Border：4px solid red（空格隔开）

粗细：可以不写，默认2Px

样式：必须写 solid:实线 dashed:线虚线 dotted:点虚线 double:双实线

颜色：可以不写，默认黑色

Padding:内边距 边框与内容之间的距离

书写格式：padding:单位大小。

一个值控制四周 padding：50px

两个值控制上下和左右 padding:10px 20px(空格隔开）

三个值控制上、左右、下 padding:10px 20px 30px

四个值控制上、右、下、左 padding:10px 20px 30px 40px

Content：内容 内容的宽度和高度

Width:宽度（水平方向） height:高度

方位值：left：左 right:右 top：上 bottom:下 （padding-top:20px;）

1、计算元素的真实宽高。

宽：左右两边的padding+左右两边的border+设置的width。

高：上下两边的padding+上下两边的border+设置的height。

回顾：盒模型

行盒：行内标签的盒子就是行盒。

行内标签：不会换行的标签（a、span）,无法改变元素大小（无法设置宽高）。

块盒：块级标签的盒子就是行盒。

块级标签：每个块盒独占一行，可设宽高（h1-h6,p,,div,ul,ol,li），若不设高为元素内容的高，宽为默认浏览器页面的宽。

弹性盒模型（flex布局：项目不会自动继承容器的设置）

任何加上display:flex,盒子会变成弹性盒子

概念：采用flex布局的元素，称为flex容器，它所有的子元素都为flex容器的项目。

容器默认有两根轴，水平方向的主轴（main默认状态下为水平）和垂直方向的交叉轴（cross默认状态下为垂直），交叉轴会随着主轴变化而变化。

Start:开始 end：结束

容器的属性

flex-direction

主轴为水平方向flex-direction:row

主轴为水平方向反向flex-direction:row-reverse

主轴为垂直方向flex-direction：column

主轴为垂直方向反向flex-direction：column-reveres

justify-content

改变主轴的对齐方式

主轴起始位置对齐Justify-content:flex-start

主轴结束位置对齐justify-content:flex-end

居中对齐justify-content:center

两端对齐justify-content:space-around（起始、末尾距离两端的间距相加等于各个元素之间的距离）

justify-content:space-evenly（起始、末尾距离两端的间距和各个元素之间的距离相同）

justify-content:space-between(起始、末尾两端没有间距）

align-items

交叉轴对齐方式

起始位置对齐align-items:flex-start

末尾位置对齐align-items:flex-end

居中对齐align-items:center

补充：

main表示正文部分。

Text-align表示文字居中

Font-size表示文字大小

Letter-spacing表示字体间距

font-weight: bold字体加粗

添加空格：wrod-spacing

hr添加分隔线

flex-wrap

如果宽度超过容器的宽度会自动换行（默认不换行）

Flex-wrap:wrap换行

项目的属性

文本

em：相对于当前标签的字体大小为单位。

text-indent: em 缩进几个字符

line-height:em 设置行高

text-align：主要针对与文本居中等格式，对盒子等标签不行

letter-spacing: 字间距

wrod-spacing: 词间距（针对英文单词）

text-decoration:line-through 文字中间加一根线（表示删除，需要空格）

text-decoration:overline 文字上面加一根线

text-decoration:none 取消下划线

text-decoration:underline 添加下划线

cursor：pointer 改变鼠标的样式

背景 CSS3 背景 | 菜鸟教程

插入背景图：background-image:url(‘图片路径’）

控制背景图是否重复：background-repeat：

取值：repeat(重复/平铺） no-repeat(不重复） repeat-x(水平方向重复） repeat-y(垂直方向重复）

控制背景图的位置：background-position:

使用方位值:background-position:left top

使用长度，可以为负：background-position:-20px -50px;（类似雪碧图）

控制背景图附着情况：background-attachment:

取值：scroll(默认情况，随着页面一起滚动） fixed(不随页面一起滚动）

控制背景图尺寸（CSS3新增）：background-size: 可以通过长度、百分比和关键字（contain和cover）控制

长度：background-size: px px;

百分比（相对于盒子的尺寸）：background-size: 80% 50%；（只设置一个值时，另一个值默认为自动）

关键字：background-size: contain；(等比例缩放，尽可能缩放背景图，但不会超过盒子) background-size: cover；（等比例缩放，尽可能缩放背景图，直到盒子占满，背景图超出部分不可见）

属性简写：页面的背景颜色通过了很多的属性来控制。为了简化这些属性的代码，可以将这些属性合并在同一个属性中。

背景颜色的简写属性为 "background":

当使用简写属性时，属性值的顺序为：background-color background-image background-repeat background-attachment background-position

background-color 添加背景颜色

边框

Top、bottom、left、right四个方向

border-radius: px; 边框圆角(弧度）若弧度大小和标签实际大小一样，边框则会变成一个圆

边框做三角形（等腰三角形）

先做一个宽高为0的盒子

四周加上有值得四个不同颜色的边框（出现四个三角形）

再根据自己需要使用的那一个，再把其他三个颜色设为透明

其他

断词

取值：

word-break:normal(默认情况，根据浏览器断词规则，一行放不下自动断为第二行，以词之间的空格来断开）

word-break:break-all(允许在单词内换行，自动填满一行在换行)

word-break:keep-all(允许在半角空格或者连字符（-）处换行）

断词

取值：

word-wrap:normal(默认情况）

word-wrap:break-word（长单词换行）

斜体文字：font-style:italic

字间距：letter-spacing:20px (多用于中文词）

词间距：word-spacing:20px (多用于英文词）

首行缩进：text-indent:20px(可用于文本和表单中的文本框）

盒子的隐藏：display:none(不生成盒子）不占位 visibility:hidden(隐藏盒子）盒子位置保留

透明：背景色的透明rgba只对背景色生效 opacity:0-1 透明，子元素和内容全部生效，取值0-1

阴影

盒子阴影：box-shadow 属性可以给元素边框周围添加一个或者多个阴影效果。定义多个阴影，使用逗号分隔。

取值：

box-shadow: h-shadow（水平阴影） v-shadow（垂直阴影） blur（模糊 ） spread（阴影尺寸） color（颜色） inset（外阴影转到内阴影）

外阴影转到内阴影 ：可选。将边框外阴影改为边框内阴影（即使是透明边框），背景之上内容之下。如果不写，默认为边框外阴影。只可写在最前或者最后。

水平阴影：必需。阴影水平方向的偏移量。 0，表示阴影在元素后面；正值，表示阴影在元素右边；负值，表示阴影在元素左边

垂直阴影：必需。阴影垂直方向的偏移量。 0，表示阴影在元素后面；正值，表示阴影在元素下边；负值，表示阴影在元素上边

模糊效果：可选。阴影的模糊距离。不允许为负值。如果值为0，则阴影的边缘清晰，否则，值越大，阴影的边缘越模糊。

阴影尺寸：可选。默认为0，此时阴影与元素同样大；正直，阴影向各个方向延伸扩大；负值，阴影沿相反方向缩小。

color：可选。如果没有指定，使用浏览器默认颜色。

文字阴影：text-shadow 属性可以给文字周围添加阴影效果。

取值：

text-shadow: h-shadow（水平阴影） v-shadow（垂直阴影） blur（模糊 ） color（颜色）

水平阴影：必需。水平阴影的位置，允许为负。

垂直阴影：必需。垂直阴影的位置，允许为负。

模糊效果：可选。模糊的距离。

color：可选。阴影的颜色

CSS发展

CSS发展

目前最新版本为CSS3，更注重于模块化，加强了视觉体验。

CSS的引用

外部样式表（外联）：在HTML文档中使用<link>元素引入一个外部样式表。

如果需要引入多个使用多个<link>。

如果不在一级的情况下：所在的文件夹/文件名（可能会有多个文件夹），其中/表示进入下一级。目录名/下一级文件如果分别在不同的文件夹里面，首先需要跳出当前文件夹用../，../目录名/下一级文件（../:表示跳出当前目录）

总结：（./：表示当前目录）、(/：表示进入下一级）、（../:表示跳出当前目录）

优点：1、实现了结构和表现的代码完全分离 2、方便复用和维护 3、因为分离到各自独立的文件中，让HTML文件大小大幅减少了，从而让页面结构更容易被程序员和网络爬虫读懂（引擎优化） 4、对搜索引擎友好，让搜索引擎给页面评分更高，有利于页面引擎排名。

行内样式表（内嵌）在HTML元素上使用style属性给元素添加CSS。

导入样式表：在HTML文档中使用@import指令导入一个外部样式表。

CSS重置技术

在元素没有给定样式时，浏览器会自动给元素设置一个样式。

先引入别人的文件（改变自带的格式），在引入自己的文件。

列表

有序列表

自动加上序号

ol标签(外) li元素(内）

无序列表

自动加上点（无序号）

ul标签(外) li元素(内）

定义列表

dl标签(外) dt元素(内）dd元素(内）-兄弟关系

注：先dt在dd,dd有缩进效果

列表的样式设置

格式：li{list-style:none;}

none(取消列表项样式）

disc：默认，标记是实心圆

circle：标记是空心圆

square:标记是实心方块

decimal:标记是数字

lower-alpha、upper-alpha:大小写英文字母

CSS两大核心

层叠

是一种机制，用于解决csss声明冲突

层叠的过程

1、比较优先级 2、比较特殊性 3、比较源次序

比较优先级

每一个声明都有一个优先级，冲突时，优先级高的保留，低的淘汰

声明的优先级和来源（1、作者样式表 2、浏览器默认样式表 3、用户样式表）和重要性有关。

重要性：在属性值后加!important，则表示一条重要声明，否则表示普通声明。

比较特殊性

每一个声明都有一个特殊性，冲突时，特殊性高保留，低的淘汰。

总体规则：一个声明的特殊性，取决于规则适用范围的大小：范围越大特殊性越小，范围越小特殊性越大（行内样式>ID选择器>类选择器>元素选择器>通配符选择器）

具体规则：在比较特殊性时，每一个冲突的声明，会生成4个数字（a/b/c/d）来进行比较，若a越大，特殊性越高，若a形同，则比较b，以此类推；

a：若声明为行内样式，则为1，否则为0

b：规则中ID选择器的个数

c：规则中类选择器、伪类选择器和属性选择器的个数

d：规则中元素选择器、伪元素选择器的个数

比较源次性

编写代码的次序，谁在最后面谁保留

继承

子元素会自动拥有父元素的某些css属性

可继承（文字颜色、对齐方式）

不可继承（盒模型属性）

继承须有传递性

有些属性在页面的某个区域中具有通用性；若没有继承，则必须为该区域的每个元素指定样式，导致代码重复臃肿。

继承发生的场景（满足两个条件）：1、该属性是可继承的属性；2、该属性在样式表中没有声明。

强制继承（显式继承）：是指将css属性值设置为inherit。为了继承有些不可继承的属性。

格式：需要继承的元素{属性：inherit}

补充：

块级元素在没有设置宽度的情况会自动默认为父元素的宽度，高度由自身内容决定的，不具备继承，可强制继承。

雪碧图

先定一个和图片一样大小的div

引入大图片为div背景

定想要显示雪碧图的具体位置（左上角点的坐标值）（左移为负/右移为正 上移为负/下移为正）

CSS中自定义字体的样式

先下载在转换在使用

下载字体样式的网站 New fonts | dafont.com（只针对英文格式）

格式转换的网站 Font Squirrel | Create Your Own @font-face Kits

CSS布局的基本概念

视觉格式化模型（visual formatting model）

CSS的一种机制，它规定了页面中的多个盒子如何布局

（多个盒子在页面上该怎么去排列怎么去相互影响是由视觉格式化模型定义）

视口（viewport）

可视窗口，通常指浏览器的可视区域。

视口尺寸仅受浏览器可视窗口大小的影响，和内容无关

视口>内容有空白区域

内容>视口有滚动条

包含块（containing block）

每一个元素都有一个包含块，它是指元素在页面中摆放的区域（元素的包含块是它父元素的内容盒）

视觉格式化模型常见做法

常规流/文档流

页面上每一种标签默认的排列机制（按照元素的编写顺序，块级元素垂直排列，行内元素水平排列）

盒子位置

盒子在包含块的垂直方向上依次摆放（按照html书写顺序依次摆放）

盒子在包含块中占据的尺寸是整个盒子的尺寸

垂直方向上若两个为边距（margin）相邻，则折叠（1、垂直方向：水平方向上不会重叠 2、外边距相邻：两个外边距之间没有boeder padding content 3、合并：均为正数取最大，均为负数取最小，一正一负则相加）

浮动

当元素的float属性值为left或right是元素为浮动元素

取值:float:none 不浮动 float:left 左浮动 float:right 右浮动

盒子位置

左浮动的盒子向上向左排列

右浮动的盒子向上向右浮动

浮动盒子的顶边不得高于上一个盒子的顶边

若剩余空间无法放下浮动的盒子，则盒子向下移动，直到具备足够的空间能够容纳盒子，然后再向左或向右移动（ 若放不下则换行 ）

当常规流遇到浮动

常规流盒子和浮动盒子混合摆放（1、浮动盒子在摆放是要避开常规流盒子 2、常规流盒子在摆放时无视浮动盒子）

清除浮动：对一个元素清除浮动，可以让该元素在摆放时，出现在浮动元素的下方

取值：clear: none(默认值） left(清除左浮动 元素在左浮动的盒子下方摆放） right(清除右浮动 元素在右浮动的盒子下方摆放） both(清除左右浮动 元素在浮动的盒子下方摆放）

1. 表格机制布局table：布局混乱，效率低，被淘汰

2. CSS+div+浮动+定位：浮动会引发兼容性问题，增加布局难度，很少使用

3. 弹性盒子布局（flex）：目前最常用的布局方式

4. 栅格式布局:下一代布局方式，目前还未普及

补充：浮动float 图片和文字的环绕：用浮动来实现

当元素设置浮动属性后，它会脱离文档流

清除浮动clear

定位position

任何一个元素都必须属于其中某一种定位体系，不同的定位体系中，元素在包含块中的尺寸和位置会有一些差异。

只能对某一个标签进行布局，不能对整个网页进行操作

取值：（先对某一个元素进行定位，再通过left/right/top/bottom在进行改变元素的位置移动，这四个属性只能用于被定位的元素中)

static(默认值，没有设置定位效果）

relative(相对定位）：当设置了相对定位，该元素不会脱离文档流，相对于元素的当前位置进行偏移

absolute(绝对定位）：会脱离文档流,相对于离它最近的一个已经定位的父元素进行偏移（一般用于需要脱离文档流且不改变当前布局的操作，类似网页上弹出的广告）

fixed(固定定位）：会脱离文档流，相对于浏览器视口左上角进行偏移，会一直固定在视口的某一个位置，类似淘宝回到首页的图标

定位属性要垂直水平居中：1、先设置上左分别为50% ；2、在设置上左Margin为宽高一般的负值，就会实现居中；若为绝对定位，则上下左右为0，margin为auto 。

绝对定位

总体上若设置了position属性，则为绝对定位

取值：

position:static 默认值，静态定位，不会脱离文档流

position:relative 相对定位，相对于盒子原来的位置偏移，所占的空间不变，没有脱离文档流，一般会用来做绝对定位的父元素

position:absolute 绝对定位，相对于设置了定位属性的父元素（除position:static ）偏移 （子绝父相）

fixed 固定定位：相对于浏览器窗口的固定位置，不会随用户的滚动变化，脱离文档流。

position:sticky粘性定位：依赖于用户的滚动，指定top left right bottom四个阀值其中之一才可生效

z-index:改变堆叠顺序，数值越大，堆叠在越上方。格式：z-index:数值（直接加数值，不需要单位）

渐变 CSS3 渐变 | 菜鸟教程

线性渐变

属性：background-image:linear-gradient（）

通过方位值确定渐变方向（top/bottom/left/right）也可以方向进行组合

格式：background-image:linear-gradient(to right,颜色，颜色）从左到右由第一个颜色变成呢最后一个颜色，用逗号隔开，颜色至少两个或以上

通过角度定义渐变方向：单位为deg

格式：background-image:linear-gradient(90deg,颜色，颜色）

可以把颜色设置规定的长度（颜色 0px，颜色 100px，颜色二 100px， 颜色二200px，颜色三200px，颜色三 300px）；第一个颜色从0开始，100结束，第二个颜色从100开始，200结束，依次类推。

重复效果

background-image:repeating-linear-gradient(颜色样式）只写一遍，会自动重复，直至占满长度

transparent 透明色 一般制作进度条

径向渐变

background-image: radial-gradient（颜色，颜色）

形状取值：

默认情况，中心渐变（圆形）

background-image: radial-gradient(circle,颜色，颜色 ) 默认情况，中心渐变（圆形）

椭圆 ellipse

定义渐变开始的位置 at+百分比（水平方向 垂直方向）

background-image: radial-gradient(circle at 百分比 百分比，颜色，颜色)

定义渐变形状的大小：在形状后面加上大小像素

background-image: radial-gradient(circle 大小px at 百分比 百分比，颜色，颜色)

重复效果

background-image:repeating-radial-gradient( ) 用于重复径向渐变

自定义单选框样式

1、先隐藏radio属性为：display:none;

2、通过伪元素添加单选框样式（伪元素为inline，需要改变为inline-block）

3、设置input选中后的更改样式。（通过box-shadow实现）

过渡 transition

（一般和hover配合使用） display：none使用此元素不生效 2D效果

属性：transition-property 参与过渡的属性 width color

transition-duration 过渡动画持续的时间，单位一般是（s）或者ms（毫秒）

transition-delay 动画延迟的时间，单位一般是（s）或者ms（毫秒）

transition-timing-function 过渡动画的类型

transition-timing-function取值：

ease 慢块慢

linear 匀速

ease-in 缓慢启动

ease-out 缓慢结束

ease-in-out 开始和结束的时候缓慢

简写：transition:all linear 3s

组合一起写，可以把宽高分别变化，在变化时间后紧跟延迟时间。

元素的变换 transform

取值：transform：translate(20px ,30px) 相对x轴和y轴位置移动（水平方向，垂直方向）

transform：translateX(20px ) 相对x轴位置移动

transform：translateY(20px ) 相对y轴位置移动 若设置百分比，是根据自身宽高的百分比

注：改变位置时不会影响其他元素的位置，只移动本身，而margin会影响周围元素。

transform：rotate(120deg ) 正值顺时针旋转 负值逆时针旋转

transform：scale(1.2 ,1.2) 宽高相对放大倍数 放大下的子元素也会相应放大

transform：skew(30deg,20deg) 相对x轴和y轴位置倾斜

不可替换元素是指元素显示的内容是由元素内容决定的，比如 p 。

可替换元素是指元素显示的内容是由属性决定的，比如 img。

动画

不需要触发，刷新页面就有效果，可以循环播放

CSS3 动画 | 菜鸟教程

步骤：1、定义一个动画 2、调用动画

定义动画

@keyframes 关键帧动画

定义动画开始：form 定义动画结束：to

调用动画

animation

animation-name 动画名字 （必写）

animation-duration 完成一次动画的时间（必写）

animation-delay 动画延迟的时间

animation-timing-function 动画的速度曲线

animation-iteration-count 规定动画执行次数 取值：n次数 infinite 无限播放

图标 HTML实体 - Unicode 字符百科

修改样式和字体方式相同，要进行翻转（transform-translate）,需要更改为行内块

sub为下标 sup为上标

常见实体字符：

<  小于

>  大于

©  版权

®  注册商标

$  美元符号

¥  人民币符号

​

文字 © 

下标​​

文字 © 

上标​

图标库：Font Awesome 中文网 – | 字体图标

一般用i标签来引用图标

响应式布局

布局容器

全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网

先引入css格式

.container 类用于固定宽度并支持响应式布局的容器。自动默认为12列

然后每行用类名.row表示一行

里面在分为12列，用类名.col-lg-数字，表示列数，一行只能12列，超过部分会自动定为下一行

媒体查询

响应式布局，针对不同屏幕尺寸显示不同的效果

定义媒体查询@media （screen考虑打印是否为衬线字体）

@media screen and (max-width:500px){ div{样式} }

max最大 min 最小 给定范围用and连接

补充：

衬线字体：有粗有细，有笔锋

非衬线字体：一般用于电子显示屏，所有笔画粗细一样

less框架应用

在css基础上增加了：变量，混合宏，嵌套，计算

注释

单行注释（//注释内容） 多行注释和CSS一样 （注：单行注释不会编译为css文件上，若是样式注释要用多行注释）

在less文件编写，然后保存会自动生成一个css文件，再引入html。

变量

定义变量@+自己取一个名字：属性值；

然后把@+名字应用在某一个元素上

（当文档内有2个及以上的元素有同一属性，则可以使用变量）

优点：便于维护

变量的作用域

全局变量：全局可以通用的变量

局部变量：变量包含在局部{}块样式内，不能用在其他块区域。

嵌套

在一个容器里面直接编写子元素的属性和属性值，CSS文件会自动翻译为父子和祖先关系，但同时若有多个，会有重复现象，最好取类名区分开。

当使用伪类和伪元素嵌套时，用&链接

混入@mixins

设置元素样式，然后直接引用到元素上，类似类选择器。

.+名字（可改变的参数）{} 注（也可在参数后直接给定默认值，防止漏掉传参，尽可能默认值给到后面往前）

若需要多个参数，用逗号隔开，一一对应传参。

可对混入@mixins进行四则运算方式（+-*/）

直接在需要运算的元素值后使用，其中减法需要用空格隔开，除于需要用括号

Eg:width:@width - 2 width:(@width / 2 )

cass、scss框架应用

目前未用sass(严格的缩进式)，采用的scss。

Sass 和 SCSS 其实是同⼀种东⻄，我们平时都称之为 Sass，不同之处有两点：

1. ⽂件扩展名不同，Sass 是以“.sass”后缀为扩展名，⽽ SCSS 是以“.scss”后缀为扩展名

2. 语法书写⽅式不同，Sass 是以严格的 缩进式 语法规则来书写，不带⼤括号 {} 和分号 ; ，⽽ SCSS 的语法书写和 CSS 语法书写⽅式类似。

变量

&+名字

!default 默认

混合宏

@mixin+名字{样式} 声明

@include+名字 调用

@mixin+名字（可改变的参数）{} 注（也可在参数后直接给定默认值，防止漏掉传参，尽可能默认值给到后面往前）(和less一致）

若需要多个参数，用逗号隔开，一一对应传参。

继承

@exdent

元素可以继承某一个元素的属性，若自己有同类属性，则生效自己的属性，只继承没有的属性。

占位符

%

当定义时未被使用只有占位作用，并不会显示，除非被继承使用时，才会生效。

浏览器兼容问题

因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况，在大多数的情况下，我们的需求是，用户用任何浏览器来查看我们的网站或者登录我们的系统，都应该是统一的显示效果，所以浏览器的兼容性问题是前端开发人员经常会碰到和必须解决的问题。

浏览器内核/引擎

浏览器 排版引擎 Js引擎

Ie Trident、Edgehtml JScript

Firefox Gecko Tracemonkey

Chrome Webkit、Blik V8

Safari Webkit Squirelfish extreme

Opera Presto Carakan

处理办法

1、通配符

2、重置文件

3、私有属性

厂商前缀：-webkit-（谷歌/苹果） -moz-（火狐） -ms-（ie） -o-（欧朋）

书写格式：先在属性前加上厂商前缀，最后再写一次单独的属性。

渐进增强，优雅降级

渐进增强：先去构建基础功能，保证在低于版本浏览器上可以运行，然后再去提升在高版本浏览器上的使用的体验。

优雅降级：一开始构建完整功能，然后再去测试和修复，使其可以再低于版本当中使用。

客户端

单位：px（像素），em（相对长度 父元素），rem（相对长度 根元素）

Rem：需要引入（auto-size）文件,script，100px=1rem,