每天分享前端知识

CSS相关知识总结

字体和文本属性

1、单位（绝对单位{in、cm、mm、pt、pc}；相对单位{px、em
}）
2、font字体属性
p{
 font-size: 50px; /*字体大小*/
 line-height: 30px;      /*行高*/
 font-family: 幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
 font-style: italic ; /*italic表示斜体，normal表示不倾斜*/
 font-weight: bold; /*粗体*/
 font-variant: small-caps;  /*小写变大写*/
}
vertical-align: middle; /*指定行级元素的垂直对齐方式。*/
letter-spacing: 0.5cm ; 单个字母之间的间距
word-spacing: 1cm; 单词之间的间距
text-decoration: none; 字体修饰：none 去掉下划线、underline 下划线、line-through 中划线、overline 上划线
color:red; 字体颜色
text-align: center; 在当前容器中的对齐方式。属性值可以是：left、right、center（在当前容器的中间）、justify
text-transform: lowercase; 单词的字体大小写。属性值可以是：uppercase（单词大写）、lowercase（单词小写）、capitalize（每个单词的首字母大写）
ul li{
 list-style-image:url(images/2.gif) ;  /*列表项前设置为图片*/
 margin-left:80px;  /*公有属性*/
}

背景属性

background-color:#ff99ff; 设置元素的背景颜色。
background-image:url(images/2.gif); 将图像设置为背景。
background-repeat: no-repeat; 设置背景图片是否重复及如何重复，默认平铺满。（重要）
no-repeat不要平铺；
repeat-x横向平铺；
repeat-y纵向平铺。
background-position:center top; 设置背景图片在当前容器中的位置。
background-attachment:scroll; 设置背景图片是否跟着滚动条一起移动。 属性值可以是：scroll（与fixed属性相反，默认属性）、fixed（背景就会被固定住，不会被滚动条滚走）。
另外还有一个综合属性叫做background，它的作用是：将上面的多个属性写在一个声明中。
/* 从 padding-box 内边距开始显示背景图 */
 background-origin: padding-box;           //默认值
 /* 从 border-box 边框开始显示背景图  */
 background-origin: border-box;
 /* 从 content-box 内容区域开始显示背景图  */
 background-origin: content-box;
background-clip: content-box; 超出的部分，将裁剪掉。属性值可以是：
border-box 超出 border-box 的部分，将裁剪掉
padding-box 超出 padding-box 的部分，将裁剪掉
content-box 超出 content-box 的部分，将裁剪掉
我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。
background-image: linear-gradient(方向, 起始颜色, 终止颜色); background-image: linear-gradient(to right, yellow, green);
background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
 background-image: radial-gradient(100px at center,yellow ,green);：围绕中心点做渐变，半径是100px，从黄色到绿色做渐变。中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。
clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
虽然clip-path不是背景属性，但这个属性非常强大，但往往会结合背景属性一起使用，达到一些效果。
/* 裁剪出圆形区域 */
        clip-path: circle(50px at 100px 100px);
        transition: clip-path .4s;
 /* 鼠标悬停时，裁剪出更大的圆形 */
        clip-path: circle(80px at 100px 100px);

样式表和选择器

css 对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。
基本选择器：
标签选择器：针对一类标签
ID 选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用（不建议使用）
高级选择器：
后代选择器：用空格隔开
交集选择器：选择器之间紧密相连
并集选择器（分组选择器）：用逗号隔开
伪类选择器
div > p {
    color: red;
}
+表示选择下一个兄弟
<style type="text/css">
    h3 + p {
        color: red;
    }
</style>
伪类选择器分为两种。

（1）静态伪类：只能用于超链接的样式。如下：

:link 超链接点击之前
:visited 链接被访问过之后
PS：以上两种样式，只能用于超链接。

（2）动态伪类：针对所有标签都适用的样式。如下：

:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）
a标签有4种伪类（即对应四种状态），要求背诵。如下：

:link “链接”：超链接点击之前
:visited “访问过的”：链接被访问过之后
:hover “悬停”：鼠标放到标签上的时候
:active “激活”： 鼠标点击标签，但是不松手时。

继承和层叠

关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。
关于盒子、定位、布局的属性，都不能继承。
当多个选择器，选择上了某个元素的时候，要按照如下顺序统计权重：
id 选择器
类选择器、属性选择器、伪类选择器
标签选择器、伪元素选择器
选择上了，数权重，(id的数量，类的数量，标签的数量)。如果权重一样，谁写在后面听谁的。
没有选择上，通过继承影响的，就近原则，谁描述的近听谁的。如果描述的一样近，比如选择器权重，如果权重再一样重，谁写在后面听谁的。
CSS样式表的冲突的总结

1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
总结：就近原则。ID选择器优先级最大。

盒子模型

一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
padding：内边距。
border：边框。
margin：外边距。

浮动

h1标签是块级元素，占据了整行，span标签是行内元素，只占据内容这一部分。
行内元素和块级元素的区别：（非常重要）
行内元素：
与其他行内元素并排；
不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：
霸占一行，不能与其他任何元素并列；
能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
我们可以通过display属性将块级元素和行内元素进行相互转换。display即“显示模式”。
块级元素可以转换为行内元素：
一旦，给一个块级元素（比如div）设置：display: inline; 那么，这个标签将立即变为行内元素，此时它和一个span无异。inline就是“行内”。也就是说：此时这个div不能设置宽度、高度；此时这个div可以和别人并排了。
css中一共有三种手段，使一个元素脱离标准文档流：
（1）浮动
（2）绝对定位
（3）固定定位
标准流中的文字不会被浮动的盒子遮挡住。（文字就像水一样）
如果一个元素要浮动，那么它的祖先元素一定要有高度。
有高度的盒子，才能关住浮动。（记住这句过来人的经验之语）

定位

position: absolute;  <!-- 绝对定位 -->
 position: relative;  <!-- 相对定位 -->
 position: fixed;     <!-- 固定定位 -->

相对定位不脱标
相对定位：不脱标，老家留坑，别人不会把它的位置挤走。
也就是说，相对定位的真实位置还在老家，只不过影子出去了，可以到处飘。
相对定位的用途
如果想做“压盖”效果（把一个div放到另一个div之上），我们一般不用相对定位来做。相对定位，就两个作用：
（1）微调元素
（2）做绝对定位的参考，子绝父相
绝对定位：定义横纵坐标。原点在父容器的左上角或左下角。横坐标用left表示，纵坐标用top或者bottom表示。
绝对定位的参考点（重要）
（1）如果用top描述，那么参考点就是页面的左上角，而不是浏览器的左上角
（2）如果用bottom描述，那么参考点就是浏览器首屏窗口尺寸（好好理解“首屏”二字），对应的页面的左下角：
一个绝对定位的元素，如果父辈元素中也出现了已定位（无论是绝对定位、相对定位，还是固定定位）的元素，那么将以父辈这个元素，为参考点

固定定位
固定定位：就是相对浏览器窗口进行定位。无论页面如何滚动，这个盒子显示的位置不变。

css3

E:first-child 匹配父元素的第一个子元素E。
E:last-child 匹配父元素的最后一个子元素E。
E:nth-child(n) 匹配父元素的第n个子元素E。注意，盒子的编号是从1开始算起，不是从0开始算起。
E:nth-child(odd) 匹配奇数
E:nth-child(even) 匹配偶数
E:nth-last-child(n) 匹配父元素的倒数第n个子元素E。
text-shadow: 20px 27px 22px pink;
参数解释：水平位移 垂直位移 模糊程度 阴影颜色。
-webkit-: 谷歌 苹果
    -moz-:火狐
    -ms-：IE
    -o-：欧朋

transition 包括以下属性：
transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
transition-duration: 1s; 过渡的持续时间。
transition-timing-function: linear; 运动曲线。属性值可以是：
linear 线性
ease 减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
上面的四个属性也可以写成综合属性：

	transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;

	transition: all 3s linear 0s;

动画

transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
transition-duration: 1s; 过渡的持续时间。
transition-timing-function: linear; 运动曲线。属性值可以是：
linear 线性
ease 减速
ease-in 加速
ease-out 减速
ease-in-out 先加速后减速
transition-delay: 1s; 过渡延迟。多长时间后再执行这个过渡动画。
上面的四个属性也可以写成综合属性：

 transition: 让哪些属性进行过度 过渡的持续时间 运动曲线 延迟时间;
 transition: all 3s linear 0s;
transform: scale(x, y);
transform: scale(2, 0.5);
参数解释： x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
取值：大于1表示放大，小于1表示缩小。不能为百分比。

transform: translate(水平位移, 垂直位移);
transform: translate(-50%, -50%);
参数解释：
参数为百分比，相对于自身移动。
正值：向右和向下。 负值：向左和向上。如果只写一个值，则表示水平移动。
旋转：rotate
格式：
transform: rotate(角度);
transform: rotate(45deg);
参数解释：正值 顺时针；负值：逆时针。

rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想改变旋转的坐标原点，可以用transform-origin属性。格式如下：

transform-origin: 水平坐标 垂直坐标;
transform-origin: 50px 50px;
transform-origin: center bottom;   //旋转时，以盒子底部的中心为坐标原点
transform: rotateX(360deg);    //绕 X 轴旋转360度
 transform: rotateY(360deg);    //绕 Y 轴旋转360度
 transform: rotateZ(360deg);    //绕 Z 轴旋转360度
/* 透视 */ perspective: 150px;
移动：translateX、translateY、translateZ
格式：
transform: translateX(100px);    //沿着 X 轴移动
transform: translateY(360px);    //沿着 Y 轴移动
transform: translateZ(360px);    //沿着 Z 轴移动
1、定义动画的步骤
（1）通过@keyframes定义动画；
（2）将这段动画通过百分比，分割成多个节点；然后各节点中分别定义各属性；
（3）在指定元素里，通过 animation 属性调用动画。
/* 方式一：定义一组动画*/
        @keyframes move1 {
            from {
                transform: translateX(0px) rotate(0deg);
            }
            to {
                transform: translateX(500px) rotate(555deg);
            }
        }

        /* 方式二：定义多组动画*/
        @keyframes move2 {
            0% {
                transform: translateX(0px) translateY(0px);
                background-color: red;
                border-radius: 0;
            }

            25% {
                transform: translateX(500px) translateY(0px);

            }

            /*动画执行到 50% 的时候，背景色变成绿色，形状变成圆形*/
            50% {
                /* 虽然两个方向都有translate，但其实只是Y轴上移动了200px。
                因为X轴的500px是相对最开始的原点来说的。可以理解成此时的 translateX 是保存了之前的位移 */
                transform: translateX(500px) translateY(200px);
                background-color: green;
                border-radius: 50%;
            }

            75% {
                transform: translateX(0px) translateY(200px);
            }

            /*动画执行到 100% 的时候，背景色还原为红色，形状还原为正方形*/
            100% {
                /*坐标归零，表示回到原点。*/
                transform: translateX(0px) translateY(0px);
                background-color: red;
                border-radius: 0;
            }
        }
/* 调用动画*/
            /* animation: 动画名称 持续时间  执行次数  是否反向  运动曲线 延迟执行。infinite 表示无限次*/
            /*animation: move 1s  alternate linear 3;*/
            animation: move2 4s;
如果把属性值写成** steps()，则表示动画不是连续执行**，而是间断地分成几步执行。

flex 布局

1、flex 布局的子元素不会脱离文档流，很好地遵从了“流的特性”。
但你如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的。

flex-direction：用于设置盒子中子元素的排列方向。属性值可以是：
属性值描述row | 从左到右水平排列子元素（默认值）
column | 从上到下垂直排列子元素
row-reverse | 从右向左排列子元素
column-reverse | 从下到上垂直排列子元素
备注：如果我们不给父容器写flex-direction这个属性，那么，子元素默认就是从左到右排列的。
flex-wrap 属性
flex-wrap：控制子元素溢出时的换行处理。
justify-content 属性
justify-content：控制子元素在主轴上的排列方式。
align-items：设置子元素在侧轴上的对齐方式。属性值可以是： - flex-start 从侧轴开始的方向对齐 - flex-end 从侧轴结束的方向对齐 - baseline 基线 默认同flex-start - center 中间对齐 - stretch 拉伸
flex属性：设置子盒子的权重

web 字体

1）第一步：使用font-face声明字体
@font-face {font-family: 'webfont';
    src: url('webfont.eot'); /* IE9*/
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url('webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('webfont.svg#webfont') format('svg'); /* iOS 4.1- */
}

（2）第二步：定义使用webfont的样式
.web-font{
    font-family:"webfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}

（3）第三步：为文字加上对应的样式
<i class="web-font">这一分钟，你和我在一起，因为你，我会记得那一分钟。从现在开始，我们就是一分钟的朋友。这是事实，你改变不了，因为已经完成了。</i>

SASS

sass 有两种后缀名文件：
（1）`.sass`：对空格敏感。不使用大括号和分号，所以每个属性之间是通过换行来分隔。
比如：
h1
color: #000
background: #fff

这种语法是类ruby的语法，和CSS的语法相比，相差较大。所以，在3.0版本中就引入了`.scss`的语法。
（2）`.scss`：是css语法的超集，可以使用大括号和分号。
比如：

h1 {
color: #000;
background: #fff;
}


在html和html5中，div的长宽是不同的，后者的高度要超过几个像素。


注意：一个项目中可以混合使用两种语法，但是一个文件中不能同时使用两种语法。

杂七杂八

常见问题
你是如何理解 HTML 语义化的？
语义化：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。
举例：段落用 p，边栏用 aside，主要内容用 main 标签。
好处：
便于开发者阅读和维护

有利于SEO：让浏览器的爬虫和辅助技术更好的解析，

语义化标签介绍：

在HTML5出来之前，我们习惯于用div来表示页面的章节或者不同模块，但是div本身是没有语义的。但是现在，HTML5中加入了一些语义化标签，来更清晰的表达文档结构。
 	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
控制页面在移动端不要缩小显示。

canvas 元素是干什么的？

看 MDN 的 canvas 入门手册。

说一下CSS盒模型

可以参考本人的另外一篇文章：《02-CSS基础/06-CSS盒模型详解》。

css reset 和 Normalize.css 有什么区别

此题考英文。

二者都是用来统一浏览器的默认样式：

reset：重置。相对「暴力」，不管你有没有用，统统重置成一样的效果，且影响的范围很大，讲求跨浏览器的一致性。（一刀切）

Normalize.css ：标准化。相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。（去伪存真）

参考链接：

Normalize.css 与传统的 CSS Reset 有哪些区别？

CSS3初始化代码Normalize.css中文版

谈谈一些有趣的 CSS 话题

前端面试之CSS总结(上)

选择器的优先级如何确定
选择器越具体，优先级越高。 #xxx 大于 .yyy
同样优先级，写在后面的覆盖前面的。
color: red !important; 优先级最高。

BFC 是什么
overflow:hidden ：取消父子 margin 合并。 （另一种推荐做法：padding-top: 0.1px;）
如何清除浮动
（1）overflow: hidden
（2）.clearfix 清除浮动写在爸爸身上
    .clearfix::after {
        content: '';
        display: block;
        clear: both;
    }

    /* 兼容 IE */
    .clearfix {
        zoom: 1;
    }
伪类和伪元素的区别是什么？
概念上的区别：
伪类表示一种状态
伪元素是真的有元素。比如 ::after 是真的有元素，可以在页面上显示内容。
使用上的区别：
伪类：使用单冒号
伪元素：使用双冒号