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 ;

}

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,694评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,742评论 32 459
  • 1.块级元素和行内元素 块级(block-level)元素;行内(内联、inline-level)元素。 块元素的...
    饥人谷_小侯阅读 6,268评论 1 4
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,744评论 0 1
  • 一直想将自己的经历写下来,但各种拖延,今天在回家的火车上,一想到这事,就赶紧下载了简书,先开始了再说。 有些事,比...
    三庆阅读 1,643评论 0 0

友情链接更多精彩内容