一、 CSS的基本概念
（使用CSS让单调的HEML网页更富表现力：文档体积小，便于搜索，可读性好 分层思想HTML+CSS 结构和表现分离 ，易于维护和管理） CSS的基本概念：CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观。指颜色 背景 大小元素定位… Css选择器 css选择器，也称为选择符，用于选择需要添加样式的元素 css的基本语法: 选择器{ 属性:属性值; （样式规则：键值对） …}
全局选择器 通配符 通用 权重 0 全局选择器：设置所有标签使用同一样式，用表示 全局选择器语法:{} CSS优先级 CSS优先级规则包括：最近的祖先样式比其他祖先样式优先级高；直接样式比祖先样式优先级高；内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 CSS布局
块级元素 Block level box 块级元素独占一行 适用所有的盒模型属性 行级元素 Inline level box 行级元素可以一行内摆放多个 盒子模型中的宽度高度不适用 也可以行级块级之间转换
盒子模型
每一个标签都是一个矩形，像一个盒子，所以HTML页面布局可以理解为多个盒子组合嵌套排列而成。当我们选择一个元素查看时，这个元素会被看成一个盒子，有宽度（width），高度（height），内边距（padding）,外边距（margin）。而一个盒子的边框，内边距，内容区决定大小，而外边距决定盒子的位置
二、盒模型的组成
1.内容区
盒子的内容区由width和height决定大小的，我们写的内容只能放在内容区。
2.内边距padding
接下来我们给盒子设置它的内边距，直接修改上面这一段代码的内部样式表，可以看出盒子由之前的100100变成了120120，因为给padding设置了四个方向的padding，均为10px，所以宽高各增加20px。
3.边框border
我们可以把边框看成一个盒子的最外边的包装，它的属性包括width宽度，style类型，color颜色，这是一个符合属性。我们再次修改上面代码的内部样式表，给盒子加一个边框。
Grid布局
定位
CSS定位是一种控制元素在页面上位置和排列方式的技术，包括普通流、浮动流和定位流1。 定位流又包括相对定位、绝对定位和固定定位1。 position属性是控制元素定位的关键，有5个可选值：static、relative、absolute、fixed和sticky2。 其中，static是默认值，表示没有定位；relative是以元素原来的位置为基准进行定位；absolute是以离元素最近的设置了绝对或相对定位的父元素为基准进行定位；fixed是以浏览器窗口为基准，固定在屏幕上的某个位置，不随页面滚动而滚动；sticky是相对定位和固定定位的混合，当元素在屏幕中可见时，它的行为就像position:relative;而当元素滚动到不可见时，它的行为就像position:fixed;2
这节深入css的学习让我重新拓展了几个知识点 认识了grid布局 和flex的弹性扩展。总的来说又是有收获的一天。 Css算是写好html的基础，它是用于网页的样式布局，现在学校已经过了一大遍，等后续再慢慢深入吧
