The article contains the basic knowledge of Css…

Css结构

Css选择器

标签选择器

类选择器

注意，类选择器不能用html保留关键字，例如：.div这些都是不行的

案例

多类名

以上面的案例为例

Id选择器

与class选择器区别

通配符选择器

总结

字体

注意，当我们给body设置大小的时候，发现标题没有变化，因为标题标签比较特殊，需要单独指定字体的大小

复合属性

总结

文本属性

文本颜色

文本对齐

注意，给图片加居中对齐是没用的，要给他外面套一层p标签，给p加居中对齐

文本装饰

文本缩进（text-indent）

行间距

总结

Css引入方式

内部样式表

行内样式表

外部样式表

总结

Chrome调试工具

Emmet语法

生成html标签

示例

1、

2、

3、

4、

5、

6、

生成css样式

示例

1、

2、

3、

4、

5、

格式化代码

编辑器里面有

Css复合选择器

后代选择器

当有两个ul的时候，我们想要该第二个ul中的li：

后代选择器会将父类下的所有指定子类名的标签都改掉！

子选择器

:not选择器

示例1：

/* 设置非 <p> 元素的所有元素的背景色：*/
:not(p) { 
	background-color: #ff0000;
}

示例2：

/*选中div里面非首个的p元素*/
div p:not(:first-child) {
}

示例3：

/*选中div里面非首个、非最后一个的中间p元素*/
div p:not(:first-child):not(:last-child) {
}

示例4：

table tbody tr:not(:first-child):not(:last-child) td {
     text-align: right;
}

并集选择器

例如：

伪类选择器

特征：看到“：”说明就是伪类选择器

链接伪类选择器

注意这里的第三点，我给body改颜色有href的a标签是不会变化的，需要给这样的链接单独指定样式

一般情况下只会用到hover这个，因此常用写法：

Focus伪类选择器

总结

选择div中class为某个特定名字的方法

我们发现这种写法div和.pulse是连着写的中间没有空格

选中有多个class的某个标签的方法

比方说有标签：

<div class="class1 class2 class3"></div>

那么选中该标签可以这么写：

div.class1 {
    
}

也可以这么写：

div.class1.class2.class3 {
    
}

css元素显示模式

块元素

注意：文字类元素不能使用块级元素例如p和h。例子：

行内元素

宽和高的设置无效！

注意：a标签是个特殊的行内元素，它里面可以放块元素但是给a转换一下块级模式最安全

行内块元素

小结

元素显示模式转换

Display:block

Display:inline

Display:inline-block

案例

由于css没有提供垂直居中方案，因此可以用行高等于盒子高度的方法来实现：

原理：

类似qq截图的工具snipaste

Css背景

背景色

Background-color默认transparent（透明）

背景图片

背景图片和颜色可以同时设置，图片会在颜色之上

调整背景图片大小

background-size: length|percentage|cover|contain;

示例1：

div {
    background: url(img_flwr.gif);
    background-size: 80px 60px;
    background-repeat: no-repeat;
}

示例2：

div {
    background: url(img_flwr.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

示例3：

div {
    background: url(img_flwr.gif);
    background-size: cover;
    background-repeat: no-repeat;
}

示例4：

div {
    background: url(img_flwr.gif);
    background-size: contain;
    background-repeat: no-repeat;
}

背景图片位置

案例

1、

注意，这里的图片不要用img标签插入，应该使用背景图

2、

超大图片作为背景，这个时候用背景图片设置的优势在于屏幕越宽能看到的侧边就越多，而且可以设置居中显示

背景图像固定

背景复合写法

背景半透明

总结

综合案例

Css三大特性

层叠性

继承性

注意，跟文字相关的样式才会被继承，其他的样式不会被继承

行高的继承性

优先级

注意，比较规则是从权重数字从左到右比较。比方说上表的第一行和第二行，左边开始第一个数字都是0，直到最后一个数字第二行的为1，第一行的为0，那么我们就选择第二行，即元素选择器。

由于继承下来的权重是0，因此就算father的权重是!important级别，子标签p的权重为1，最后还是会选用子标签样式。所以上面这个p标签最后是粉色

这里也可以解释为什么包在body里面的a标签最后没有采用body的样式，那是因为浏览器为a标签默认制定了一个样式：蓝色 有下划线。解决方法：利用层叠性

我们手动写一个a标签样式即可

权重叠加

这个案例由于权重叠加最终会选用粉色的样式

权重会有叠加，但是不会有进位，例如有10个0001的权重，那么叠加之后会是：

案例

由于权重问题，虽然最后字体会变粗，但是颜色不会变粉色，解决方法：

盒子模型

边框

Border-style

参数

边框简写

单独设置上下左右边框

表格细线边框

想要里面的小框框也有边框颜色，则：

再给表格指定大小：

Border-collapse（相邻边框合并）

再给th加边框，之后进一步优化：

边框会影响盒子的实际大小

Padding

内边距会影响盒子的实际大小

应用（相邻元素边框重叠问题）

案例

小米侧边栏修改：

在实际开发中，这个侧边栏的距离是需要精确测量的

这时候就不能单纯的用上面这一行来确定他的距离了

我们应该使用padding，并且把width改小，因为padding会影响盒子大小

当没有设置width的时候padding不会影响盒子实际大小

实验发现当没有设置width的时候padding是不会影响盒子宽度的，但是当我们设置了width，哪怕设置的是width:100%，也会影响盒子的宽度。所以在这种情况下我们一般不会去写width属性。

同理：

我们给div指定了width，但是没有给p指定width，p的padding是不会影响到p的width的，p还是会继承div的width也就是300px。

之后我们给p制定了width，padding就能影响p的width了

Margin

外边距典型应用

盒子水平居中

在开发中一般设置margin: 0 auto;

也可以写margin: 9px 15px 0;表示上边距9px，左右边距15px，下边距0px

块级元素里面的内容居中

对于image这种元素也是适用的

外边距合并-嵌套块元素塌陷

垂直外边距合并的时候造成的问题是可以解决的

下面看看嵌套时候的问题：

这种情况按道理father会下来50px，son相对于father也会下来100px，但是实际上son没下来，而father下来了100+50=150px

注意：浮动的盒子是不会有这个问题的

解决方案：

1、

要是不需要红色边框还可以直接设置透明transparent

2、

3、

当然还有别的方法：

消除浏览器自带内外边距

行内元素设置边距时的注意事项

当我们为行内元素设置上下左右margin值得时候，我们发现上下的margin值是没有的，只有左右有

但是如果我们就是需要上下内外边距，只需要将行内转成块级或者行内块就可以了

案例

1、

用ps采色，量尺寸

将图片宽度设置为100%，那么他就不会溢出了，这里设置了margin而不设置padding，因为padding会使得盒子变大，这样的话我们就需要减掉相应的 height，会十分麻烦，而设置margin的话就不需要这样了。

盒子与盒子之间的距离最好用margin。

这里由于h4是块级元素，因此独占一行，而我们希望下面的span可以跟他同一行，因此将h4改为行内块元素

注意：这里的斜线用的是em字段包裹

之后再加a标签超链接即可

2、（详见vscode）

首先第一步还是去自带margin和padding

去掉无序列表前面的小圆点

一般开发的时候需要将所有的li的小黑点都去掉，因此我们一般直接像上面这样写

量行高

量整个ul到top的距离

总结

圆角边框

原理：

其中length就是圆的半径像素

语法

把边框完全变成圆形

将半径设置为矩形边长的一半

更好的写法：百分比

50%意为宽度和高度的一半

对于长方形，将半径设置为height的一半即可

把边框四个角变成不同弧度

上面的例子是设置了4个值，如果设置2个值表示对角相同弧度

分开设置圆角

盒子阴影

还可省略后面三个数值（一般不用）：

注意：盒子阴影不会占用空间，如果有相邻的盒子那么他们会紧挨在一起：

鼠标经过才有阴影：

文字阴影

不透明度opacity

CSS浮动

标准流

这种情况标准流就很难做：

浮动

标准流和浮动选择的经验

语法

浮动特性（重点）

浮动的盒子都在一行内，顶着顶部对齐：

注意：当浏览器缩小的时候，浮动的盒子可能另起一行排列：

浮动和行内块的区别

行内块靠在一起有缝隙，浮动没有

脱离标准流（最重要）

总结来讲就是1、浮起来；2、不保留位置

效果（给粉色盒子加浮动）：

脱标：

浮动元素具有行内块元素特性

它可以设置宽高，也可以设置大小，也会在一行显示

接下来设置p的css（还没有添加浮动）

给p加浮动

给p添加内容

我们发现没有指定width的时候浮动具有行内块的特性即width随内容多少而改变

浮动经常和标准流父级搭配使用

案例

1、

2、

3、

注意点

第一个盒子不浮动，第二个盒子浮动

第一、三个盒子浮动，第二个盒子不浮动

当不浮动的那个盒子比较小的时候，第一个浮动的盒子盖住了不浮动的盒子：

结论

同一级别的要么都浮动，要么都不浮动

常见的网页布局

清除浮动

解决方法：

如果不给父元素添加浮动，会出现问题：

没给子元素加浮动的时候是正常的，一旦给子元素加浮动：

我们发现父元素的高度变成了0

这会带来一个问题，当我们在设置footer的时候，footer会贴到上面那个块级元素下面：

为什么清除浮动？

清除浮动本质

语法

闭合浮动就是将元素封闭在父级元素之内：

方法

额外标签法（不推荐）

注意：这个新增的盒子必须是块级元素不能是行内元素

父级添加overflow

可以加hidden、auto、scroll，但是常见的就是加hidden

伪元素法

原理就是css帮我们在后面加了一个新盒子（转换成块级元素了），本质上就是额外标签法的升级，这样做的好处是不需要添加额外标签，看起来整洁

双伪元素法

总结

PS切图

图层切图

切片切图

如果我们需要透明的，那么这样做：

移动切片：

插件切图

关于ps字体大小

这里的点就是pt，和px等价

关于ps图层锁定

上锁之后图片就不能移动了

案例

先确定版心，之后想要调用版心就直接调用这个类即可：

由于层叠性，我们需要在.header里面写margin的时候写30px的同时写上auto

注意，实际开放中导航栏都是拿li做的

我们发现单纯给.nav加float是没有用的，因为没有给前面的div加float。

注意，导航栏里面的文字我们不方便给他加width，一般是加padding

由于导航栏里面的标签是li，标签之间有距离，那么最好是给li加margin而不是给a加margin

注意：这里的height需要减掉边框的2px，因为边框会撑大盒子

Padding撑大盒子，因此width需要减去15px

按钮自带边框，需要手动去除

由于button和image都属于行内块元素，他们之间是会有空隙的，因此父元素装不下他俩的时候button就会掉下来，解决方法：浮动

最后将颜色替换成图片，我们的button就做好了

之后给body指定背景色：

结束头部区域

由于a标签没有height，因此是给li设置的height

注意：浮动的盒子不会有外边距合并（塌陷）的问题

给父亲加line-height，子盒子会继承

结果发现父级又装不下了，导致li另起一行显示，这里有两个策略，一个是给每一行的最后一盒子去掉margin-right；另一个就是修改父级的宽度让他足够装下li

出现了塌陷问题

因此将margin改为padding

这里显然适合用dl来做

最后把body里面的height：3000px扔掉

Css定位

类似下面这些情况：

静态定位

相对定位（重要）

相对定位不脱标

绝对定位absolute（重要）

当没有父级或者父级没有定位的时候，盒子按照浏览器定位

当有父级且父级有定位时按照父级定位，当有父亲也有爷爷的时候，父亲没有定位，但是爷爷有定位时按照爷爷定位，如果连爷爷也没有就找body，如果body也没有那就按浏览器定位

绝对定位脱标

注意：绝对定位是不保留自己原先的位置的，会飘起来而且比float飘得更高，典型的应用就是下面这张图片，两个小箭头是不会影响下面的背景图的

固定定位fixed（重要）

可视窗口：

应用案例

粘性定位sticky（了解）

子绝父相（用的最多）

案例

以之前那个学成在线案例为例

我们需要加这个hot图片

由于已经有了一个img，因此我们采用em包裹img的方式再添加一个img

这两个img一个是li的儿子，一个是li的孙子，因此对原先css作出修改

再给li和em中的img添加定位

总结

定位的叠放次序z-index

绝对定位盒子的居中

同理，垂直方向的也一样

加了绝对定位或固定定位的盒子可以直接设置高度和宽度

我们发现span这个行内元素加了position之后变成类似行内块元素了，块内元素本来独占一行，加了position之后也变类似行内块元素了

脱标的盒子不会触发外边距塌陷

案例

这里我们发现相对定位也可以使用margin实现居中，那是因为相对定位不脱标

右侧的箭头同理，但是我们发现发生了代码冗余，这个时候我们可以使用并集选择器优化代码，提取公共部分，分开写不同部分

浮动与绝对定位和固定定位的区别

浮动虽然不保留原来位置，但是它不会盖住下面的文字，类似：

给粉框框加了浮动之后，下面的文字还是会露出来

但是绝对定位和固定定位会完全压住盒子

解释浮动为什么不会盖住下面的文字

浮动的初衷就是做文字环绕图片的效果的

网页布局总结

元素的显示和隐藏

Display（重要）

我们发现盒子消失了（但没有删除），并且也没保留原来位置

改成display：block之后又重新显示

Visibility

我们发现盒子不见了，但是他保留原来的位置！这是与display的区别所在

Overflow

注意上图最后一句话：定位的盒子慎用overflow：hidden，因为它会隐藏多余的部分，例如：

如果给父级添加overflow：hidden，那么hot溢出的部分就没了

存在这种情况，盒子装不下内容

设置为auto将在需要的时候添加滚动条

隐藏滚动条

具体请参考：http://caibaojian.com/hide-scrollbar.html

推荐使用（虽然对IE兼容性不好，但是很方便）：

• chrome 和 Safari

  .element::-webkit-scrollbar { width: 0 !important }
  

• IE 10+

  .element::-webkit-scrollbar { width: 0 !important }
  

• Firefox

  .element { overflow: -moz-scrollbars-none; }
  

总结

案例

使用unset将已有的css属性去掉

在使用elementui或antd的时候，总有要改写组件css样式的时候，那么如何去掉组件原有的css样式呢？

可以使用unset，例子：

#tag {
    background: unset;
}

规范

CSS属性书写顺序（重点）

例子：

布局思路

技巧

我们可以给body加一个height为3000px，这样的话就可以有滚动条浏览了

Vscode

Ctrl+g之后输入1可以快速定位到第一行

约定俗成

左右都有或者上下都有时先左后右，先上后下

Css高级

精灵图

使用案例

更方便的写法：

当需要使用多次的时候，我们又遇到了代码冗余问题，优化他！

字体图标

下载

引入

有可能font里面有四种字体文件，主要是因为兼容性：

这一段代码直接从style.css复制黏贴：

只需要复制一部分就好了

然后去找它自己专门的字符

也可以写成前面的那一串字符，只需转义即可

由于它是文字，因此可以随便更改样式

原理（跟精灵图差不多）

字体图标追加

导入之后原先的那些字体图标就会被导入进来了，之后只需要照常选择新的图标并下载就好了

Css三角

上图红框框的两行代码其实是为了兼容性

案例

Css用户界面样式

鼠标样式cursor

轮框线outline

防止拖拽文本域resize

注意：textarea最好不要这样写，不然会有空格产生：

最好这样写：

Vertical-align设置行内块和文字垂直居中对齐

注意块元素无法使用

默认是基线对齐

学成在线那个案例图片和文字没有垂直居中，现在可以了

还有一种情况：

由于文本域也是行内块元素，因此也可以使用vertical-align方法

图片底部空白缝隙解决方案

原因在于图片采用基线对齐：

解决方案：

原理：block元素不能用vertical-align，因此不会有基线这种东西，去除掉了基线就去除了bug

文字溢出省略号显示

单行写法

多行写法

出现上面这种情况是正常的，只需要把height设置到两行大小即可。

这个功能兼容性比较差，最好让后台来做

常见布局技巧

Margin负值

这种情况给一个margin -1px即可：

这里要说明一下浏览器渲染的时候是一个一个li来的，这就解释了为什么会发生每个li都向左走了1px但边框却仍旧变细了的原因

但是我们发现一个bug：

当添加hover的时候有一侧的边框没有变色

解决方法：

相对定位（保留位置），会压住其他的盒子

这样可以解决，但是如果父级也有相对定位的话就不行了，这个时候用z-index

文字围绕浮动元素

行内块制作页码导航栏

Css三角强化

Css初始化

最终上线的时候css要压缩

这一块是京东的初始化代码

注意：这里的\5B8B\4F53是宋体二字