文档流 将窗体自上而下分成一行行， 并在每行中按从左至右的顺序排放元素，即为文档流。 每个非浮动块级元素都独占一行， 浮动元素则按规定浮在行的一端。 若当前行容不下， 则另起新行再浮动。 内联元素也不会独占一行。 几乎所有元素(包括块级，内联和列表元素）均可生成子行， 用于摆放子元素。 有三种情况将使得元素脱离文档流而存在，分别是浮动，绝对定位， 固定定位。 但是在IE中浮动元素也存在于文档流中（还让我觉...
flex实现子块的完美居中 方案 父块使用display:flex属性,子块margin自适应即可实现 代码 index.html 块状元素垂直居中(已知高度) *{margin: 0;padding: 0;} .parent{ display: flex; height:500px; background: #03A1FA; } .child{ width: 100px; height: 100px; margin: auto; background: #BB3713; } /* 这个依赖于设置“margin”值为“auto”值，自动获取伸缩容器中剩余的空间。所以设置垂直方向margin值为“au...
在很多网站中，我们都可以看到这样的效果，当用户鼠标进入某一个元素后，下方就会有遮罩层上浮动画，如图： 今天我们就用hover伪类加上css3实现，没有使用任何JS #d1{ height: 100px; position: relative; width: 100px; overflow: hidden; } #d1:hover > #d3{ transition: transform 0.5s ease; transform: translateY(-100%); } #d2{ background: red; heig...
但一个元素不设置height时，它的默认值是 auto，浏览器会计算出实际的高度。 但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时，该怎么办呢？ 从 MDN 的可以查到 CSS 支持动画的属性中的 height 属性如下： height ：yes, as a length, percentage or calc(); // 当 height 的值是 length，百分比或 calc() 时支持 CSS3 过渡。 所以当元素 height : auto 时，是不支持 CSS3 动画的。 除了通过 JS 获取精确的...
例如： .screen3.on .text5 { animation: 1.4s 3s ease-out forwards show, 1.6s 4.4s ease forwards text5, 1.2s 6s linear infinite wobble; -webkit-animation: 1.4s 3s ease-out forwards show, 1.6s 4.4s ease forwards text5, 1.2s 6s linear infinite wobble; } @keyframes show { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes show { 0% { opacity: 0; } 100% { ...
CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after; 那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了::first-letter,::first-line,::before,::after另外他还增加了一个::selection。 在css3中，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。 ::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式，我们就可以使用这...
CSS3实现的div元素水平运动指定距离:本章节分享一段，它实现了利用CSS3让div元素水平运动一段距离。代码实例如下: 蚂蚁部落 div{ width:100px; height:100px; background:green; position:relative; animation:theanimation 5s forwards; -webkit-animation:theanimation 5s forwards; } @keyframes theanimation{ 0% {left:0px;} 100% {left:200px;} } @-webkit-keyframes theanimation{ 0% {left:0...
css3实现元素的伸缩效果代码实例:本章节分享一段代码实例，它利用css3实现了元素的伸缩效果。这里为了进行演示，结合了javascript代码。代码实例如下: 蚂蚁部落 .slider{ overflow-y:hidden; max-height:500px; /* 最大高度 */ background:pink; height:200px; width:200px; /* Webkit内核浏览器：Safari and Chrome*/ -webkit-transition-property: all; -webkit-transition-...
边框 和边框相关的属性如下。 border-width 用于设置边框的宽度，可选择包括： 1）：将边框宽度设为以CSS度量单位（如em、px、cm）表达的长度值； 2）：将边框宽度值设为边框绘制区域的宽度的百分数； 3）thin、medium和thick：将边框宽度设为预设宽度，这三个值的具体意义是由浏览器定义，三个值代表的宽度一次增大，边框宽度的默认值是medium。 border-style 用于设置绘制边框使...
大家都知道每个浏览器对HTML元素渲染都不一样，比如说“button”，在chrome和ff中，渲染出来的效果都是不尽相同的。这样一来就有 了今天这个思路，利用浏览器的对元素的默认渲染风格，我们可以使用“appearance”属性对任何元素的渲染风格改变，最简单的来说，我要把“a”链 接默认显示成“按钮”风格，那么我们可以使用“appearance”设置为“button”。 “appearance”功能听起来蛮大的，不过可惜的是，目前各个浏览器厂商各自为...
body{ font-family: cursive; font-size: 14px; } .left{ width:150px; height: 50px; background: #fff; position: relative; margin: 50px 0 0 50px; line-height: 50px; text-align: center; border: 2px solid green; border-...
css3实现元素水平垂直居中，代码如下： 无标题文档html,body{ width:100%; height:100%; display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: center; display: -moz-box; -moz-box-orient: horizontal; -moz-box-pack: center; -moz-box-align: center; display: -o-box; -o-box-orient: horizontal; -o-box-pack: center; -o-...
Web大前端时代之：HTML5+CSS3入门系列： http://www.cnblogs.com/dunitian/p/5121725.html 1. 结构元素 可以理解为 语义话标记 ，比如：以前这么写 现在偷懒写： 1. header 头部区域，包含对主页的介绍 标签定义文档的页眉（介绍信息） 2. nav 导航系列 标签定义导航链接的部分。 3. section 一块区域 标签定义文档中的节（section、区段）。比如章节、页眉、页脚...
本篇文章给大家带来的内容是关于css3如何实现元素环绕中心点布局（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。效果如图：代码实现：<style>*{margin: 0;padding: 0;box-sizing: border-box;}.surround-box,.center-point{position: absolute;top: 50%;left: 50%;width: 20px;height: 20px;margin-left: -10px;margin-top: -10px;border-radius: 50%;background-color: #000;}.circle{/* 这里一...
本篇文章给大家带来的内容是关于CSS3中伪元素实现气泡框的代码（before、after），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。气泡框的原理其实也就是普通边框+三角形，CSS实现三角形也是利用了border属性 1、三角形是实心的html代码：<div class="wrap"></div>css代码：.wrap{position: relative; width: 600px; height: 400px; border: 10px solid #3377aa; b...