实现元素垂直居中
摘要:1 已知元素的高度 父元素 position:relative 子元素: position: absolute; left: 50%; top: 50%; margin-top: -100px; margin-left: -100px; 2 不知道子元素的高度: 父元素 position:relat
阅读全文
posted @
2020-07-07 15:17
半夏微澜ぺ
阅读(187)
推荐(0) 编辑
margin padding width height left top right bottom 百分比
摘要:当元素的margin padding为百分比时,相对的是距离当前元素最近的父元素的宽度而言(不包含 border padding margin的值,如果父元素没有宽度,则实际宽度还包括父元素的margin负值); 当元素的没有设置宽度/高度时,margin负值会改变元素的宽度/高度,如果设置有宽度/
阅读全文
posted @
2020-05-11 16:02
半夏微澜ぺ
阅读(197)
推荐(0) 编辑
css3中新增的背景属性和文本效果
摘要:css3中新增的背景属性: background-image background-size background-origin background-clip background-image css3中可以通过background-image属性添加背景图片。不同的背景图像和图像使用逗号隔开,所
阅读全文
posted @
2020-04-14 17:06
半夏微澜ぺ
阅读(366)
推荐(0) 编辑
实现页面变成灰色色调
摘要:1 css实现 body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms-filter: grayscale(100%); /*ie9*/ -o-filter
阅读全文
posted @
2020-04-10 15:54
半夏微澜ぺ
阅读(350)
推荐(0) 编辑
左边宽度固定,右边宽度自适应的三种写法
摘要:html 公用css: 1 利用css3 flex css: 2 左边浮动 3 左右都浮动 使用calc计算右边的宽度 使用css3 flex,还可以实现,左边的高度随右边的高度而变化;
阅读全文
posted @
2019-05-09 18:32
半夏微澜ぺ
阅读(2622)
推荐(0) 编辑
translate 实现元素垂直居中
摘要:css 原理: 定位span元素,left:50%; top:50%; 元素的参考点在元素的左上角,实现完全居中,需要再向上 向左移动元素高度 宽度的一半,使用transform:translate(-50%, -50%)实现;
阅读全文
posted @
2019-04-02 16:42
半夏微澜ぺ
阅读(407)
推荐(0) 编辑
css3 翻起页脚
摘要:html <div class="demo2"> <img src="images/1.jpg"> </div> css .demo2{ width: 300px; height: 300px; position: relative; margin: 100px auto; } .demo2 img
阅读全文
posted @
2019-03-29 11:25
半夏微澜ぺ
阅读(301)
推荐(0) 编辑
HTML CSS 特殊字符表
摘要:HTML有许多特殊的字符,您对此有多少了解?平时在WEB制作中,您又有用到多少?或者说你在平时使用之时,是否也会碰到,有许多特殊字符要如何打印出来?比如说“笑脸”,比如说“版权号”。要是你用时忘记了这些特殊字符,不要紧,请记住今天这个地址,你就随时可以查到这些特殊字符的表示方法。 简单的介绍一下其使
阅读全文
posted @
2017-04-27 18:28
半夏微澜ぺ
阅读(6984)
推荐(2) 编辑
sass 安装与各种命令
摘要:css 是一种编程语言,可以用来开发网页样式,但是却不能编程,没有变量,没有条件语句,于是就有了“css预处理器”, 它的原理就是:利用编程语言进行网页样式设计,然后再编译成正常的css文件; sass是用ruby语言写的,虽然没有什么语法关系,但是使用sass需要先安装ruby再安装sass 假如
阅读全文
posted @
2017-03-01 11:48
半夏微澜ぺ
阅读(1134)
推荐(0) 编辑
css content
摘要:before after demo 1 添加描述信息 2 也可以显示元素的某些属性 注意:当使用attr()获取标签属性名的时候,千万不要添加引号! 3 使用计数器创建号码内容 4 为多语言内容插入正确的引号 不同的语言使用不同的引号字符。比如英文的引号就是"",而中文引号就是“”。使用conten
阅读全文
posted @
2017-02-23 11:55
半夏微澜ぺ
阅读(199)
推荐(0) 编辑
清除浮动的方法总结
摘要:具有主动包裹性的元素可以清除内部元素浮动造成的影响 具有主动包裹性的元素有:inline-block absolute float属性的元素 被动包裹性的元素:overflow zoom(IE6/7 zoom有包裹性,IE8没有)(也可以清除内部元素造成的影响) 但是IE6对overflow属性的理
阅读全文
posted @
2017-02-22 10:52
半夏微澜ぺ
阅读(166)
推荐(0) 编辑
body和html
摘要:1 关于html和body的背景颜色的一些变现 当给body设置背景颜色时(html没有背景颜色),这时body被当做根节点被浏览器俘获,浏览器界面的背景颜色就为body的background颜色;当html设置背景颜色时,这html被当做根节点被浏览器俘获,浏览器界面的背景颜色就为html的bac
阅读全文
posted @
2017-02-20 14:59
半夏微澜ぺ
阅读(300)
推荐(0) 编辑
css 实现元素四角图片样式,元素的大小不定
摘要:demo 效果 css html 素材: 简化背景图片 效果 css html 总结来自:http://www.zhangxinxu.com/wordpress/2009/09/%E6%90%9C%E7%8B%90%E7%99%BD%E7%A4%BE%E4%BC%9Apopup%E5%AF%B9%E
阅读全文
posted @
2017-02-09 14:26
半夏微澜ぺ
阅读(1701)
推荐(0) 编辑
实现多行为本垂直居中
摘要:方法总结: 高度固定,内部文字不定,实现文字垂直居中 1 使用table html css 2 使用display:table html css 3 利用line-height实现多行文本垂直居中 html css 高度不固定实现多行文本垂直居中 html css
阅读全文
posted @
2017-02-08 16:46
半夏微澜ぺ
阅读(213)
推荐(0) 编辑
实现表单元素与文字的居中对齐
摘要:五种解决方案,有三个方案没有使用任何hack,且IE6,IE7,Firefox,chrome浏览器下表现都很好的,有一种方案使用了一个IE hack,但成本较低,各个浏览器表现良好。还有一种方案,代码成本很低,但在chrome浏览器下文字稍微偏上,使用input类型选择器,或chrome hack可
阅读全文
posted @
2017-02-08 11:29
半夏微澜ぺ
阅读(1357)
推荐(0) 编辑
charCode 表示空格 实现中文对齐
摘要:             中文字体都是等宽的,一个全角空格的宽度就是一个普通中文的宽度。所以,上面的demo中 空格换成全角空格也是可以滴! 但是,我们不能直接在页面中打全角空格,因为在大多数编辑
阅读全文
posted @
2017-02-07 11:38
半夏微澜ぺ
阅读(717)
推荐(0) 编辑
【position】
摘要:background-position 定位的position的区别 background-position 相对的位置是(容器的宽度-子元素的宽度) 当子元素的宽度大于容器的宽度 position:absolute 相对的位置是(容器的宽度)
阅读全文
posted @
2017-02-06 10:56
半夏微澜ぺ
阅读(128)
推荐(0) 编辑
ie7 总结
摘要:1 ie7 对部分属性选择器严重区分大小写 在HTML中,属性名,例如id, title之类是不区分大小写的,CSS中的选择器也应该是如此。但是IE7对属性名是严格区分大小写的! 2 关于属性选择器,IE7还有一个矫情的地方,就是部分[attr=val]的选择器,如果前面没有标签选择器或类名选择器等
阅读全文
posted @
2017-01-20 11:31
半夏微澜ぺ
阅读(142)
推荐(0) 编辑