盒子模型 margin 设置外边距宽度 有4个值的时候： maigin 10px 5px 15px 20px; (上、右、下、左)有3个值的时候： margin: 10px 5px 15px; (上、左右、下)有2个值的时候： magin: 10px; (代表4个值都是10px) ...
分类：
Web程序 时间：
2018-05-25 13:57:21
阅读次数：
242
深入css布局(3) — margin问题与格式化上下文 在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。 css布局篇已经讲个2篇了，前面我们深入讲解了 盒模型与box-sizing, 元素分 ...
分类：
Web程序 时间：
2018-05-25 13:48:39
阅读次数：
233
box-sizing属性让css布局更容易并且更直观。但是为什么它有效又被热爱，先让我们看下它的历史。 盒子模型历史 自从css诞生，盒子模型就这样默认的工作： width + padding + border = 元素被渲染的／实际可见的宽度 height + padding + border = ...
分类：
Web程序 时间：
2018-05-23 14:19:05
阅读次数：
250
轮播图一直都是JS的经典实现: 有以下要素: 1.html和css布局的考察 浮动, 定位等 2.Dom操作 3.定时器使用与清除 4.递归函数的使用 下面是源代码 ...
分类：
其他好文 时间：
2018-05-12 15:10:16
阅读次数：
158
块级元素与行内元素 首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ul, form, div等元素被称为块级元素，这些元素显示为一块儿内容（会自动换行），span, input 等元素称为行内元素，这两者主要区别就是块级元素会从上到下一个个垂直排列，每个自占一行 而行内元素在一行中水平排列 ...
分类：
Web程序 时间：
2018-05-12 13:51:01
阅读次数：
180
页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。 让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结 ...
分类：
Web程序 时间：
2018-05-10 15:34:47
阅读次数：
228
1、static（静态定位）： 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。参考上篇随笔。 2、relative（相对定位）： 定位为relative的元素脱离正常的文本流，但其在文本流中的位置依然存在，所以它本身并没 ...
分类：
Web程序 时间：
2018-05-07 16:43:43
阅读次数：
254
一、水平居中： (1). 行内元素的水平居中？ 如果被设置元素为文本、图片等行内元素时，在父元素中设置text-align:center实现行内元素水平居中，将子元素的display设置为inline-block，使子元素变成行内元素 <div class="parent" style=""> <d ...
分类：
Web程序 时间：
2018-05-07 13:40:21
阅读次数：
390
一、Floatfloat 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 二、Position2.1、position: staticstatic定位是HTML元素的默认值，即没有 ...
分类：
Web程序 时间：
2018-05-06 22:18:20
阅读次数：
723
在网页中，元素有三种布局模型：1、流动模型（Flow） 默认的2、浮动模型 (Float)3、层模型（Layer） 1、流动模型（Flow） 流动（Flow）模型是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 流动布局模型具有2个比较典型的特征 ...
分类：
Web程序 时间：
2018-05-06 18:55:02
阅读次数：
199
