[盒子模型]HTML Learn Data Day 4
过两天可以学js去了，之后学go，学vue，干全栈工程师吧一、 结构伪类选择器 (Structural Pseudo-classes)
用于在不增加额外类名（Class）的情况下，根据 HTML 结构精准选中元素。常用于列表（li）的样式差异化。
语法语义典型应用li:first-child选中父元素下的第一个子元素列表顶部置顶样式li:last-child选中父元素下的最后一个子元素去除列表底部分割线li:nth-child(n)选中第 n 个子元素隔行变色（如 2n）li:nth-child(n+3)选中从第 3 个开始往后的所有元素批量控制列表后期项nth-child 支持公式，如 -n+5 表示前 5 个，这在展示后端接口返回的前几条热门数据时非常有用。
实例：
/*结构伪类选择器*/
li:first-child{
background-color: hotpink;
}
li:last-child{
background-color: deeppink;
}
button:hover{
background-color: darkred;
}
li:nth-child(3n+1){
background-color: pink;
}
li:nth-child(n+3)
{
background-color: red;
}
<label>
<ul>
<li>这是第一个元素</li>
<li>这是第二个元素</li>
<li>这是第三个元素</li>
<li>这是第四个元素</li>
<li>这是第五个元素</li>
<li>这是第一个元素</li>
<li>这是第二个元素</li>
<li>这是第三个元素</li>
<li>这是第四个元素</li>
<li>这是第五个元素</li>
</ul>
<button>this is a button</button>
</label>二、 伪元素选择器 (Pseudo-elements)
用于向选择器添加“装饰性”的子元素，而无需修改 HTML 结构。
[*]核心规则：必须书写 content: ""; 属性，否则伪元素不生效。
[*]常用类型：
[*]::before：在内容最前面插入。
[*]::after：在内容最后面插入。
[*]::marker：专门控制列表符号。
实例：
这是一个伪元素寄存器的练习案例三、 盒子模型 (Box Model) —— 网页布局的基石
网页所有元素皆为“盒子”。理解内外边距的堆叠是排版不乱的关键。
[*]Padding (内边距)：盒子内容与边框之间的距离。会撑大盒子体积。
[*]Border (边框)：盒子的外壳。支持四边单独设置（border-top 等）。
[*]Margin (外边距)：盒子与盒子之间的距离。不会撑大盒子。
[*]居中技巧：margin: 0 auto;（配合宽度使用可实现水平居中）。
[*]Overflow (溢出处理)：
[*]visible：默认，内容溢出。
[*]hidden：裁剪多余内容。
[*]auto：内容溢出时自动出现滚动条。
前三个属性都是写在某些大标签里的，并且都有四种元素
[*]top
[*]buttom
[*]left
[*]right
表示上下左右四个方向，都可以对这四种元素填入属性或者参数，来改变特定方向的样式
重要补充： 怪异盒子模型 (box-sizing)
border-box (怪异模式)：盒子总宽 = width（Padding 和 Border 会向内挤压）。这能保证布局不会因为加了内边距而“塌陷”。
一些技巧
设置参考系，用于确定元素的防止位置：
[*]Relative (相对定位)：作为参考系。它不会脱离文档流，原来的位置依然被占着。
[*]Absolute (绝对定位)：以最近的 relative 祖先为准进行移动。它脱离文档流，像漂浮在页面上一样。
bottom:0 ;/*紧贴尾部*/
left:0;/*紧贴左部*/
width: 100%;.fake::after 使用绝对定位锁定在底部 bottom: 0，这是标准的“底部工具条”写法。
清理默认样式，不同浏览器默认样式不同（比如 ul 自带边距）开发第一步就是清理它们。
一般写成这样：
*{/*清理所有东西的内外边距*/
margin:0;
padding:0;
box-sizing: border-box; /* 推荐加入，防止 padding 撑大盒子 */
}盒子阴影：
box-shadow:0px 0px 10px 1px red;
/*盒子的阴影 属性值：X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影*/元素变量：
变量的声明为：--，比如--color，即声明了一个叫color的变量，样例：
--color:255, 183, 197;
background-color: rgba(var(--color), 0.6);/*使用var来调用*/圆角写法，使用border-radius，样例：
border-radius:10%;圆角50%为最大，也可以填像素
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>练习用的代码</title>
</head>
<body>
<label>
<ul>
<li>这是第一个元素</li>
<li>这是第二个元素</li>
<li>这是第三个元素</li>
<li>这是第四个元素</li>
<li>这是第五个元素</li>
<li>这是第一个元素</li>
<li>这是第二个元素</li>
<li>这是第三个元素</li>
<li>这是第四个元素</li>
<li>这是第五个元素</li>
</ul>
<button>this is a button</button>
</label>
这是一个伪元素寄存器的练习案例
</body>
</html>
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 谢谢分享，试用一下 感谢发布原创作品，程序园因你更精彩 感谢分享，下载保存了，貌似很强大 这个有用。 谢谢分享，辛苦了 这个有用。 这个有用。 喜欢鼓捣这些软件，现在用得少，谢谢分享！ 这个有用。 不错，里面软件多更新就更好了 感谢分享 yyds。多谢分享 鼓励转贴优秀软件安全工具和文档！ 收藏一下 不知道什么时候能用到 这个好，看起来很实用 yyds。多谢分享 感谢分享，学习下。 喜欢鼓捣这些软件，现在用得少，谢谢分享！ 谢谢分享，试用一下
页:
[1]
2