重学前端002 --响应式网页设计 CSS

根据在这里 Freecodecamp 实践，调整顺序后做的总结。

css 样式

 body {background-color: red;  # 跟background-image 不同时使用background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);font-family: sans-serif;padding: 20px;
}h1 {font-family: Impact, serif;font-size: 40px;margin-top:0;  # 清除默认的上边距margin-bottom:15px;  # 修改默认的下边距text-align: center;  # left/right
}div {width: 300px;  # width: 80%;max-width: 500px;background-color: burlywood;margin-top: auto;  # margin: auto;   #margin: 5px;  margin-bottom: auto;margin-left: auto;margin-right: auto;padding-left: 20px;  # padding: 20px; # 效果等同于下面四个加起来padding-right: 20px;padding-top:20px;padding-bottom: 20px;
}hr {height: 2px;border-width: 1px; border-color: brown;  # 边框颜色background-color: red;margin-top: 25px;
}p {font-family: sans-serif;  # 字体  # font-family: Impact, serif;  # 字体font-style: italic;  # 斜体font-size: 40px;  # 字体大小text-align: center;width: 75%;display: inline-block;margin-top: 5px;margin-bottom: 5px;}	img {display: block;  # 使图片成为行元素display: inline-block;   # inline-block 元素只会占用其内容的宽度。margin-left:auto;margin-right:auto;
}a {color: black;  # 超链接的颜色
}a:visited {  # 超链接被访问后的颜色color: grey;
}a:hover {  # 鼠标经过超链接时的颜色color: brown;
}a:active {  # 超链接被点击的时候的颜色color: white;
}footer {font-size: 14px;
}

特殊说明

1. h 标题
   标题元素（如 h1、h2）的排版是由用户浏览器的默认值设置的。可以对他们字体大小进行设置。
   浏览器为h1元素设置了一些默认的上边距和下边距。

2. P 元素
   当两个p元素显示为行内元素，并且需要显示到一行时，需要把两个p元素之间的空格去掉，两个元素紧紧挨着。

3. hr 分割线
   总的线条的宽度=自身的宽度+上下边框的宽度

4. img 图片
   图片是内联因素，不会单独占据一行，使用display:block 可以使它变成行元素。

5. 其他
   背景颜色background-color和背景图片background-image两个属性不能同时使用；