📖 理解CSS｜青训营笔记

MaxHe
82 阅读3分钟

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

CSS的优点有那些？

CSS全称为Cascading Style Sheets(层叠样式表)，中文翻译为“层叠样式表”，简称CSS样式表。它是一种用来表现HTML或 XML 等文件式样的计算机语言。

  • 节省时间：可以编写一次CSS，然后在多个HTML页面中通过外部引入多次重复使用
  • 页面加载速度更快：通过使用CSS，就不需要每次都编写HTML标记属性，只需要编写一个标记的CSS规则，并将其应用于该标记的所有实例，因此代码大大减少也就意味着下载时间短。
  • 易于维护：如果要进行全局更改，则只需更改样式，所有网页中的所有元素都将会自动更新。
  • 多设备兼容性：样式表允许针对多种不同类型的设备进行优化内容。
  • 浏览器在样式表中从上到下读取样式定义。这也说明我们在样式表中定义的样式将覆盖样式表中先前定义的任何先前样式，不过我们可以在后面的元素中重新定义则不会被覆盖。

css选择器组合方式

语法说明
AB直接组合（满足A同时满足B）
A B后代组合（选中B，如果它是A的子孙）
A>B亲子组合（选中B，如果它是A的子孙）
A~B兄弟选择器（选中B，如果它在A后且与A同级）
A+B相邻选择器（选中B，如果它紧跟在A后面）

如果要给多个标签添加样式，可以设置类属性或者用并集选择器 例：h1,h2,h3,h4{}

继承属性的完整列表

W3C指出可以继承的属性。

  1. azimuth
  2. border-collapse
  3. border-spacing
  4. caption-side
  5. color
  6. cursor
  7. direction
  8. elevation
  9. empty-cells
  10. font-family
  11. font-size
  12. font-style
  13. font-variant
  14. font-weight
  15. font
  16. letter-spacing
  17. line-height
  18. list-style-image
  19. list-style-position
  20. list-style-type
  21. list-style
  22. orphans
  23. pitch-range
  24. pitch
  25. quotes
  26. richness
  27. speak-header
  28. speak-numeral
  29. speak-punctuation
  30. speak
  31. speech-rate
  32. stress
  33. text-align
  34. text-indent
  35. text-transform
  36. visibility
  37. voice-family
  38. volume
  39. white-space
  40. widows
  41. word-spacing

Flex布局

1. flex 是什么？

  • flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思

2. 为什么我们需要 flex?

  • 解决元素居中问题
  • 自动弹性伸缩，合适适配不同大小的屏幕，和移动端

3. 容器 container 的属性

外面的大容器的属性的设置

属性名含义
flex-direction主轴方向
flex-wrap主轴一行满了换行
flex-direction1和2的组合
justify-content主轴元素对齐方式
align-items交叉轴元素对齐方式//单行
align-content交叉轴行对齐方式//多行

3.1 flex-direction 主轴方向

  • row（默认值）：主轴为水平方向，起点在左端。
  • row-reverse：主轴为水平方向，起点在右端。
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。

image.png

image.png

image.png

image.png 代码：

<style>
.container{
    display: flex;
    height: 600px;
    background-color: rgb(219, 219, 219);
}
.container{
    flex-direction: row;
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */
}
.item{
    padding: 100px;
}
</style>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
    </div>
</body>

3.2 flex-wrap 主轴一行满了换行

  • nowrap (默认值) 不换行压缩宽度
  • wrap 换行
  • wrap-reverses 反向换行

image.png

image.png

image.png 代码：

<style>
.container{
    display: flex;
    height: 600px;
    background-color: rgb(219, 219, 219);
}
.container{
    /* flex-wrap: nowrap; */
    flex-wrap: wrap;
    /* flex-wrap: wrap-reverse; */
}
.item{
    padding: 100px;
}
</style>
<body>
    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: aqua;">2</div>
        <div class="item" style="background-color: aquamarine;">3</div>
        <div class="item" style="background-color: #aaff00;">4</div>
        <div class="item" style="background-color: #ffff00;">5</div>
    </div>
</body>
avatar
文章
阅读
粉丝