大家好，我是梅巴哥er。
MDNcss学习：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/First_steps/What_is_CSS
MDNcss所有属性和特性：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Reference可以当作查询文档使用。
计算属性值
/*举例*/
width: calc(90% - 30px);
transform: rotate(0.8turn)
@rules
@import引入@keyframes动画@media媒体查询
注释
- 一定要养成写注释的习惯
/* 注释内容 */ - 注释注释注释
css是怎么工作的
- 浏览器载入html文件
- 将html文件转化成一个DOM
- 浏览器会拉取该html相关的大部分资源，比如嵌入到页面的图片、视频和css样式。（JS暂时不谈）
- 解析css，根据选择器的不同类型（比如element、class、id等等）把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则（基于选择器的规则，如元素选择器、类选择器、id选择器等）应用在对应的DOM的节点中，并添加节点依赖的样式（这个中间步骤称为渲染树）。
- 上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。
- 网页展示在屏幕上（即着色）。
块级书写模式writing-mode
添加在父盒子上，表示里面的子盒子的排列方向以及子盒子内的文本书写方向。
有3个值：
horizontal-tb: 块流向从上至下。对应的文本方向是横向的。vertical-rl: 块流向从右向左。对应的文本方向是纵向的。vertical-lr: 块流向从左向右。对应的文本方向是纵向的。
写个demo：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 500px;
height: 300px;
border: 1px solid pink;
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<div class="box">
<div>
<span>春眠不觉晓，</span>
<span>处处蚊子咬。</span>
<span>夜来嗡嗡声，</span>
</div>
<div>拍死几多少。</div>
<div>《无题》 --- 无名氏</div>
</div>
</body>
</html>
排列结果是这样的：
这就实现了我国古代和近代的一些书写形式——自上而下，自右至左。
单行溢出内容变…处理三连
overflow:hidden;/*超出隐藏*/
white-space: nowrap;/*禁止换行*/
text-overflow: ellipsis;/*超出省略*/
*注：多行溢出处理，除了用antd组件，就只有用js来处理了。其他方式都试了，实现结果并不理想。
对form有用的设置
box-sizing: border-box; 对button, input, select, textarea使用，确保盒子不变形。
给textarea添加over-flow: auto，为了避免IE在不需要滚动条的适合显示滚动条。
MDNJS指南：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide
MDNJSAPI：https://developer.mozilla.org/en-US/docs/Web/API
以上。
扫一扫
2084
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
