css盒子模型有几种?以及盒模型设置?
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。
盒子模型分为两种:
第一种是W3c标准的盒子模型(标准盒模型)
第二种IE标准的盒子模型(怪异盒模型)
标准盒模型与怪异盒模型的表现效果的区别之处:
1、标准盒模型中width指的是内容区域content的宽度;height指的是内容区域content的高度。
标准盒模型下盒子的大小 = content + border + padding + margin
2、怪异盒模型中的width指的是内容、边框、内边距总的宽度(content + border + padding);height指的是内容、边框、内边距总的高度
怪异盒模型下盒子的大小=width(content + border + padding) + margin
设置盒子模型:
css盒子模型有几种?以及盒模型设置?相关推荐
- CSS基础知识---浮动,定位和盒模型
转载请注明出处! 需要掌握的三个最重要的CSS概念是浮动,定位和盒模型. 盒模型概述: 页面上的每个元素都被看做一个矩形框(元素框or盒模型),这个框由元素内容,内边距,边框和外边距组成. 内边距出现 ...
- css布局详解(一)——盒模型
一.网页布局的几种情况 今天让我们总结一下在css布局的各种情况做一个总结,为我们以后布局网页时做一个参考. 先看一张图,这是去年cssConf大会时阿里的 @寒冬winter 老师放出来的: 如图所 ...
- CSS快速学习4:浮动和盒模型
浮动属性: Float:定义网页中其他文本如何环绕该元素. 有三个属性值: left:元素活动浮动在文本左面: right:元素浮动在右面: none:默认值,不浮动. 浮动的三大显著特征: 1.di ...
- 前端~css~Chrome调试工具、元素显示模式、盒模型、flex弹性布局
文章目录 Chrome调试工具 块级元素 行内元素 盒模型 flex布局(弹性布局) 常用属性 Chrome调试工具 在浏览器任何一个网页中,鼠标右键单击,选择检查,可打开调试工具.或者f12键. 打 ...
- css3盒子模型微课_css3之盒模型
什么是盒模型? css中的每个元素都是一个盒模型, 包括html body元素, 浏览器解析css的时候也会把每个元素看成一个盒子来解析. 盒模型具备的属性有: content .padding .m ...
- WOFOST模型Matlab,一种WOFOST-PAR耦合模型建立方法与流程
本发明涉及作物生长模型建立方法,具体涉及一种WOFOST-PAR耦合模型建立方法. 背景技术: 作物的生长发育研究中,涉及到不同地区,不同气候带的时间变异性,因此我们需要通过参数调节,来适应不同地区的 ...
- css盒模型(css的两种盒模型:标准盒模型、怪异盒模型)和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
- css盒模型——标准盒子、怪异盒子
一.概念 CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. 1.网页中所有元素都具备以下四个属性 (用来对元素进行布局): content,元素的 width.height p ...
- html盒子标准模型,CSS标准盒模型与IE盒子模型以及弹性盒模型
CSS2.1中提出了盒模型的概念,盒模型高度提炼了所有元素的基本特征,即标准盒模型,CSS3中进一步扩展,提出了弹性盒模型的概念 什么是盒模型,我们可以先直观的看一个东西 打开Chrome浏览器,F1 ...
最新文章
- 一般筛法求素数+快速线性筛法求素数
- 面向对象UML中类关系
- eclipse 使 用Ctrl+鼠标左键进入mapper.xml文件的方法
- linux pread/pwrite
- hexo修改默认端口
- OAF_开发系列19_实现OAF对话框提示dialogPage(案例)
- 【html】【19】高级篇--大事件时间轴
- php设置session 生命周期,php会话(session)生命周期概念介绍及设置更改和回收
- Zookeeper原理分析之存储结构ZkDatabase
- 如何利用webpack4.0搭建一个vue项目
- [CF592D]Super M
- XMLHttpRequest对象的open方法
- 【转发】ext4文件系统
- 企查查网站信息爬取1.0版
- 我的世界手机有php的开服器下载地址,我的世界手机版怎么联机 PE手机版开服教程...
- java卡牌游戏详解
- Web渗透攻击之vega
- Java数组转集合之Arrays.asList()用法
- [linux学习]centos下mysql的简单使用教程
- python安装dlib(已成功并且无出现报错AttributeError: module ‘dlib‘ has no attribute ‘get_frontal_face_detecetor
热门文章
- XStream 简介
- OSChina 周一乱弹 ——第一天上班,命都搭上了!
- 吉林建筑大学电气与计算机学院讲师,吉林建筑大学导师教师信息介绍-电气与计算机学院刘航...
- win7计算机管理找不到文件夹,win7文件夹选项不见了怎么办|win7恢复文件夹选项的方法...
- CSS-Less简介
- Unity制作一套自定义选择题试卷
- python中以只读形式打开文件的模式是_详解python中各种文件打开模式
- Java编写程序求一个正整数(自然数)的阶乘
- 高防CDN如何防御网络攻击
- 用c语言画一个字母金字塔,( ) 什么字母似“金字塔”? A.D B.A C.E D.F ——青夏教育精英家教网——...