Msy_yyy的博客

CSS3中的transition属性详解 一、语法transition: property duration timing-function delay transition属性是个复合属性，她包括以下几个子属性：transition-property ：规定设置过渡效果的css属性名称transition-duration ：规定完成过渡效果需要多少秒或毫秒transition-timing-function ：指定过渡函数，规定速度效果的速度曲线transition-d

CSS布局单栏布局一栏布局一栏布局（通栏）两列自适应布局1. float+overflow:hidden2. Flex布局3. Grid布局三栏布局1. 浮动布局2. 绝对定位3. Flex布局4. Table布局5. Grid布局圣杯布局1. Flex布局2. Float布局3. 绝对定位4. Grid布局5. float布局(全部float:left)双飞翼布局品字布局非全屏居中版全屏版单栏布局一栏布局一栏布局：header,content 和 footer 等宽的单列布局布局实现：先通过对

浮动布局简介优点清除浮动的方式简介元素浮动以后会脱离正常的文档流。当元素浮动以后可以向左或向右移动，直到它的外边缘碰到包含它的框或者另外一个浮动元素的边框为止。优点在图文混排的时候可以很好的使文字环绕在图片周围可以设置宽高。注意：float与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题清除浮动的方式添加额外的标签，标签设置clear

目录一、标准文档流1. 定义2. 微观现象二、脱离文档流1. 浮动2. 绝对定位3. 固定定位一、标准文档流1. 定义一个“默认”状态。文档流指的是元素排版布局过程中，**元素会自动从左往右，从上往下的流式排列。**并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。2. 微观现象（1）空白折叠现象。比如，如果我们想让img标签之间没有空隙，必须紧密连接。<img src="img/00.jpg"/><img src="img/02.jpg"/>若是以下没

目录水平居中行内元素宽度确定的块级元素宽度未知的块级元素垂直居中纯文字类水平居中行内元素行内元素的父级元素设置text-align:center<style> .parent { text-align: center; }</style> <div class="parent"> <span>Hello world!</span></div>宽度确定的块级元素使用marg

知识点目录1. link和@import的区别2. 盒模型（box-sizing）3. 选择器优先级4. 关系选择器5. display常用属性6. display：none 和 visibility：hidden的区别7. em和rem的区别8. 外边距折叠问题9. z-index 多个元素层叠顺序10. 优雅降级 和 渐进增强1. link和@import的区别均为外部引用CSS文件：<link rel="stylesheet" href="xx.css" type="text/css"