理解CSS|青训营笔记

笔记创作天数

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

一、本堂课重点内容：

• CSS选择器的优先级别
• 继承
• 初始值
• layout布局和布局的相关技术
• 介绍了CSS的基本属性
• 学习CSS的建议

二、详细知识点介绍：

本节课具体介绍了CSS选择器的优先级，如何使用 width、height、padding、border、margin、overlow、dispalay等属性。通过浮动float、定位position和flex布局等技术对页面进行布局.

三、实践练习例子：

• 选择器的优先级

通过对这个例子的实践练习，可以清晰的发现。页面上“拉森火山国家公园”几个字已经变成蓝色，所有我们得出结论，class选择器的优先级大于类型选择器，如果还想知道id选择器的优先级的话，大家可以自己尝试。

<article>
  <h1 class="title">拉森火山国家公园</h1>
</article>

<style>
  .title{
      color:blue;
  }
  article h1{
      color:red;
  }
</style>

• border属性

border分别有三个属性和四个方向。三个属性：border-width、border-style、border-color。依次是边框的宽度、边框的样式、边框的颜色。四个方向：border-top、border-right、border-bottom、border-left。依次对应边框的上、右、下、左。

border:1px solid #ccc;

border-left: 1px solid #ccc;
border-right: 2px dotted red;

border-width: 1px 2px 3px 4px;
border-style: solid;
border-color:green blue;

border-left-width: 3px;
border-top-color:#f00;

• display属性

display的属性none排版时完全被忽略，可以对不想CSS样式生效的标签使用。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间。 block块级盒子，显示为块级元素，此元素前后会带有换行符。 inline行级盒子，显示为内联元素，此元素前后无换行符。 inline-block显示为行内块元素。

display:none;
display:flex;
display:block
display:inline;
display:inline-block;

• position定位 position属性中relative，使元素相对于原来的位置移动，但文档流中保留元素初始所占的空间。一般用在父元素上。absolute使元素脱离原来的文档流，相对于其最接近的一个具有定位属性的父包含块进行绝对定位。一般用于子元素。fixed生成绝对的定位，相对于浏览器窗口进行定位。页面滚动，元素的位置相对于始终不变。

position:relative;
position:absolute;
position:fixed;