HTML页面结构

元素和

元素 | 1 | | [*element* *element*](https://www.runoob.com/cssref/sel-element-element.html) | div p | 选择

元素内的所有

元素的

元素之后的第一个

元素 | 2 | | [*element1*~*element2*](https://www.runoob.com/cssref/sel-gen-sibling.html) | p~ul | 选择p元素之后的每一个ul元素 | 3 | | [[*attribute*^=*value*\]](https://www.runoob.com/cssref/sel-attr-begin.html) | a[src^="https"] | 选择每一个src属性的值以"https"开头的元素 | 3 | | [[*attribute*$=*value*\]](https://www.runoob.com/cssref/sel-attr-end.html) | a[src$=".pdf"] | 选择每一个src属性的值以".pdf"结尾的元素 | 3 | | [[*attribute**=*value*\]](https://www.runoob.com/cssref/sel-attr-contain.html) | a[src*="runoob"] | 选择每一个src属性的值包含子字符串"runoob"的元素 | 3 | | [:first-of-type](https://www.runoob.com/cssref/sel-first-of-type.html) | p:first-of-type | 选择每个p元素是其父级的第一个p元素 | 3 | | [:last-of-type](https://www.runoob.com/cssref/sel-last-of-type.html) | p:last-of-type | 选择每个p元素是其父级的最后一个p元素 | 3 | | [:only-of-type](https://www.runoob.com/cssref/sel-only-of-type.html) | p:only-of-type | 选择每个p元素是其父级的唯一p元素 | 3 | | [:only-child](https://www.runoob.com/cssref/sel-only-child.html) | p:only-child | 选择每个p元素是其父级的唯一子元素 | 3 | | [:nth-child(*n*)](https://www.runoob.com/cssref/sel-nth-child.html) | p:nth-child(2) | 选择每个p元素是其父级的第二个子元素 | 3 | | [:nth-last-child(*n*)](https://www.runoob.com/cssref/sel-nth-last-child.html) | p:nth-last-child(2) | 选择每个p元素的是其父级的第二个子元素，从最后一个子项计数 | 3 | | [:nth-of-type(*n*)](https://www.runoob.com/cssref/sel-nth-of-type.html) | p:nth-of-type(2) | 选择每个p元素是其父级的第二个p元素 | 3 | | [:nth-last-of-type(*n*)](https://www.runoob.com/cssref/sel-nth-last-of-type.html) | p:nth-last-of-type(2) | 选择每个p元素的是其父级的第二个p元素，从最后一个子项计数 | 3 | | [:last-child](https://www.runoob.com/cssref/sel-last-child.html) | p:last-child | 选择每个p元素是其父级的最后一个子级。 | 3 | | [:root](https://www.runoob.com/cssref/sel-root.html) | :root | 选择文档的根元素 | 3 | | [:empty](https://www.runoob.com/cssref/sel-empty.html) | p:empty | 选择每个没有任何子级的p元素（包括文本节点） | 3 | | [:target](https://www.runoob.com/cssref/sel-target.html) | #news:target | 选择当前活动的#news元素（包含该锚名称的点击的URL） | 3 | | [:enabled](https://www.runoob.com/cssref/sel-enabled.html) | input:enabled | 选择每一个已启用的输入元素 | 3 | | [:disabled](https://www.runoob.com/cssref/sel-disabled.html) | input:disabled | 选择每一个禁用的输入元素 | 3 | | [:checked](https://www.runoob.com/cssref/sel-checked.html) | input:checked | 选择每个选中的输入元素 | 3 | | [:not(*selector*)](https://www.runoob.com/cssref/sel-not.html) | :not(p) | 选择每个并非p元素的元素 | 3 | | [::selection](https://www.runoob.com/cssref/sel-selection.html) | ::selection | 匹配元素中被用户选中或处于高亮状态的部分 | 3 | | [:out-of-range](https://www.runoob.com/cssref/sel-out-of-range.html) | :out-of-range | 匹配值在指定区间之外的input元素 | 3 | | [:in-range](https://www.runoob.com/cssref/sel-in-range.html) | :in-range | 匹配值在指定区间之内的input元素 | 3 | | [:read-write](https://www.runoob.com/cssref/sel-read-write.html) | :read-write | 用于匹配可读及可写的元素 | 3 | | [:read-only](https://www.runoob.com/cssref/sel-read-only.html) | :read-only | 用于匹配设置 "readonly"（只读）属性的元素 | 3 | | [:optional](https://www.runoob.com/cssref/sel-optional.html) | :optional | 用于匹配可选的输入元素 | 3 | | [:required](https://www.runoob.com/cssref/sel-required.html) | :required | 用于匹配设置了 "required" 属性的元素 | 3 | | [:valid](https://www.runoob.com/cssref/sel-valid.html) | :valid | 用于匹配输入值为合法的元素 | 3 | | [:invalid](https://www.runoob.com/cssref/sel-invalid.html) | :invalid | 用于匹配输入值为非法的元素 | 3 | | [:has](https://www.runoob.com/cssref/css-sel-has.html) | :has | 允许根据其后代元素来选择一个元素。 | 3 | | [:is](https://www.runoob.com/cssref/css-sel-is.html) | :is | 接收任何数量的选择器作为参数，并且返回这些选择器匹配的元素的并集。 | 3 | ## 文字与文本样式 - 字体、大小、颜色、粗细、行高 - 文本对齐、缩进、装饰、换行 * font-size ：字体大小默认16px * font-family 字体 * font-weight: bold 加粗=700 可以自己调整 * line-height 行高 * color 字体颜色 * 文本对齐 > 1. 水平对齐 text-align 默认是left左对齐 center 居中 right 靠右 > > 2. 垂直对齐 vertical-align top 靠上 middle 靠中 bottom 靠下（如果控制容器内容大多数无效） > > > 解决办法：通常设置行高 line-height=容器的高度 > > > > ~~~css > > .btn{ > > width: 200px; > > /*height=line-height 实现垂直方向居中对齐*/ > > height: 40px; > > line-height: 40px; > > background-color: #f00; > > color: #FFF; > > text-align: center; > > > > } > > ~~~ > > > > 垂直对齐什么情况有效果？ > > > > 在同一容器内，有图片和文本，通过设置图片的居中对齐，达到与文本垂直方向的对齐效果缩进： > 单位： > > * px 像素 > * em 相对单位相对于父容器不好用 > * rem 参照根元素字体大小换行：应用场景： 1. 单行文本溢出 > ~~~css > /*不换行*/ > white-space: nowrap; > /*溢出的内容隐藏*/ > overflow: hidden; > /*文本溢出后显示 ... */ > text-overflow: ellipsis; > ~~~ > > 2. 多行文本溢出 > ~~~css > div{ > width: 300px; > line-height: 30px; > height: 60px; > border: #f00 solid 1px; > > /* 溢出隐藏 */ > overflow: hidden; > /* 显示省略号 */ > text-overflow: ellipsis; > > > /* 核心：弹性盒子模型（必须） */ > display: -webkit-box; > /* 限制显示行数（改数字即可：2行/3行） */ > -webkit-line-clamp: 2; > /* 垂直排列 */ > -webkit-box-orient: vertical; > } > ~~~ > > * overflow 溢出后的行为 > 1. hidden 隐藏 > 2. scroll 滚动 * white-space: nowrap; 不换行 * text-overflow: ellipsis; 文本溢出显示 ... ## 盒子模型 - 内容 (content)、内边距 (padding)、边框 (border)、外边距 (margin) - 圆角、阴影、轮廓美化 ![image-20260303145329003](assets/image-20260303145329003.png) ### 外边距 ![image-20260303150538173](assets/image-20260303150538173.png) * margin简写： margin: 25px 50px 75px 100px ; 依次代表上右下左边距 margin: 25px 50px 75px; 依次代表上边距左右边距下边距 margin: 25px 50px; 依次代表上下边距左右边距 margin: 25px 代表四个边距特殊用法： margin: auto ; 水平居中 ### 内边距 ![image-20260303151815288](assets/image-20260303151815288.png) padding简写： padding: 25px 50px 75px 100px ; 依次代表上右下左内边距 padding: 25px 50px 75px; 依次代表上内边距左右内边距下内边距 padding: 25px 50px; 依次代表上下内边距左右内边距 padding: 25px 代表四个内边距 ### 边框 border 常用属性： * \*-style 边框样式 > 1. dashed 虚线 > 2. dotted 点线 > 3. solid 实线 * \*-color 边框颜色 * \*-width: 边框线的宽度设置方式： 1. 4个边框同时设置 > ~~~css > border-style: solid; > border-color: #f00; > border-width: 1px; > > /*简化写法*/ > border: 边框宽度颜色样式；三个值任意顺序 > ~~~ 2. 分别设置4个边框 > ~~~css > border-left: #f00 solid 1px; > border-top: #0f0 solid 1px; > border-right: #00f solid 1px; > border-bottom: #000 solid 1px; > ~~~ > > 上面都是简化方法，效果同下： > > border-方向-style: 样式 > > border-方向-color: 颜色 > > border-方向-width: 宽度 > > 方向：left top right bottom > > 对比使用：outline 外边框属性同上。 ### 弧度/圆角 * border-bottom-left-radius 左下角 * border-bottom-right-radius 右下角 * border-top-left-radius 左上角 * border-top-right-radius 右上角 * border-radius : 4个角 ### 阴影 ~~~ box-shadow: 水平偏移垂直偏移模糊半径扩散半径颜色内外阴影; ~~~ #### 参数解释（按顺序） 1. **水平偏移（必选）** - 正数：阴影向右 - 负数：阴影向左 2. **垂直偏移（必选）** - 正数：阴影向下 - 负数：阴影向上 3. 模糊半径（可选，默认 0） - 数值越大，阴影越模糊、越柔和 4. 扩散半径（可选，默认 0） - 正数：阴影整体放大 - 负数：阴影整体缩小 5. 颜色（可选） - 支持十六进制、rgb/rgba、hsl、颜色名 - 带透明度（rgba）效果更自然 6. 内外阴影（可选） - 默认：`outset`（外阴影） - 写 `inset`：**内阴影**（在盒子内部） ## 布局核心（工作 90% 场景） 1. 标准文档流 2. float 浮动（导航、图文环绕） 3. position 定位（固定导航、悬浮按钮、弹窗） 4. flex 弹性布局（**现代布局首选，必学**） ### float 浮动脱离标准文档流，在指定父容器显示，但是它不会影响父容器高度 * left 左浮动 * right 右浮动通常搭配：clear一起使用 clear作用：清除浮动 * left 如果float的值是left * right 如果float的值是right * both 清除左右浮动 ### position 定位涉及到4个属性： * left * right * top * bottom * absolute 绝对定位用的少相对于文本的位置 * fixed 固定位置常用于底部导航 * relative 相对于父容器定位相对于当前所在位置来调整 ### flex 弹性布局单位： * vh view height 1vh=1% 高度 100vh=100%高不考虑父容器 * vw view width 1vw=1%宽度 100vw=100%宽不考虑父容器函数： **calc**(100vh - 100px ); 总高-100px 就是计算后的值 ## 背景样式 - 背景颜色、图片 ## 元素显示与隐藏 - display、visibility、opacity 区别与用法 - 行内元素 / 块级元素 / 行内块元素转换