为您找到搜索结果：1786个
css行高line-height的用法
一、line-height语法 line-height属性的具体定义列表如下：语法：line-height:normal|<实数>|<长度>|<百分比>|inherit说明：line-height属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height与font-size的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。可能的值： 值说明normal默认,设置合理的行间距。number设置数字，此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数length设置固定的行间距。%基于当前字体尺寸的百分比行间距。inherit规定应该从父元素继承line-height属性的值。 二、line-height中顶线、中线、基线、底线的实例说明 HTML代码 复制<!DOCTYPEhtml><html><head&g...
css项目列表如何水平放置
列表项目默认分行排列，那么将列表项设置浮动就可以实现水平放置1li{float:left;}示例如下：创建Html元素123456<ul> <li>itemlist-1</li> <li>itemlist-2</li> <li>itemlist-3</li> <li>itemlist-4</li></ul>设置css样式12ul{width:500px;height:50px;line-height:50px;padding:10px 25px;border:4px solid #ebcbbe;}li{padding:0 20px;float:left;}观察显示效果...
***HTML +CSS 总结与归纳
一、首先W3C标准结构、表现、动作 与 html、css、javascript相对应，它本意是结构表现分离，而且按照html规范编写结构。标签方面：-所有标签都要小写、关闭、并且合理嵌套，id不能重复-标签要有属性，属性必须有值，并且用“”表示-img标签不能忽略alt属性-表格标签不适用height属性-尽量减少ifream的使用会影响浏览器响应速度，虽然在html5中也能使用ifream内容模型：-body、form、blockquote仅能包含块级元素-文本、图像、链接等内联元素不能直接暴露在body标签中，必须用其他标签包裹-内联元素不能包含块级元素其他方面：-特殊字符用编码表示番外：初学者的误区：1、div是万能的！2、table是丢人的！3、为标准而标准1、div严格意义上称作容器，大家有一些页面的装饰可以通过嵌套div来实现，但是千万不能整个页面全都用div来编写，很多标签是有特定含义的，比如说h1~h3，p，strong等，在html5中就更加语义化了比如，footer、head、nav、article、section等标签，...
****CSS各种居中方法
水平居中的text-align:center和margin:0auto 这两种方法都是用来水平居中的，前者是针对父元素进行设置而后者则是对子元素。他们起作用的首要条件是子元素必须没有被float影响，否则一切都是无用功。margin:0auto也可以被写成margin:0auto0auto。不能理解的童鞋们可以自己去找找关于css缩写的内容。 垂直居中的line-height 什么？！margin在垂直居中里不起作用了？显然事情确实如此，我们仅有margin:0auto的用法而没有auto0的情况。至于line-height，他也是作用在父元素上，当他的值等于父元素的height值时，内部的文字就会自动的垂直居中了。此处好像仅仅只能是文字而已，遗憾。 万能的position大法 这个方法可以说真的是万能的。当你为一个元素无法居中而困扰的时候，可以果断的使用他，而且几乎没有后遗症，绝对是前端工程师们居家旅行必备的手段之一。 具体的做法很简单，首先给父元素写上positon:relative，这么做是为了给子元素打上positio...
CSS3 background-size 属性值：cover
规定背景图像的尺寸：div{background:url(img_flwr.gif);background-size:80px60px;background-repeat:no-repeat;}background-size属性规定背景图像的尺寸。默认值：auto继承性：no版本：CSS3JavaScript语法：object.style.backgroundSize="60px80px"background-size:length|percentage|cover|contain;值描述测试length设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为"auto"。测试percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为"auto"。测试cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。测试contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。测试...
响应式web设计之CSS3 Media Queries
开始研究响应式web设计，CSS3MediaQueries是入门。MediaQueries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。那么，MediaQueries是如何工作的？两种方式，一种是直接在link中判断设备的尺寸，然后引用不同的css文件：<linkrel="stylesheet"type="text/css"href="styleA.css"media="screenand(min-width:400px)">意思是当屏幕的宽度大于等于400px的时候，应用styleA.css在media属性里：screen 是媒体类型里的一种，CSS2.1定义了10种媒体类型and 被称为关键字，其他关键字还包括 not(排除某种设备)，only(限定某种设备)(min-width:400px) 就是媒体特性，其被放置在一对圆括号中。完整的特性参看 相关的Mediafeatures部分<linkrel="styl...
***CSS魔法堂：选择器及其优先级
一、前言 首先看看一道阿里这期网申的题目吧！1.找出下面优先级相同的选择器 A.img.thumb:after B.[data-job="frontend"]::first-letter C.#main::before D.[type="checkbox"]:checked E.ul#shop-list 二、回顾选择器类型 html片段<body><divid="content"><div>Helloworld</div><divclass="block-end">EOF</div></div></body> 基本选择器 1.元素（类型）选择器div{color:red;} 2.类选择器.bloc...
CSS font-family 属性
为段落设置字体：p{font-family:"TimesNewRoman",Georgia,Serif;}亲自试一试IEFirefoxChromeSafariOpera 所有主流浏览器都支持font-family属性。注释：任何的版本的InternetExplorer（包括IE8）都不支持属性值"inherit"。font-family规定元素的字体系列。font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。有两种类型的字体系列名称：指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"提示：使用逗号分割每个值，并始终提供一个类族名称作为最后的选择。注意：使用某种...
***CSS总结-原创
CSS规则 第一个是：选择符。和jquery的选择器是一个意思大括号是：申明块里面KV是：属性和属性值分号是结束符类别选择符(器)p.red的意思，就是对p标签中类为red的进行CSS作用ID选择符 ID选择符（器）#是标示P#bold标示，对p标签中ID为bold的进行CSS作用 群选择符（器）用逗号隔开即可，可以掺杂类选择，ID选择符 CSS颜色属性 背景颜色属性 盒子模型Padding(填充)，内边距Margin:一个元素和另一个元素之间的边框距离，外边距 ...
***CSS里有哪些常见的块级元素和行内元素以及其区别？
根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。 div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；与之相反，像“span”“a”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。区别：块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;...
使用html+css+js实现简易计算器
使用html+css+js实现简易计算器，效果图如下： html代码如下：1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<metaname="viewport"content="width=device-width,initial-scale=1.0">6<metahttp-equiv="X-UA-Compatible"content="ie=edge">7<title>calculator</title>8<linkrel="stylesheet"type="text/css"href="style.css">9<scripttype="text/javascript"src="contain.js"></script>10<title>Document</title>11</head>12<body>13<divc...
前端js,css文件合并三种方式,bat命令
前端js,css文件合并三种方式,bat命令前端js文件该如何合并三个方式如下：1.一个大文件，所有js合并成一个大文件，所有页面都引用它。2.各个页面大文件，各自页面合并生成自己所需js的大文件。3.合并多个共用大文件，根据实践情况合并出多个共用js文件，每个页面引用多个共用大文件。合并两个目的：1.为了减少请求数。2.代码安全考虑（文件分得越多，越容易被人看清）。PS：不是压缩混淆，只是合并windows系统下的cmd里的copy命令，它虽然是个复制的功能，但实则也是可以实现合并文件的需求，下面就看下这句代码：copya.js+b.js+c.jsabc.js/b通过copy命令将a.jsb.jsc.js合并为一个abc.js，最后的/b表示文件为二进位文件，copy命令的其它参数可以在cmd里输入copy/?学习。windows本身就可以完成我们的需求，也不用安装什么其它工具了，下面我们要做的就是将这一切操作更简单。在项目存放JS的文件夹下新建一个txt文件，将代码复制进去，并修改需要合并哪些文件，最后保存并将tex修改为bat后缀，如：delcommon-all.jscopyjq...
css去掉a标签点击后的虚线框,outline,this.blur()
css去掉a标签点击后的虚线框,outline,this.blur()outline是css3的一个属性，用的很少。声明，这是个不能兼容的css属性，在ie6、ie7、遨游浏览器都不兼容。outline控制的到底是什么呢？当聚焦a标签的时候，在a标签的区域周围会有一个虚线的框，这个框不同于border的是，它是不占有任何宽度的。当你取消焦点的时候，这个虚线框就会自然消失。你可以通过遨游、火狐或者ie的几个版本看到。而safari、opera、goole浏览器等本身就不支持这个效果，所以看不到。这个就是a标签被聚焦后出现了虚线框，也就是outline;基本上这个是没有用的效果，大多数情况下我们会希望不要出现这种效果，于是给a标签设置outline:none;很遗憾的是，ie6、7和遨游浏览器里都不能实现，只有ff,ie8在加了outline:none后会取消聚焦的虚线框。所以我说这个Outline属性基本就是一个费属性。怎么样才能取消这个虚线框呢？常用方法有三种：1：在a标签里加入js控制，当a标签被聚焦时，强制取消焦点，这时候a标签自然不会有虚线框。<ahref="#"onfoc...
css强制折行和隐藏超出部分
一、强制换行1word-break:break-all;只对英文起作用，以字母作为换行依据。2word-wrap:break-word;只对英文起作用，以单词作为换行依据。3white-space:pre-wrap;只对中文起作用，强制换行。word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行，它们的区别在于：1、word-break:break-all 假设div宽度为450px，它的内容就会到450px自动换行，如果该行末端有个很长的英文单词，它会把单词截断，一部分保持在行尾，另一部分换到下一行。2、word-wrap:break-word 例子与上面一样，但区别就是它会把整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉。二、禁止换行 1white-space:nowrap;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;是禁止换行。overflow:h...