FreeCodeCamp之前端开发学习笔记1

1、有三个影响HTML元素布局的重要属性：padding(内边距)、margin(外边距)、border(边框)。

元素的
padding
控制元素内容 content和元素边框
border
之间的距离。元素的外边距
margin
控制元素边框 border
和元素实际所占空间的距离。

元素的
margin 控制元素的
border 和元素实际所占空间的距离。

如果你将一个元素的
margin 设置为负值，元素将会变大。

有时你想要自定义元素，使它的每一个边具有不同的
margin。

CSS 允许你使用
margin-top、margin-right、margin-bottom
和
margin-left 来控制元素上右下左四个方向的
margin。

有时你想要自定义元素，使它的每一个边具有不同的
padding。

CSS 允许你使用
padding-top、padding-right、padding-bottom
和
padding-left来控制元素上右下左四个方向的
padding。

除了分别指定元素的
padding-top、padding-right、padding-bottom
和
padding-left 属性外，你还可以集中起来指定它们，举例如下：

padding: 10px 20px 10px 20px;

这四个值以顺时针方式排列：顶部、右侧、底部、左侧，简称：上右下左。

2、给id设置的样式优先级比class设置的要高，不论定义先后顺序。

我们证明了无论在
style 元素 CSS 的哪个位置进行声明，id 声明都会覆盖 class 声明。

还有其他覆盖 CSS 的方法。行内样式也会覆盖其他样式声明。

很多情况下，你会使用 CSS 库，这些库可能会意外覆盖掉你自己的 CSS。所以当你需要确保某元素具有指定的 CSS 时，你可以使用
!important。

比如：

.pink-text {
    color: pink !important ;
  }

这样就不会被别的样式覆盖了。