为您找到搜索结果：1786个
css position: absolute、relative详解
CSS2.0HandBook上的解释： 设置此属性值为absolute会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同z-index属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。此时对象不具有外补丁(margin)，但仍有内补丁(padding)和边框(border)。 要激活对象的绝对(absolute)定位，必须指定left，right，top，bottom属性中的至少一个，并且设置此属性值为absolute。否则上述属性会使用他们的默认值auto，这将导致对象遵从正常的HTML布局规则，在前一个对象之后立即被呈递。 TRBL属性（TOP、RIGHT、BOTTOM、LEFT）只有当设定了position属性才有效。 当设定position:absolute 如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位 如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级...
CSS之少用继承，多用组合
下面是一段普通的代码: css: .box{ border:1pxsolid#ccc; font-size:12px; background:#f1f1f1; padding:10px; }html：<divclass="box">thisisagraybox</div> 但是这个时候需求增加了，在页面中不仅要有一个灰色的盒子可能还有蓝色的盒子，可能还有绿色，通常我们会说用集成嘛，好我们就做如下更改 .box-gray, .box-green{ border:1pxsolid#ccc; font-size:12px; padding:10px; } .box-gray{background:#f1f1f1} .box-green{background:#66ff66} Html: <divclass="box-gray">thisisagraybox</div>...
讨论CSS中的各类居中方式
今天主要谈一谈CSS中的各种居中的办法。 首先是水平居中，最简单的办法当然就是margin:0auto;也就是将margin-left和margin-right属性设置为auto，从而达到水平居中的效果。那么其他的办法呢？容我一一道来：line-height首先介绍文字的水平居中方法：<divclass="wrap">刘放</div>利用line-height设为height的一样即可：.wrap{ line-height:200px;/*垂直居中关键*/ text-align:center; height:200px; font-size:36px; background-color:#ccc;}padding填充利用padding和background-clip配合实现div的水平垂直居中：<divclass="parent"> <divclass="children"></div></div>通过backgroun-clip设置...
css3 小三角的用法
<divclass="arrow-up"><!--向上的三角--></div><divclass="arrow-down"><!--向下的三角--></div><divclass="arrow-left"><!--向左的三角--></div><divclass="arrow-right"><!--向右的三角--></div>下面用CSS3分别实现向上、下、左、右的三角形/*箭头向上*/.arrow-up{width:0;height:0;border-left:30pxsolidtransparent;border-right:30pxsolidtransparent;border-bottom:30pxsolid#fff;}/*箭头向下*/.arrow-down{width:0;height:0;border-left:20pxsolidtransparent;border-right:20pxsolidtransparent;border-...
css 样式引入的方法 link 与import的区别
<link> 元素所参考的样式用户可以自由的选择加以改变，而导入的样式表单就自动的与剩下的样式表融合在一起了CSS与HTML文档结合的4中方法：1使用<link>元素链接到外部的样式文件2在<head>元素中使用"style"元素来指定3使用CSS"@import"标记来导入样式表单4在<body>内部的元素中使用"style"属性来定义样式1用link进行引用<linkrel="stylesheet"type="text/css"href="my.css">2用import进行引用<styletype="text/css"> @importurl(my.css);</style>第一种是直接在html页面上进行css书写，而第二种和第三种是采用外部引用样式单独提取文件。link和@import有什么区别？link元素HTML和XHTML都有一个结构，它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源...
css content
beforeafterdemodiv1:after{conent:"天假额外的文字"}<aclass="div1"href="http://www.baidu.com"></a>div1:after{content:attr(href)}注意：当使用attr()获取标签属性名的时候，千万不要添加引号!ol{list-style-type:none;counter-reset:sectioncounter;}olli:before{content:"计数"counter(sectioncounter)"：";counter-increment:sectioncounter;}不同的语言使用不同的引号字符。比如英文的引号就是""，而中文引号就是“”。使用content可以使得不同的语言使用对应的一些字符。例如，我们需要对下面的些文字添加其对应语言的引号，该怎么办呢？<plang="en"><q>It’sonlyworkifsomebodymakesyoudoit.</q></p>&l...
css 实现元素四角图片样式，元素的大小不定
demo效果cssbody{margin:0;}.popupp{margin-bottom:20px;margin-left:200px;}.popuppspan{display:inline-block;}.popuppspan.popup-a{padding-left:6px;background:url("images/1.gif")no-repeat;}.popuppspan.popup-b{background:url("images/1.gif")righttopno-repeat;}.popuppspan.popup-c{background:url("images/1.gif")-6pxbottomno-repeat;}.popuppspan.popup-d{padding:10px6px;background:url("images/1.gif")rightbottom;}html<divclass="popup"><p><spanclass="popup-a"><spanclass="popup-b"><span...
css3 vw -----解决页面滚动出现跳动的bug
100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。demo：h1{font-size:8vw;}如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即200/100*8mmCSS3计算calc和vw单位巧妙实现滚动条出现页面不跳动.wrap-outer{padding-left:calc(100vw-100%);}或者.wrap-outer{margin-left:calc(100vw-100%);}首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实现类似效果，不过本着宽度分离原则，不推荐）；然后，calc是CSS3中的计算，IE10+浏览器支持，IE9浏览器基本支持(不能用在background-position上)；最后，100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。于是，calc(100vw-100%)就是浏览器滚动条的...
css计数器
css计数器是css3，只在现代浏览器中有效果counter-reset：设置某个选择器出现次数的计数器的值。默认为0。就是定义一个计数器，可以定义初始值，默认是0counter-increment：设置某个选取器每次出现的计数器增量。默认增量是1。democss实现计数和cssbody{margin:0;counter-reset:increment;}input{border:none;margin:0;padding:0;}.number1input[type=checkbox]:checked{counter-increment:increment20;}.number2input[type=checkbox]:checked{counter-increment:increment30;}.number3input[type=checkbox]:checked{counter-increment:increment40;}.number4input[type=checkbox]:checked{counter-increment:increment50;}.number5inp...
【CSS】如何设置行距、段落间距、缩进格式
在使用MarkDownHere的时候，需要利用CSS编辑各个段落的格式，本文记录了CSS中编辑格式的各个属性及其设置。行距行距一般使用line-height:value;来表示，比如要设置行距为2则可利用下面的属性：line-height:2em;其中em为相对当前元素的大小,同时也可以使用pxpt为单位设置,互相转换；段间距段间距主要是利用margin来设置,其中margin:toprightbottomleft,为了避免赋值错误建议在四个位置都填上相应的数值。例如要设置上下段间距为2em的情况：margin:2em0em2em0em设置上下边距缩进段落缩进可以使用两个属性来控制，一个是text-align:justify(两端对齐),center(中),left(左),right(右),另一个还是使用margin来控制，这时候需要用到左右两个位置的元素：margin:0em1em0em1em!important;这时候设置段间距为0两端各缩进1em的情况，这样可以使得字体在手机屏幕上不会太挤向边缘影响效果。CSS段落间距调整P标签段落上下距离如何设置:https://blog.cs...
CSS的三种样式：内联式，嵌入式，外部式以及他们的优先级
从CSS样式代码插入的形式来看基本能够分为下面3种：内联式、嵌入式和外部式三种。1：内联式css样式表就是把css代码直接写在现有的HTML标签中，如以下代码：<pstyle="color:red";font-size:12px>这里文字是红色。</p>2:嵌入式，嵌入式css样式。就是能够把css样式代码写在<styletype="text/css">XXX</style>标签之间。<head><styletype="text/css">span{color:red;}</style></head>3:外部式css样式，写在单独的一个文件里.外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件里，这个css样式文件以“.css”为扩展名。在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如以下代码：<linkhref=...
CSS3 三次贝塞尔曲线(cubic-bezier)
例子：transition:all1scubic-bezier(.21,.2,.65,.1)最近在看animation模块，其中animation-timing-function和transition-timing-function两个属性来控制动画速度分别提供了ease，liner，ease-in，ease-out，ease-in-out几个预设速度，还可以同过cubic-bezier来自定义速度，想要深入了解CSS3动画，实现随心所欲的动画效果，还是有必要理解下其中的原理。CSS3动画速度的控制通过三次贝塞尔曲线函数实现，定义规则为 cubic-bezier(x1,y1,x2,y2)原理:看一下什么是三次贝塞尔曲线，以及这几个参数的含义：贝塞尔曲线坐标系 贝塞尔曲线通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形，绘制出一条光滑曲线并以曲线的状态来反映动画过程中速度的变化。参数点 分别用A,B,C,D表示这四个点，其中起始点固定值为A(0,0),终止...