EP19-zake学CSS

zake在掘金的账本子
166 阅读14分钟

参考文档：

1, CSS基本语法

1,引入CSS

1，外部样式表

使用link标记。
在link标记中，rel和href是必须的，type和media属性可省略。

<link rel="stylesheet" type="text/css" href="sheet1.css" media="all" />

样式表中不能包含HTML标记语言，只能有CSS规则和CSS注释。会导致标记后面的CSS样式无法被识别，如下在外部样式表中是错误的。

<style></style>
body{
    background-color: red;
}

2，内部样式表

1，使用@import指令

与link类似，@import指令用于指示web浏览器加载一个外部样式表，并在表示HTML文档时使用其样式。@import指令常用于样式表需要需要使用另一个样式表中的样式的情况。

<style>
@import url(sheet2.css);
body{
    background-color: red;
}    
</style>

@import指令必须出现在style标签中，且放在其他CSS规则之前，否则将根本不起作用。

3，行间样式

2，选择器

1，通配选择器

*{color: red;}

2，元素选择器

html{color: black;}
p{color: gray;}
h2{color: silver;}

3，类选择器

1，多类选择器
2，结合元素的选择器

4，ID选择器

在实际中，浏览器不会检查ID的唯一性，设置相同的ID，可以为这些具有相同ID的元素应用相同样式，但是在编写DOM脚本时只能识别该ID的第一个元素。

#test{color: red;}
1，结合元素的ID选择器
div#test{color: red;}

5，属性选择器

6，分组选择器

分组选择器不是一种选择器类型，而是一种选择器使用方法。当多个对象定义了相同的样式时，就可以把他们分为一组，这样能够简化代码。

/*定义所有级别的标题和段落行高为22px*/
h1,h2,h3,h4,h5,h6,p{
    line-height:22px;
}

7，后代选择器

ul li{color: red;}
div p, ul li{color: red;}
1，子元素选择器
ul > li{color: red;}

8，兄弟元素选择器

1，相邻兄弟选择器
div + p{color: red;}

两个元素之间的文本内容不会影响相邻兄弟结合符起作用。

2，通用兄弟选择器
div ~ p {color:red;}

9，伪类选择器

静态伪类和动态伪类通常用于锚点<a>。

1，静态伪类（只应用于超链接）
:link       未访问
:visited    已访问
a:link{color: red;}
a:visited{color: green;}
2，动态伪类（可应用于任何元素）
:focus     拥有焦点(IE7-不支持)
:hover     鼠标停留(IE6-不支持给<a>以外的其他元素设置伪类)
:active    正被点击(IE7-不支持给<a>以外的其他元素设置伪类)
3，目标伪类：target
:target{color: red;}
#test :target{color: red;}//id为test的目标元素
4，UI元素伪类
:enabled    可用状态
:disabled    不可用状态
:checked    选中状态
input:enabled{color: red}
5，结构伪类
E:first-child(IE6-不支持) 父元素的第一个子元素,且该子元素是E，与E:nth-child(1)等同
E:last-child(IE6-不支持) 父元素的最后一个子元素，且该子元素是E，与E:nth-last-child(1)等同
:root    选择文档的根元素，即<html>元素
E F:nth-child(n)     选择父元素的第n个子元素，父元素是E，子元素是F
E F:nth-last-child(n)     选择父元素的倒数第n个子元素，父元素是E，子元素是F
E F:nth-of-type(n)     选择父元素的具有指定类型的第n个子元素，父元素是E，子元素是F
E F:nth-last-of-type(n) 选择父元素的具有指定类型的倒数第n个子元素，父元素是E，子元素是F
E:first-of-type    选择父元素中具有指定类型的第1个子元素，与E:nth-of-type(1)相同
E:last-of-type    选择父元素中具有指定类型的最后1个子元素，与E:nth-last-of-type(1)相同
E:only-child    选择父元素中只包含一个子元素，子元素是E
E:only-of-type    选择父元素中只包含一个同类型的子元素，子元素是E
E:empty            选择没有子元素的元素，而且该元素也不包含任何文本节点
　　[注意]n可以是整数(从1开始)，也可以是公式，也可以是关键字(even、odd)

p:first-child    代表的并不是<p>的第一个子元素，而是<p>元素是某元素的第一个子元素
p > i:first-child    匹配所有<p>元素中的第一个<i>元素
p:first-child i 匹配所有作为第一个子元素的<p>元素中的所有<i>元素

10，伪元素选择器

伪元素的效果类似于通过添加一个实际的元素才能达到，而伪类的效果类似于通过添加一个实际的类来达到。
CSS3为了区分两者，伪元素用两个冒号来表示，伪类用一个冒号来表示。

  • ::first-letter
  • ::first-line
  • ::before
  • ::after
  • ::selection

3,样式关键字

  • initial 表示元素属性的初始默认值。
<style>
.test{display: initial;}
</style>
<div class="box">
    <div class="test">测试一</div><span>文字</span>
    <br>
    <div >测试二</div><span>文字</span>
</div>
  • inherit
  • unset
  • revert

4,calc()

数学表达式calc()是CSS的函数，主要用于数学计算。
常用于布局中的不同单位的数学计算。

5,属性继承

HTML可以从父元素那里继承一部分CSS属性，即使当前元素没有定义该属性。
继承虽然减少了重复定义的麻烦，但是有些属性是不能继承的。
CSS属性一旦被继承了就不能取消，只能重新定义样式。

1，常用可继承样式

  • color
  • cursor
  • direction
  • font
  • letter-spacing
  • line-height ...

6,CSS hack

CSS hack是实现浏览器样式兼容的兜底办法，能不用就尽量不要使用。

7, css属性

1，background属性

1，background-color

指定要使用的背景颜色。
background-color将填充所有border以内的区域。

2,布局

1, 盒模型

盒模型又称为框模型。
所有的文档元素都生成一个矩形框，称为元素框。描述了一个元素在文档布局中所占的空间大小，每个框也影响着其他框的大小和位置。 关于盒模型，需要明确四个盒子的概念：

  • 元素框 margin box
  • 可视区域 border box
  • 客户区 padding box
  • 内容区 content box

width的默认值为auto，而margin，border和padding的默认值都是0。

1，正常盒模型

image.png 正常盒模型的宽高: 内边界的宽高。

width/height:

  • 值 length|percentage(相对于包含块的宽高)|auto(默认值)|inherit

2，怪异盒模型

image.png 怪异盒模型的宽高： 可见元素框的尺寸。

3，自适应宽高关键字

用于设置宽高属性。

  • fill-available 撑满空闲空间

  • max-content

  • min-content 采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度。
    替换元素，例如图片的最小宽度值就是图片呈现的宽度。
    对于文本元素，如果是中文，最小宽度值就是一个中文的宽度；如果是英文，默认英文单词不换行，最小宽度值是里面最长英文单词的宽度值。

  • fit-content 收缩到内容尺寸

4，边框和阴影

1，边框基础样式

如果边框没有样式，边框将根本不会存在。

  • 边框样式 border-style none(默认)
    hidden
    dotted
    ...

  • 边框宽度 border-width 边框的宽度不能为负，不能指定为百分比值。

  • 边框颜色 border-color

5, 盒模型margin

1，重叠

margin重叠又称为margin合并，发生这种情况有两个前提：

  1. 只发生在block元素上（不包括float，absolute，inline-block元素）
  2. 只发生在垂直方向上。

2，普通流

我们常说的文档流分为：定位流，浮动流和普通流三种。
普通流指格式化上下文，是页面中的一块渲染区域，有一套渲染规则，决定其子元素如何布局，以及和其他元素之间的关系和作用。
常见的格式化上下文有：BFC, IFC, GFC, FFC.

1, BFC

1, 触发BFC的条件
  • 根元素，即HTML元素
  • float的值不为none
  • overflow的值不为visible
  • display的值为inline-block，table-cell，table-caption
  • position的值为absolute或者fixed。
2，BFC的三个用途
1，阻止元素被浮动元素覆盖
2，包含浮动元素
3，阻止margin重叠

2,display属性

display属性用于规定元素生成的框类型，影响显示方式。
可能的参数值：

  • block
    不设置宽度时，宽度为父元素宽度。
    独占一行。
    支持宽高。
  • inline 内容撑开宽度。
    非独占一行。
    不支持宽高。
    代码换行被解析为空格。
  • inline-block 不设置宽度时，内容撑开宽度。
    非独占一行。
    支持宽高。
    代码换行被解析为空格。
  • none 隐藏元素并脱离文档流
  • list-item 不设置宽度时，宽度撑满一行。
    独占一行。
    支持宽高。
    表格类元素：
  • table
  • inline-table
  • table-cell
  • table-caption

3，CSS视觉格式化

盒模型是CSS视觉格式化的一部分，视觉格式化分为块级和行内两种方式。

4，文本方向

3，浮动

浮动最早的使用是出自<img src="#" align="right">,用于文本环绕图片的排版处理。如今浮动作为CSS中常用的布局方式。
为什么需要清除浮动？
解决浮动元素的包含块高度塌陷的问题。
清除浮动的两种方法：
在浮动元素的下面添加元素，设置clear属性；触发包含块的BFC，使其包含浮动元素。

4，定位

利用定位，可以准确的定义元素框相对于其正常位置应该出现的位置，或者相对于父元素，另一个元素甚至浏览器窗口本身的位置。
position定位
static(默认)|relative|absolute|fixed|inherit
定位元素是指position不为static的元素。

1,偏移属性

定位机制使用4个属性来描述定位元素各边相对于其包含块的偏移，这四个属性被称为偏移属性。
top/right/bottom/left
值：length|百分比|auto（默认）|inherit

5，布局方式

6，flex布局

flexbox应用于一维布局，用来为盒模型提供最大的灵活性。

弹性盒模型不是一个属性，而是一个模块，包括过个CSS3属性。采用flex布局的元素，称为伸缩容器（flex container），容器内的子元素称为伸缩项目（flex item)

1,伸缩容器

  • 伸缩流方向 flex-direction 指定主轴的方向，即伸缩项目在伸缩容器中的排列方向。
    row（默认）, row-reverse, column, column-reverse
  • 伸缩流换行 flex-wrap 伸缩项目溢出伸缩容器时是否换行。 nowrap(默认)， wrap， wrap-reverse
  • 伸缩流（包括换行和方向）flex-flow
  • 主轴对齐 justify-content 用来设置伸缩容器当前行伸缩项目在主轴方向上的对齐方式，指定如何在伸缩项目间分布伸缩容器额外空间。
    当一行上的所伸缩项目不能伸缩或者伸缩已达到最大长度时，这一属性才会对伸缩容器的额外空间进行分配。
    flex-start(默认)|center|flex-end|sapce-between|sapce-around
  • 侧轴对齐 align-items
  • 堆栈伸缩行 align-content

2,伸缩项目

  • 自身侧轴对齐方式 align-self 单个伸缩项目在侧轴的对齐方式，该属性可以覆盖伸缩容器的侧轴对齐方式。

  • 伸缩基准值 flex-basis 伸缩项目在主轴方向上的初始大小。

  • 拓展比率 flex-grow 当伸缩容器的额外空间为正值时，此伸缩项目相对于伸缩容器里其他伸缩项目能拓展的空间比例。
    flex-grow: 0, 表示即使存在剩余空间也不放大，若所有项目的flex-grow的属性都是1，则他们将等分剩余空间。

  • 收缩比率 flex-shrink 当伸缩容器的的额外控件为负值时，此伸缩项目相对于伸缩容器中的其他伸缩项目能收缩的空间比例。

  • 伸缩性 flex 是拓展比率，收缩比率，伸缩基准值的缩写

  • 显示顺序 order 定义伸缩项目的排列顺序，数值越小，排列越靠前。
    伸缩容器的伸缩项目默认显示顺序是遵循文档在源码中出现的先后顺序。

3，弹性盒模型flex在布局中的应用

1，元素居中

伸缩容器使用主轴对齐justify-content和侧轴对齐align-items.

<style>
.parent{
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
<div class="parent"  style="background-color: lightgrey; height: 100px; width: 200px;">
    <div class="in" style="background-color: lightblue;">DEMO</div>      
</div>

在伸缩项目上使用margin:auto

<style>
.parent{
    display: flex;
}
.in{
    margin: auto;
}
</style>
<div class="parent"  style="background-color: lightgrey;height: 100px;width: 200px;">
    <div class="in" style="background-color: lightblue;">DEMO</div>      
</div>

7，grid网格布局

参考文档：最强大的 CSS 布局 —— Grid 布局 grid网格布局是CSS中最强大的布局，应用于二维布局，可以同时处理行和列

8，响应式布局

1，像素

像素是一个固定单位，一般不适用像素来做响应式布局。响应式布局经常会使用到相对单位，比如EM.

1，设备像素

屏幕上的一个光点，1125*2436，代表屏幕横向和纵向分别有1125和2436个像素点。

2，CSS像素

实际开发中使用的是CSS像素，1px可能对应多个设备像素。

3，DPR 设备像素比

一个CSS像素对应多少个设备像素。

DPR可以使用JavaScript获取。

window.devicePixelRatio

2，EM

EM相当于元素自身的font-size.

p {
  font-size: 16px;
  padding: 1em; /* 1em = 16px */
}

如果元素没有显示的设置font-size,如何判断1em的值？
如果元素没有设置font-size，会继承父元素的font-size，如果父元素也没有，会沿着DOM树一直向上查找，直到根元素html,根元素的默认字体大小为16px。

3，REM

相对于根元素的EM。1REM等于根元素的字体大小。

html {
  font-size: 14px;
}

p {
  font-size: 1rem; /* 1rem = 14px */
}

改变根元素字体的大小，页面上所有使用REM的元素都会被重绘。

2，设置页面的viewpoint

通过一个<meta>的DOM标签，可以定义视口的各种行为，例如：宽度，高度，初始缩放比例。

<!-- 下面的 meta 定义了 viewport 的宽度为屏幕宽度，单位是 CSS 像素，默认不缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">

3，媒体查询

媒体查询是CSS3规范的一部分，提供了简单的判断方法，允许开发者根据不同的设备特征应用不同的样式。

9 CSS变量

3，渲染

1，字体

1，字体系列 font-famliy

五种通用字体系列：拥有相似外观的字体系列

  • serif 字体成比例，且有上下短线
  • sans-serif 字体成比例，且没有上下短线
  • Monospace
  • Cursive
  • Fantasy 特定字体系列：
  • 宋体
  • arial 默认字体系列： 中文字体：
  • 宋体
  • 微软雅黑

2，字体加粗 font-weight

normal(正常)|bold(粗体)|bolder(更粗)|lighter(更细)

3，字体大小 font-size

4, 字体风格 font-style

normal(默认)|italic(斜体)|oblique(倾斜)

2，文本

1，基础文本样式

CSS文本样式是相对于内容进行的样式修饰 CSS中有六种常见的文本样式：

  • 首行缩进 text-indent 首行缩进是将段落的第一行缩进，是常用的文本格式化结果。 值：长度|百分比|inherit
  • 水平对齐
    水平对齐是影响一个元素中的文本的水平对齐方式。
    值：left（默认）|center|right|justify|inherit
  • 字间隔 word-spacing 单词间隔， 用来设置文字或者单词间的间距。
    值： length|normal(默认值，默认为0)|inherit
  • 字母间隔 letter-spacing 字母间隔指字符间距。
  • 文本转换 text-transform 文本转换用于处理英文的大小写转换。
    值：uppercase(全大写)|none（默认）|lowercase(全小写)|capitalize(首字母大写)|inherit
  • 文本修饰 text-decoration 文本修饰用于为文本提供修饰线。
    修饰线的颜色与文本颜色相同。
    值： none（默认值）|underline（下划线）|overline（上划线）|line-through（中划线）|inherit

2，行高和垂直对齐

line-height, font-size, vertical-align是设置行内元素布局的关键属性。

1，行高 line-height

行高指文本行基线之间的距离。

3，换行和空白符

4，文本溢出和文本阴影

3，颜色和背景

4，溢出相关

5，变形和动画

avatar
文章
阅读
粉丝