盒子的内心世界 1.模型 通过CSS的眼睛 在CSS看来，HTML的所有元素都被看成了盒子：段落，标题，块引用，列表，列表项等。甚至内联元素。 盒子的组成 内容区（content）：包含内容（文本或图像） 内边距（padding）：可选的 边框（border）：可选的 外边距（margin）：可选的 示图 2.简单介绍 内容区 内容区会存放文本或图像。 在浏览器的周围，看不到上图其周...
CSS样式规则的学习是很繁琐和枯燥的，因为它不像物理、数学或者其他编程语言一样有一些基本概念、有一些基本公理或者规则，其他所有的表现都是概念在这些公里或者规则之下的逻辑游戏，CSS是有一些基本概念，但它没有说给你几条规则然后所有的表现都是在这些规则之下的任意自由组合，你要推测一个样式声明块的在页面中具体是怎样表现的，你几乎靠非常少逻辑推理去推测出来，绝大多数是你知道并记住了这种写法的声名块是具有怎样的表...
接上篇。矩形区域中各个属性的取值只有margin可以取负值，只有width和margin可以取auto关键字，border不能为百分数，其他属性都只能取正的数字或者正的百分数。其中margin和padding设置的值是一个块区域的垂直高度，这块区域的长和宽是随着内容的width和height变化而变化的。border设置的是自身的宽度，其长度也是随着相应边的长度变化而变化的。padding和border的取值是不会根据某些条件自动改变的，一旦设置就不会发生改变。marg...
今天本来打算根据自己的计划进行前端自动化的学习的，无奈早上接到一个任务需求需要新增一个页面。自从因为工作需要转前端之后，自己的主要注意力几 乎都放在JavaScript上面了，对CSS和HTML这方面其实基础真的很差，今天在写页面的时候就被浮动啊、内外边距啊这些耽误了不少时间。 反思一下，自己确实在这些基础方面的不足很多，所以今后的学习笔记主要是我在工作中遇到的一些问题和他们的解决方法。其中可能中会有JS、CSS、HTM...
盒模型是CSS的核心知识，属于那种不掌握好，在实际工作中就容易犯迷糊的知识。至于本篇文章，主要解决一个问题，那就是CSS盒模型的计算方法。至于别的知识，也算是自己回忆和复习一次。 盒模型的构成 关于盒模型的构成，算是前端的基础知识了。网络上关于这方面的知识也是多如牛毛。所以这儿我就用Chrome浏览器控制台的盒模型图。（毕竟最贴近实际开发环境） 可以看到盒模型由 margin , border , paddi...
弹性盒模型（Flexible Box）是一个CSS3新增布局模块，用于实现容器里项目的对齐、方向、排序； 弹性盒模型最大的特效在于，能够动态的修改子元素的宽度和高度，以满足在不同尺寸屏幕下的恰当布局； 下面是弹性盒模型的元素基本概念： 弹性盒模型的属性总览： flex-direction属性简介例如： flex-wrap属性简介 flex-flow属性简介flex-flow属性是flex-direction和flex-wrap两个属性的复合属性；flex-flow...
HTML在布局上, 有一个非常重要的模型, 那就是盒子模型, 在盒子模型中把标签内容理解为一个物品, 而css样式理解为包容着这个物品的盒子, 一般的块级标签都具有盒子模型的特征, 你可以在css中对这个盒子进行设置, 以达到自己布局的目的, 我这里绘制了个简图, 只写了内填充和外边距, 因为我感觉其他的属性更好用文字和代码理解. 同样的在学习这个的过程中, 要勤于代码试验, 测试, 否则是非常不便于掌握的知识. 盒子模型 首先...
首先对于之前的拖更表示抱歉，因公派，前往上海，所以耽误了几天，以后会尽量按时更新. 今天课程主要介绍盒模型的基本概念，同时告诉大家，盒模型具体元素的构成。在最后面会介绍一下定位。 今日课程预览 CSS 盒模型 概述 首先大家看到的是什么？ 有月饼和月饼盒，对么？ 所以，我们今天的课程就叫做“一个月饼盒引发的深思”。 大家首先看到的是什么？ 是不是一个盒子，很像我们中秋节的时候包装月饼的...
一、理论： 1.CSS盒模型 a.外盒尺寸计算--高度 element空间高度=内容高度+内距+边框+边距 b.外盒尺寸计算--宽度 element空间宽度=内容宽度+内距+边框+外距 c.内盒尺寸计算--高度 element高度=内容高度+内距+边框 d.内盒尺寸计算--宽度 element宽度=内容宽度+内距+边框 2.box-sizing a.content-box 默认值 b.border-box 元素维持IE传统的盒模型 c.inherit 使元素继承父元素的盒模型模式 d.此值主要目的是...
大道至简 上一章节我们学会了padding的用法，padding是为我们的文本区域添加内边距，类似于礼品盒的泡沫区域（即保护区域），那么盒子都是有外边的硬纸壳的，这在我们的web开发中会有对应的属性吗？ 答案很明显是有的，就是我们今天的主角border。请看下列代码： Border div { width: 200px; height: 200px; background-color: red; border: 5px solid orange; } bo...
CSS中一个很重要的概念是盒模型，CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里 由内容区域、内容区域周围的空间（内边距，padding）、内边距的外边缘（边框，border）和边框外面将元素与相邻元素隔开的不可见区域（外边距，margin）构成。具体如下图 浏览器中元素的宽度与其width属性值并不一致（除非没有内边距和边框）。CSS中的宽度指示的是内边距里内容区域的宽度，而在浏览器中...
× 目录 [1]版本更迭 [2]display [3]基本概念 [4]伸缩容器 [5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局。flex是flexible box的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一个模块，包括多个CSS3属性。flex布局提供一种更加有效的方式来进行容器内的项目布局，以适应各种类型的显示设备和各种尺寸的屏幕 版本更迭 f...
引子： 在谈到css定位问题的时候先来看一个小问题: 已知宽度(假如:100px)div框,水平居中,左右两边分别使用div框填充.且左右div自适应. 效果如下图: 这个问题的难点主要是浏览器宽度未知,且两边div自适应宽度. 第一种实现方法,是借助css3的新属性calc,实现代码如下: body { margin: 0; padding: 0; font-size:0;}.left_div { background-color: #62FF09; /*calc是css3属性可以动态计算,兼...
从一篇外文谈谈盒模型 声明：作为初涉前端的老菜鸟，在对知识的理解上肯定会出现些许偏差，在此先向各位看官提个醒，呵呵。我认为，理解盒子模型是学好整个CSS的关键之关键基础。本文借鉴http://www.chinaz.com/design/2010/1229/151993.shtml（翻译篇）的基础上，重新翻译了http://www.sitepoint.com/web-foundations/css-box-model/（纯英文）这篇文章，再加上自己的理解，谈一谈盒模型。 翻译外文： 对盒子模型（...
视觉格式化模型 页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将这些框布局成访问者看到的样子。 哪些因素控制了这些布局 盒的尺寸和类型 定位体系 Positioning Scheme （常规流，浮动和绝对定位） 文档树中元素之间的关系 外部信息（如：视口大小，图片的固有尺寸等） 下文讲针对性的解释这些影响布局的因素，先来解释...