css height属性中的calc方法

例如父盒子是100%的高度盒子里面的head部分固定位140px 内容部分始终为剩余的全部高度 height: calc(100% - 140px); 切结"+或-"两边要有空格不然不生效…

js中没有Date.format方法的,所以在date属性中加format方法 //js格式化属性 Date.prototype.format = function (format) { var o = { "M+": this.getMonth() + 1, //month "d+": this.getDate(), //day "h+": this.getHours(), //hour "m+": this.getMinu…

css 定位属性position的使用方法实例-----一个层叠窗口

运行结果: <!DOCTYPE html> <html> <head> <title>重叠样式窗口</title> <style type="text/css"> div.window{ /*指定窗口的尺寸和边框*/ position:absolute; /*position在其他地方指定*/ width: 300px; /*窗口尺寸,不含边框*/ height: 200px; border: 3px outset…

CSS animation-timing-function 属性中的 steps() 与 step-start，step-end

steps() 设置间隔参数,可以实现分步过渡第一个参数指定了时间函数中的间隔数量(必须是正整数)第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end. steps() 的实现方法: .heart{ background-image: url('images/heart-sprite.png'); -webkit-animation: animate 1s steps(28) infinite; animation: animate 1…

CSS中垂直居中的方法

昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将div2设置行高line-height和height的值相同即可,也可以不用设置高度,因为单行文本的行高会撑开高度,其实二者就是一样的值. 但是这种方法有个不足之处,那就是如果文字内容的长度大于块的宽度时,就有一部分内容脱离了块,因为就不再是单行文本了,所以此方法只适用于单行文本. 还有一个方法…

【总结整理】js获取css的属性（内部，外部，内嵌（写在tag中））

在JS中需要获取某个元素的宽高或者是绝对定位的位置信息,通常我们会这么写: var elemWidth = elem.style.width; console.log(elemWidth); //(空字符串) 然而我们会发现什么也没获取到,这到底是什么原因? 我们仔细观察一下我们是怎么获取这些信息的.通过元素的 style 属性,获取一个关于元素样式信息的对象,在里面取我们需要的样式信息.而我们是不是理所当然的认为我们写在 style 标签内的样式,或者通过 link 引入的样式表的样式信息都存…

原生js使用getComputedStyle方法获取CSS内部属性值

在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式, 1.下面的方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在<style type="text/css">里面的样式属性值 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;…

CSS中各种各样居中方法的总结

在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居中两种:而根据所居中元素的不同,有内联元素居中和块级元素居中两种居中问题.下面开始分类整理: 一.内联元素的居中 1.内联元素的水平居中:在父元素上设置text-align:center; (为了节省空间.突出重点,每个选择器中无关紧要的样式我都会全部写在第一行,从第二行开始是关键样式~ 下同) 2…

css z-index属性使用过程中遇到的问题

z-index属性在web开发中会经常使用,其主要的作用简单的说就是把元素的position设置为absolute.fixed之后,可以调节元素在文档上的层级关系.比如经常见到的dialog,mask的实现,dialog的z-index肯定要设置的比mask大.写这篇文章的目的主要是想记录下遇到的有关z-index可设置的最大值的问题.下面先来看以下代码运行的结果: <!DOCTYPE html> <html> <head> <meta charset="…

【转】CSS z-index 属性的使用方法和层级树的概念

文章转自:CSS z-index 属性的使用方法和层级树的概念,另外加了一点自己的注释 CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念. 这个星期我们团队做了一次内部的技术分享…