CSS

最新推荐文章于 2025-08-31 13:15:44 发布

weixin_34247299

最新推荐文章于 2025-08-31 13:15:44 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签：操作系统

原文链接：http://www.cnblogs.com/lijinming110/p/9774740.html

1.背景:

　　雪碧图:为了减少网页请求图片的次数,将很多小图片放在一个大图片中,通过

　　background_postion来指定

　　　　background-postion:url('xx.png' no-repeat center center)

2.边框

　　border:1px solid red

　　none 无边框

　　dotted 点状虚线边框

　　dashed 矩阵虚线边框

　　solid 实线边框

3.display :控制HTML的显示效果

　　1.none

　　2.inline

　　3.block

　　4.inline-block

　　display:none 和visibility:hidden 的区别?

　　　　都是隐藏页面上的标签

　　　　display:none隐藏标签并不会占用位置

　　　　visibility:hidden 隐藏标签时同时会占住位置　

4.盒子模型:

　　内容>内填充(padding)>边框(border)>外边距(margin)

5.浮动

　　1.浮动多用于页面大范围的布局

　　2.浮动

　　　　- left 往左浮动

　　　　- right 往右浮动

　　3.清除浮动的副作用

　　　　1.clear

　　　　　　- left 左边不能有浮动元素

　　　　　　- right 右边不能有浮动元素

　　　　　　- both 两把都不能有浮动元素

　　　　2.常用clear

　　　　　　.clearfix:after {

　　　　　　　　content: '';

　　　　　　　　display:block;

　　　　　　　　clear:both

　　　　　　　}

6.溢出

　　overflow

　　　　- hidden -->隐藏溢出部分

　　　　- scroll --> 滚动条

　　　　- auto -->浏览器自行处理

　　圆形头像例子

7.定位

　　1.相对定位:相对原来的位置做的定位

　　　　position:relative

　　　　left:

　　　　top:

　　　　bottom:

　　　　right:

　　2.绝对定位:相对已经定位过的祖先标签做的定位:position:absolute

　　　　多用于页面的局部的布局,注意要和定位的祖先标签配合使用

　　　　绝对定位和浮动一样,标签都会脱离文档,别的标签可以占用它的位置

　　3.固定定位:position:fixed

　　　　固定定位相对于屏幕固定显示在某个位置

　　　　固定定位的元素也是脱离文档的

　　　　返回顶部按钮

　　4.z-index 模态框

8:rgba 与 opacity 的区别

　　rgba是背景的透明度,opacity是作用于整个标签的透明度

背景:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        .a1 {
            height:100px;
            width:100px;
            color:red;
            background-color:greenyellow;
        }
        .a2 {
            height:600px;
            width:600px;
            color:red;
            background-color:yellow;
            /*background-image:url('123.png'); !*默认全覆盖*!*/
            /*background-repeat:no-repeat;*/
            /*background-position:right top;*/
            /*background: url("123.png") no-repeat center bottom;*/
            background:url("123.png") repeat-x center;
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
            /*background-position:right bottom;*/
            /*background-position:200px 200px;*/
            /*background-attachment: fixed;!*背景固定*!*/
        }
    </style>
</head>
<body>
<div class=a1>div背景</div>
<div class=a2>div背景2</div>
</body>
</html>

　　边框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>边框属性</title>
    <style>
        .a1 {
            height:300px;
            width:300px;
            border: 10px solid;
        }
        .a2 {
            height:100px;
            width:200px;
            border:3px dashed red
        }
        .a3 {
            height:50px;
            width:100px;
            border-left:7px dotted fuchsia;
        }
        .a4 {
            height:300px;
            width:300px;
            background-color: deeppink;
            border-radius:50%;
        }
        .a4:hover {
            background-color:green;
        }
    </style>
</head>
<body>
<div class="a1">div边框</div>
<div class="a2">div边框2</div>
<div class="a3">div边框3</div>
<hr>
<div class="a4">div边框4,画圆形</div>
</body>
</html>

display

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>display</title>
    <style>
        .c1 {
            height:100px;
            width:200px;
            background-color: red;
            border:1px solid black;
            display:inline-block;
        }
        .c2 {
            height:100px;
            width:100px;
            background-color:yellow;
            border:1px solid  black;
            display:block;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<span class="c2"></span>
<span class="c2"></span>
<span class="c2"></span>
</body>
</html>

　　CSS盒子模型

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS模型</title>
    <style>
        .c1 {
            height:300px;
            width:300px;
            background-color: red;
            border: 5px solid black;
            padding:30px ;
            margin-bottom:50px;
        }
    </style>

</head>
<body>
<div class="c1">御天荒神</div>
<div class="c1">御天荒神</div>
</body>
</html>

　clear清除浮动

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>float浮动</title>
    <style>
        .body {
            margin:0;
        }
        .top {
            border:3px solid black;
        }
        .c1 {
            height:100px;
            width:100px;
            background-color:red;
            border:3px solid black;
        }
        .bot {
            height:100px;
            width:100%;
            background-color:fuchsia;
            border: 5px dashed black;
        }
        .left {
            float:left;
        }
        .right {
            float:right;
        }
        .clearfix:after{
            content:'';
            display:block;
            clear:both;
        }
    </style>

</head>
<body>
<div class="top clearfix">
    <div class="left c1">御天荒神</div>
    <div class="right c1">御天荒神</div>
</div>
<div class="bot">无尽苍穹</div>
</body>
</html>

　　overflow:溢出处理 :overflow-y,overflow-x 指定滚动条方向

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>overflow溢出</title>
    <style>
        .c1 {
            height:100px;
            width:300px;
            background-color:lemonchiffon;
            border:1px solid black;
            /*overflow:visible;*/
            /*overflow:hidden;*/
            /*overflow:scroll;*/
            overflow:auto;
        }
    </style>

</head>
<body>
<div class="c1">
    倚筝天波观浩渺，苍音掀涛洗星辰；白虹贯日扫魔荡，明玥当空照古今。
    <br>
    圣愚有道，浪迹无涛；归吾至性，六极天桥。  代表性名言：道玄凛凛现金鎏，奇峰苍苍尽鸿蒙。
    <br>
    天命之谓性，率性之谓道；天道归一，断极悬桥。  代表性名言：一身紫荆洗因果，命性后道皆率衷。
    <br>
    一步一罪化，一步一莲华。
    无情者伤人命，伤人者不留命。
    天地玄妙无尽藏，星辰引渡一点光。
</div>
<div class="a"></div>
</body>
</html>

　　溢出应用实例:头像框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>overflow溢出</title>
    <style>
        .photo {
            height:120px;
            width:120px;
            background_color:green;
            border:2px solid white;
            border-radius:50%;
            /*overflow:auto;*/
            overflow:hidden;
        }
        .photo>img {
            /*max-width:100%;*/  /*宽度是父标签的100%*/
            width:100%;
        }
    </style>

</head>
<body>
<div class="photo">
    <img src="123.png" alt="sorry">
</div>
</body>
</html>

　　相对定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style>
        body {
            margin:0;
        }
        .c1,.c2 {
            height:200px;
            width:200px;
        }
        .c1 {
            background-color:red;
        }
        .c2 {
            background-color: fuchsia;
            position:relative;
            left:200px;
            top:-200px;
        }
    </style>

</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
</html>

　　绝对定位

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        body {
            margin:0;
        }
        .c1,.c2,.c3 {
            height:150px;
            width:150px;
        }
        .c1 {
            background-color:green;
            /*position:relative;*/
        }
        .c2 {
            background-color:red;
            position:absolute;
            left:150px;
        }
        .c3 {
            background-color:fuchsia;
        }

    </style>

</head>
<body>
<div class="c1"></div>
    <div class="c2"></div>
<div class="c3"></div>
</body>
</html>

　　文本居中

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        body {
            margin:0;
        }
        .c1 {
            height:150px;
            width:150px;
            border:1px solid black;
            line-height:150px;
            text-align:center;
            left:20px;
            top:30px;
            position:fixed;
        }
    </style>

</head>
<body>
<div class="c1"><b>返回顶部</b></div>
</body>
</html>

　　模态框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>页面模态框</title>
    <style>
        .cover {
            position:fixed;
            top:0px;
            right:0px;
            left:0px;
            bottom:0px;
            /*background-color:rgb(0,0,0);*/
            /*opacity:0.1;*/
            background-color:rgba(0,0,0,0.4);
            z-index:90;
        }
        .c1 {
            color:red;
        }
        .motai {
            height: 400px;
            width:400px;
            background-color:white;
            z-index:100;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-200px;
            margin-left:-200px;

        }

    </style>

</head>
<body>
<div class="c1">
    一步一罪化，一步一莲华。
    <br>
    无情者伤人命，伤人者不留命。
    <br>
    天地玄妙无尽藏，星辰引渡一点光。
</div>
<div class="cover"></div>
<div class="motai">
    <form action="">
        <p><input type="text"></p>
        <p><input type="text"></p>
        <p><input type="submint"></p>
    </form>
</div>
</body>
</html>

　rgba 与 opacity 的区别

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <style>
        .c1{
            color:red;
            background-color: rgba(0,0,0,0.5);
        }
        .c2 {
            color:red;
            background-color:rgb(0,0,0);
            opacity:0.5
        }
    </style>

</head>
<body>
</body>
</html>

<!DOCTTYE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">

</head>
<body>
<div class="c1">
        一步一罪化，一步一莲华。
    <br>
    无情者伤人命，伤人者不留命。
    <br>
    天地玄妙无尽藏，星辰引渡一点光。
</div>
<div class="c2">
        一步一罪化，一步一莲华。
    <br>
    无情者伤人命，伤人者不留命。
    <br>
    天地玄妙无尽藏，星辰引渡一点光。
</div>
</body>
</html>

转载于:https://www.cnblogs.com/lijinming110/p/9774740.html