CSS样式小知识点

朴灿烈づ我的快乐病毒、 2022-01-10 04:25 375阅读 0赞

1、hover样式

hover除了在a:hover,li:focus,li:hover之外，还可以写成页内js

<a href="http://www.divcss5.com/" style="color:#00F; text-decoration:none"
     onMouseOver="this.style.color='#F00';this.style.textDecoration='underline'" 
    onMouseOut="this.style.color='#00F';this.style.textDecoration='none'">DIVCSS5</a>

此方法对于a,span,div有效；

2、判断两个div有无覆盖

这个处理起来是个比较繁杂的js问题，有点手写魔方代码的感觉

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

function isOverlap(elem1,elem2){
        var objOne=$elem1,
            objTwo=$elem2,
            offsetOne = objOne.offset(),
            offsetTwo = objTwo.offset(),
            topOne=offsetOne.top,
            topTwo=offsetTwo.top,
            leftOne=offsetOne.left,
            leftTwo=offsetTwo.left,
            widthOne = objOne.width(),
            widthTwo = objTwo.width(),
            heightOne = objOne.height(),
            heightTwo = objTwo.height();
        var leftTop = leftTwo > leftOne && leftTwo < leftOne+widthOne
                && topTwo > topOne && topTwo < topOne+heightOne,
            rightTop = leftTwo+widthTwo > leftOne && leftTwo+widthTwo < leftOne+widthOne
                && topTwo > topOne && topTwo < topOne+heightOne,
            leftBottom = leftTwo > leftOne && leftTwo < leftOne+widthOne
                && topTwo+heightTwo > topOne && topTwo+heightTwo < topOne+heightOne,
            rightBottom = leftTwo+widthTwo > leftOne && leftTwo+widthTwo < leftOne+widthOne
                && topTwo+heightTwo > topOne && topTwo+heightTwo < topOne+heightOne;
        return leftTop || rightTop || leftBottom || rightBottom;
    }

3、display属性

`block :　CSS1 块对象的默认值。将对象强制作为块对象呈递，为对象之后添加新行 可以定义高度和宽度`

`none :　CSS1 隐藏对象。与 visibility 属性的hidden值不同，其不为被隐藏的对象保留其物理空间`

`inline :　CSS1 内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行`

`inline-block :　IE5.5 将对象呈递为内联对象，但是对象的内容作为块对象呈递。`

`旁边的内联对象会被呈递在同一行内`

`inherit: 看display默认是不具备继承性的，使用inherit可以让其继承父对象的display属性。`

内联元素（非块级元素）经display：block;将内联元素块级化，块级元素可定义宽与高；

block 此元素将显示为块级元素，此元素前后会带有换行符。

4、overflow属性

参数是scroll时候，必会出现滚动条。  
参数是auto时候，子元素内容大于父元素时出现滚动条。  
参数是visible时候，溢出的内容出现在父元素之外。  
参数是hidden时候，溢出隐藏。

5、a标签的target="\_x"

**\_self 在当前窗口打开网页**

**\_blank 在新窗口打开网页**

**\_top 在当前窗口打开网页，并且替换当前窗口的整个网页**

**\_parent 在父窗口中打开网页**

6、alt和title

alt是html标签的属性，而title既是html标签，又是html属性。  
title标签这个不用多说，网页的标题就是写在<title></title>这对标签之内的。  
title作为属性时，用来为元素提供额外说明信息。例如，给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果。  
而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。

7、禁止选中

-webkit-user-select:none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

8、盒模型

box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。

content-box，border和padding不计算入width之内

padding-box，padding计算入width内

border-box，border和padding计算入width之内，其实就是怪异模式了~

ie8+浏览器支持content-box和border-box；

ff则支持全部三个值。

9、div浮动到另一个div之上

Div 浮动到另一个div之上:

下层的是absolute，上层为relative

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
        <title>绝对定位相对定位</title>  
        <style>  
            .fj1  
            {
               
                position: absolute;  
                width: 150px;  
                height: 150px;  
                border: 1px solid #000;  
                background: #999;  
            }  
            .zj1  
            {
               
                position: relative;  
                width: 100px;  
                height: 100px;  
                border: 1px solid #F00;  
                background: #FFF;  
                z-index: 1;  
            }  
        </style>  
    </head>  
    <body>  
        <div>  
            <div class="fj1">  
                我在下面 上的发生大幅 上的发生大幅随碟附送的  
            </div>  
            <div class="zj1">  
                我浮动在上面</div>  
        </div>  
    </body>  
    </html>

10、清除浮动

经过float之后的div脱离了文档流，导致父元素的高度没有被撑起来，这时候需要清除浮动

.clearfix:after {
           
    
    content: ".";
    
    display: block;
    
    height: 0;
    
    clear: both;
    
    visibility: hidden;
    
    }

11、图片等比缩放

实际上指定高度或者宽度之后，另一个属性设置为

height:auto;

即可完成等比缩放

12、选取子元素

css选取子元素可以由:nth-child()来完成

甚至可以使用

:nth-child(odd),:nth-child(even)

来实现表格的隔行换色

13、伪元素的宽度撑到了100%

**是因为父元素没有加position：relative**

这里的父元素，指的是a:after，里面的所依附的a的属性

14、判断手机浏览器

function isTouch(){
            var bool = false;
            (('ontouchstart' in window)||window.DocumentTouch&&document instanceof DocumentTouch)==true?bool=true:(!!navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad|android|iemobile|blackberry|symbianos|windows phone|meego)/i))==true?bool=true:bool=false;
            return bool;
    }

参考：[http://www.w3cfuns.com/notes/18163/f5235f62b39c5b7c5e6671bf8a07e0ec.html][http_www.w3cfuns.com_notes_18163_f5235f62b39c5b7c5e6671bf8a07e0ec.html]

15、

转载于:https://www.cnblogs.com/yida915/p/6472423.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20220109/2653a7bac86a4ca5be1aaef25cbdbf00.png
[http_www.w3cfuns.com_notes_18163_f5235f62b39c5b7c5e6671bf8a07e0ec.html]: http://www.w3cfuns.com/notes/18163/f5235f62b39c5b7c5e6671bf8a07e0ec.html