zhangq0123的博客

1.元素水平垂直居中 利用CSS进行元素的水平居中，比较简单，行内素设置其父元素的text-align center，块级元素设置其本身margin为0 auto即可。而垂直居中要按情况而定。//方法一： <div class="child" style="width:40%;height:20%;background:#3FC430; position:ab

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同。标准盒子模型：从上图可以看到标准 w3c 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。ie 盒子模型

大多数网站可以使用 或者 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。注： 虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。 1 .  HTML 布局 - 使用 元素div 元素是用于分组 HTML 元素的块级元素。下面的例子使用五个 div 元素来创建

前言：在一个长宽固定的div容器中，多行文字和英文句子都默认自动换行。不过，对于英语单词而言，会有一些微妙的变化！//没有添加word-wrap:break-word和word-break:break-all时 I am a good boy, hahahahhahahahahahaha everyone likes me...//添加word-wrap:break

//代码如下：上层 　　子层猿猿们理想中的效果是父层和上部层贴边显示，子层距离父层顶部有40px的距离，在ie中正常，但是在ff中却出现问题，子层和父层贴边了，而父层和上部层却间隔了40px。原因如下：当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用与父元素。也就是说因为子层是父层的第一个非空子元素

前言：所有现代浏览器下默认字体尺寸是16px，不过可以人为的把body里面定义font-size:12px;（把浏览器默认16px改小了. 即：12px）。1. PX像素(pixel)：相对长度单位，像素PX是相对于显示器屏幕分辨率而言的。px是你屏幕设备物理上能显示出的最小的一个点，这个点不是固定宽度的，不同设备上点的长宽、比例有可能会不同。假设：你现在用的显示器上1px宽=

网页布局（layout）是CSS的一个重点应用。注：布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。下面介绍Flex布局：Flex布局将成为未来布局的首选方案，其浏览器的支持情况如下：一、Flex布局是什么？Flex是Flexible Box的缩写，意为"

CSS中三角形在网页中比较常见，以前是图片，不过现在基本上都是通过CSS可以完成，实现比较简单，我们可以看一组简单的三角形效果:css代码如下 ：.triangle { width: 0; height: 0; border-top: 20px solid #EEB422; border-right: 20px solid #C0FF3E; bo