HTML学习笔记
CSS
CSS 三要素:
- 边框(Border)和内元素和最外边范围的距离/粗细
- 内边距(Padding)内容与边框之间的空隙大小
- 外边距(Margin)不同网页元素之间的距离
浏览器本身有内建的的样式，存在一些预设值让网页维持最基本的可读性，所以同样的 HTML 代码在不同浏览器中显示可能会有差异。 为了防止这种情况，可以使用 CSS Reset 来重置浏览器的默认样式。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}接下来说明三要素的影响： border: 1px solid black; #边框粗细 颜色 线条样式 padding: 10px; #内边距 如果只有一个值就是四周，四个值是从上开始顺时针四个方向的值，两个是上下、左右，三个是上、左右、下 margin: 10px; #外边距
header {
width: 100vw; #相对于视窗的宽度
#100vw是100%的视窗绝对宽度，100%是父元素的相对宽度
#如果一个元素设置了 width: 100vw;，它可能会 超出父元素的边界，特别是在父元素有 padding 或 margin 的情况下。这通常会导致出现水平滚动条。
# 100% 这个值会受到父元素的 padding 和 margin 影响。例如，如果父元素有 padding，那么 100% 的宽度是基于 内容区域 的，不包括 padding
border: 1px solid black; #边框粗细 颜色 线条样式
padding: 10px; #内边距
margin-bottom: 20px; #外边距
position: relative; #相对定位，从原本的位置进行移动 绝对位置absolute 从版面（父元素）的左上角开始计算
#当子元素absolute时，父元素也要有postion: relative;
}
header li {
display: inline-block; #让li横向排列
list-style: none; #去掉li前面的点
margin-right: 20px; #右边距
}
header a {
#header里面所有的a标签
text-decoration: none; #去掉下划线
}
header a:hover {
#鼠标悬停时
text-decoration: underline; #加上下划线
}li 样式
display 中有多种，原本 li 是块级元素，默认是竖向排列的一个就是一行，改成 inline-block 或 inline 就可以横向排列了 inline-block 可以设置宽高和外边距，内边距设置效果不佳，定制性更高，inline 不可以 list-style: none; 去掉 li 前面的点 text-decoration: none; 去掉 a 标签的下划线 text-decoration: underline; 鼠标悬停时加上下划线
除了 inline-block 和 inline 还有 block、flex、grid 等等
相对宽度 vw
width: 100vw; #相对于视窗的宽度
display flex
.news a {
#链接文字变成圆角边框按钮
color: white;
text-decoration: none;
border: 1px solid #ACACAC
padding: 10px 20px;
border-radius: 5px;
}Section 有语义，通常包含 H1~H6 标题 Div 无语义
分类，父类 Class，无名子 block Div
CSS 样式（以个人博客为例）
h1 {
color: white;
postion: absolute;
left: 120px;
top: 0;
line-height: 80px;
background: url(images/logo.svg);
background-repeat: no-repeat;
bakcgounrd-position: center;
background-size: contain;
width: 210px;
text-indent: -9999px; #文字缩进，隐藏文字
}