哈～css模型（一）

最新推荐文章于 2024-10-30 14:55:36 发布
原创 最新推荐文章于 2024-10-30 14:55:36 发布 · 472 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了前端开发中常见的布局问题，并详细解释了W3C盒模型的工作原理，帮助开发者更好地掌握元素定位与布局技巧。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

作为前端，当你在敲代码，体验页面的时候，总是不断对位置啊什么的修修改改，有时候想，

——咦，我明明设的刚刚好，为什么它跑下面去了；

——哎呀，这莫名其妙的咋移位了呢；

——莫名就跳出来了……额

我觉得，我们还是重新认识下css的盒模型吧，今天讲下W3C盒模型和IE盒模型。见下图



这是标准W3C的盒模型，如下数据：



CSS--怪异盒子模型
m0_56123958的博客
03-12 8957
CSS–怪异盒子模型 怪异盒子模型 标准盒子宽度计算方法（扩张主义） border-left-width+width+padding-left+padding-right+border-right-width <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { width: 100px;
超详细的学习笔记：CSS盒子模型（附代码示例）
lbcbjtlhmjq的博客
07-11 2771
盒子的概念1.页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局2.浏览器在染(显示)网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子盒子模型CSS 中规定每个盒子分别由: 内容区域 (content) 、内边距区域 (padding) 、边框区域(border) 、外边距区域(margin)构成，这就是盒子模型记忆:可以联想现实中的包装盒。
CSS盒模型
qq_64281750的博客
05-23 300
CSS盒模型在控制页面布局的应用中非常重要，页面上所有的元素，包括文本，图像超链接，div块，都可以被看作盒子，有盒子将这些元素包裹在一个矩形块内，这个区域就叫做盒模型。 盒模型包括由内到外的内容、填充、边框、边界。 margin是边界、border是边框、padding是填充、中间的蓝色就是内容。 内容 内容是必须含有的部分，可以是网页上的任何元素，如文本、图片、视频。内容的大小由属性高度和宽度定义。语法格式如下 width：auto | length； height：auto | len
CSS盒子模型
weixin_53545557的博客
01-22 1072
一.盒子模型概述 1.认识盒子模型 所谓盒子模型就是把页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器，每个矩形都由元素的内容，内边距（Padding)、边框（Border）、和外边距（Margin)组成。 例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS样式叠加</title> <style type="text/css"
CSS:盒子模型(box-model)
最新发布
wzc3180043380的博客
10-30 798
CSS处理网页时，它认为每个标签都包含在一 个不可见的盒子里。如果把所有的标签都想象成盒子，那么我们对网页的布局就相 当于是摆 放盒子。我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。盒子模型在网页中的直观表现:(打开方式在上一章节中有详细说明)
面试官：说一下css盒子模型
hangzhang
02-24 5201
所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都是由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。 所有的文档元素（标签）都会生成一个矩形框，我们称为元素框，它描述了一个文档元素在网页布局汇总所占的位置大小。每个盒子除了有自己的大小和位置外，还影响着其他盒子的大小和位置，因此正确了解css盒子模型对我们前端页面布局十分重要。 css的盒子模型包括IE盒子模型（怪异模型） 和 标准
CSS详解（一）
weixin_47194802的博客
04-24 1068
行内元素可以通过设置内外边距（margin）、边框（border）和填充（padding）来调整其周围的间距和外观，但这些属性对行内元素的影响通常是垂直方向上的，水平方向上的影响有限。根据元素的属性值来选择元素。例如，[href] 选择具有 href 属性的所有元素，[title="example"] 选择 title 属性值为 "example" 的所有元素。选择某个元素的直接子元素。CSS 选择器允许你定义多个样式规则，这些规则可以根据选择器的优先级和特定的层叠规则来应用于元素，从而形成最终的样式。
一篇详解CSS样式
huaz_md的博客
04-13 1056
是一个特殊的颜色值，表示元素是透明的，不会显示任何颜色。/* 透明色 */
css盒模型
qq_36065328的博客
02-28 115
** 基本概念 ** 话不多说，直接上两张图。 标准模型 在标准模型中，盒模型的宽高只是内容（content）的宽高 IE模型 而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。 相信大家看这个图就大概能明白了，哈哈哈。 盒模型的组成大家肯定都懂，由里向外content,padding,border,margin。 只不过两种模型的计算不...
【CSS盒子模型】入门
m0_58408789的博客
10-13 221
【CSS盒子模型】入门易懂
学校风网页css+html15个网页.rar
12-18
总的来说，这个压缩包是一个关于HTML和CSS基础应用的实例集合，展示了学生在学习过程中如何将理论知识转化为实践，尤其是在首页设计上的创新和技巧。对于其他学习者来说，这是一个很好的参考和学习资源，可以帮助...
CSS盒模型居中方法，附详细答案
m0_57501956的博客
06-07 295
前言 最近在准备面试，然后复习下之前写过的项目，书籍，笔记，文章。一看很多知识点都没有印象，最可拍的是连自己为了防止忘记写的文章竟然都感觉不是自己写的。有些开始怀疑人生了。 好了，废话少说，离金三银四求职高峰期没多久了，我把我收集到的资料分享给大家。也祝到家有个好工作。(本文资料 适合0-2年) 从入门到精通，包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。 文章中所列主要为大纲部分，详细内容可以在文末自行获取哈！ 如果
CSS基础盒模型详解：布局与设计三大优势
CSS的历史可以追溯到1994年，由哈坤·利和伯特·波斯共同提出，后来成为W3C项目的一部分，不断迭代发展至今。 - **CSS工作进展**： - 1996年底发布了CSS1.0的第一个版本，标志着CSS的诞生，此后W3C成立了专门的...
CSS3 排版属性盒子模型 第二个模块
菜鸟心声：学的不仅是技术，更是梦想！
01-13 425
第05章-CSS3排版属性 CSS3排版属性第05章-CSS3排版属性学习目标CSS 列表案例01CSS 隐藏隐藏元素CSS 显示属性案例03CSS 表格案例04表格隔行色案例05CSS 盒子模型padding(填充)案例06border(边框)outline(轮廓)margin(外边距)外边距合并CSS3 box-shadow阴影 学习目标 掌握无序列表的应用 掌握有序列表 熟悉嵌套列表的使用方法 了解自定义列表的标记 掌握表格样式的使用 掌握CSS边框、边线、边距等属性 重点 掌握边框的扩展运用 重点
CSS3| 制作文字波浪线效果
微也的博客
11-07 5498
css的设计之巧妙，实现之精妙，细细寻味，其妙非凡，妙不可言。这波浪线，取巧的运用了linear-gradient属性，合角度、颜色、位置于一体，配合background-size，background-repeat，化一为多，平滑过渡。哇，这最后的效果太巧秒了！尘世间没有词来形容了……      ——题记，改编自《食神》 正文 语法：linear-gradient(di
css学习选择器之:nth-child(n)
微也的博客
08-24 1805
今天新学习了一个小效果，网站比如说实现间行颜色变化，比如说一行黑，一行白，好吧，斑马就出现了，当你鼠标触碰某一行，颜色背景变化，尤其是当你连接数据库时，简单的代码就显得很重要了. 这时候一个有意思的朋友出现了，:nth-child(n)  一直在那蹦跶着说“找我呀”，这个是说选择器匹配属于其父元素的第N个子元素，从0开始，比如说p:nth-child(2)指下标为2的p元素，就是第3个元素；然后
CSS3设计边框忽隐忽现功能
微也的博客
07-18 1662
css3功能很强大哈，实现动画功能很方便，今天在这里分享怎么实现类似星星眨眼，忽隐忽现，一亮一闪的功能…… 同样，我们先知道CSS3的几个属性： 1. box-shadow:向框添加一个或多个阴影， box-shadow: 水平阴影距离(必须） 垂直阴影距离（必须） 模糊距离（可选） 阴影尺寸（可选） 颜色（可选） 阴影类型（可选）; 如：box-shadow: 1em 2em 1
谈谈css王朝的px，em，rem之间的那些事儿
微也的博客
03-14 584
话说，CSS（层叠样式表）有常见的三个单位兄弟，px，em，rem，作为前端人员，跟着三兄弟之间打的交道也是比较多，现在我们来介绍一下，这三个兄弟吧…… 1. px  常见老大，像素（Pixel），相对长度单位，是指相对于相识屏幕分辨率而言的，分辨率越高，像素点越小，反之，分辨率越低，点较大，比如说在800＊600的分辨率和1024*728的分辨率比较，在1024*768的分辨率下文字会显得小；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值