常用的CSS属性
1，盒模型
页面渲染时，dom元素所采用的 布局模型，可以通过 box-sizing 进行设置，根据计算高度的区域可分为：
- content-box （W3C 标准盒模型）
- border-box （IE盒模型）
1，content-box中，元素的宽，高包含元素的 padding，border
// div大小为 140 * 140，内容盒大小为 100 * 100
div {
width: 100px;
height: 100px;
padding: 10px;
border: solid 10px black;
}
2，border-box中，元素的宽，高不包含元素的padding，border，margin
// div大小为 100 * 100，内容盒大小为 60 * 60
div {
width: 100px;
height: 100px;
padding: 10px;
box-sizing: border-box;
border: solid 10px black;
}
2，选择器优先级
- !important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
- 选择器 从右往左 解析
3，属性继承
- 所有元素可继承：visibility cursor
- 内联元素可继承：letter-spacing word-spacing white-space line-height color font font-family font-size font-style font-variant font-weight text-decoration text-transform direction
- 块元素可继承：text-align text-indent
4，居中布局
1，水平居中
// 行内元素，在父元素上设置 text-align 即可
div {
text-align: center;
}
// 块级元素，设置 margin
div {
margin: 0 auto;
}
// absolute + transform 结合使用
div {
position: relative;
div {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
}
// flex + justify-content: center
div {
display: flex;
justify-content: center;
}2，垂直居中
// 行内元素：line-height
div {
height: 20px;
line-height: 20px;
}
// absolute + transform
div {
position: relative;
div {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
}
// flex + align-items: center
div {
display: flex;
align-items: center;
}
// table
div {
display: table-cell;
vertical-align: center;
}3，水平垂直居中
// absolute + transform
div {
position: relative;
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
// flex + justify-content + align-items
div {
display: flex;
align-items: center;
justify-content: center;
}5，BFC
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化css渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。
下列方式会创建块格式化上下文：
- 根元素
- float属性不为none
- position为absolute或fixed
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
6，去除浮动影响
- 通过 clear:both 清除浮动
- 父级设置高度
- 创建父级 BFC
7，css动画
animation：帧动画
- animation-name：绑定到选择器的 keyframe 名称
- animation-duration：完成动画所花费的时间，以秒或毫秒计
- animation-timing-function：动画的速度曲线
- animation-delay：动画开始之前的延迟
- animation-iteration-count：动画的播放次数
- animation-direction：是否轮流反向播放动画
transition：过渡动画
- transition-property：过渡效果的 CSS 属性的名称
- transition-duration：完成过渡效果所需要的时间
- transition-timing-function：速度曲线
- transition-delay：动画延迟时间
以上为大概能想到的常用 CSS 属性，简单的总结下
网络请求项目中用了两种，一个是 dart 自己的 dart:io, 另外一个是 dio 这个库。json 解析则用的是 dart:convert。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
