css基础(二)及盒子模型

最新推荐文章于 2025-12-23 08:30:00 发布
原创 最新推荐文章于 2025-12-23 08:30:00 发布 · 76 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

博客介绍了CSS相关知识，包括高级选择器如E F、E>F等，还有结构伪类选择器和属性选择器；阐述了盒子模型各要素下的属性；同时讲解了div的用法。

css基础（二）

一、css的高级选择器

在这里插入图片描述

在这里插入图片描述
E F在这里插入图片描述
E>F
在这里插入图片描述
E+F
在这里插入图片描述
E~F
在这里插入图片描述
结构伪类选择器
在这里插入图片描述
属性选择器
在这里插入图片描述

二、盒子模型

在这里插入图片描述
在这里插入图片描述
盒子模型各要素下的属性
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、div的用法

 <div></div>  一对div标签就是一个盒子。占一行，相当于P标签。
css相关内容:盒子模型
weixin_74384492的博客
08-06 1116
在HTML学习中，我们了解到，每个标签的本质都是形成一个独立的空间，用于各种操作。各种标签形成的独立的空间就是盒子模型。简单来说，盒子模型就是各种标签的抽象化产物。我们可以针对盒子模型进行各种参数设置，达到样式优化的效果。
前端css中盒子模型的各种属性
小蜗牛764号的博客
04-28 2227
本文讲解盒子模型的各种属性，大多数例子没有具体设置html的所有内容属性，只是针对某部分如何设值，或某个属性有什么参数，来进行一行代码的解释说明。聪明的读者肯定会自己创建个div盒子模型，然后自己设置好自己想调整的参数，创建符合自己的盒子模型。其实盒子模型还有关于布局的内容，本文没有写。因为布局可能涉及到弹性盒子模型flex，则笔者决定吧布局的内容放到弹性盒子模型中讲。部分内容可能还不够详细，如背景的样式的属性，多背景的内容本文便没有写等。本文主要是了解盒子模型的属性都有啥，常用属性的罗列一遍。
CSS基础知识(二）——盒子模型
热门推荐
weixin_54799350的博客
06-21 1万+
CSS盒子模型相关属性介绍
CSS基础：盒子模型详解
u013179804的博客
04-17 1711
盒模型时，也叫"框模型"，指的是 CSS 中元素的布局方式和尺寸计算规则。盒模型定义了一个元素在页面布局中所占的空间，包括了元素的内容、内边距、边框和外边距，没错，而这些，正是我们前几篇文所提到的。CSS 基础：border 的 3 个基础属性和简写方法CSS基础：margin属性4种值类型，4个写法规则详解CSS基础：最详细 padding的 4 种用法解析CSS基础：width，height尺寸属性详解。
css盒子模型
2301_80840100的博客
06-22 6061
CSS盒子模型是网页布局的基础，它描述了元素在页面上的排列方式。Content(内容) - 盒子的内容，显示文本和图像。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Margin(外边距) - 清除边框外的区域，外边距是透明的。把盒子模型看成一个快递，快递里面的物品就是content，快递里面的缓冲物就是padding，快递盒子就是border，两个快递间的距离就是margin。
CSS基础知识(盒子模型)
m0_61886762的博客
01-07 2896
1.布局为什么用不同的盒子，而自己只想使用div？标签都是有语义的，合理的地方使用合理的标签。比如产品标题就使用h，大量文字的段落就使用p2.为啥用那么多的类名呢？类名就是给每一个盒子起了一个名字，可以更好的找到这个盒子，选取盒子更容易，后期维护也很方便。3.到底使用margin还是padding？大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。4.自己做如果没有思路怎么办？
CSS盒子模型
weixin_64294248的博客
07-27 1496
盒子模型，实际上就是指标签的外边距、边框、内边距、内容所组成的思维模型，这个模型可以直观的展示标签的尺寸、间距。盒子的实际大小：边框(border) + 内边距(padding) + 内容(文本/width/height)。我们可以通过F12或者鼠标右击检查来观察盒子模型，其中，我们选中某个元素时显示蓝色的区域就是内容，橙色区域是外边距；在选中的元素范围内，蓝色区域以外的绿色区域是内边距。
CSS基础知识二+练习题（盒子模型）
2301_80208072的博客
10-12 911
CSS盒子模型概念
CSS盒子模型详解
m0_70296476的博客
02-07 1744
目录一、盒子模型的组成部分二、盒子模型的属性设置三、盒子模型的用法示例四、盒子模型的圆角边框1. 语法：2. 示例：（1）统一设置所有角的半径（2）分别设置每个角的半径（3）椭圆形边框（4）圆形边框3. 注意事项五、盒子模型的阴影1. 语法2. 示例（1）基本外阴影（2）内阴影（3）多重阴影（4）悬停效果CSS盒子模型是网页设计和布局的核心概念之一。每个HTML元素都被视为一个矩形盒子，这个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四个主要部分组成。
CSS中的盒子模型
小何代码咖啡馆
04-19 3227
在网页布局时，主要关注的就是如何利用CSS摆放盒子先准备好相关的网页元素，网页元素基本都是盒子利用 CSS 设置好盒子样式，然后摆放到相应位置往盒子里面装内容。
css基础3-盒子模型
12-05
CSS 基础 - 盒子模型 CSS 基础 - 盒子模型是 CSS 中的一個基础知识点，包括 CSS 三大特性、PxCook 的基本使用和盒子模型三个部分。 CSS 三大特性 CSS 三大特性包括继承性、层叠性和优先级。继承性是指子元素继承...
css盒子模型图解
09-25
#### 二、CSS盒子模型概述 CSS盒子模型是基于矩形的概念来描述页面元素布局的。每个HTML元素都可以被视为一个矩形盒子，这些盒子可以嵌套在一起形成复杂的布局结构。盒子模型由四个主要部分组成： 1. **Margin...
CSS盒子模型教程PPT课件.pptx
10-10
CSS 盒子模型教程 CSS 盒子模型是指浏览器对网页中的各个元素（图片、段落、单元格等）进行排列和定位的模式。只有很好地掌握了盒子模型以及其中每个元素的用法，才能真正地控制好页面中的各个元素。本节主要介绍...
CSS二与盒子模型资源包
11-02
二与盒子模型是CSS中的一个重要概念，涉及元素如何显示、定位、布局以及它们相互之间的关系。 CSS权重是解释器在面对样式冲突时如何选择使用哪个规则的度量标准。它基于选择器的类型和特定性来决定权重值。权重决定...
Vue 3 的魔法：用 v-bind() 让 CSS 爱上 TypeScript 常量
ttod的博客
12-18 967
Vue 3 的魔法：用 v-bind() 让 CSS 爱上 TypeScript 常量
CSS容器查询：让组件学会“见机行事“的魔法
ttod的博客
12-18 697
CSS容器查询：让组件学会"见机行事"的魔法
50天50个小项目 (React19 + Tailwindcss V4) ✨ | StickyNavbar（粘性导航栏）
最新发布
WOMENshiNIDE的博客
12-23 490
基于React19 + Tailwindcss V4创建的响应式粘性导航栏组件。该项目通过滚动监听，当页面滚动超过100px时，导航栏会自动切换为白色背景并添加阴影效果。组件包含动态样式切换、当前页签高亮显示、平滑过渡动画等功能，同时搭配了Hero区域和内容展示区。
Vue 3 CSS中的v-bind()完全指南：让样式真正响应式
码农捻旧的博客
12-18 751
Vue 3 CSS v-bind() 摘要 Vue 3.2+ 引入的v-bind()函数让CSS样式真正响应式，可直接在<style>中使用组件变量。相比传统类名切换或内联样式，它提供更简洁的语法和自动更新机制。 核心功能： 直接在CSS中引用响应式变量 支持字符串、数字、布尔值、数组、对象等多种数据类型 可与计算属性结合实现复杂逻辑 实现动态主题切换等高级场景 典型应用： 动态颜色/尺寸调整 条件样式渲染 主题系统开发 组件样式参数化 该特性显著简化了动态样式实现，提升了开发效率和代码可维护性
【超完整】Tailwind CSS 实战教程
No_Name_Cao_Ni_Mei的博客
12-22 551
Tailwind CSS 是一个实用优先的 CSS 框架，通过原子化类名直接在 HTML 中构建自定义设计。其核心工作流包括扫描 HTML 类名、生成对应 CSS 规则，并通过 PurgeCSS 优化生产代码。配置文件支持自定义主题、颜色、字体、间距和断点等，采用 JIT 编译机制实时生成样式，最终输出精简高效的 CSS 文件。Tailwind CSS 兼具开发效率与性能优势，是现代化 Web 开发的实用工具。
CSS盒子模型详解与实际应用技巧
CSS盒子模型是前端开发中最为基础且核心的知识点之一，理解并掌握盒子模型对于实现精确布局、响应式设计以及跨浏览器兼容性优化具有至关重要的作用。本文以“CSS盒子模型详解[可运行源码]”为标题，系统地讲解了盒子...
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值