走进CSS|青训营笔记

这是我参与「第四届青训营」笔记创作活动的第2天

浅谈CSS

CSS的定义与作用

CSS（Cascading Style Sheets)层叠样式表，用来定义页面元素的样式。

设置字体和颜色
设置位置和大小
添加动画效果等

(选择器)h1 {
 (‘color’为选择器属性 Property)color:white;(‘white’为属性值 Value)
                              font-size:14px;（属性+属性值为一个声明Declaration）
 }

CSS的使用

外链
嵌入
内联

<!-- 外链 -->
<link rel="stylesheet" href="/assets/style.css">

<!-- 嵌入 -->
    <style>
        li {
            margin: 14px;
            list-style: none;
        }
        p {
            margin: 1em 0;
        }
    </style>
    
<!-- 内联 -->
    <p style="margin: 1em 0">Example Content</p>

CSS的工作原理

CSS实际开发中要着重注意与学习的几个点

CSS的选择器

作用：找出页面中的元素，以便给他们设置样式
分类：
          1.按照标签名、类名或id
          2.按照属性
          3.按照DOM树中的位置

通配选择器

选中页面所有的元素

<h1>This is heading</h1>
<p>this is some paragraph</p>

<style>
    /* 通配选择器选中例子中的h1标签元素和p标签元素，内容都变成粉红色，字体大小都是14px */
    * { 
        color: pink;
        font-size: 14px;
    }
</style>

标签选择器

选中所指定的标签的元素

<h1>This is heading0</h1>
<h1>This is heading1</h1>
<h1>This is heading2</h1>
<h1>This is heading3</h1>
<p>this is some paragraph</p>

<style>
    /* 选中例子中的所有h1标签的元素，内容都变成粉红色，字体大小都是14px */
    h1 { 
        color: pink;
        font-size: 14px;
    }
</style>

id选择器

选中所指定的id的元素

<h1 id="heading">This is heading</h1>
<p>this is some paragraph</p>

<style>
    /* 选中例子中id为heading的元素，内容都变成粉红色，字体大小都是14px */
    #heading { 
        color: pink;
        font-size: 14px;
    }
</style>

类选择器

选中所指定的类的元素

<h1 class="heading">This is heading</h1>
<p>this is some paragraph</p>

<style>
    /* 选中例子中类（class）为heading的元素，内容都变成粉红色，字体大小都是14px */
    .heading { 
        color: pink;
        font-size: 14px;
    }
</style>

属性选择器

选中所指定的属性的元素

<h1 class="heading">This is heading</h1>
<a href="#">点击我！</a>
<a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6">点击我！</a>
<p>this is some paragraph</p>

<style>
    /* 选中例子中href属性值不同的a标签的元素，内容分别变成粉红色，字体大小14px和内容变成蓝色，字体大小14px */
    a[href='#'] { 
        color: pink;
        font-size: 14px;
    }
    a[href='https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6'] { 
        color: pink;
        font-size: 14px;
    }
</style>

伪类(pseudo-classes)选择器

特点：不基于标签和属性定位元素分类：状态伪类(### :first-child：选择父元素中第一个子元素)、结构性伪类(### :visted ：选择被访问过的元素

<h1 class="heading">This is heading</h1>
<a href="#">点击我！</a>
<a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6">点击我！</a>
<p>this is some paragraph</p>

<style>
    /* 选中例子中被访问过的a标签的元素，内容变成粉红色，字体大小14px */
    a :visited { 
        color: pink;
        font-size: 14px;
    }

</style>

组合选择器

名称	语法	说明	实例
直接组合	AB	满足A同时满足B	input:focus
后代组合	A B	选中B，如果它是A的子孙	nav a
亲子组合	A>B	选中B，如果它是A的子元素	section>p
兄弟选择器	A~B	选中B，如果它在A后且和A同级	h2~p
相邻选择器	A+B	选中B，如果它紧跟在A后面	h2+p

选择器组选择器

选中所有并列的元素

<h1 class="heading">This is heading</h1>
<a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6">点击我！</a>
<p>this is some paragraph</p>

<style>
    /* 选中例子中被h1,a,p,body的标签的元素，内容变成粉红色，字体大小14px */
    h1,a,p,body {
        margin: 0;
        padding: 0;
    }
</style>

CSS中的颜色表达

R(red红)G(green绿)B(blue蓝)（0-255,0-255,0-255,0-1）第四位代表透明度alpha
H(Hue色相)S(Saturation饱和度)L(Lightness亮度)（0-360，0-100%，0-100%，0-1）第四位代表透明度alpha
颜色关键字 #00000000-#FFFFFFFF、bule,green等

CSS中的文本

font-family字体族建议：字体列表最后写上通用字体族，英文字体放在中文字体前面
font-size字体大小关键字：small、medium、large 长度：px、em 百分数：相对于父元素字体大小
line-height行高行高等于上边距+下边距+字体高度
text-align文本居中使文本举中对齐
spacing letter-spacing字母间距、word-spacing单词间距
text-indent 设置首行缩进
text-decoration 设置文本装饰，下划线等
white-space 处理文本中的空白处

CSS的优先级（特异度）

特异性可以分文四个权限段，注意这里的权限段并不符合各种进制计算普通相加减即可

行内样式 1,0,0,0
ID 选择器 0,1,0,0
类选择器, 属性选择器, 伪类选择器 0,0,1,0
标签选择器 0,0,0,1
通用选择器 0,0,0,0
!important 针对某一个一个属性, 优先级最高（建议慎重使用）

CSS的继承性

某些属性会自动继承其父元素的计算值，除非显式指定一个值
三种值得注意特殊继承：
          1.a标签的字体颜色不被继承
          2.h标题标签字体大小不被继承
          3.div中的高度不定义由内容决定，宽度默认继承父元素

CSS的层叠性

有多个选择器或一个选择器对某个或某几个标签中的多条样式进行选择，如果多个选择器都赋给某个或某几个标签相同属性，样式的作用范围发生了重叠，CSS层叠性的体现

<div class="div_one div_two"></div>

<style>
    /* 无样式冲突那么div盒子就会是宽100px 高100px */
    .div_one{
        width: 100px;
    }
    .div_two{
        height: 100px;
    }
    /* 有样式冲突那么div盒子就是粉红色的，结果为后写的样式 */
    .div_one{
        background-color: blue;
    }
    .div_two{
        background-color: pink;
    }
</style>

CSS的布局(Layout)

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算

css的盒子模型

src=http___upload-images.jianshu.io_upload_images_18407983-16b3127eb46d505a.png&refer=http___upload-images.jianshu.webp

左图是标准盒子模型，宽高为内容宽高
右图是边界盒模型，宽高以边界为界限，使用时要申明box-sizing:border-box布局常用
margin外边距，顺时针四个值，可以为长度、百分数（相对于容器宽度）、auto（水平居中）、（注意margin collapse，两个盒子之间取值较大的作为垂直间距）
padding内边距，顺时针四个值，可以为长度、百分数（相对于容器宽度）
border指定容器边框样式、粗细和颜色，border-width、border-style、border-color，四个方向

CSS中的行级和块级

块级	行级
不和其他盒子并列摆放（独占一行）	和其他行级盒子一起放在一行或拆成多行
适用于所有盒模型属性	盒模型中的width、height不适用

块级元素和行级元素

块级元素	行级元素
生成块级盒子	生成行级盒子、内容分散在多个昂行盒中
body、article、div、main、section、h1-h6、p、ul、li	span、em、strong、cite、code...
display:block	display:line

display属性

属性值	说明
block	块级盒子
inline	行级盒子
inline-block	本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none	排版时完全被忽略

常规流（文档流）

行级排版上下文（IFC）

只包含行级盒子的容器会创建一个IFC
盒子在一行内水平摆放
一行放不下时，就会换行显示
text-align决定一行盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动元素

块级排版上下文（BFC）

创建BFC的容器：根元素、浮动，绝对定位，inline-block、Flex子项和Grid子项、overflow值不是visble的块盒、display：flow-root
盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

弹性布局（Flex Box把盒子想象成弹簧）

控制子级盒子摆放的流向（→ ← ↑ ↓）
控制子级盒子摆放顺序
控制子级盒子盒子宽度和高度
控制子级盒子水平和垂直方向的对齐
控制子级盒子是否允许折行

几个需要记住的属性值与概念

主轴与侧轴（交叉轴）、弹性容器（flex container）、弹性盒子（子级盒子、flex item）

flex-direction

justify-content

align-items

align-self

order

flex-grow：
设置子项有剩余空间时候的伸展能力
flex-shrink：
设置子项容器空间不足时的收缩能力
flex-basis：
没有伸展或收缩时的基础长度

代码	说明
flex: 1	flex-grow: 1
flex: 100px	flex-basis: 100px
flex: 2 1	flex-grow: 2;flex-shrink: 1
flex: 1 100px	flex-grow: 1;flex-basis: 100px
flex: 2 0 100px	flex-grow: 2;flex-shrink: 0, flex-basis: 100px
flex: auto	flex: 1 1 auto
flex: none	flex: 0 0 auto

Grid布局（网格布局）

display：grid使元素生成一个块级的Grid容器
使用grid-template相关属性（grid-template-columns、grid-template-rows）将容器化为网格
设置每一个子项占哪一些些行/列

浮动流

子元素float: left或者float: right 就会在父元素里面浮动起来
注意高度坍塌问题（父元素无法包裹住子元素的引起的问题），可以清除给父级元素清除浮动解决

浮动一般用来做文字环绕图片效果

定位流

position属性	说明
static	默认值，非定位元素
relative	相对于自身原本位置偏移，不脱离文档流
absolute	绝对定位，相对于非static祖先元素定位
fixed	相对于视口绝对定位

重点学习的几个定位

1.relative（相对定位）

在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top、left、bottom、right设置偏移长度
流内其他元素当它没有偏移一样布局（在原来的位置上保留设置相对定位元素的空间进行布局）

2.absolute（绝对定位）

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

3.fixed（固定定位）

脱离常规流，不占用标准流的空间
固定定位和绝对定位一样不区分行内/块级/行内块级
相对于视口进行定位

常用定位模式（子元素绝对定位父元素相对定位子绝父相）

子元素相对于父元素进行定位起来

CSS学习总结与方法

查阅MDN文档进行深入学习与复习
持续学习，CSS不断进步，我们也应该不断进步
善于使用各种开发者工具去深入CSS学习

走进CSS|青训营笔记

走进CSS|青训营笔记

浅谈CSS

CSS的定义与作用

CSS的使用

CSS的工作原理

CSS实际开发中要着重注意与学习的几个点

CSS的选择器

通配选择器

标签选择器

id选择器

类选择器

属性选择器

伪类(pseudo-classes)选择器

组合选择器

选择器组选择器

CSS中的颜色表达

CSS中的文本

CSS的优先级（特异度）

CSS的继承性

CSS的层叠性

CSS的布局(Layout)

css的盒子模型

CSS中的行级和块级

块级元素和行级元素

display属性

常规流（文档流）

行级排版上下文（IFC）

块级排版上下文（BFC）

弹性布局（Flex Box把盒子想象成弹簧）

几个需要记住的属性值与概念

Grid布局（网格布局）

浮动流

定位流

重点学习的几个定位

常用定位模式（子元素绝对定位父元素相对定位 子绝父相）

CSS学习总结与方法

常用定位模式（子元素绝对定位父元素相对定位子绝父相）