随笔分类 - css
摘要：目录 一、BFC与IFC 1.1、BFC与IFC概要 1.2、如何产生BFC 1.3、BFC的作用与特点 二、定位 2.2、relative 2.3、absolute 2.4、fixed 2.5、z-index属性 2.6、菜单 2.7、:target伪类 三、浮动 3.1、float取值 3.2、
阅读全文
摘要：塌陷问题 当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。 ①垂直并列 首先设置两个DIV,并为其制定宽高 1 /*HTML部分*/ 2 <body> 3 <div class="box1">box1</div> 4 <div class="box2">box2</div> 5
阅读全文
摘要：固定高宽div垂直居中 如上图，固定高宽的很简单，写法如下： 不固定高宽div垂直居中的方法 方法一（此div元素应是 inline-block）： 用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待
阅读全文
摘要：什么是伪元素（Pseudo element）？ 伪元素不是真正的元素，不存在与文档之中，所以js无法操作他。那为什么叫他“元素”？因为我们可以对其进行跟元素几乎无差别的操作。 伪元素有哪些？ before,after,first-letter,first-line。 我们为什么需要伪元素？ 伪元素是
阅读全文
摘要：(1)有边框的三角形 我们来写下带边框的三角形。 如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。 最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成
阅读全文
摘要：一、简要介绍 css3最喜欢的新属性之一便是flex布局属性，用六个字概括便是简单、方便、快速。 flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持： 其中在web
阅读全文
摘要：一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动
阅读全文
摘要：一、选择器 1、属性选择器： p[index]{background:red} //只使用属性名，但没有确定任何属性值 p[index=1]{background:red} //指定属性名，并指定了该属性的属性值 p[index~=pre]{background:red} //指定属性名，并且具有属
阅读全文
摘要：1、transiition过渡:样式改变就会执行transition （1）格式：transiition：1s width linear,2s 1s height; （2）参数： transition-property 要运动的样式 （all || [attr] || none） transitio
阅读全文
