慕课网CSS工作应用+面试(2)

3.CSS基础

全面讲解CSS基础知识,包括层叠样式表的基本规则和含义、选择器(分类、特性、权重、性能)、非布局样式属性、CSS hack以及一些案例分析(checkbox等)。

3.1选择器

CSS(Cascading Style Sheet)层叠样式表

A.CSS权重问题:

内联样式 > style样式 > link

选择器权重:
内联样式,如style=" ",权值为1000.
ID选择器,如#contene,权值为100
class选择器、伪类选择器、属性选择器,权重为10
元素、伪元素,权重为1

除了考虑权重,还有下面可能影响样式显示:
1.!important
2.元素属性,优先级高(内联样式研究生)
3.相同权重,后写的生效

附注:在不进位的数字计算下,并不是10个类选择器可以等于一个ID选择器,只要有ID选择器就大过类选择器。
慕课网CSS工作应用+面试(2)_第1张图片
慕课网CSS工作应用+面试(2)_第2张图片
慕课网CSS工作应用+面试(2)_第3张图片
上面11个类选择器权重还是不如ID选择器高。

慕课网CSS工作应用+面试(2)_第4张图片

上面文本Dijkstra的颜色是orange。

继承:关于继承,如果设置了样式,就不会继承了,看下面示例。

//不会继承yellow这个颜色
.father{
  color: yellow;
}
.father span{
  color: red;
}
#jicheng{
  color: blue;
}

样式继承

样式继承

!import对样式设置影响

在CSS中,有一个特别的语法可以让一条规则总是优先于其他规则:!important。把它加在属性值的后面可以使这条声明有无比强大的力量。

#test p{
  color: blue;
}
.fontstyle{
  color:red !important;
}

!important

覆盖!important可以用另外一个!important

B.浏览器解析CSS方式:

从右往左解析,加快浏览器对CSS解析速度,更快找到CSS样式对应元素。

比如下面,是从.hello -> div -> body 进行解析

body div .hello{
	color:red;
}

C.选择器分类:

慕课网CSS工作应用+面试(2)_第5张图片
伪选择器不是选择元素,而是元素的某些部分,或仅在某些特定上下文中存在的元素。它们有两种主要类型 : 伪类和伪元素。

伪类选择器:

和一般的DOM中的元素样式不一样,它并不改变任何DOM内容。只是插入了一些修饰类的元素,这些元素对于用户来说是可见的,但是对于DOM来说不可见。伪类的效果可以通过添加一个实际的类来达到。

由于【状态】是动态变化的,所以一个元素达到一个特定状态时,它可能得到一个伪类的样式;当状态改变时,它又会失去这个样式。

由此可以看出,它的功能和class有些类似,但它是基于文档之外的抽象,所以叫伪类。

//在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的,a:active 必须被置于 a:hover 之后,才是有效的。
a:link|a:visited|a:hover|a:active

:focus
/* 伪类将应用于拥有键盘输入焦点的元素。 */
:first-child
/* 伪类将应用于元素在页面中第一次出现的时候。 */
:lang
/* 伪类将应用于元素带有指定lang的情况。 */

伪元素选择器

伪元素选择器,伪元素的效果是需要通过添加一个实际的元素才能达到的。

伪元素只是在页面显示的时候起了作用,在构建dom树的时候它被忽略的

/* 为某个元素的第一行文字使用样式。 */
::first-line
/* 为某个元素中的文字的首字母或第一个字使用样式。 */
::first-letter
/* 在某个元素之前插入一些内容。 */
::before
/* 在某个元素之后插入一些内容。 */
::after

伪类是一种状态,对一种状态设置样式。

伪元素是不会出现在HTML中,也不会出现在DOM树中,但是是一个真实存在的元素,可以显示内容,设置样式。

参考文章:
https://www.cnblogs.com/zcynine/p/5008985.html
https://www.cnblogs.com/EricZLin/p/8857405.html

3.2非布局样式

与布局无关的样式设置

文字:字体、字重、颜色、大小、行高
盒子:背景、边框
页面:滚动、换行
装饰性样式:粗体、斜体、下划线
其他

字体

字体族、多字体fallback、网络字体/自定义字体、iconfont

行高line-height

行高的构成:行高是由linebox决定的,linebox是由inlinebox组成的,inlinebox的高度会决定行高的高度。



inline box xfg中文 inline box inline box inline box inline box

在这里插入图片描述

每一行称为一条Line Box,它又是由这一行的许多inline-box组成,它的高度可以直接由line-height决定,line boxes的高度垂直堆叠形成了containing box的高度,就是我们见到的div或是p标签之类的高度了。

可以参考:https://segmentfault.com/a/1190000005155084

再看一个例子:

居中xfg 

慕课网CSS工作应用+面试(2)_第6张图片
line-height大于字体size时候,会在外部有对应的块盒子模型。

为什么设置height和line-height一样时候会垂直居中,因为子元素会在line-height自动垂直居中。

一个问题:

慕课网CSS工作应用+面试(2)_第7张图片
如上图,会出现一段空白,原因是img相当于inline元素,inline元素就要遵守行高的构成,会按baseline对齐,也就是基线对齐,基线到底线之间会有空隙,那如何解决(图片下面有空隙怎么办?如何清除?)?

原理就是会按inline进行排版,排版时候字体对齐,默认按照baseline对齐,baseline和底线之间有偏差,这个问题也有称经典的图片3px问题,解决方法是第一种设置对齐方式vertical-align:bottom或者改变inline设置display:block

背景

背景颜色、渐变色背景、多背景叠加、背景图片和属性(雪碧图)、base64和性能优化、多分辨率适配

hsl:色相、饱和度、亮度
H:Hue(色调)。0(或360)表示红色,120表示绿色,240表示蓝色,也可取其他数值来指定颜色。取值为:0 - 360

渐变色背景:

//线性渐变
background: linear-gradient(red, blue); /* 标准的语法 */

//径向渐变
background: radial-gradient(red, green, blue); /* 标准的语法 */

雪碧图:

.c2{
    width:20px;
    height:20px;
    background:url(./test_bg.png) no-repeat;
    background-position: -17px -5px;
    background-size: 261px 113px;
}
.c3{
    width:20px;
    height:20px;
    background:url(./test_bg.png) no-repeat;
    background-position: -169px -23px;
    background-size: 261px 113px;
}

原图:
慕课网CSS工作应用+面试(2)_第8张图片
效果图(利用偏移实现):
慕课网CSS工作应用+面试(2)_第9张图片
多分辨率适配:利用background-size把大图做小。

base64:文本格式,代替url,节省HTTP连接数,但是体积增大,图片本身体积增大(4/3),相当于文件从img下图片增加到css中,css文件增大,所以适合比较小的图标,比如loading图标。
还有base64在传输上有优势,也就是节省HTTP连接数,但是一是增加了体积,二是增加了解码的工作(从base64到图片),我们实际工作中写的时候还是图片,到打包的时候再转base64.

边框

边框的属性:线型、大小、颜色

边框背景图

边框衔接(三角形)

//利用边框绘制出一个三角形
.c3{
     width:400px;
     height: 200px;
     border-bottom:30px solid red;
     /* border-right:30px solid blue; */
     border-left:30px solid transparent;
     border-right:30px solid transparent;
}

慕课网CSS工作应用+面试(2)_第10张图片

滚动

内容比容器多的时候产生滚动。

慕课网CSS工作应用+面试(2)_第11张图片
文本折行

overflow-wrap(word-wrap):通用换行控制

word-break:针对多字节文字(是否把字母看成一个单位)

white-space:空白处是否断行

装饰性属性

字重(粗体)font-weight
斜体 font-style:itatic
下划线 text-decoration
指针 cursor

3.3hack和案例

我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!

CSS Hack:Hack即不合法但生效的写法,主要用于区别不同浏览器。

Hack缺点:难理解 难维护 易失效

替代方案:
1.特性检测
2.针对性加class

CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
1.属性前缀法(即类内部Hack):例如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",IE6~IE10都认识"\9",但firefox前述三个都不能认识。
2.选择器前缀法(即选择器Hack):例如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}
3.IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本: 。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

更多参考文章:https://www.cnblogs.com/mumble/p/4576489.html

3.4面试题

1.CSS样式(选择器)的优先级

计算权重确定
!import(能覆盖的就是再对另外加!import)
内联样式
后写的优先级高

2.雪碧图的作用

主要利用background-position

作用是减少HTTP请求数,提高加载性能

有一些情况下可以减少图片大小(比较有限)

3.自定义字体的使用场景

宣传/品牌/banner等固定文案
字体图标

4.base64的使用

用于减少HTTP请求
适用于小图片
base64的体积约为原图4/3

5.伪类和伪元素的区别

伪类表示一种状态
伪元素是真的有元素(before、after)
前者单冒号,后者双冒号(大部分浏览器)

6.如何美化checkbox

label[for]和id
隐藏原生input
:checked+label

具体可以看视频Hack和案例(2)

你可能感兴趣的:(CSS)