盒子模型 CSS中有一种基础设计模式叫盒模型，盒模型定义了Web页面中的元素如何来解析。 在盒模型中主要包括width、height、border、background、padding和margin这些属性，而且他们之间的层次关系可以相互影响。 w3c的标准盒子模型 和 IE的传统盒子模型的区别 标 ...
分类：
Web程序 时间：
2018-07-01 00:31:27
阅读次数：
222
总结：实现该页面初衷是为了能记住元素周期表的每个元素及含义，以及使用场景。在布局方面，使用了ul和ol列表格式，弹性盒模型调整样式，其实若把这些元素看成一个个表格显示更方便table配合tr、td更容易实现，弹性和模型都不需要技能实现。 ...
分类：
Web程序 时间：
2018-06-18 17:06:09
阅读次数：
1731
1 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？ 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin 低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin 2 box-sizin ...
分类：
Web程序 时间：
2018-06-08 18:05:52
阅读次数：
199
弹性盒属相文档详细介绍 display:flex; 声明本元素是弹性盒 容器 如果目标元素是行内元素 使用 display:inline flex; flex direction |取值|描述 |: : |: : |: :| |row| 默认值 ,弹性盒子元素按X轴方向顺序排列 |row rever ...
分类：
其他好文 时间：
2018-06-02 20:02:37
阅读次数：
158
介绍： flex布局，即是Flexible Box的缩写，即是“弹性布局”或者“弹性盒模型”。 flex的指定：任何一个容器都可以指定为Flex布局 anyContainer{ display:flex; } 行内元素也可以指定为flex布局：将display取值改为inline-flex，行内的弹 ...
分类：
其他好文 时间：
2018-06-01 19:14:21
阅读次数：
204
对于Web开发者来说，网页布局一直是个比较重要的问题。 Web 布局主要经历了以下四个阶段： 1、table表格布局； 2、float浮动及position定位布局； 3、flex弹性盒模型布局，革命性的突破，解决传统布局方案上的三大痛点 “排列方向”、“对齐方式”，“自适应尺寸”。是目前最为成熟和 ...
分类：
其他好文 时间：
2018-05-30 15:38:39
阅读次数：
168
在使用 display:flex 的弹性盒子时，用到flex-grow:2 时不生效，只需在flex-grow:2 的前面增加一行css: width:0 即可 <div style="display:flex;"> <div style="width:0;flex-grow:2"></div> < ...
分类：
其他好文 时间：
2018-05-18 16:50:21
阅读次数：
785
一、在需要使用弹性盒子的容器上添加属性：display:flex 或者 display:inline-flex; 二、在父容器上添加flex-direction设置子元素主轴方向： 不写默认值是X轴从左到右 row:X轴从左到右 row-reverse X轴从右到左 column Y轴从上到下 co ...
分类：
其他好文 时间：
2018-05-15 10:37:23
阅读次数：
154
|-弹性盒子|--定义弹性盒子 display：flex|--定义子元素的排列方式 flex-direction|--定义子元素的换行方式 flex-wrap|--定义子元素的对齐方式| 横向对齐 justify-content| 纵向对齐 align-intems |-媒体查询|--@media ...
分类：
其他好文 时间：
2018-05-13 23:01:42
阅读次数：
121
将这些添到css文件中基本上能满足页面弹性盒子的需求 /*定义弹性布局盒子*/ display：{ } /*定义子元素排列*/ ...
分类：
其他好文 时间：
2018-05-12 18:28:01
阅读次数：
468
