前端自学学习笔记——CSS

文章目录

前端自学学习笔记——CSS

1.CSS简介

2.CSS三大特性

2.1层叠性

2.2继承性

2.3优先级

选择器权重表如下：

选择器	权重
继承或*（通配符选择器）	0，0，0，0
元素选择器	0，0，0，1
类选择器、伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式	1，0，0，0
!important	无穷大

3.CSS属性书写顺序

布局定位属性：display, position, float, clear, visibility, overflow
自身属性：width, height, margin, padding, border, background
文本属性：color, font, text-decoration, text-align, vertical-align, white-space
其他属性：content, cursor, border-radius, box-shadow, text-shadow

4.CSS引入方式

4.1行内样式表（行内式）

在元素标签内部的style属性中设置css样式，适合修改简单样式

4.2内部样式表（嵌入式）

在HTML页面内部，将所有css代码抽取出来放入

4.3外部样式表（链接式）

将所有样式单独写入css文件中，之后再HTML页面对齐进行引入。

实现步骤：

创建后缀名为.css的样式文件。
在HTML页面中利用标签引入。

 <link rel="stylesheet" href="css文件路径"><link>

5.CSS选择器

5.1基础选择器

5.1.1标签选择器

使用HTML标签名作为选择器

语法： 标签名 {
		属性: 属性值;
		...
	  }

优点：能快速为页面中同类型的标签统一设置样式

缺点：不能差异化设置样式

5.1.2类选择器

使用类名作为选择器，可以单选或选出几个同类名标签

语法： .类名 {
		属性: 属性值;
		...
	  }

口诀：结构类调用，一个或多个，开发最常用。

5.1.3id选择器

为标有特定id的HTML元素指定样式

语法： #id名 {
		属性: 属性值;
		...
	  }

口诀：结构id调用，只调用一次。

5.1.4通配符选择器

选出页面中所有元素，用 * 定义，不需要调用

语法： * {
		属性: 属性值;
		...
	  }

5.2复合选择器

5.2.1后代选择器

可以选择父元素中的子元素，父元素的所有后代元素

语法： 元素1 元素2 ...{
		  属性: 值;
		  ...
	  }
注：为指定的后代元素（元素2，可以是子元素也可以是孙元素）指定样式，其中元素1、元素2可为任意基础选择器

5.2.2子选择器

只能选择作为某一元素的最近一级子元素

语法： 元素1 > 元素2{
		  属性: 值;
		  ...
	  }
注：为元素2修改样式，其中元素1、元素2可为任意基础选择器

5.2.3并集选择器

选择多组标签同时为他们定义相同样式，常用于集体声明。

语法： 元素1 , 元素2 , ... {
		  属性: 值;
		  ...
	  }
注：元素1、元素2都修改了样式，其中元素1、元素2可为任意选择器

5.2.4伪类选择器

用于向某些选择器添加特殊效果，用 : 表示。

链接伪类选择器
:link 选择所有未被访问的链接
:visited 选择所有已被访问的链接
:hover 选择鼠标指针位于其上的链接
:active 选择活动链接（鼠标按下但未弹起）
建议按照LVHA的顺序声明

:focus伪类选择器
用于获取焦点的表单，用于表单中

6.Emmet语法

6.1快速生成HTML结构语法

生成标签，直接输入标签名，再按Tab键即可
如果想生成多个相同的标签，标签名*个数
如果想生成父子级标签，父级标签名>子级标签名
如果想生成兄弟级标签，兄弟1标签名+兄弟2标签名
如果想生成带有类名或者id名的div标签，.类名 、#id名
如果想生成带有类名或者id名的其他标签，标签名.类名、标签名#id名
如果想生成的标签中类名是有顺序的，*标签名.类名$个数
如果想生成的标签中添加内容，标签名{内容}

6.2快速生成CSS样式语法

采取简写形式：

w200 按tab 生成 width: 200px;
lh200 按tab 生成 line-height: 200px;
tac 按tab 生成 text-align: center;

6.3快速格式化代码

快捷键：Alt + Shift + f

在vscode中设置保存页面时自动格式化代码：

文件—>首选项—>设置
搜emment.include;
在setting.json下的用户中添加：

"editor.formatOnType":true,
"editor.formatOnSave":true

7.元素显示模式

7.1块元素

常见标签有：

<h1></h1>、<h2></h2>、<h3></h3>、 <h4></h4>、<h5></h5>、<h6></h6>
<div></div>、<p></p>、<ul></ul>、<ol></ol>、<li></li>
注：文字类的元素内不能使用块级元素

特点：

独占一行，默认宽度是容器的100%
高度、宽度、外边距、内边距可控
是一个容器及盒子，内可放行内元素或块级元素或行内块元素

7.2行类元素

常见标签：

<a></a>、<strong></strong>、<b></b>、<em></em>、<i></i>、<del></del>、<s></s>、<ins></ins>、<span></span>
注：<a></a>链接标签里面不能再放链接标签，但是链接标签中可以放块级元素

特点：

相邻行内元素在一行，一行可以显示多个行内元素
高度、宽度直接设置无效
默认宽度是它本身内容的宽度
行内元素只能容纳文本或其他行内元素

7.3行内块元素

常见标签：

<img/>、<input/>、<td></td>

特点：

一行可以显示多个，但与相邻行内元素之间存在空隙
默认宽度就是它本身内容宽度
高度、外边距、内边距，行高可控

7.4元素的模式转换

一个元素的显示模式可以转换为另一种显示模式

属性值	含义
display: block;	转换为块级元素
display: inline;	转换为行内元素
display: inline-block;	转换为行内块元素

7.5元素的显示与隐藏

本质：让一个元素在页面中隐藏或者显示出来。

display隐藏元素后，不再占有原来的位置。

visiblity隐藏元素后，继续占有原来的位置。

若盒子有定位，谨慎使用overflow: hidden，会隐藏多余部分。

8.字体属性

用于定义字体系列，大小，粗细，样式

9.文本属性

用于定义文本的外观、颜色、对齐方式、缩进方式、行间距、装饰文本

9.1文本属性

9.2vertical-align属性

9.3溢出文字省略号

单行文本溢出省略号：

white-space:nowrap;//强制一行文本显示
overflown:hidden;//隐藏超出部分
text-overflow:ellipsis;//超出文字用省略号显示

多行文本溢出省略号：

overflown:hidden;//隐藏超出部分
text-overflow:ellipsis;//超出文字用省略号显示
display:-webkit-box;//将盒子转换为弹性伸缩盒子
-webkit-line-clamp:2;//限制一个块元素显示的文本行数
-webkit-box-orient:vertical;//设置或检索伸缩盒子对象子元素的排列方式
//最后记住更改盒子高度，使省略号出现即可

10.背景 background

用于给页面元素添加背景样式（背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定）

11.盒子模型

组成：边框（border）、外边距（margin）、内边距（padding）、实际内容（content）

11.1边框border

设置元素的边框，由三部分组成：粗细、样式、颜色

属性：border-width：边框粗细

border-style：样式，实线（solid）、虚线（dashed）、点线（dotted）

border-color：颜色，transparent（透明色）

属性复合写法：border：width style color

边框分开写法：border-top/bottom/right/left

border-collapse: collapse; 表示相邻边框合并在一起。

11.2内边距padding

设置边框与内容之间的距离 padding-top/bottom/right/left

复合写法：padding：数值; 表示上下左右内边距均为同一个数值

padding：数值1 数值2；表示上下内边距为数值1，左右内边距为数值2

padding：数值1 数值2 数值3；表示上内边距为数值1，左右内边距为数值2，下内边距为数值3

padding：数值1 数值2 数值3 数值4；表示上、右、下、左依次的内边距

注：padding常用于设置与文字之间的距离，是页面更加整洁美观。

如果盒子本身没有指定width/height属性，此时padding不会撑开盒子。

11.3外边距margin

控制盒子与盒子之间的距离。

复合写法：margin：数值; 表示上下左右外边距均为同一个数值

margin：数值1 数值2；表示上下外边距为数值1，左右外边距为数值2

margin：数值1 数值2 数值3；表示上外边距为数值1，左右外边距为数值2，下外边距为数值3

margin：数值1 数值2 数值3 数值4；表示上、右、下、左依次的内边距

注：

元素水平居中对齐的方法：

块级元素水平居中对齐：①盒子必须指定宽度

②盒子左右外边距设为auto

常见写法：margin：0 auto；

行内元素或行内块元素水平居中对齐：给其父元素添加text-align：center

相邻块级元素垂直外边距合并：

当上下相邻的两个块级元素相遇时，若上面的元素有margin-bottom，且下面的元素有margin-top，他们之间的垂直间距为两者之间较大者。

解决方法：尽量只给一个设置margin值。

嵌套块级元素垂直外边距的塌陷：

对于两个嵌套关系（父子元素）的块级元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大者的外边距。

解决方法：①为父元素定义上边框

②为父元素定义内边距

③为父元素添加overflow: hidden;

清除内外边距：

* {
	padding: 0;
	margin:0;
}

去掉li标签前的小圆点：list-style: none;

11.4圆角边框 border-radius

用于设置外边框圆角，属性值可以是数值或百分数

圆形的做法：正方形的高度或宽度的一半设置为属性值；

圆角矩形的做法：将属性值设置为高度的一半。

11.5盒子阴影

12.浮动 float

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框边缘。

属性值： none 元素不浮动（默认值）

left 元素向左浮动

right 元素向右浮动

特性：①浮动元素会脱离标准流（脱标）

②浮动元素会一行内显示并且元素顶部对齐

③浮动元素会具有行内块元素的特性

注：

浮动元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行显示。
如果块级盒子没有设置宽度，默认宽度和父级一样，但添加浮动后，他的大小根据内容决定。
若行内元素有了浮动，则不需要转换块级元素/行内块元素就可以直接设置高度宽度。
浮动的盒子只会影响后面的标准流，不会影响前面的盒子。

清除浮动

清除浮动的原因：由于父盒子多数情况下不方便给高度，但盒子浮动又不占有位置，最后父盒子高度为0，影响下面标准流盒子。

清除浮动的本质：清除浮动元素造成影响，清除浮动后，父级会根据浮动的盒子自动检测高度。父级有了高度，就不会影响下面的标准流。

clear属性：清除

属性值：left/right：不允许左/右侧有浮动元素

both：同时清除左右两边浮动的影响

清除浮动的方法：

①额外标签法

在浮动元素末尾添加一个空的标签，且新增标签必须为块级元素，并且需要在这个标签添加清除浮动样式。

②父级添加overflow属性

③父级添加after为元素

.clearfixL::after {
	content:'';
	display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {
    *zoom: 1;
}

④父级添加双伪元素

.clearfix::before, .clearfix::after {
	content:'';
	display:table;
}
.clearfix::after {
	clear: both;
}
.clearfix {
	*zoom:1;
}

13.定位 position

定位是让一个盒子自由的在某个盒子内移动位置或固定在屏幕中的某个位置，并且可以压住其他盒子。

定位 = 定位模式 + 边偏移

定位模式：用于指定一个元素在文档中的定位方式，由position属性确定。

定位模式（position）	含义
static	静态定位，无边偏移，按标准流特性摆放，默认值
relative	相对定位，不脱标，相对于自身位置移动
absolute	绝对定位，脱标，相对于带有定位的父级
fixed	固定定位，相对于浏览器可视区

边偏移：决定该元素的最终位置。由top、bottom、right、left属性确定，单位px。

边偏移	含义
top	该元素相对于其父元素上边线距离
bottom	该元素相对于其父元素下边线距离
left	该元素相对于其父元素左边线距离
right	该元素相对于其父元素右边线距离

默认为top和left两个属性。

13.1相对定位 relative（自恋型）

元素在移动位置时，相对于它原来位置来说的。

特点：①它是相对于自己原来的位置来移动的。

②原来的标准流的位置继续占有，后面的盒子仍以标准流方式对待它。（不脱标）

13.2绝对定位 absolute（拼爹型）

元素在移动位置时，相对于它最近一级带有定位的祖先元素来说的。

特点：①如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。

②如果祖先元素有定位（相对、绝对、固定），则以最近一级的有定位的祖先元素为参考点移动位置。

③绝对定位不再占有原来的位置（脱标）

13.3固定定位 fixed

元素固定于浏览器可视区的位置。

特点：①以浏览器的可视窗口为参考点移动元素。与父元素无关，不随滚动条滚动。

②固定定位不在占有原来的位置。

13.4粘性定位 sticky

相对定位与固定定位的混合。

特点：①以浏览器的可视窗口为参照点移动元素。

②粘性定位占有原来的位置。（不脱标）

③必须添加边偏移。

注：绝对定位和固定定位和浮动类似，但不会触发外边距合并。

行内元素添加绝对定位或固定定位，可以直接设置高、宽。
块级元素添加绝对定位或固定定位，如果不给宽高，默认大小是内容的大小。
不同于浮动，绝对定位或固定定位会完全压住盒子（包括里面的内容）；而浮动只会压住它下面标准流的盒子，但不会压住下面标准流盒子里的文字。

子绝父相：子级元素是绝对定位，父级元素要有相对定位

原理：①子级绝对定位不会占有位置，可以放到父盒子里的任何一个位置，不影响其他兄弟盒子。

②父级盒子需要添加定位限制子盒子在父盒子内显示。

③父盒子在布局时，需要占有位置，因此父元素只能是相对定位。

将盒子固定在版心右侧位置：

方法：①让固定定位的盒子left: 50% 走到浏览器可视区的一半。

②让固定定位的盒子margin-left: 版心宽度一半的距离。

定位叠放次序（z-index）：控制盒子的前后次序

注：①数值越大，盒子约靠上，默认值auto。

②如股票属性值相同，则按书写顺序，不需要跟单位。

③只有定位的盒子才有z-index。

绝对定位的盒子居中

方法：①left: 50% 让盒子的左侧移致父元素的水平中心位置

②margin-left: -盒子宽度的一半（是一个负数）

14.精灵图sprites

目的：为有效地减少服务器接收和发送请求的次数，提高页面加载速度

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器就只需要一次请求即可。

使用方法：

background-image、background-repeat、background-position属性进行背景定位，

其中最关键的是使用background-position 属性精确地定位。

注：网页中的坐标：x轴往右走为正，左走为负；y轴往下走为正，往上走为负。

15.字体图标iconfont

使用场景：用于显示网页中通用、常用的一些小图标。（展示的是图标，本质属于字体）

使用方法：

字体图标下载。常用网站：阿里字体：http://www.iconfont.cn/
字体图标引入（引入到HTML页面）
1. 将下载包中的fonts文件夹放入页面根目录下
2. 在css样式中全局声明字体（在下载包的style.css中）
3. HTML标签内添加小图标
4. 给HTML标签定义字体（这个字体必须和@font-face中一致）
字体图标追加（以后添加新的小图标）

16.CSS三角

div {
	width: 0;
	height: 0;//宽高必须设置为0
	line-height: 0;
	font-size: 0;//为兼容低版本浏览器
	border: 50px solid transparent;//边框越粗，三角越大
	border-bottom-color: pink;
}