madman0621的博客

一、position的属性值首先基本了解下position的各个属性值： 1、static：默认值。没有定位，元素在正常显示出现（它将忽略top、bottom、left、right、z-index声明） 2、relative：生成相对定位的元素，相对于其正常位置进行移动。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 3、absolu...

在使用display将元素设置为行内元素的同时(例如：inline、inline-block等)，将margin全部设置为0，padding全部设置为0的时候，我发现了元素之间居然还存在着间隙！！！？？？如下图所示：不知道哪里冒出来的这个间隙，现在给出解决方案：第一步：在这些行内元素的父元素上设置font-size设置为0；第二步：在行内元素上设置正常的字体显示大小，例如:font-siz...

目录：display属性介绍display:nonedisplay:blockdisplay:inlinedisplay:inline-block一、display属性介绍display 属性规定元素应该生成的框的类型。以下是一些关于display比较常用的属性值：值描述none元素不会显示block此元素将显示为块级元素，此元素前后会带有换行符...

目录：CSS优先级CSS优先级介绍CSS优先级计算基于类型的优先级not伪类不参与优先级计算优先级计算无视DOM树中的距离!important!important介绍什么情况下可以使用!important如何覆盖!important一、CSS优先级1、CSS优先级介绍浏览器根据优先级来决定给元素应用哪个样式，而优先级仅由选择器的匹配规则来决定。下面列表中...

目录：伪类介绍伪元素介绍区别总结一、伪类介绍CSS 伪类用于向某些选择器添加特殊的效果。二、伪元素介绍CSS 伪元素用于将特殊的效果添加到某些选择器。三、区别我们通过使用伪类 :first-child 和伪元素 :first-letter 来进行比较。1）、伪类:first-child 添加样式到第一个子元素div>p:first-child{color:re...

目录：background-size属性介绍演示代码background-size属性分析设置固定尺寸的背景图片背景图片的宽高是根据自身所属元素的宽高以百分比进行缩放背景图片扩展并覆盖填充满整个所属元素区域背景图片尺寸宽度和高度完全适应内容区域一、background-size属性介绍CSS3 的 background-size 属性能调整背景图片的大小，从而替代了用...

在CSS中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。box-sizing 属性可以被用来调整这些表现:content-b...

       background-position属性使用频率非常高，大量的网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置，不得不说它的作用非常重要，当然除了在使用雪碧图的场景外，别的某些场景也常常会使用到这个属性

一、Flex介绍Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局:.box{ display: flex;}行内元素也可以使用 Flex 布局:.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀:....

一、transform-origin属性介绍transform-origin属性表示在对元素进行变换的时候，设置围绕哪个点进行变化的。默认情况，变换的原点在元素的中心点，即是元素X轴和Y轴的50%处，如下图所示： 我们没有使用transform-origin改变元素原点位置的情况下，CSS变换进行的旋转、移位、缩放等操作都是以元素自己中心（变换原点）位置进行变换的。但很多时候需要在不同的...

在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，以下将详细说明各个属性。一、移动 translate用法：transform: translate(45px) 或者 transform: translate(45px, 150px);参数表示移动距离，单位px，一个参数时：表示水平方向的移动距离；两个参数时：第一个...

一、子元素的继承1、如果后代元素的visibility属性存在则不会继承其父元素的visibility属性值，不存在才会继承其父元素的visibility属性值。例如：父元素的visibility为hidden但是子元素的visibility为visible则子元素依旧可见；子元素visibility不存在则子元素继承父元素的visibility值为hidden。 2、父元素的display...

问题使用transition对div的隐藏与显示进行过渡，但是transition完全失效，没有过渡效果。See the Pen VGWKWm by madman0621 (@madman0621) on CodePen.div元素使用display:none(block)实现隐藏与显示的时候，会与transition属性冲突，导致过渡效果无效。display会破坏transiti...

目录：水平居中1、使用margin:0 auto配合元素的width(需要固定元素宽度)2、使用绝对定位配合margin(需要固定元素宽度)3、块级父元素让行内元素居中4、利用relative定位与行内样式5、通过transform进行设置6、通过flex-box垂直居中1、通过line-height(需要固定父元素高度)2、使用绝对定位搭配margin(需要固定元素...