【CSS】前端学习记录3

CSS三大特性

继承性

层叠级

优先级

优先级公示：继承<通配符选择器<标签选择器<类选择器<行内样式<!important
!important加在分号前面
权重叠加计算

继承最低，不是继承才用公式。都是继承，继承里面谁高，看继承哪个父级高，哪个选择器生效（先继承爸爸，再继承爷爷）。
权重计算一样的用层叠性

排错

记得查看一下上一行，尤其是;是否敲上了

PxCook

帮助标注尺寸颜色

盒子模型

页面中的每个标签，其实都是一个盒子，通过盒子视角更方便的进行布局。

CSS中规定盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成，这就是盒子模型

内容的宽度和高度

width和height属性默认设置的是盒子内容的宽度和高度
常见取值：数字+px

边框（border）- 连写形式

属性名：border
属性值：10px solid red; (bd + tab)
solid实线dashed虚线dotted点线
只给盒子的某个方向单独设置边框线border-left（方向）
单个属性：border-width/ -style/ -color（不常用）

布局顺序

从外到内，从上到下
先宽高背景色+内容+调内容位置+调节文字细节

内边距（padding）

padding和border会撑大盒子
属性名：paddingr
属性值：最多跟四个值 上 右 下 左 / 三个值 上 左右 下 / 两个值 上下 左右（顺时针转圈，差的看对面）

padding自动内减

加一行

box-sizing:border-box;

外边距（margin）

清除默认内外边距

*{
	margin:0;
	padding:0;
 }

版心居中

margin: 0 auto;

line-height

line-height的具体描述

外边距问题

1. 合并现象
   块级元素的上下margin合并，选取上下距离margin的最大值
2. 塌陷现象
   互相嵌套的块级元素，子元素的margin-top会作用在父元素身上
   解决方法：
   

行内元素的内外边距的问题

行内标签的border、padding-top / -button：用行高来处理line-height

CSS浮动

结构伪类选择器

常用于查找父级选择器中的字元素

公式

伪元素

伪元素是一个行内标签
应用与页面中非主体的装饰性内容。
元素：HTML设置的标签
伪元素：由CSS模拟出的标签的效果

content:加入内容
content属性必须添加，否则元素不会生效

浮动

标准流

又称文档流，是浏览器在渲染显示网页内容时采用的一套排版规则，规定了应该以何种方式排列元素
浏览器解析解析行内块或行内标签的时候，如果标签换行书写会产生一个空格的距离。

浮动的作用：网页布局

float：left

浮动的标签：顶对齐
浮动的特点：

1. 浮动元素会脱离标准流，不占用标准流的位置
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素左右浮动
4. 浮动有特殊的显示效果：一行可以显示多个，可以设置宽高（浮动后的标签有行内块的特点）
   注意：浮动后的图片不能用margin:0 auto;text-aline:center生效

CSS书写顺序

1. 浮动或者display
2. 盒子模型相关：margin border padding 宽高背景色
3. 文字样式

清除浮动

清除浮动给别的标签带来的影响

1. 直接给父元素设置高度
2. 额外标签法
   clear:both 清除左右两侧浮动的影响
   缺点：使得代码结构变得复杂
3. 单伪元素清除法
   此方法常用
4. 双伪元素清除法
   
   同时还能解决外边距的塌陷问题。
5. 给父元素设置overflow:hidden

项目实践中的注意点： list-style:none;消除列表的样式

今天学习了CSS的盒子模型和浮动
进度128/198
明天任务：

1. 视频：在线项目+定位装饰 看到167
2. 开题报告得写啊
3. 简历得写啊

看完HTML+css， JS视频和react框架还没看
要抓紧时间啦