1、块级元素、行内元素、文档流通过对每个盒子的外边矩、边框、内边矩、内容、位置的精确控制，CSS可以实现复杂而精准的页面布局。块级元素，这类元素默认有换行效果，典型的如div行内元素，这类元素默认没有换行效果，典型的如span文档流，HTML元素在页面上显示时，根据在源码..
分类：
Web程序 时间：
2016-09-01 00:30:02
阅读次数：
682
块级元素和行内元素： 1.块级元素总是单独占用一行，设置宽高有效，在没有设置宽高时，宽度将父元素左右撑满，高度依据本身里面的内容。 2.行内元素总是排成一行，设置宽高无效，大小为能够包容本身内容的最小宽高。 3.行内元素之间的水平margin取两者之和 4.块级元素之间的垂直margin取两者之最大 ...
分类：
Web程序 时间：
2016-09-01 00:12:40
阅读次数：
304
p、h1、或div等元素常常称为块级元素，这些元素显示为一块内容；Strong。span等元素称为行内元素，它们的内容显示在行中，即“行内框”。（可以使用display=block将行内元素转换成块元素，display=none表示生成的元素根本没有框，也既不显示元素，不占用文档中的空间）。 a、行 ...
分类：
Web程序 时间：
2016-08-31 18:26:45
阅读次数：
181
header，section，footer，aside，nav，main，article，figure 在使用的时候，需要先把这个元素变为块级元素，确保在老的浏览器里面可以使用。因为在浏览器检测到未知的标签时，会自动识别为行内元素。 初始化语句： header，section，footer，asid ...
分类：
Web程序 时间：
2016-08-31 15:38:21
阅读次数：
190
两列布局是非常常见的需求在实际项目中，实现的方式也有很多。这里提供几种实现方式和原理。供大家参考 页面基本布局如下代码所示： 父元素.main 包含两个子div，left和right。这里只是简单举个例子，所以布局很简单，只要有效果就好。 一、内联div的方式： 众所周知，html元素存在块级元素， ...
分类：
Web程序 时间：
2016-08-30 13:26:19
阅读次数：
303
css布局中定位机制主要是普通的流，也就是说按照HTML文本的顺序在窗口上从上到下、从左到右去显示，遇见块级元素就换行显示。为了更进一步的控制，我可以使用相对定位、绝对定位、固定定位以及浮动。 相对定位（position:relative）是相对于自身而言的，但会在原来的地方留出空白，所以不会影响后 ...
分类：
Web程序 时间：
2016-08-26 22:56:45
阅读次数：
203
display:block就是将元素显示为块级元素. block元素的特点是： 总是在新行上开始； 高度，行高以及顶和底边距都可控制； 宽度缺省是它的容器的100%，除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子。 display:inli ...
分类：
其他好文 时间：
2016-08-26 12:10:18
阅读次数：
125
CCS中让div等块级元素在父级元素中居中的方法： （1）div{ margin：0 auto } 该方法只能实现水平的居中，无法实现元素的垂直居中 （2）当div元素的宽高是固定的，然后设置位置为绝对位置absolute，左边框和上边框的距离设置为50%，这个50%就是指具有定位为absolute ...
分类：
Web程序 时间：
2016-08-22 23:04:23
阅读次数：
150
文档流布局的概念: 将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。 每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端。 若当前行容不下， 则另起新行再浮动。 内联元素也不会独占一行。 几乎所有元素(包括块级，内联和列表元素）均可生成子行， 用于摆放子元素。 ...
分类：
Web程序 时间：
2016-08-20 17:56:11
阅读次数：
387
某些相邻的margin会发生合并，我们称之为margin折叠 来看例子： 显示效果： margin折叠常规认知： margin折叠只发生在块级元素上； 浮动元素的margin不与任何margin发生折叠； 设置了属性overflow且值不为visible的块级元素，将不与它的子元素发生margin折 ...
分类：
其他好文 时间：
2016-08-20 16:21:08
阅读次数：
127
