从0开始的前端学习（二）|青训营笔记

渔枫向晚
111 阅读11分钟

这是我参与「第四届青训营 」笔记创作活动的的第二天 本文已参与「新人创作礼」活动，一起开启掘金创作之路。

CSS知识及常用汇总

CSS知识图谱

大纲.png

一 基础知识

什么是CSS

  • CSS 指的是层叠样式表 (Cascading Style Sheets) 也成级联样式表
  • CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
  • CSS 节省了大量工作。它可以同时控制多张网页的布局
  • 外部样式表存储在 CSS 文件中

CSS语法

CSS 规则集（rule-set）由选择器和声明块组成：

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>
  • 选择器：要修饰的对象（东西） 指向您需要设置样式的 HTML 元素
  • 属性名：修饰对象的哪一个属性（样式）
  • 属性值：样式的取值

CSS使用

有三种插入样式表的方法：

  • 外部 CSS
  • 内部 CSS
  • 行内 CSS

外部CSS

通过调用外部样式表 在head部分中的< link >元素内进行对外部样式表的引用

<link rel="stylesheet" type="text/css" href="mystyle.css">

内部CSS

内部样式是在 head 部分的 < style > 元素中进行定义

<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>

行内CSS

行内样式（也称内联样式）可用于为单个元素应用唯一的样式

<p style="color:blue;">  </p>

优先级顺序

行内样式 >> 外部和内部样式 >> 浏览器默认样式

二选择器

我们可以将 CSS 选择器分为五类：

  • 简单选择器（根据名称、id、类来选取元素）
  • 组合器选择器（根据它们之间的特定关系来选取元素）
  • 伪类选择器（根据特定状态选取元素）
  • 伪元素选择器（选取元素的一部分并设置其样式）
  • 属性选择器（根据属性或属性值来选取元素）

1、基础选择器

1.1 标签选择器

也称为元素选择器，使用HTML标签作为选择器的名称 以标签名作为样式应用的依据

1.2 id选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配 元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素！

ps：id 名称不能以数字开头。

1.3 类选择器

类选择器选择有特定 class 属性的 HTML 元素。 如需选择拥有特定 class 的元素，请写一个句点 . 字符，后面跟类名

实例

<head>
  <meta charset="UTF-8">
  <style>
        /*标签选择器*/
      p{
        color: red;
        text-align: center;
      }
      h2{
        color: blue;
        text-align: center;
      }
      /*类选择器*/
      .hello{
        color: yellow;
        text-align: center;
      }
      /*id选择器*/
      #hello{
        color: purple;
      }
  </style>
</head>
<body>
        <!--     标签选择器-->
       <p>welcome xiangnan'home</p>
       <h2>欢迎访问向楠之家</h2>
        <!--类选择器-->
        <p class="hello"> hello word!</p>
        <!--id选择器-->
        <h2 id = "hello">hello word</h2>

</body>

选择器-2.png

2、复杂选择器

2.1 组合选择器

组合器是解释选择器之间关系的某种机制 CSS 中有四种不同的组合器：

  • 后代选择器 (空格) 后代选择器匹配属于指定元素后代的所有元素
  • 子选择器 (>) 子选择器匹配属于指定元素子元素的所有元素
  • 相邻兄弟选择器 (+) 相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素
  • 通用兄弟选择器 (~) 通用兄弟选择器匹配属于指定元素的同级元素的所有元素
/*相邻兄弟选择器*/
div + p{
    color:green;
}

2.2 伪类选择器

根据不同的状态显示不同的样式，一般多用于 标签

四种状态：

  • :link 未访问的链接
  • :visited 已访问的链接
  • :hover 鼠标悬浮到连接上，即移动在连接上
  • :active 选定的链接，被激活
/* 未访问的链接 */
p:link {
    color: red;
}

/* 已访问的链接 */
p:visited {
    color: green;
}

/* 鼠标悬停链接 */
p:hover {
    color: blue;
}

/* 已选择的链接 */
p:active {
    color: purple;
}

2.3 伪元素选择器

  • :first-letter 伪元素用于向文本的首字母添加特殊样式
  • :first-line 伪元素用于向文本的首行添加特殊样式
  • :before伪元素可用于在元素内容之前插入一些内容，需要配合content属性使用
  • :after 伪元素可用于在元素内容之后插入一些内容，需要配合content属性使用
  • :selection 伪元素 伪元素匹配用户选择的元素部分
	<style>
		p:first-letter{
			color:red;
			font-size:30px;
		}
		p:first-line{
			background:pink;
		}
		p:before{
			color:green;
		}
		p:after{
			color:blue;
		}
	</style>`

2.4、优先级顺序

行内样式>ID选择器>类选择器>标签选择器

三、常用CSS属性

3.1 字体

3.1.1 通用字体族

  • 衬线字体（Serif）- Georgia、宋体
  • 无衬线字体（Sans-serif）- Arial、Helvetica、黑体、微软雅黑
  • 等宽字体（Monospace）- Consolas、Courier、中文字体
  • 手写体（Cursive）- Caflisch Script、楷体
  • 幻想字体（Fantasy）- Comic Sans MS, Papyrus, Zapfino
h1 {
    font-family:Georgia, serif;
}
body {
    font-family: Helvetica, sans-serif;
}

3.1.2 字体样式

1.font-style 属性主要用于指定斜体文本

取值：

  • normal - 文字正常显示
  • italic - 文本以斜体显示
  1. font-weight 属性指定字体的粗细

取值：

  • normal普通（默认）
  • bold粗体
  1. font-size 属性设置文本的大小。

取值：

  • px像素 pixel

  • %百分比，相对父标签字体大小的百分比

  • em倍数，相对于父标签字体大小的倍数

  • 响应式字体大小 使用 vw 单位设置文本大小(视口宽度 viewport width）

3.2 文本

属性含义说明
color颜色
line-height行高行之间的高度
text-align水平对齐方式取值：left、center、right
vertical-align垂直对齐方式取值：top、middle、botto可以用于图片和文字的对齐方式
text-indent首行缩进
text-decoration文本修饰取值：underline、overline、line-through
white-space空白的处理方式文本超出后是否换行，取值：nowrap、nowmal、pre、pre-line、pre-wrap

3.3 颜色

3.3.1 RGB(red, green, blue)

每种颜色取值范围[0, 255]

rgb(255,0,0)----->红 
rgb(0,255,0)----->绿 
rgb(0,0,255)----->蓝

3.3.2 rgba(red,green,blue,alpha)

可以设置透明度 alpha取值范围[0, 1]

3.3.3 HSL(hue, saturation, lightness)

色相（hue）是色彩的基本属性，是指色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色。

饱和度（saturation）是色彩的鲜艳程度，是一个百分比值，0％ 表示灰色阴影，而 100％ 是全色。

亮度（lightness）指颜色的明亮程度，也是百分比，0％ 是黑色，50％ 是既不明也不暗，100％是白色

3.4背景（backfround）

属性含义
background-color背景颜色
background-image背景图片
background-repeat背景图片的重复方式
background-position背景图片的显示方式
background-attachment背景图片是否跟随滚动

background-image

  • 必须使用url()方式指定图片的路径
  • 如果是在css样式文件中使用相对路径，此时是相对于css文件，不是相对html文件

background-repeat 默认情况下，background-image 属性在水平和垂直方向上都重复图像

取值：

  • repeat-x 仅在水平方向上重复
  • repeat-y 仅在垂直方向上重复
  • no-repeat 只显示一次背景图像

background-position 默认背景图显示在左上角

取值：

  • 关键字：top、bottom、left、right、center
  • 坐标：左上角为(0,0)坐标，向右为x正方向,向下为y正方向

background-attachment

取值：取值：scroll(指定背景图像应随页面的其余部分一起滚动)、fixed(指定应该固定背景图像)

四、定位（position）

属性含义说明
static默认值元素默认情况下的定位方式为 static（静态）。
relative相对定位相对于标签原来的位置进行的定位， 不脱离文档流
absolute绝对定位相对于非static祖先元素进行定位
fixed固定定位相对于视口定位绝对定位
relative
  • 在常规流里里面布局
  • 相对于自己本应该在的位置进行偏移
  • 使用top,left,bottom,right设置偏移长度
  • 流内其它元素当他没有偏移一样布局

absolute

  • 脱离常规流
  • 相对于最近的非static 祖先定位
  • 不会对流内元素布局造成影响

五、盒子模型

5.1 盒子的组成

盒子模型是网页布局的基础，将页面中所有元素都看作是一个盒子，盒子都包含以下几个属性：

  • width 宽度
  • height 高度
  • border 边框
  • padding 内边距
  • margin 外边距

盒子模型.png

5.2 盒子的大小

盒子的大小指的是盒子的宽度和高度

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距 盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距

用属性表示下

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

5.3 盒子成分分析

5.3.1 margin

margin 盒子的外边框，他是完全透明的，开发者只可以设置它的边距。

margin-top：上边距
margin-buttom：下边距
margin-left：左边距
margin-right：右边距

取值:长度、auto 、百分数（百分数相对于容器宽度）

5.3.2 padding

padding 表示盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。

  • 指定元素四个方向的内边距
  • 百分数相对于容器宽度

5.3.3 border

border 指定容器边款样式、粗细和颜色

  • 三种属性
    1. border-width 边界宽度
    2. border-style 边界样式
    3. border-color 边界颜色
  • 四个方向
    1. border - top
    2. border - right
    3. border - bottom
    4. boeder - left

六、布局

6.1 Flex Box

flexible box 简称 flex，意为 ”弹性布局” ，可以简便、完整、响应式地实现各种页面布局

2、采用 flex 布局的元素，称为 flex 容器 container

3、它的所有子元素自动成为容器成员，称为 flex 项目 item

flex-box.png 4、容器中默认存在两条轴， 主轴 和 交叉轴 ，呈90度关系。项目默认沿主轴排列，通过 flex-direction 来决定主轴的方向

5、每根轴都有起点和终点，这对于元素的对齐非常重要

6.1.2 属性

关于 flex 常用的属性，我们可以划分为 容器属性 和 容器成员属性

6.1.2.1 容器属性
  • （1）flex-direction
  • （2）justify-content
  • （3）align-items
1.flex-direction

（1）决定主轴的方向(即项目的排列方向)

.container {   
    	flex-direction: row | row-reverse | column | column-reverse;  
	}

（2） 属性值对应如下：

  • （1） row（默认值） ：主轴为水平方向，起点在左端
  • （2） row-reverse ：主轴为水平方向，起点在右端
  • （3） column ：主轴为垂直方向，起点在上沿。
  • （4） column-reverse ：主轴为垂直方向，起点在下沿

（3）如下图

flex1.png

2.justify-content

（1）定义了项目在 主轴上 的对齐方式

	.box {
    	justify-content: flex-start | flex-end | center | space-between | space-around;
	}

（2）属性对应如下：

  • （1） flex-start（默认值） ：左对齐
  • （2） flex-end ：右对齐
  • （3） center ：居中
  • （4） space-between ：两端对齐，项目之间的间隔都相等
  • （5） space-around ：两个项目两侧间隔相等

(3)如下图所示

flex2.png

3.align-items

（1）定义项目在 交叉轴上 如何对齐

	.box {
		align-items: flex-start | flex-end | center | baseline | stretch;
   }

（2）属性对应如下：

  • （1）stretch（默认值） ：如果项目未设置高度或设为auto，将占满整个容器的高度
  • （2） flex-start ：交叉轴的起点对齐
  • （3） flex-end ：交叉轴的终点对齐
  • （4） center ：交叉轴的中点对齐
  • （5） baseline : 项目的第一行文字的基线对齐

（3）如下图所示

flex3.png

6.1.2.2 容器成员属性

容器成员属性如下：

  • ① order
  • ② flex-grow
  • ③ flex-shrink
  • ④ align-self
1、order

（1）定义项目的排列顺序。数值越小，排列越靠前， 默认为 0

	.item {
    	order: <integer>;
	}

order.png

2、flex-grow

（1）上面讲到当容器设为 flex-wrap: nowrap; 不换行的时候，容器宽度有不够分的情况，弹性元素会根据 flex-grow 来决定

（2）定义项目的放大比例（容器宽度 > 元素总宽度时如何伸展）

默认为0，即如果存在剩余空间，也不放大

  .item {
  	flex-grow: <number>;
  }

（3）如果所有项目的 flex-grow 属性都为 1 ，则它们将等分剩余空间（如果有的话）

flex4.png （4）如果一个项目的 flex-grow 属性为 2 ，其他项目都为 1 ，则前者占据的剩余空间将比其他项多一倍

flex5.png （5）弹性容器的宽度正好等于元素宽度总和，无多余宽度，此时无论flex-grow是什么值都不会生效

3、flex-shrink

（1）定义了项目的缩小比例（容器宽度 < 元素总宽度时如何收缩），默认为 1 ，即如果空间不足，该项目将缩小

	.item {    
		flex-shrink: <number>; 
		/*默认为 1 */
	}

（2）如果所有项目的 flex-shrink 属性都为 1 ，当空间不足时，都将等比例缩小

（3）如果一个项目的 flex-shrink 属性为 0 ，其他项目都为 1 ，则空间不足时，前者不缩小

flex6.png （4）在容器宽度有剩余时， flex-shrink 也是不会生效的

4、align-self

（1）允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性

（2）默认值为 auto ，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch

flex7.png

6.2 Gird布局

6.2.1 Gird与Flex Box区别

Flex Box更多使用于一维情况，只能指定"项目"针对轴线的位置

Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局。

gird1.png

6.2.2 Gird 网格线

gird2.png

6.2.3 display:Gird

  • display:grid 使元素生成一个块级的Grid容器
  • 使用grid-template 相关属性将容器划分为网格
  • 设置每一个子项占哪些行/列

划分网格实例 Grid-area

参考文献

avatar
文章
阅读
粉丝