CSS 结构伪类选择器 伪元素选择器 盒子模型

目录

  • 1. 结构伪类选择器
    • 1.1 :nth-child(公式)
  • 2. 伪元素选择器
  • 3. 盒子模型
    • 3.1 盒子模型的重要组成部分
    • 3.2 盒子模型 - 边框线
    • 3.3 盒子模型 - 内边距
    • 3.4 盒子模型 - 尺寸计算
    • 3.5 盒子模型 - 外边距
    • 3.6 盒子模型 - 元素溢出
    • 3.7 外边距问题 - 合并现象
    • 3.8 外边距问题 - 塌陷问题
    • 3.9 行内元素 - 内外边距问题
    • 3.10 盒子模型 - 圆角
    • 3.11 盒子模型 - 阴影
  • 4. 清除默认样式


正文开始。

1. 结构伪类选择器

作用:根据元素的结构关系查找元素。

选择器说明
E:first-child查找第一个 E 元素
E:last-child查找最后一个 E 元素
E:nth-child(N)查找第 N 个 E 元素(第一个元素 N 值为1)

例如:
在这里插入图片描述

1.1 :nth-child(公式)

作用:根据元素的结构关系查找多个元素

功能公式
偶数标签2n
奇数标签2n+1;2n-1
找到5的倍数的标签5n
找到第5个以后的标签(包括第五个)n+5
找到第5个以前的标签(包括第五个)-n+5

例如:
在这里插入图片描述

2. 伪元素选择器

作用:创建虚拟元素(伪元素),用来摆放装饰性的内容。

选择器说明
E::before在 E 元素里面最前面添加一个伪元素
E::after在 E 元素里面最后面添加一个伪元素

注意

  • 必须设置content:””属性,用来设置伪元素的内容,如果没有内容,则引号留白即可。
  • 伪元素默认是行内显示显示模式
  • 权重和标签选择器相同

例如:
在这里插入图片描述

3. 盒子模型

作用:布局网页,摆放盒子和内容

3.1 盒子模型的重要组成部分

  • 内容区域:width & height
  • 内边距:padding(出现在内容与盒子边缘之间)
  • 边框线:border
  • 外边距:margin(出现在盒子外面)

例如:

<style>div {/* 内容区域 */width: 200px;height: 200px;bacdground-color: red;/* 内边距 */padding: 20px;/* 边框线 */border: 1px solid black;/* 外边距 */margin: 30px;}
</style>

3.2 盒子模型 - 边框线

属性名:border
属性值:边框线粗细 线条样式 颜色(不区分顺序)

属性值线条样式
solid实线
dashed虚线
dotted点线
<style>div {width: 200px;height: 200px;bacdground-color: red;/* 粗细为2像素的红色虚线边框 */border: 2px dashed red;/* 粗细为2像素的红色实线边框 *//* border: 2px solid red; *//* 粗细为2像素的红色点线边框 *//* border: 2px dotted red; */}
</style>

CSS 中允许单独对某一方向的边框线进行设置:

  • 属性名:border-方位名词
  • 属性值:边框线粗细 线条样式 颜色
方位名词说明
top顶部
right右侧
left左侧
bottom底部

例如:

<style>div {width: 200px;height: 200px;background-color: red;border-top: 1px solid black;border-right: 2px dashed red;border-left: 3px dotted green;border-bottom: 2px dashed pink;}
</style>

3.3 盒子模型 - 内边距

作用:设置内容与盒子边缘之间的距离
属性名:padding / padding-方位名词

例如:

<style>div {width: 200px;height: 200px;background-color: red;/* 所有方向一起设置 *//*padding: 20px;*/padding-top: 10px;padding-right: 20px;padding-left: 5px;padding-bottom: 30px;}
</style>

盒子模型内边距的多值写法

取值个数示例含义
一个值padding: 10px;四个方向内边距均为10px
两个值padding:10px 40px;上下:10px;左右:40px
三个值padding: 10px 40px 20px;上:10px;左右:40px;下:20px
四个值padding: 10px 40px 20px 30px;上:10px;右:40px;下:20px;左:30px

3.4 盒子模型 - 尺寸计算

默认情况下盒子尺寸 = 内容尺寸 + border 尺寸 + 内边距尺寸

所以给盒子设置border / padding属性会撑大盒子,我们可以通过以下两种方法来避免:

  • 手动减掉border / padding的尺寸
  • 内减模式box-sizing:border-box使 border / padding 不对盒子大小产生影响。

3.5 盒子模型 - 外边距

作用:拉开两个盒子之间的距离
属性名:margin
属性值:与 padding 写法、含义相同

<style>div {width: 200px;height: 200px;background-color: red;/* 外边距为20像素 *//* margin: 20px; *//* 垂直方向外边距为零,水平方向使盒子在浏览器中居中 *//* 版心居中的前提是盒子有宽度 */margin: 0 auto;}
</style>

外边距的多值写法:与 padding 多值写法相同。

3.6 盒子模型 - 元素溢出

作用:控制溢元素的内容的显示方式
属性名:overflow

属性值效果
hidden溢出隐藏
scroll溢出滚动(无论是否溢出,都显示滚动条位置)
auto溢出滚动(溢出才显示滚动条位置)

例如:
在这里插入图片描述

3.7 外边距问题 - 合并现象

场景垂直排列的兄弟元素,上下 margin 会合并
现象:取两个 margin 中较大值生效

3.8 外边距问题 - 塌陷问题

场景父子级的标签,子集的添加上外边距会产生塌陷问题。
现象:导致父级一起向下运动

解决方法:

  • 取消子集 margin,父级设置 padding(推荐)
  • 父级设置 overflow:hidden
  • 父级设置 border-top

3.9 行内元素 - 内外边距问题

场景:行内元素添加margin / padding时,无法改变元素垂直位置
解决方法:给行内元素添加line-height可以改变垂直位置

3.10 盒子模型 - 圆角

作用:设置元素的外边框为圆角。
属性名:border-radius
属性值:数字+px / 百分比(圆角半径)
多值写法:从左上角顺时针赋值,没有赋值的角与对角取值相同

常见应用:

  • 正圆形状:给正方形盒子设置圆角属性值为宽高的一半或50%。
  • 胶囊形状:给长方形盒子设置圆角属性值为盒子高度的一半。

3.11 盒子模型 - 阴影

作用:给元素设置阴影效果
属性名:box-shadow
属性值:X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意:

  • X轴偏移量和Y轴偏移量必须书写
  • 默认是外阴影,内阴影需要添加inset

例如:

box-shadow: 2px 4px 10px 1px rgba(0,0,0,0.5);

4. 清除默认样式

作用:清除默认的样式。

例如:

<style>/* 清除内外间距 */* {margin: 0;padding: 0;}/* 清除列表的项目符号 */li {list-style: none;}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/777826.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

玩电脑突然停电对电脑有影响吗

在现代社会中&#xff0c;电脑已成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;当我们正在专注于工作或娱乐时&#xff0c;突然停电可能会给我们带来不小的困扰。那么&#xff0c;玩电脑时突然停电会对电脑产生哪些影响呢&#xff1f;本文将深入探讨这一问题&…

Android 14.0 SystemUI下拉状态栏时间格式的修改(二)

1.概述 在14.0的系统rom产品开发中,在通过上一篇博客已经实现修改了时间显示格式,但是客户修改下拉状态栏时间显示格式为分行显示,即第一行显示时间用大字体显示, 第二行用小字体显示当前日期和周几这样的显示格式 于是继续进行修改 2.SystemUI下拉状态栏时间格式的修改(…

快速上手Spring Cloud 七:事件驱动架构与Spring Cloud

快速上手Spring Cloud 一&#xff1a;Spring Cloud 简介 快速上手Spring Cloud 二&#xff1a;核心组件解析 快速上手Spring Cloud 三&#xff1a;API网关深入探索与实战应用 快速上手Spring Cloud 四&#xff1a;微服务治理与安全 快速上手Spring Cloud 五&#xff1a;Spring …

【OpenAI援引马斯克评价中国】小米汽车 SU7 顶配版或超 30 万/OpenAI 加持机器人亮相/荣耀已投入 100 亿研发 AI

雷军&#xff1a;共建一个更良性包容的汽车市场舆论环境 Figure 与 OpenAI 联手推出新机器人 亚马逊和 Google 悄悄降低对生成式 AI 的预期 小米生态链模式大改革&#xff0c;将进行分级管理 掌阅科技&#xff1a;致力打造国内首款真正 AI 阅读应用 荣耀称已投入 100 亿用于 AI…

c++中2种返回变量类型名称的方法

std::string real_name abi::__cxa_demangle(typeid(*(*a)).name(), NULL, NULL, &status);必须使用#include <typeinfo> std::string real_name boost::core::demangle(typeid(*(*a)).name());必须使用 #include <boost/core/demangle.hpp> #include <t…

element el-table表格默认勾选toggleRowSelection失效问题

想要实现一个表格默认勾选上次选过的项的功能&#xff1a; 发现直接使用toggleRowSelection不生效&#xff0c;必须使用setTimeout延迟一会才能生效。 表格&#xff1a; <el-tableref"table"borderstripe:data"rows"selection-change"val > (se…

设计模式之原型模式讲解

原型模式本身就是一种很简单的模式&#xff0c;在Java当中&#xff0c;由于内置了Cloneable 接口&#xff0c;就使得原型模式在Java中的实现变得非常简单。UML图如下&#xff1a; 我们来举一个生成新员工的例子来帮助大家理解。 import java.util.Date; public class Employee…

植物大战僵尸Javascript版web游戏源码

源码介绍 植物大战僵尸Javascript版web游戏源码&#xff0c;非常强大&#xff0c;1比1还原电脑版植物大战僵尸游戏&#xff0c;带背景音乐&#xff0c;玩法和原版一模一样。 源码截图 下载地址 https://download.csdn.net/download/huayula/89048275

vue3从精通到入门5:模板语法与指令

Vue 3 的模板语法和指令与 Vue 2 相比&#xff0c;大部分内容仍然是相同的&#xff0c;但是有一些新的改进和优化。以下是对 Vue 3 模板语法和指令的简要概述&#xff1a; 模板语法 Vue 3 的模板语法基于 HTML&#xff0c;允许你使用双大括号 {{ }}来绑定数据&#xff0c;以…

MySQL:DBA看主从延迟

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 1、从DBA的视角来看影响主从延迟因素 1.1 主库更新频繁或主库有大事务 1.1.1 程序相关 1.1.2 变更相关 1.2 从库负载较高&#xff08;CPU负载高、IO负载高、网络负…

《Vision mamba》论文笔记

原文出处&#xff1a; [2401.09417] Vision Mamba: Efficient Visual Representation Learning with Bidirectional State Space Model (arxiv.org) 原文笔记&#xff1a; What&#xff1a; Vision Mamba: Efficient Visual Representation Learning with Bidirectional St…

Ollama + Open WebUI实践

在上一篇文章Ollama实践中&#xff0c; 我们已经学会了如何用Ollama在本地运行大模型。 但是所有的操作都是在命令行中进行的&#xff0c; 不是很直观。 如果有一个漂亮的UI界面就更好了。 Open WebUI 就是一个可以实现UI界面的开源工具&#xff0c; 可以生成类似openAI风格的U…

人工智能(pytorch)搭建模型25-基于pytorch搭建FPN特征金字塔网络的应用场景,模型结构介绍

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能(pytorch)搭建模型25-基于pytorch搭建FPN特征金字塔网络的应用场景&#xff0c;模型结构介绍。特征金字塔网络&#xff08;FPN&#xff09;是一种深度学习模型结构&#xff0c;主要应用于目标检测任务中&am…

基于PaddleNLP的深度学习对文本自动添加标点符号(二)

前言 基于PaddleNLP的深度学习对文本自动添加标点符号的源码版来了&#xff0c;本篇文章主要讲解如何文本自动添加标点符号的原理和相关训练方法&#xff0c;前一篇文章讲解的是使用paddlepaddle已经训练好的一些模型&#xff0c;在一些简单场景下可以通过这些模型进行预测&…

水位计在水利工程安全监测中起到的作用

水利工程&#xff0c;作为人类调控水资源、抵御水患以及利用水能的重要工具&#xff0c;其安全性、稳定性与高效性显得尤为关键。水位是水利工程中最基础且至关重要的参数&#xff0c;其精确且实时的监测对于工程的日常运行与管理具有无可替代的重要性。水位计&#xff0c;作为…

设计模式 - 简单工厂模式

文章目录 前言 大家好,今天给大家介绍一下23种常见设计模式中的一种 - 工厂模式 1 . 问题引入 请用C、Java、C#或 VB.NET任意一种面向对象语言实现一个计算器控制台程序&#xff0c;要求输入两个数和运算符 号&#xff0c;得到结果。 下面的代码实现默认认为两个操作数为Inte…

设计模式-设配器模式

目录 &#x1f38a;1.适配器模式介绍 &#x1f383;2.适配器类型 &#x1f38f;3.接口适配器 &#x1f390;4.类的适配器 &#x1f38e;5.优缺点 1.适配器模式介绍 适配器模式&#xff08;Adapter Pattern&#xff09;是作为两个不兼容的接口之间的桥梁。这种类型的设…

LeetCode 406. 根据身高重建队列

假设有打乱顺序的一群人站成一个队列&#xff0c;数组 people 表示队列中一些人的属性&#xff08;不一定按顺序&#xff09;。每个 people[i] [hi, ki] 表示第 i 个人的身高为 hi &#xff0c;前面 正好 有 ki 个身高大于或等于 hi 的人。 请你重新构造并返回输入数组 peopl…

戴尔电脑Dell SupportAssist占用内存高,卸载Dell SupportAssist

咨询戴尔客服了解到&#xff0c;SupportAssist是机器出厂自带的一款应用&#xff0c;主要的功能是可以检查驱动更新以及做一些硬件方面的健康检测&#xff0c;有时候后台运行可能会导致进程占用内存比较大&#xff0c;导致访问被的应用崩溃。 咨询卸载不影响之后&#xff0c;然…

计算机网络——29ISP之间的路由选择:BGP

ISP之间的路由选择&#xff1a;BGP 层次路由 一个平面的路由 一个网络中的所有路由器的地位一样通过LS&#xff0c;DV&#xff0c;或者其他路由算法&#xff0c;所有路由器都要知道其他所有路由器&#xff08;子网&#xff09;如何走所有路由器在一个平面 平面路由的问题 …