[盒子模型]HTML Learn Data Day 4

荪俗 · 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>

复制代码

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

账号		自动登录	找回密码
密码			立即注册

[盒子模型]HTML Learn Data Day 4

相关帖子

浏览过的版块

签约作者

[盒子模型]HTML Learn Data Day 4

相关帖子

相关推荐

浏览过的版块

签约作者