css盒子模型有几种?以及盒模型设置?

46 篇文章 0 订阅
订阅专栏
9 篇文章 1 订阅
订阅专栏

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。

盒子模型分为两种:

  • 第一种是W3c标准的盒子模型(标准盒模型)

  • 第二种IE标准的盒子模型(怪异盒模型)

标准盒模型与怪异盒模型的表现效果的区别之处:

1、标准盒模型中width指的是内容区域content的宽度;height指的是内容区域content的高度。

标准盒模型下盒子的大小 = content + border + padding + margin

1.jpg

2、怪异盒模型中的width指的是内容、边框、内边距总的宽度(content + border + padding);height指的是内容、边框、内边距总的高度

2.jpg

怪异盒模型下盒子的大小=width(content + border + padding) + margin

设置盒子模型:

css设置盒子模型
wyqwilliam的博客
12-06 1076
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div的盒子模型学</title> <style type="text/css"> #showdiv{ border: solid 1px; width:30...
CSS盒模型
weixin_47782618的博客
04-09 1358
1. 盒模型的概念 CSS盒模型本质上是一个盒子,封装着周围的HTML元素,它包括外边距margin,边框border,内边距padding和实际内容content。 把盒子模型看成一个快递,快递里面的物品就是content,快递里面的缓冲物就是padding,快递盒子就是border,两个快递间的距离就是margin。 2. 标准盒模型 根据W3C的规范,盒子实际内容content的宽度和高度等于我们设置的width和height,而盒子总宽度=width+padding+border+mar
css盒子模型
最新发布
2301_80840100的博客
06-22 1147
CSS盒子模型是网页布局的基础,它描述了元素在页面上的排列方式。Content(内容) - 盒子的内容,显示文本和图像。Padding(内边距) - 清除内容周围的区域,内边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Margin(外边距) - 清除边框外的区域,外边距是透明的。把盒子模型看成一个快递,快递里面的物品就是content,快递里面的缓冲物就是padding,快递盒子就是border,两个快递间的距离就是margin。
css盒模型:标准盒模型、怪异盒模型
m0_74114605的博客
03-22 1195
目前大部分主流的浏览器支持的是W3C标准盒模型
css盒子模型php中文网,css盒子模型几种
weixin_39856607的博客
04-05 157
网页设计中常听的属性名:内容(content)、内边距(padding)、边框(border)、外边距(margin), CSS盒子模型都具备这些属性。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模型CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这...
CSS盒子模型有哪几种盒子模型的组成又有那些?
胖蔡叨叨叨
10-25 2036
CSS盒子模型(Box Model)将所有的HTML元素都看做盒子,并通过盒子的组成对HTML进行布局绘制设计。那么CSS的盒子模块到底有哪几种呢?盒子模型它的组成又有哪几部分呢?接下来,我就通过这边文章对来一一解读。为了方便读者了解盒子模型,以及不同的盒子模型之间的区别,我会在阅读的顺序上做一个小小的调整。即先介绍盒子模型的组成,之后介绍盒子模型的种类。
CSS盒子模型有哪些?
SunGuangHuiM的博客
07-04 494
CSS盒子模型有哪些? (1) 两种, IE 盒子模型、标准 W3C 盒子模型;IE 的 content 部分包含了 border 和 pading; (2) 盒模型: 内容(content)、填充(padding)、边界(margin)、 边框(border)
CSS3盒子模型详解
12-13
掌握几种“box-sizing”属性值的不同含义,能够正确的使用box-sizing属性来定义样式中给定的元素的宽度值和高度值中是否包含内部补白区域,以及边框的高度和宽度; 盒的类型 inline-block css中我们使用display来...
css 盒模型 文档流 几种清除浮动的方法实例详解
01-21
盒模型 1、box-sizing: content-box 是普通的默认的一种盒子表现模式 盒子大小为 width + padding + border content-box:此值为其默认值,其让元素维持W3C的标准Box Mode 2、box-sizing:border-box 以盒子边框为...
盒子模型框架网站模板
04-02
CSS中,盒子模型由以下几个部分组成: 1. 内容(Content):元素的实际内容,如文本、图片等。 2. 内边距(Padding):内容与边框之间的空白区域,可以用来增加元素内部的空间。 3. 边框(Border):围绕内容和内...
HTML5+CSS3网页设计-第六章 盒子模型.pptx
12-21
本章的目标是理解盒子模型的构成,包括边框、内边距和外边距,学会计算盒子模型尺寸,掌握两种解析方式(W3C和IE)进行布局,并使用`border-radius`和`box-shadow`属性创建圆角和阴影效果。通过制作商品分类、美容...
推荐彻底弄懂CSS盒子模式(DIV布局快速入门)第1/3页
10-30
**CSS盒子模型**是用于描述网页元素如何被渲染的一种模型。每个网页元素都可以被视为一个矩形盒子,这些盒子相互嵌套或并排放置,共同构成整个网页的布局结构。在CSS盒子模型中,一个元素的盒子由四个基本部分组成:...
css盒子模型
weixin_48884617的博客
08-27 1215
css盒子模型
CSS复习之盒子模型几种
weixin_44000173的博客
07-09 612
CSS复习之盒子模型几种? 第一种W3C的标准盒子模型 第二种IE标准的盒子模型(怪异盒模型) 两种盒子的宽度和高度不同 w3c标准盒子的宽度和高度是指内容的宽度和高度 content 怪异盒模型的宽度和高度指的是(content + border +padding) 两种盒子的大小计算方法相同 标准盒模型下盒子的大小 = content + border + padding + margin 怪异盒模型下盒子的大小=content + border + padding + margin ..
Css的两种盒模型
r67686的博客
09-15 1104
在进行网页的搭建时,通常会用到很多的标签,可以形象的把这些标签看成是一个个矩形,这些矩形盒子搭建成了网页。在描述盒子模型前先来介绍一下盒子的一些属性。 盒子通常指的是块元素(但是行内元素在浏览器的查看器内也会出现盒子模型的图片),一个完整的盒子由四个部分组成,它们分别是: margin 外边距 代表盒子四周的区域。相邻元素的边距会合并 border 边框 ​设定介于padding的外边缘与margin的内边缘之间,默认值为0 padding 内边距 ...
盒子模型
SouthWindKnowMe的博客
06-07 1504
文章目录一、标准盒子padding 内边距border边框margin 外边距二、怪异盒子(IE盒子)Box-sizing三、弹性盒子(flexBox)flexbox的基础知识父容器常用属性四、浏览器内核以及其前缀 一、标准盒子 盒模型由内容(content)、填充(padding)、边框(border)、边界(margin)组成 对象的实际宽度=2margin+2borderr+2*padding+content padding 内边距 内容区域和边框之间的空间 会扩大元素边框所占用的区域 语法:pad
css三种盒模型总结
码上行动
06-17 1043
文章目录一,标准盒模型二,怪异盒模型三,弹性盒模型(1)设置主轴的方向:(2)设置内容换行(默认元素会自动挤压、不换行)(3)设置主轴的排列方式(4)设置侧轴的排列方式(5)设置多行内容排列(6)align­self属性(单个定义时用)(7) 给灵活元素设置的样式(8)flex­grow属性(9)flex­shrink属性(10)flex­basis=width属性(11)flex属性总结 一,标准盒模型 点击查看标准盒模型介绍 box-sizing:content-box;(标准盒模型) 盒子的总宽度
css盒模型几种?分别是?
05-19
CSS盒模型有两种: 1. W3C盒子模型(标准盒子模型):它将width和height属性应用到内容区域,而不包括边框(border),内边距(padding)和外边距(margin)。 2. IE盒子模型(传统盒子模型):它将width和height属性应用到内容区域,包括边框(border)和内边距(padding),但是不包括外边距(margin)。
写文章

热门文章

  • Vue中this.$router.push(参数) 实现页面跳转 132658
  • element-ui中的表格el-table滚动条样式修改 55930
  • vue3使用reactive包裹数组如何正确赋值 28910
  • Vue中的@blur事件 当元素失去焦点时所触发的事件 25896
  • TypeError: Cannot read property 'split' of null 22497

分类专栏

  • 正则表达式 2篇
  • 面试 46篇
  • wangEditor 1篇
  • vue3.0 14篇
  • vant 2篇
  • 时间 6篇
  • 微信小程序 21篇
  • git 1篇
  • vuex 1篇
  • node 1篇
  • koa 1篇
  • antdVue 1篇
  • 防抖和节流 1篇
  • element-plus 2篇
  • AntV F2 1篇
  • echarts 3篇
  • IOS 底部适配 1篇
  • H5 1篇
  • TypeScript 5篇
  • react 13篇
  • reactHooks 2篇
  • es6 1篇
  • gitExtension 2篇
  • axios 1篇
  • CSS3 1篇
  • 资源
  • 谷歌浏览器 3篇
  • vue代码警告
  • VSCode 6篇
  • CSS 9篇
  • Windows
  • element-ui 18篇
  • JavaScript 39篇
  • Vue 34篇
  • HTML 8篇

最新评论

  • Vue实现验证码功能

    奶思的镜淳: 那个js第70行循环前加即可

  • React怎么在函数(方法)里重定向到某一组件

    4342024: 方法二 不会考虑react语法,太棒了

  • Vue中this.$router.push(参数) 实现页面跳转

    向着五星的方向: 互关一下表情包表情包

  • Vue中this.$router.push(参数) 实现页面跳转

    hqshanshan: 不错,点赞

  • vue3使用reactive包裹数组如何正确赋值

    Kabuto23: 项目从v2换到v3,被这个坑惨了。

最新文章

  • 正则匹配格式:端口号、ip或域名
  • wangEditor封装富文本编辑器组件
  • vue3.0清空历史记录history
2024年1篇
2023年22篇
2022年30篇
2021年33篇
2020年73篇
2019年34篇

目录

目录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值

PHP网站源码松岗网站关键词优化荷坳网站制作福永网页设计大运网站建设设计南联网站开发坂田网站优化推广横岗阿里店铺运营宝安网站优化软件同乐网站优化软件西乡SEO按天扣费观澜网站改版木棉湾百度关键词包年推广丹竹头网站优化推广光明网站排名优化惠州关键词按天扣费大运百度关键词包年推广永湖网站推广工具盐田SEO按天计费横岗网站改版丹竹头关键词按天计费坪地百度关键词包年推广南澳设计网站木棉湾百度竞价坑梓seo排名观澜网站改版塘坑企业网站制作平湖seo双龙网站seo优化丹竹头网站排名优化吉祥关键词按天收费歼20紧急升空逼退外机英媒称团队夜以继日筹划王妃复出草木蔓发 春山在望成都发生巨响 当地回应60岁老人炒菠菜未焯水致肾病恶化男子涉嫌走私被判11年却一天牢没坐劳斯莱斯右转逼停直行车网传落水者说“没让你救”系谣言广东通报13岁男孩性侵女童不予立案贵州小伙回应在美国卖三蹦子火了淀粉肠小王子日销售额涨超10倍有个姐真把千机伞做出来了近3万元金手镯仅含足金十克呼北高速交通事故已致14人死亡杨洋拄拐现身医院国产伟哥去年销售近13亿男子给前妻转账 现任妻子起诉要回新基金只募集到26元还是员工自购男孩疑遭霸凌 家长讨说法被踢出群充个话费竟沦为间接洗钱工具新的一天从800个哈欠开始单亲妈妈陷入热恋 14岁儿子报警#春分立蛋大挑战#中国投资客涌入日本东京买房两大学生合买彩票中奖一人不认账新加坡主帅:唯一目标击败中国队月嫂回应掌掴婴儿是在赶虫子19岁小伙救下5人后溺亡 多方发声清明节放假3天调休1天张家界的山上“长”满了韩国人?开封王婆为何火了主播靠辱骂母亲走红被批捕封号代拍被何赛飞拿着魔杖追着打阿根廷将发行1万与2万面值的纸币库克现身上海为江西彩礼“减负”的“试婚人”因自嘲式简历走红的教授更新简介殡仪馆花卉高于市场价3倍还重复用网友称在豆瓣酱里吃出老鼠头315晚会后胖东来又人满为患了网友建议重庆地铁不准乘客携带菜筐特朗普谈“凯特王妃P图照”罗斯否认插足凯特王妃婚姻青海通报栏杆断裂小学生跌落住进ICU恒大被罚41.75亿到底怎么缴湖南一县政协主席疑涉刑案被控制茶百道就改标签日期致歉王树国3次鞠躬告别西交大师生张立群任西安交通大学校长杨倩无缘巴黎奥运

PHP网站源码 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化