CSS总结

来源：互联网发布：单色led显示屏软件编辑：程序博客网时间：2024/05/19 23:13

1.inline-block的边距

把块级元素（block）或者行级元素（inline-block）转为行内块级元素（inline-block）时，元素会产生一些不可消除的边距，解决方法是：float:left。

<!DOCTYPE html>        <html>            <head>                <meta charset="UTF-8">                <title></title>                <style type="text/css">                    *{                        margin: 0;                        padding: 0;                    }                    div{                        width: 200px;                        height: 200px;                        background: red;                        display: inline-block;                     }                    span{                        display: inline-block;                        background: red;                    }                </style>            </head>            <body>                <div>123456</div>                <div>123456</div>                <div>123456</div>                <div>123456</div>                <div>123456</div>                <span>1</span>                <span>2</span>                <span>3</span>            </body>        </html>

2.CSS继承性

1.一般带有横杠“-”的属性都是可继承的，如text-align、text-decoration等
2.一般与文字有关的都能继承，如color、font-size等
3.width：子元素如果没有设置宽度的话，继承
4.height：不能继承
5.a标签：颜色不能继承父亲的颜色
6.h1-h6的大小不能继承父亲的大小

3.CSS层叠性和优先级

1.两个不同的样式选择器选中同一个元素时，范围小的优先级高，优先级高的起作用
2.两个样式属性作用于同一个元素时，后面的会覆盖前面的

4.盒子模型小问题

1.一般情况下，给一个盒子设置padding会撑开盒子，改变其宽高，但是如果盒子的宽度是继承父级元素、并没有单独设置的话，设置padding也不会改变宽高。
2.给盒子设置box-sizing:border-box。

5.清除浮动的三种方法

1.给父级元素添加：overflow:hidden
2.在浮动元素的后面添加一个块级标签并设置样式：clear:both
3.使用伪元素：

.clearfix::after{                content: "";                display: block;                clear: both;            }

6.透明度及其兼容性问题

1.background:rgba(0,0,0,0.5)：这种方式适用于高版本谷歌、火狐等浏览器以及IE及IE9+；
2.opacity:0.5:适用于高版本谷歌、火狐等浏览器以及IE及IE9+;
filter: alpha(opacity=50):兼容IE8及以下

7.旋转的一个属性

transform-origin: 0 100% ：改变旋转元素的中心点，有两个值：距离x轴位置距离y轴位置，可以是left、right等方位值，可以是具体px数值，还可以是百分比

8.制作一个立方体

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            .box{                width: 200px;                height: 200px;                margin: 200px auto;                position: relative;                transform-style: preserve-3d;                transition: all 6s;             }            .box div{                width: 200px;                height: 200px;                background: lightcyan;                position: absolute;                text-align: center;                line-height: 200px;                opacity: 0.5;            }            .box div:nth-child(1){                transform: translateZ(100px);            }            .box div:nth-child(2){                transform: translateZ(-100px) rotateY(180deg);            }            .box div:nth-child(3){                transform: translateX(-100px) rotateY(-90deg);            }            .box div:nth-child(4){                transform: translateX(100px) rotateY(90deg);            }            .box div:nth-child(5){                transform: translateY(-100px) rotateX(-90deg);            }            .box div:nth-child(6){                transform: translateY(100px) rotateX(-90deg);            }            .box:hover{                transform: rotateX(360deg) rotateY(360deg);            }        </style>    </head>    <body>        <div class="box">            <div class="front">front</div>            <div class="back">back</div>            <div class="left">left</div>            <div class="right">right</div>            <div class="top">top</div>            <div class="bottom">bottom</div>        </div>    </body></html>

9.与IE的兼容性问题

    <!--[if IE]>        1这段文字只能在IE浏览器下打开    <![endif]-->    <!--[if IE 6]>        2这段文字只在IE6显示    <![endif]-->    <!--[if !IE 6]>        3只要不是IE8都可以显示    <![endif]-->    <!--[if !IE]>    <-->        4只要不是IE浏览器都可以显示    <![endif]-->    <!--        “-”针对IE6        \0  IE8、9、10        \9\0  IE9、10        \9   IE6、7、8、9、10    -->

10.nth-child的兼容性

IE能识别选择器中的first-child，但是nth-child（）不能识别，因此需要在选择了first-child的基础上兼容。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            ul li:first-child{                color: red;            }            ul li:first-child+li{                color: green;            }            ul li:first-child+li+li{                color: blue;            }        </style>    </head>    <body>        <ul>            <li>1</li>            <li>2</li>            <li>3</li>            <li>4</li>        </ul>    </body></html>

11.IE6下的经典三像素问题

两个盒子上下排列，如果前面一个盒子设置了左浮动的话，一般浏览器中下面的盒子会上移，被前一个盒子覆盖，但是在IE6中不会上浮，而是与浮动的盒子同行排列，并且有三像素的距离。

12.IE6下的最小高度（min-height）问题

IE6不能兼容最小高度这个属性，只能有IE6的hack前缀模拟高度。解决方法：

font-size:0px;line-height:0;overflow:hidden;

13.高度塌陷问题

父子盒子中，如果子级盒子设置了margin-top但是父级盒子没有设置的话，父级会与子级一起下移同样距离。解决方法：
第一种：父元素中设置overflow:hidden;
第二种：父元素中设置border:1px solid red;

14.使盒子的超出文本显示为省略号

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="shortcut icon" href="bitbug_favicon.ico" />        <style type="text/css">            *{                padding:0;margin:0;            }            div{                width:200px;                border:1px solid red;                text-overflow:ellipsis;                white-space:nowrap;/*设置如何处理盒子内的空白,nowrap:哪怕空着也不会换行,直到遭遇到br*/                overflow: hidden;            }        </style>    </head>    <body>        <div>            安妮宝贝简介：安妮宝贝，作家。曾任职中国银行、广告公司、网站、杂志社等。1998年起发表小说，题材多围绕城市中游离者的边缘生活，探索人之内心与自身及外界的关系。至今出版长篇小说、短篇小说集、摄影图文集、随笔集《告别薇安》《蔷薇岛屿》《清醒纪》《莲花》《素年锦时》等各种著作。文体自省疏离，风格清洌，拥有大量读者。作品均持续进入全国各类畅销书排行榜，更被引介到香港、台湾、越南、韩国、日本、德国、英国等地区和国家。现居北京。 她的故事简单，赋予故事的含义却颇丰饶,作品一般都潜藏着自我...(更多)        </div>    </body></html>

15.background-size的兼容问题

使用绝对路径，即图片在电脑磁盘中的具体路径，但是只能是cover这个值可以起作用，其他值不能起作用。

background:url("img/01.jpg") no-repeat;background-size:cover; /*这两句 针对谷歌 火狐等高版本的浏览器背景自适应*/background-image: url('C:\Users\Administrator\Desktop\H5+\9-22\兼容性问题\img\01.jpg')\9;background-size: cover\9;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='C:\Users\Administrator\Desktop\H5+\9-22\兼容性问题\img\01.jpg',  sizingMethod='scale')\9; /*ie8使用*/                /*针对ie各版本的背景自适应  css hack:"\9"  “\9″ IE6/IE7/IE8/IE9/IE10都生效*/

阅读全文

0 0