css—盒子模型理解

Crazy_Coder 发布于2019-08-30 13:59 / 1671人阅读

摘要：盒子模型作用盒子模型就是一个盒子，封装周围的元素。允许我们在其他元素和周围元素边框的空间放置元素。

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的一部分.

GPU云服务器云服务器盒子模型比价盒子盒子比价电视盒子

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115680.html

盒子模型的理解

摘要：盒子模型就是在网页设计中经常用到的技术所使用的一种思维模型。盒子模型是中一个重要的概念，理解了盒子模型才能更好的排版。标准盒子模型从上图可以看到标准盒子模型的范围包括，并且部分不包含其他部分。概述网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性，也主要是这些属性。这些属性我们可以把它...

xiangzhihong 2019-08-30 12:49 评论0 收藏0
盒子模型的理解

摘要：盒子模型就是在网页设计中经常用到的技术所使用的一种思维模型。盒子模型是中一个重要的概念，理解了盒子模型才能更好的排版。标准盒子模型从上图可以看到标准盒子模型的范围包括，并且部分不包含其他部分。概述网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性，也主要是这些属性。这些属性我们可以把它...

myshell 2019-08-01 15:05 评论0 收藏0
「前端早读君」css进阶之彻底理解视觉格式化模型

摘要：视觉格式化模型是用来处理和在视觉媒体上显示文档时使用的计算规则。匿名块盒子在某些情况下进行视觉格式化时，需要添加一些增补性的盒子，这些盒子不能用选择符选中，因此称为匿名盒子。因此最好不要将其用于正式项目。今日励志不论你在什么时候开始，重要的是开始之后不要停止。前言对于部分前端工程师来讲，有时候CSS令他们很头疼，明明设置了某个样式，但是布局就是不起作用。 showImg(htt...

Eidesen 2019-08-23 14:25 评论0 收藏0
从CSS盒子模型说起

摘要：前言总括对于盒子模型，，和外边距合并等概念和问题的总结原文地址从盒子模型说起知乎专栏前端进击者博主博客地址的个人博客为学之道，莫先于穷理穷理之要，必先于读书。前言总括：对于盒子模型，BFC，IFC和外边距合并等概念和问题的总结原文地址：从CSS盒子模型说起知乎专栏：前端进击者博主博客地址：Damonare的个人博客为学之道，莫先于穷理；穷理之要，必先于读书。正文 ...

happyhuangjinjin 2019-08-29 12:54 评论0 收藏0