css

时间：2019-09-05 23:25:48 阅读：137 评论：0 收藏：0 [点我收藏+]

样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置长宽</title>
    <style>
        div {
            height: 50px;
            width: 100px;
        }
        /*给行内标签设置长宽没有任何影响*/
        span {
                height: 50px;
                width: 100px;
            }
    </style>
</head>
<body>
<div>div</div>
<span>span</span>
</body>
</html>

字体属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
            font-size: 24px;
            font-weight: lighter;
            /*color: red;*/
            /*color: #4e4e4e;*/
            /*color: rgb(128,128,128);*/
            /*color: rgba(0,0,0,1.0);  最后一个参数只能调节颜色的透明度 不能调节文本*/
        }
    </style>
</head>
<body>
<p>以把多个字体名称作为一个“回退”系统来保存。</p>
</body>
</html>

背景属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            font-size: 16px;
            text-indent: 32px;
            /*text-align: center;*/
            /*text-align: left;*/
            /*text-align: right;*/
            /*text-align: justify;*/

            /*text-decoration: underline;*/
            /*text-decoration: overline;*/
            /*text-decoration: line-through;*/
        }
        a {
            text-decoration: none;
            color: orange;
        }
        a:hover {
            color: blue;
        }
    </style>
</head>
<body>
<p>属性规定元素中的文本的水平对齐方式。</p>
<s>属性规定元素中的文本的水平对齐方式。</s>
<a href="http://www.xiaohuar.com">属性规定元素中的文本的水平对齐方式。</a>
</body>
</html>

背景图片示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*p {*/
        /*    color: white;*/
        /*    background-color: black;*/
        /*}*/
        div    {
            /*background-color: orange;*/
            height: 500px;
            width: 500px;
            /*background-image: url("111.png");  !*背景图片 默认是填充整个区域 如果大小不够 默认重复填充*!*/
            /*background-repeat: no-repeat;*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
            /*background-position: center center;*/
            /*background-position: 10px 30px;  !*第一个参数调节的是左右  第二个参数调节的上下*!*/

            background: orange url("代码/111.png") no-repeat center center;
        }
    </style>
</head>
<body>
<!--<p>背景图片平铺排满整个网页</p>-->

<div>

</div>
</body>
</html>

边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框</title>
    <style>
        /*div {*/
        /*    !*border-color: red;*!*/
        /*    !*border-style: solid;*!*/
        /*    !*border-width: 1px;*!*/

        /*    !*border: 3px solid black;*!*/
        /*    !*border:  solid 3px blue;*!*/
        /*    border:  dashed  green 3px;*/
        /*}*/
        p  {
            border-left: 3px solid red;
            border-bottom: 5px dotted green;
            border-top: 1px dashed orchid;
            border-right: 10px solid dimgrey;
        }

    </style>
</head>
<body>
<div>
    使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上，然后根据位置去显示图片。减少频繁的图片请求。
</div>
<p>使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片上</p>
</body>
</html>

画圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 400px;
            width: 200px;
            background: red;
            border: 3px solid black;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            /*margin-top: 0;*/
            /*margin-right: 0;*/
            /*margin-bottom: 0;*/
            /*margin-left: 0;*/
            /*margin: 0;  !*上下左右全为0*!*/
            /*margin: 10px 20px;  !* 上下10px   左右20px*!*/
            /*margin: 10px 20px 30px;  !* 上   左右   下*!*/
            /*margin: 10px 20px 30px 40px;  !* 上 右  下 左 顺时针*!*/
            margin: 0;
        }
        .c1 {
            height: 400px;
            width: 400px;
            border: 3px solid black;
        }
        .c2 {
            background-color: green;
            height: 50px;
            width: 50px;
            border: 3px solid red;
            /*margin: auto 0;*/
        }
        p {
            border: 3px solid red;
            /*padding-top: 20px;*/
            /*!*padding-left: 10px;*!*/
            /*padding-bottom: 30px;*/
            /*padding-right: 50px;*/
            /*text-align: right;*/

            padding: 10px;  /* padding 同样支持1 2 3 4个参数  效果同margin*/
        }
    </style>
</head>
<body>
<!--<div class="c1"></div>-->
<!--<div class="c2"></div>-->
<!--<p>我们换个p</p>-->
<!--<p>我们换个p</p>-->

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

浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        #d1 {
            border: 3px solid black;
        }
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
            float: left;
        }
        .c2 {
            height: 100px;
            width: 100px;
            background-color: black;
            float: left;
        }
       .clearfix:after {
           content: ‘‘;
           display: block;
           clear: both;  /* 左右两边都不能有浮动的元素*/
       }
    </style>
</head>
<body>
<div id="d1" class="clearfix">
    <div class="c1"></div>
    <div class="c2"></div>

</div>

</body>
</html>

通过浮动实现左右布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        .blog-left {
            float: left;
            width: 20%;
            height: 1000px;
            background-color: #4e4e4e;
        }
        .blog-right {
            float: right;
            width: 80%;
            height: 1000px;
            background-color: #eeeeee;
        }
    </style>
</head>
<body>
<div class="blog-left"></div>
<div class="blog-right">
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <div>div</div>
</div>
</body>
</html>

溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            height: 50px;
            width: 50px;
            border: 3px solid red;
            overflow: hidden;
        }
    </style>
</head>
<body>
<div>
    <p>默认值。内容不会被修剪，会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。会呈现在元素框之外。</p>
</div>
</body>
</html>

圆头像实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原型头像</title>
    <style>
        body {
            margin: 0;
            background-color: darkgray;
        }
        div {
            height: 120px;
            width: 120px;
            border-radius: 50%;
            border: 5px solid white;
            overflow: hidden;
        }
        img {
            /*max-width: 100%;*/
            width: 100%;
        }
    </style>
</head>
<body>
<div>
    <img src="111.png" alt="">
</div>
</body>
</html>

定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
        /*.c1 {*/
        /*    height: 50px;*/
        /*    width: 50px;*/
        /*    background-color: green;*/
        /*    !*top: 100px;*!*/
        /*    !*left: 100px;*!*/
        /*    !*position: static;  !*默认是静态的 不能动位置*!*!*/
        /*    !*position: relative;  !*相对定位*!*!*/
        /*    !*position: relative;*!*/
        /*}*/

        /*.c2 {*/
        /*    height: 200px;*/
        /*    width: 200px;*/
        /*    background-color: red;*/
        /*    !*top: 50px;*!*/
        /*    !*left: 50px;*!*/
        /*    !*position: absolute;  !*绝对定位*!*!*/
        /*}*/
        .c1 {
            border: 3px solid red;
            height: 100px;
            width: 100px;
            position: fixed;
            right: 20px;
            bottom: 50px;
        }
    </style>
</head>
<body>
<!--<div class="c1">-->
<!--    <div class="c2"></div>-->
<!--</div>-->
<div class="c1">
    回到顶部
</div>
<div style="height: 1000px;background-color: green"></div>
<div style="height: 1000px;background-color: black"></div>
<div style="height: 1000px;background-color: blue"></div>

</body>
</html>

验证是否脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>
<body>
<!--<div style="background-color: red;height: 50px;width: 50px;position: relative;left: 50px;"></div>-->
<!--<div style="background-color: blue;height: 50px;width: 50px"></div>-->


<!--<div style="background-color: red;height: 50px;width: 50px;position: relative"></div>-->
<!--<div style="background-color: blue;height: 50px;width: 50px;position: absolute;left: 50px"></div>-->
<!--<div style="background-color: orchid;height: 50px;width: 50px"></div>-->


<div style="background-color: red;height: 50px;width: 50px;"></div>
<div style="background-color: blue;height: 50px;width: 50px;position: fixed;right: 20px;bottom: 50px;border: 5px solid red"></div>
<div style="background-color: orchid;height: 50px;width: 50px"></div>
</body>
</html>

模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .cover {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(128,128,128,0.45);
            z-index: 999;
        }

        .modal {
            height: 200px;
            width: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            top: 50%;
            z-index: 1000;
            margin-top: -100px;
            margin-left: -200px;
        }

    </style>
</head>
<body>
<div>我是最底层的</div>
<div class="cover"></div>
<div class="modal">
    <p><label for="d1">username:<input type="text" id="d1"></label></p>
    <p><label for="d2">password:<input type="text" id="d2"></label></p>
    <input type="submit">
</div>
</body>
</html>

透明度比较

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            background-color: rgba(128,128,128,0.9);
        }
        .c2 {
            opacity: 0.5;
            background-color: rgb(128,128,128);
        }
    </style>
</head>
<body>
<p class="c1">111</p>
<p class="c2">222</p>
</body>
</html>

去除ul标签丑陋部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;
            padding: 0;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="">哈哈1</a></li>
    <li><a href="">哈哈2</a></li>
    <li><a href="">哈哈3</a></li>
</ul>
</body>
</html>

display属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1 {
            /*display: none;  !*标签不显示 并且也不再占用位置*!*/
            /*visibility: hidden;   !* 标签不显示 但是位置还在*!*/
        }
        span {
            display: inline-block;  /* 既有块儿级标签能设置长宽的特点 又有行内标签 都在一行的特点*/
            /*height: 400px;*/
            /*width: 400px;*/
            background-color: red;
            border: solid 3px black;
        }
        .c1 {
            height: 50px;
            width: 50px;
            background-color: red;

            display: inline;
        }
        .c2 {
            height: 50px;
            width: 50px;
            background-color: green;
            display: inline;
        }
    </style>
</head>
<body>
<!--<p id="d1">123</p>-->
<!--<p>123</p>-->
<span>span1</span>
<span>span2</span>
<!--<div class="c1">div1</div>-->
<!--<div class="c2">div2</div>-->
</body>
</html>

1.如何调节样式
       两个快递盒之间的距离(标签与标签之间的距离) 称之为外边距(margin)
       纸盒的厚度(边框)    称之为边框(border)
       内部的物品到盒子的距离(内部文本与边框的距离) 称之为内边距(padding)
       物品本身的大小(文本大小)   称之为内容(content)

       浮动的元素是脱离正常文档流的也就意味着没有独占一行一说
       也不再占用原来的位置

       浮动的元素会造成父标签塌陷

       clear 清除浮动带来的负面影响(父标签塌陷)

   定位：
       所有的标签默认都是静态的无法直接调节位置
       你需要先将其设置成可定位状态
       1.相对定位
           相对于标签自身原来的位置
       2.绝对定位
           相对于已经定位过的父标签
           但只给你一个父标签的长宽让你做定位
       3.固定定位
           相对于浏览器窗口固定在某个位置

   浏览器会优先展示文本内容

   脱离文档流
       脱离文档流
           1.浮动的元素都是脱离文档流的
           2.绝对定位是脱离文档流的
           3.固定定位也是脱离文档流的
       不脱离文档流
           1.相对定位不脱离文档流

   模态框

   opacity   即可以调节颜色透明度也可以调文本透明度

css

标签：ext 带来定位 tom aci through hit 固定之间

原文地址：https://www.cnblogs.com/zrh-960906/p/11470150.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行