css—盒子模型理解

1、盒子模型作用：
盒子模型就是一个盒子，封装周围的html元素。允许我们在其他元素和周围元素边框的空间放置元素。
2、组成：
外边距（margin）：相邻的两个盒子margin，会发生折叠，可为负数
边框（border）：
内边距（padding）：
实际内容（content）：百分比相对于父容器的content box 的宽度，只有包含块的高度不依赖该元素时，百分比宽度才生效

*IE盒模型和W3C盒模型在计算总宽度中存在一些差异

W3C盒模型：width=content.width；heigth=content.heigth
IE盒模型：width =content.width+border +margin；height=content.height+margin+border

CSS3引入box-sizing属性，可允许改变默认的css盒模型对元素宽高的计算方式

content-box: 浏览器定义元素的屏幕宽度和高度的默认方法, 会将border宽度和padding厚度与width和height属性值相加,来确定该标签的屏幕高度和宽度
padding-box-: 当你在一个样式中设置了width和hight属性时,它应该包含padding作为该值的一部分
border-box: 包含了border宽度和padding厚度,将它们作为width和height的一部分.

css—盒子模型理解相关推荐

转HTML+CSS总结/深入理解CSS盒子模型
原文地址:http://www.chinaz.com/design/2010/1229/151993.shtml 前言:前阵子在做一个项目时,在页面布局方面遇到了一点小问题,于是上stackoverf ...
[css] 说说你对css盒子模型的理解
[css] 说说你对css盒子模型的理解 css盒模型由两个盒子组成,外在的控制是否换行的盒子,以及内在的控制元素内容的盒子.比如:display: inline-block, 则它的外在的盒子就是i ...
css篇-盒子模型理解
前言在 CSS 盒子模型的默认定义里,你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区.如果这个元素有任何的 border 或 padding ,绘制到屏幕上时的盒子宽 ...
简述对css盒子模型的理解_css 盒子模型理解
盒子模型是html+css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.下面是自己积累和总结的关于css盒子模型的知识^_^,希望对初学者有用. 一.css盒子模型概念 CSS ...
CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
[HTML/CSS]盒子模型，块级元素和行内元素
目录概述盒子模型块级元素行内元素可变元素总结概述在div+css中,了解块级元素和行内元素还是非常有必要的,比如:对行内元素使用width属性就会失效.虽然自己不是做前端的,但是,在项 ...
php盒子模型,CSS盒子模型介绍
什么是CSS盒子模型?CSS盒子模型是为了让我们充分理解p+css模型的定位功能,盒子模型在学习p+css布局方式中必须要学习的一个模型一.什么是CSS? CSS(Cascading Style S ...
CSS盒子模型之详解
前言: 盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局. 一.css盒子模型概念 CSS盒子模型又称框模型 (Box Model) ,包 ...
css盒子模型_css的盒子模型是什么
CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型. css盒子模型又称为框模型 (Box Model) ,包含了元素内容(content).内边距(padding).边框(bor ...

css—盒子模型理解

css—盒子模型理解相关推荐

最新文章

热门文章