网站链接：
我爱捣鼓
css margin作为一个在平常工作中高频出现的属性，其合并规则和负值的使用却总是让人头大，本文就margin的负值和重叠进行梳理。 1.display对margin的影响 当元素的display属性不同时，margin在元素上的表现形式也不同 【1】display:block 四个方向的margin…
css mix-blend-mode 属性 css mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。 我们通过一个实例来看看mix-blend-mode属性如何实现文字反色效果?<html><head><title>css mix-blend-mode如何实现文…
calc函数 calc函数是css中提供的一个用来计算属性值，通过calc函数我们可以设置诸如width，height等一系列属性的值。换句话说，calc函数把一些简单的js计算挪到了css中了，把布局运算交给了浏览器，减少了js的负担。 calc函数可以通过 +,-,*,/ 四则运算，下面我…
vh是什么单位？ vh: 相对于视窗的高度, 视窗被均分为100单位的vh; vw: 相对于视窗的宽度, 视窗被均分为100单位的vw;min-height min-height 属性设置元素的最小高度。 该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高，但不能比其…
css中max-width和max-height属性在ie浏览器中不起作用，这种兼容问题应该如何解决呢？我们具体来看看代码<!DOCTYPE html><html><head><meta charset="utf-8"> <title>css max-height兼容性问题如何解决?www.woaidaogu.com</…
本来不使用iframe用div来实现内容的滚动效果，用到了overflow:auto，但不知道什么原因出不来滚动效果，下面是具体页面代码：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>max-height overflow:auto 不起作用的问题…
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>css margin负数的作用-www.woaidaogu.com</title> <style> div{ width: 400px; height: 200px; borde…
什么是margin塌陷？ 当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。 垂直之间塌陷的原则是以两盒子最大的外边距为准。<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoo…
大家都知道list-style-type是用来设置一些不同的列表样式，那么怎么通过list-style-type设置图片小图标呢？我们来看看具体是如何实现的？<!DOCTYPE html><html><head><meta charset="utf-8"> <title>list-style-type小图标图片怎…
list-style-type属性的作用 list-style-type属性用于设置列表项标记的类型。list-style-type 属性都能设置什么类型呢？值描述none无标记。disc默认。标记是实心圆。circle标记是空心圆。square标记是实心方块。decimal标记是数字。decimal-leading-zero0开头的数字标…
line-height 表示里面假如需要输入文本，则这个就是给这个文本的空间大小，相当于 word 文档中的行高；举例说明<!DOCTYPE html><html><head><meta charset="utf-8"> <title>CSS属性中line-height与height的区别-www.woaida…
今天我们使用css实现图片从一端移动到另一端的动画<!DOCTYPE html><html><head><meta charset="utf-8"> <title>css实现图片从一端移动到另一端的动画-www.woaidaogu.com</title> <style> div{width:100px;height:10…
我们今天来用div+css制作的一个标准html页面，直接看代码：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>div+css制作的一个标准html页面-www.woaidaogu.com</title> <style>* { box-sizing: borde…
有时我们加载的页面内容比较大比如图片，就会用上加载进度条，加载完成显示给用户，这样比较人性化，一般都会通过js、flash等方式来实现，今天我们就来说说如何使用css样式来实现进度条：<!DOCTYPE html><html><head> <meta charset="UTF-8…
有时我们为了让多文本内容看上去更美观易于阅读，会希望把内容分成几个列去显示，这里我们需要使用css 的column-count属性指定某个元素应分为的列数。以下面的内容为例，我们将《木兰诗》分为三列去显示，是不是更容易阅读了呢！<!DOCTYPE html><html><he…
rem是什么？ rem 是根em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。 rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。 em是什…
css中的var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。那么它针对不同的浏览器兼容性怎么样呢？ 浏览器支持 表格中的数字表示支持该函数的第一个浏览器版本号。 谷歌 49.0 IE 15.0 …
文字卡片效果使用css样式来实现不是很难，下面我们就看看这种效果具体如何实现？<!DOCTYPE html><html><head><meta charset="utf-8"> <title>css样式实现文字卡片效果-www.woaidaogu.com</title> <style>div.card {…
图片相框效果是我们在设计网页时经常用到的，以往我们都会ps去给图片处理上相框效果，那么今天我们就来看看通过css样式代码如何实现图片的相框效果，我们直接看例子：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>…
css圆角边框的水平半径和垂直半径 对于正圆，我们基本上很少提“水平半径”和“垂直半径”，因为，半径都是一样长。但是，对于标准椭圆，那就不一样了，因为存在最长半径和最小半径。在web中，圆角的水平半径指的就是椭圆的水平半径，垂直半径就是椭圆下图所示的垂直…
