初步学习CSS的认识和见解

   CSS是一种样式表语言，用来控制HTML和XML的外观美化和布局。HTML搭建起了前端的地基，但是没有CSS参与布局仍然是一盘散沙，CSS在页面布局、提升用户体验方面一直发挥着极其重要的作用。 

    HTML中最重要的无异于是标签，那么CSS核心就是选择器和盒子模型。学习CSS需要记忆大量其中掺杂的属性和属性值，而且容易令人混淆、概念大差不差的知识也有很多。CSS相对于HTML来说内容更多也更抽象一些，学习的时候也是应该多注重实战，多用浏览器辅助工具去学习一下其他网站的布局和页面美化

 以下是我的个人笔记作为分享

CSS

定义：层叠样式表，是一种样式表语言，用来描述HTML文档的呈现（美化内容）

书写位置：title标签下方添加style双标签，style标签里面书写CSS代码

<title> </title>
<style>
    /*CSS代码*/
    /*选择器{CSS 属性}*/
    p{
        color:red;  /* p是标签名*/
        font-size: 30px;
    }
</style>

键值对：属性名和属性值成对出现

引入方式

内部样式表：学习使用

CSS代码写在标签里面

外部样式表：开发使用

CSS代码写在单独的CSS文件中（.css）

在HTML中使用link标签引入

<link rel="stylesheet" href="./my.css">

行内样式：配合JS使用

CSS写在标签的style属性值里

<div style="color:red;font-size:20px;">标签</div>

选择器

作用：查找标签，设置样式

优先级：id>class>通配符

同级别长度下，css代码按照顺序执行，后边的效果会把前面的覆盖

基础选择器

标签选择器

定义：使用标签名作为选择器--->选中同名标签设置相同的形式

<title> </title>
<style>
    p{
        color:red;          /*应用于所有p标签，无法差异化同名标签的样式*/   
        font-size: 30px;
    }
</style>

类选择器

作用：查找标签，差异化设置标签的显示效果

步骤：

1、定义类选择器 --> .类名

2、使用类选择器 --> 标签添加class="类名"

.red{
    color:red;
}
.size{
    font-size:50px;     
}
<div class="red size">...</div>             多个属性空格隔开

和标签选择器结合使用
div.xx{
    color:red;
}
<div style="color: skyblue;background-color: brown;"class="xx">hello</div>
    <span style="color: skyblue;background-color: brown;"class="xx">hello</span>

id选择器

作用：查找标签，差异化设置标签的显示效果

一般配合JS使用，很少用来设置CSS样式

步骤：

1、定义id选择器 -->#id名

2、使用id选择器 -->标签添加id="id名"

同一个id选择器在一个页面只能使用一个

div[id]:有id属性的div元素(class属性仍然使用)

div[id=xx]:有id属性，且id属性值为xx的div元素

div[id*=xx]:有id属性，且id属性值包含xx的div元素

div[id^=xx]:有id属性，且id属性值以xx开头的div元素

div[id$=xx]:有id属性，且id属性值以xx结尾的div元素

通配符选择器

作用：查找页面所有标签，设置相同样式

*，不需要调用，浏览器会自动查找页面所有标签，设置相同的样式

复合选择器

定义：由两个或多个基础选择器，通过不同的方式组合而成

作用：更准确、更高效的选择目标元素

后代选择器

定义：选中某元素的后代元素

选择器写法：父选择器 子选择器{CSS属性}，父子选择器之间用空格分开

子代选择器

选中某元素的子代元素（最近的子级）

选择器写法：父选择器>子选择器{CSS属性}，父子选择器之间用>分开

兄弟选择器

选中同级选择器，*选中所有同级

选择器写法：选择器~子选择器{CSS属性}，选择器之间用~分开

并集选择器

选中多组标签设置相同的样式

写法：选择器1，选择器2，...{CSS属性}

交集选择器（了解）

选中同时满足多个条件的元素

选择器1选择器2{CSS属性} 选择器之间连写

标签选择器放在最前面

伪类选择器

伪类表示元素状态，选中元素的某个状态设置样式

鼠标悬停状态：选择器:hover{CSS属性}

任何标签都可以设置鼠标悬停状态

伪类-超链接(UI状态伪类选择器)

超链接一共由四个状态

选择器	作用
:link	访问前
:visited	访问后
:hover	鼠标悬停
:active	点击时激活

如果给超链接设置状态，需要按LVHA顺序书写

工作中设置默认样式和悬停状态即可

结构伪类选择器

作用：根据元素的结构关系查找元素

nth-of-type和 nth-child同理

选择器	说明
E:first-child	查找第一个E元素
E:last-child	查找最后一个E元素
E:nth-child(N)	查找第N个E元素

li:first-child{
    background-color:green  /*只有第一个标签生效*/
}

:nth-child(公式)

作用：根据元素的结构关系查找多个元素

功能	公式（n从0开始）
偶数标签	2n、odd
奇数标签	2n-1,2n+1，even
5的倍数的标签	5n
找到第五个以后的标签	n+5
找到第五个以前的标签	-n+5

:not()

作用：排除不想选择的元素

优先级

选择器写的越长(越准确)，优先级越高

伪元素选择器

作用：创建虚拟元素（伪元素），用来摆放装饰性的内容

选择器	说明
E::before	在E元素里面最前面添加一个伪元素
E:after	在E元素里面最后面添加一个伪元素
E::first-letter	作用于选择器中第一个字母，只用于块级元素
E::first-line	作用于选择器中第一行，只用于块级元素

必须设置content:" "属性，用来设置伪元素的内容，如果没有内容， 引号留空

伪元素默认是行内显示模式

权重和标签选择器相同

文字控制属性

字体大小

属性名：font-size

属性值：最常用单位px（像素）

谷歌浏览器默认16px

字体粗细

属性名：font-weight

属性值：数字

正常：400 加粗：700

关键字 正常：normal 加粗：bold

字体倾斜

属性名：font-style

属性值： 正常：normal 倾斜：italic

行高

作用：设置多行文本的间距

属性名：line-height

属性值

1、数字+px

2、数字（当前标签font-size属性值的倍数）

行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）

垂直居中

技巧：行高属性值等于盒子高度属性值（单行文字垂直居中）

字体族

属性名：font-family

属性值：字体名

font-family:楷体

font符合属性

使用场景：设置网页文字公共样式

font:是否倾斜 是否加粗 字号/行高 字体（必须按顺序书写）

注意：字号和字体值必须书写，否则font属性不生效

文本缩进

属性名：text-indent

属性值：

数字+px

数字+em（推荐1em=当前标签的字号大小）

文本对齐

作用：控制内容水平对齐方式

属性名：text-align

属性值：

left(左对齐（默认）)

center(居中对齐)

right(右对齐)

居中的是文字内容，不是标签

图片居中

将属性赋给图片的父级标签

文本修饰线

属性名：text-decoration

属性值	效果
none	无
underline	下划线
line-through	删除线
overline	上划线

文字颜色

属性名：color

属性值

表示方式	属性值
关键字	英文单词
rgb表示法	rgb(r,g,b)	r,g,b表示红绿蓝三原色，取值0-255	了解
rgba表示法	rgba(r,g,b,a)	a表示透明度，取值：0-1	实现透明色
十六进制表示法	#RRGGBB	简写#RGB

三大特性

化简代码/定位问题，并解决问题

继承性

子级默认继承父级的文字控制属性

<style>         <!--在style标签里面将body标签里面的标签作为子类标签书写-->
    body{
        font-size:30px
    }
</style>

如果标签有自己的样式则生效自己的样式，不继承

层叠性

特点:

相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性

不同的属性会叠加：不同的CSS属性都生效

优先级

也叫权重，当一个标签使用了多种选择器时，基于不同种类的选择器的匹配规则

规则：选择器优先级高的样式生效

公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!import

选中标签的范围越大，优先级越低

*{
    color:red !important        /*提高权限到最高*/
}

叠加计算规则

叠加计算：如果是复合选择器，则需要权重叠加计算

公式：（每一级之间不存在进位）

（行内样式，id选择器个数，类选择器个数，标签选择器个数）

1、从左到右依次比较选个数，同一级个数多的优先级高，如果个数相同，则向后比较

2、!important权重最高

3、继承权重最低

Emmet写法

代码的简写方式（VScode生效）

HTML

说明	标签结构	Emmet
类选择器	<div class="box"></div>	标签名.类名
id选择器	<div id="box"></div>	标签名#id名
同级标签	<div></div><p></p>	div+p
父子级标签	<div><p></p></div>	div>p
多个相同标签	123	span*3
有内容的标签	<div>内容</div>	div{内容}

CSS

CSS首字母

背景属性

背景颜色

background-color

背景图

属性名：background-image(bgi)

属性值：url（背景图URL）

背景图默认是平铺（复制）效果

div{
    width:400px;
    height:400px;
    background-image:url()
}

背景图平铺方式

属性名：background-repeat(bgr)

属性值

属性值	效果
no-repeat	不平铺
repeat	平铺（默认效果）
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

不平铺：盒子的左上角显示一张背景图

背景图位置

属性名：background-position(bgp)

属性值：水平、垂直方向位置

关键字

关键字	位置
left	左
right	右
center	居中
top	顶部
bottom	底部

坐标

数字+px，正负都可以（水平：正右负左 垂直：正下负上）

background-position:center bottom
background-position:50px -100px
background-position:50px center

默认left top

关键字取值方式写法，可以颠倒取值顺序

可以只写一个关键字，另一个方向默认为居中；数字只写一个值表示水平方向，垂直方向为居中

背景图缩放

属性名:background-size)(bgz)

常用属性值：

关键字：

cover:等比例缩放背景图片以完全覆盖背景区，可能背景图片部分看不见

contain:等比例缩放背景图片以完全装入背景区，可能背景区部分空白

百分比：根据盒子尺寸计算图片大小

100% 图片的宽度跟盒子宽度一样，图片高度按照图片比例等比缩放

数字+单位（px）

背景图固定

属性名：background-attachment(bga)

属性值：fixed

背景符合属性

属性名：background

属性值：背景色 背景图 背景图平铺方式 背景图位置/背景图缩放 背景图固定（空格隔开，不区分顺序）

显示模式

标签（元素）的显示模式

作用：布局网页的时候，根据标签的显示模式选择合适的标签摆放内容

块级元素(div)

1、独占一行

2、宽度默认是父级的100%

3、添加宽高属性生效

行内元素(span)

1、一行共存多个

2、尺寸由内容撑开

3、加宽高不生效

行内块标签(img)

1、一行共存多个

2、默认尺寸由内容撑开

3、加宽高生效

转换显示模式

属性名：display

属性值	效果
block	块级
inline-block	行内块
inline	行内

盒子模型

1、块级盒子：display:block(标签，元素) 特点：独占一行，对宽度高度支持(div ul li h1~h6)

2、内联级盒子：display:inline 特点：不独占一行，对宽度高度不支持(span a)

3、内联块级盒子:display:inline-block 特点：不独占一行，对宽度高度支持(img input)

4、弹性盒子：display:flex 特点：不论父级元素能不能放下子级元素，子元素始终横向布局

作用：布局网页，摆放盒子和内容

组成部分：

1、内容区域：width&height

2、内边距：padding(出现在内容与盒子的边缘之间)

3、边框线：border

4、外边距：margin(出现在盒子外面)

边框线

属性名：border(bd)

属性值：边框线粗细、线条样式、颜色(三个方面，四个方向)

属性值	线条样式
solid	实线
dashed	虚线
dotted	点线

设置单方向边框线

属性名：border-方位名词(bd+方位名词首字母)

内边距

属性名：padding/padding-方位名词

多值写法

取值个数	实例	含义
1	padding: 10px
2	padding: 10px 80px	上下、左右
3	padding: 10px 40px 80px	上、左右、下
4	padding: 10px 20px 40px 80 px	上右下左(顺时针)

尺寸计算

默认情况：盒子尺寸=内容尺寸+边框线尺寸+内边距尺寸(+padding border属性盒子变大)

解决

1、手动做减法，减掉border/padding的尺寸

2、内减模式：box-sizing:border

外边距

属性名：margin

外边距不会撑大盒子

版心居中

magin: 0 auto(水平方向居中)

要求：盒子要有宽度

外边距问题

场景：垂直排列的兄弟元素，上下magin会合并

现象：取两个magin中的较大值生效

塌陷问题

场景：父子级的标签，子级添加上外边距会产生塌陷问题

现象：导致父级一起向下移动

解决：

1、取消子级margin，父级设置padding

2、父级设置overflow:hidden

3、父级设置border-top

行内元素(span)-内外边距问题

场景：行内元素添加margin和padding，无法改变元素垂直问题

解决方法：给行内元素添加line-height可以改变垂直位置

圆角

作用：设置元素的外边框为圆角

属性名：border-radius(写四个角的值从左上角顺时针赋值，没有取值的角与对角取值相同)

属性值：数字+px/百分比（属性值是圆角半径）

常见应用-正圆形状

给正方形盒子设置圆角属性值为宽高的一半/50%

常见应用-胶囊形状

给长方形盒子设置圆角属性为盒子高度的一半

元素溢出(设置滚动条)

作用：控制溢出元素的内容的显示方式

属性名：overflow

属性值	效果
hidden	溢出隐藏
scroll	溢出滚动(无论是否溢出，都显示滚动条位置)
auto	溢出滚动(溢出才显示滚动条位置)

阴影

属性名：box-shadow

属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

xy轴偏移量必须书写

默认是外阴影，内阴影需要添加inset

清除默认样式

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
/*去掉默认列表的项目符号*/
li{
    list-style:none;
}

浮动

标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则

作用：让块元素水平排列)(本质作用是实现图文混排效果)

属性名：float

属性值：left：左对齐

right:右对齐

特点：1、浮动后的盒子顶对齐

2、浮动后的盒子具备行内块特点

3、浮动后的盒子脱标，不占用标准流的位置

清除浮动

场景：浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度(可能导致页面布局错乱)

解决方法：清除浮动(清除浮动带来的影响)

方法一：额外标签法

在父元素内容的最后添加一个块级元素，设置CSS属性 clear:both(类名习惯用clearfix)

方法二：单伪元素法

.clearfix::after{
    content:"";
    display:block;
    clear:both;
}

方法三：双伪元素法(推荐)

.clearfix::before,
.clearfix::after{
    content:"";
    display:table;
}
.clearfix::after{
        clear:both;
}

方法四：overflow

父元素添加CSS属性overflow:hidden

Flex布局

Flex布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力

Flex模型不会产生浮动布局中脱标现象，布局网页更简单、更灵活

设置方式：给父元素设置 display:flex,子元素可以自动挤压或拉伸

组成部分：

弹性容器：沿着主轴方向排列

弹性盒子

主轴：默认在水平方向

侧轴/交叉轴：默认在垂直方向

主轴对齐方式

属性名：justify-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

space-bewteen

视觉效果：弹性盒子之间的间距相等

space-around

视觉效果：弹性盒子之间的间距是两端间距的二倍da

space-evenly

视觉效果：各个间距都相等

侧轴对齐方式

属性名：

align-items:当前弹性容器内所有弹性盒子的侧轴对齐方式(给弹性容器设置)

align-self:单独控制某个弹性盒子的侧轴对齐方式(给弹性盒子设置)

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸则默认拉伸)
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
baseline	首行底部对齐

修改主轴方向

属性名:flex-direction

属性值：column(垂直方向，从上到下)

column-reverse(垂直方向，从下到上)

row：横向从左到右排列

row-reverse:横向从右向左排列

弹性伸缩比

默认情况下，主轴方向尺寸是靠内容撑开的，侧轴默认拉伸

作用：控制弹性盒子的主轴方向的尺寸

属性名:flex

属性值：整数数字，表示占用父级剩余尺寸的份数

flex-grow:拉伸因子

flex-shrink:压缩因子

flex-basis:基准因子

属性值为整数，为拉伸或压缩后占盒子的份数

弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认情况下，所欲弹性盒子都在一行显示

属性名：flex-wrap

属性值

wrap：换行

nowrap：不换行(默认)

行对齐方式

多行元素的分布方式

属性名：align-content

属性值	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
space-around	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
space-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

顺序

属性名：order

属性值为一个整数，值越小出现的顺序越靠前