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

CSS

1. css是什么？

• Cascading Style Sheets
• 用来定义页面元素的样式
  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

例如： h1 { color: white; font-size: 14px; }

• 其中h1是标签选择器Selector
• color表示选择器Properly，white代表属性值value
• font-size：14px; 是声明Declaration

2. 在页面中使用css

3. 选择器Selector

• 找出页面中的元素，以便给他们设置样式
• 使用多种方式选择元素
  • 按照标签名、类名或者id
  • 按照属性
  • 按照DOM树中的位置
• 通配选择器、标签选择器、id选择器、类选择器、属性选择器

4.继承

• 某些属性会自动继承其父元素的计算值，除非显示指定一个值

5.布局（Layout是什么）？

• 确定内容的大小和位置的算法
• 依据元素、容器、兄弟节点和内容等信息来计算
• 布局相关技术有
  • 常规流（行级、块级、表格布局、FlexBox、Grid）、浮动和绝对定位
    • 块级元素（生成块级盒子，可以用display：block）
      • body、article、div、main、p、ul、li等
    • 行级元素（生成行级盒子，内容分散在多个行盒中，可以用display：inline）
      • span、em、strong等

6.display属性

• block 块级盒子
• inline 行级盒子
• inline-block 本身是行级，可以放在行盒中，可以设置宽高
• none 排版时完全被忽略

7.Flex Box 是什么？

• 一种新的排版上下文，可以控制子盒子摆放方向、顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行

8.position属性

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

总结

css样式很多很多，我们学习的时候应该充分利用MDN和W3C CSS规范去学习，也应该时刻保持好奇心，更应该持续不断的学习新知识，不可以三天打鱼两天晒网。