ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

CSS基础

2021-10-06 16:34:41  阅读:80  来源: 互联网

标签:Title color 元素 基础 background border 选择器 CSS


CSS基础

CSS简介

什么是CSS

Cascading Style Sheet 层叠级联样式表
CSS:表现(美化网页)
字体,颜色,边距,高度,宽度,背景图片,网页定位,网页浮动

发展史

CSS1.0
CSS2.0 DIV(块)+CSS,HTML与CSS结构分离的思想,网页变得简单,SEO
CSS2.1 浮动,定位
CSS3.0 圆角边框,阴影,动画… 浏览器兼容性

快速入门

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--规范,<style>可以编写CSS的代码,每一个声明最好使用分号结尾
    语法:
        选择器{
            声明1;
            声明2;
            声明3;
            ...
        }


    -->
    <style>
        h1{
            color:red;
        }
    </style>

</head>
<body>
<h1>我是标题</h1>
</body>
</html>

CSS的优势

1.内容和表现分离
2.网页结构表现统一,可以实现复用
3.样式丰富
4.建议使用独立于html的css文件
5.利于SEO,容易被搜索引擎收录

CSS的三种导入方式

行内样式,内部样式,外部样式
优先级:就近原则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css导入方式</title>
    <!--内部样式-->
    <style>
        h1{
            color:green;
        }
    </style>

<!--    外部样式-->
    <link rel="stylesheet" href="">

</head>
<body>

<!--优先级:就近原则-->

<!--行内样式,在标签元素中,编写一个style属性,编写样式即可-->
<h1 style="color:red">标题</h1>

</body>
</html>

拓展:外部样式两种写法
①链接式
HTML

<!--    外部样式-->
    <link rel="stylesheet" href="">

②导入式
@import是CSS2.1特有的

<style>
        @import url("");
    </style>

选择器

作用:选择页面上的某一个或者某一类元素

基本选择器

优先级:不遵循就近原则:id选择器>class选择器>标签选择器

标签选择器

选择一类标签 标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器,会选择页面上所有的这个标签的元素*/
        h1{
            color:red;
            background:#3cbda6;
            border-radius:20px;
        }
        p{
            font-size:80px;
        }
    </style>
</head>
<body>
<h1>java</h1>
<p>web</p>
<h1>mysql</h1>
</body>
</html>

类选择器 class

选择所用class属性一致的标签,跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式  .class的名称{}
        好处:可以多个标签归类,是同一个class,可以复用

        */
        .one{
            color:#3748ff;
        }
        .two{
            color:#a24fff;
        }
    </style>
</head>
<body>
<h1 class="one">标题</h1>
<h1 class="two">标题</h1>
<h1 class="one">标题</h1>
<h1 class="two">标题</h1>
</body>
</html>

Id选择器

全局唯一 #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*
        id选择器
        #id名称{}
        */
        #one{
            color:#ff008a;
        }
        #two{
            color:red;
        }
        #three{
            color:blue;
        }
        #four{
            color:yellow;
        }
    </style>
</head>
<body>
<h1 id="one">标题</h1>
<h1 id="two">标题</h1>
<h1 id="three">标题</h1>
<h1 id="four">标题</h1>
</body>
</html>

层次选择器:不改变自身样式

1.后代选择器:在某个元素的后面
body p
2.子选择器
body>p
3.相邻兄弟选择器
只有一个(向下) .active + p
4.通用选择器
当前选中元素的向下的所有兄弟元素 .active~p

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>
    /*后代选择器
    body p{
        background:red;
    }
    */

    /*子选择器
    body>p{
        background:yellow;
    }
    */

    /*相邻兄弟选择器:只有一个(向下)
    .active + p{
        background:blue;
    }
    */

    /*通用兄弟选择器,当前选中元素的向下的所有兄弟元素*/
    .active~p{
        background:#02ff00;
    }


</style>

<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>
</ul>
</body>
</html>

结构伪类选择器

伪类:条件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

    /*ul的第一个子元素*/
    ul li:first-child{
        background:#02ff00;
    }

    /*ul的最后一个子元素*/
    ul li:last-child{
        background:#ff4832;
    }

    /*选中p1:定位到父元素,选择当前的第一个元素
    选择当前p元素的父级元素,选中父级元素的第一个,并且是当前元素才生效
    p:nth-child(1){
        background:#2700ff;
    }
    */

    /*选中父元素,下的p元素的第二个,类型*/
    p:nth-of-type(2){
        background:yellow;
    }

    a:hover{
        background:black;
    }
</style>
</head>

<body>
<a href="">123</a>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

属性选择器(常用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .demo a{
            float:left;
            display:block;
            height:50px;
            width:50px;
            border-radius:10px;
            background:#2700ff;
            text-align:center;
            color:red;
            text-decoration:none;
            margin-right:5px;
            font:bold 20px/50px Arial;
        }

        /*属性名. 属性名=属性值(可以正则)
        = 绝对等于
        *= 包含
        ^= 以这个开头
        &= 以这个结尾
        */

        /*存在id属性的元素  a[]{}*/
        /*a[id]{
            background:yellow;
        }
        */

        /*id=first的元素*/
        /*a[id=first]{
            background:#63ff23;
        }*/

        /*class中有links的元素*/
        /*a[class*="links"]{
            background:yellow;
        }*/

        /*选中href中以http开头的元素*/
        /*a[href^=http]{
            background:yellow;
        }*/

        a[href$=pdf]{
            background:yellow;
        }

    </style>
</head>
<body>
<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="image/123.html" class="links item">3</a>
    <a href="image/123.png" class="links item">4</a>
    <a href="image/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>

</p>
</body>
</html>

在这里插入图片描述

美化网页元素

为什么要美化网页

1.有效传递页面信息
2.美化网页,吸引用户
3.凸显页面主题
4.提高用户体验

span标签

重点使用的字用span标签套起来(约定俗成)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #title{
            font-size:50px;
        }
    </style>

</head>
<body>
欢迎学习<span id="title">java</span>
</body>
</html>

在这里插入图片描述

字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
        font-family  字体
        font-size  字体大小
        font-weight:字体粗细
        color 字体颜色
    -->

    <style>
        body{
            font-family:"Arial Black",楷体;
            color:red;
        }
        h1{
            font-size:50px;
        }
        .p1{
            font-weight:bold;
        }
    </style>

</head>
<body>

</body>

<h1>CSS (层叠样式表) </h1>

<p class="p1">层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 </p>
<p>CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 </p>

<p>
    Bright star, would I were steadfast as thou art,Not in lone splendour hung aloft the nightAnd watching, with eternal lids apart,Like nature's patient, sleepless eremite.The moving waters at their priestlike task of pure ablution round earth's human shores,Or gazing on the new soft-fallen mask of snow upon the mountains and the moorsNo-yet still steadfast, still unchangeablePillow'd upon my fair love's ripening breast, to feel for ever its soft and swell.Awake for ever in a sweet unrest,Still, still to hear her tender-taken breathAnd so live ever, or else swoon to death.
</p>

</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--字体风格-->
    <style>
        p{
            font:oblique bolder 20px "楷体";
        }
    </style>
</head>
<body>

<p>
    CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
</p>

</body>
</html>

在这里插入图片描述

文本样式

1、颜色 color rgb rgba
2、文本对齐方式 text-align = center
3、首行缩进 text-indent:2em;
4、行高 line-height 单行文字上下居中:line-height=height
5、装饰 text-decoration
6、文本图片水平对齐 vertical-align :middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
       颜色:
            单词
            RGB 0~F
            RGBA 透明度 0~1
       text-align:排版
       text-indent:2em 段落首行缩进
            行高和块的高度一致就可以上下居中
    -->

    <style>
        h1{
            color:rgba(0,255,255,0.9);
            text-align:center;
        }
        .p1{
            text-indent:2em;
        }
        .p3{
            background:#00FFFF;
            height:300px;
            line-height:300px;
        }
        /*下划线*/
        .l1{
            text-decoration:underline;
        }
        /*中划线*/
        .l2{
            text-decoration:line-through;
        }
        /*下划线*/
        .l3{
            text-decoration:overline;
        }
        /*超链接去下划线*/
        a{
            text-decoration:none;
        }
    </style>
</head>
<body>

<a href="">123</a>

<p class="l1">123</p>
<p class="l2">456</p>
<p class="l3">789</p>

<h1>CSS (层叠样式表) </h1>

<p class="p1">层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。 </p>
<p>CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 </p>

<p class="p3">
    Bright star, would I were steadfast as thou art,Not in lone splendour hung aloft the nightAnd watching, with eternal lids apart,Like nature's patient, sleepless eremite.The moving waters at their priestlike task of pure ablution round earth's human shores,Or gazing on the new soft-fallen mask of snow upon the mountains and the moorsNo-yet still steadfast, still unchangeablePillow'd upon my fair love's ripening breast, to feel for ever its soft and swell.Awake for ever in a sweet unrest,Still, still to hear her tender-taken breathAnd so live ever, or else swoon to death.
</p>

</body>
</html>

在这里插入图片描述

阴影

/*l阴影  text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
        #price{
            text-shadow: #3cc7f5 10px 10px 10px;
        }
<p id="price">
    <a href="">价格</a>
</p>

在这里插入图片描述

超链接伪类

正常情况下 a a:hover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*默认的颜色*/
        a{
            text-decoration:none;
            color:black;
        }
        /*鼠标悬浮的状态(只需要记住hover)*/
        a:hover{
            color:orange;
            font-size:50px;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color:green;
        }
        /*l阴影  text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径*/
        #price{
            text-shadow: #3cc7f5 10px 10px 10px;
        }
    </style>

</head>
<body>

<a href="#">
    <img src="../../../resources/image/a.png" alt="">
</a>
<p>
    <a href="">码出高效:java开发手册</a>
</p>
<p>
    <a href="">作者</a>
</p>
<p id="price">
    <a href="">价格</a>
</p>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        #nav{
            width:300px;
            background-color:#00FFFF
        }

        .title{
            font-size:20px;
            font-weight:bold;
            text-indent:1em;
            line-height:35px;
            /* 颜色 图片 图片位置 平铺方式 */
            background:red url("../../../resources/image/a.png") 250px 10px no-repeat;
        }

        /*ul li
        list-style:
            none:去掉原点
            circle:空心圆
            decimal:变成数字
            square:正方形
        */

        ul li{
            list-style:none;
            height:40px;
            text-indent:1em;
            background-image:url("../../../resources/image/a.png");
            background-repeat:no-repeat;
            background-position:240px 10px;
        }

        a{
            text-decoration:none;
            font-size:14px;
            color:#000;
        }

        a:hover{
            color:orange;
            text-decoration:underline;
        }
    </style>

</head>
<body>


<div id="nav">
    <h2 class=title>全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a><a href="#">音像</a><a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a><a href="#">手机</a><a href="#">数码</a></li>
        <li><a href="#">电脑</a><a href="#">办公</a></li>
        <li><a href="#">家居</a><a href="#"> 家装</a><a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a><a href="#">个性化妆</a></li>
        <li><a href="#">礼品箱包</a><a href="#">钟表</a><a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a><a href="#">保健食品</a></li>
        <li><a href="#">彩票</a><a href="#">旅行</a><a href="#">充值</a><a href="#">票务</a></li>
    </ul>
</div>


</body>
</html>

在这里插入图片描述

背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width:1000px;
            height:700px;
            border:1px solid red;
            background-image:url("../../../resources/image/a.png");
            /*默认是全部平铺的*/
        }

        .div1{
            background-repeat:repeat-x;
        }

        .div2{
            background-repeat:repeat-y;
        }

        .div3{
            background-repeat:no-repeat;
        }
    </style>

</head>
<body>

<div class="div1">

</div>
<div class="div2">

</div>
<div class="div3">

</div>

</body>
</html>

渐变

在线渐变网站
https://www.grabient.com/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--径向渐变,圆形-->
    <style>
        body{
            background-image:linear-gradient(19deg,#21D4FD 0%,#B721FF 100%);
        }
    </style>

</head>
<body>

</body>
</html>

在这里插入图片描述

盒子模型

什么是盒子

margin:外边距
border:边框
padding:内边距
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*body总有一个默认的外边距margin*/
        body{
            margin:0;
            padding:0;
            text-decoration:none;
        }
        /*border:粗细,样式,颜色*/
        #box{
            width:300px;
            border:1px solid red;
            padding:0 1px 2px 3px;/*上下左右*/
        }

        h2{
            font-size:16px;
            background:#00FFFF;
            margin:0;
            color:white;
        }

        form{
            background:#3cbda6;
        }

        div:nth-of-type(1) input{
            border:3px solid black;
        }

        div:nth-of-type(2) input{
            border:3px dashed #4d0b8c;
        }

        div:nth-of-type(3) input{
            border:3px dashed #4d0b8c;
        }
    </style>

</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>姓名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

在这里插入图片描述

边框

1.边框的粗细
2.边框的样式
3.边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--外边距妙用
        margin:0 auto;
    -->
    <style>
        /*body总有一个默认的外边距margin*/
        body{
            width:300px;
            margin:0 auto;
            padding:0;
            text-decoration:none;
        }
        /*border:粗细,样式,颜色*/
        #box{
            width:300px;
            border:1px solid red;
            padding:0 1 2 3;/*上下左右*/
        }

        /*
            顺时针旋转
            margin:0
            margin:0 1px
            margin:0 1px 2px 3px;
        */
        h2{
            font-size:16px;
            background:#00FFFF;
            margin:0;
            color:white;
        }

        form{
            background:#3cbda6;
        }

        input{
            border:1px solid black;
        }

        div:nth-of-type(1){
            padding:10px 2px;
        }
    </style>

</head>
<body>

<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>姓名:</span>
            <input type="text">
        </div>
        <div>
            <span>密码:</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱:</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

在这里插入图片描述

内外边距

盒子的计算方式:元素的大小:margin+border+pading+内容宽度

圆角边框

4个角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
       左上 右上 右下 左下,顺时针方向

       圆圈:圆角 = 半径
    -->
    <style>
        div{
            width:100px;
            height:100px;
            border:10px solid red;
            border-radius:50px;
        }
    </style>

</head>
<body>

    <div></div>

</body>
</html>

在这里插入图片描述

盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div{
            width:100px;
            height:100px;
            border:10px solid red;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>

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

在这里插入图片描述

浮动

标准文档流

块级元素:独占一行
h1~h6 p div 列表

行内元素:不独占一行
span a img strong
行内元素可以被包含在块级元素中反之则不可以

display

实现行内元素排列的方式,但是很多情况用的是float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        block:块元素
        inline:行内元素
        inline-block:是块元素,但是可以内联
        none:隐藏
    -->
    <style>

        div{
            width:100px;
            height:100px;
            border:1px solid red;
            display:inline;
        }

        span{
            width:100px;
            height:100px;
            border:1px solid red;
            display:inline-block;
        }

    </style>

</head>
<body>

    <div>div块元素</div>
    <span>span行内元素</span>

</body>
</html>

在这里插入图片描述

float

float: ;浮动位置 左右浮动
clear:float; 清除浮动
浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #father{
            border:1px #000 solid;
            height:800px;
        }
        .layer1{
            border:1px #F00 dashed;
            display:inline-block;
            float:left;
        }
        .layer2{
            border:1px #060 dashed;
            display:inline-block;
            float:left;
        }
        .layer3{
            border:1px #00F dashed;
            display:inline-block;
            float:right;
        }

        /*
            clear:right;右侧不允许有浮动元素
            clera:left;左侧不允许有浮动元素
            clear:both;两侧不允许有浮动元素
        */
        .layer4{
            border:1px #666 dashed;
            font-size:12px
            line-heght:23px;
            display:inline-block;
            float:right;
            clear:both;
        }

        .clear{
            clear:both;
            margin:0;
            padding:0;
        }
    </style>

</head>
<body>
    <div id="father">
        <div class="layer1"><img src="../../../resources/image/a.png" alt=""></div>
        <div class="layer2"><img src="../../../resources/image/a.png" alt=""></div>
        <div class="layer3"><img src="../../../resources/image/a.png" alt=""></div>
        <div class="layer4">浮动的盒子可以向左浮动,也可以向右浮动,直到它的外边缘碰到包含框或另一个浮动盒子为止</div>
        <div class="clear"></div>
    </div>
</body>
</html>

在这里插入图片描述

父级边框塌陷问题

clear

解决方案:
1.增加父级元素的高度

#father{
            border:1px #000 solid;
            height:800px;
        }

2.增加一个空的div标签清除浮动

.clear{
            clear:both;
            margin:0;
            padding:0;
        }
<div class="clear"></div>

3.overflow
在父级元素中增加一个overflow属性

#content{
            width:200px;
            height:150px;
            overflow:scroll;
        }

4.父类添加一个伪类:after

#father{
            border:1px #000 solid;
            height:800px;
        }

        #father:after{
            content:'';
            display:both;
            clear:both;
        }

小结:

1.浮动元素后面增加空的div
简单,代码中尽量避免空div
2.设置父元素的高度
简单,元素假设有了固定的高度,就会被限制
3.overflow
简单,下拉的一些场景避免使用
4.在父类添加伪类after(推荐)
写法稍微复杂,但是没有副作用,推荐使用

对比

display
方向不可控
float
浮动起来会脱离标准文档流,所以要解决父级边框塌陷的问题

定位

相对定位 position:relative

相对于原来的位置进行指定的偏移。相对定位之后仍然在标准文档流中,原来的位置会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--相对定位
        相对于自己原来的位置进行偏移
    -->
    <style>

    body{
        padding:20px;
    }

    div{
        margin:10px;
        padding:5px;
        font-size:12px;
        line-height:25px;
    }

    #father{
        border:1px solid #666;
    }

    #first{
        background-color:orange;
        border:1px dashed orange;
        position:relative;/*相对定位*/
        top:-20px;
        left:20px;
    }

    #second{
        background-color:#00FFFF;
        border:1px dashed #00FFFF;
        position:relative;/*相对定位*/
        bottom:-10px;
    }

    #third{
        background-color:red;
        border:1px dashed red;
        position:relative;/*相对定位*/
        right:20px;
    }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

在这里插入图片描述

绝对定位 position:absolute

定位:1.父级元素没有定位的前提下,相对于浏览器定位
2.父级元素存在定位,相对于父级元素进行偏移
3.在父级元素范围内移动

相对于父级或浏览器的位置进行指定的偏移,绝对定位的话他不在标准文档流中,他的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--相对定位
        相对于自己原来的位置进行偏移
    -->
    <style>

    body{
        padding:20px;
    }

    div{
        margin:10px;
        padding:5px;
        font-size:12px;
        line-height:25px;
    }

    #father{
        border:1px solid #666;
    }

    #first{
        background-color:orange;
        border:1px dashed orange;
        position:relative;/*相对定位*/
        top:-20px;
        left:20px;
    }

    #second{
        background-color:#00FFFF;
        border:1px dashed #00FFFF;
        position:absolute;/*绝对定位*/
        right:30px;

    }

    #third{
        background-color:red;
        border:1px dashed red;
        position:relative;/*相对定位*/
        right:20px;
    }
    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

在这里插入图片描述

固定定位 position:fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body{
            height:1000px;
        }

        div:nth-of-type(1){/*绝对定位,相对于浏览器*/
            width:100px;
            height:100px;
            background:red;
            position:absolute;
            right:0;
            bottom:0;
        }

        div:nth-of-type(2){/*固定定位*/
            width:50px;
            height:50px;
            background:yellow;
            position:fixed;
            right:0;
            bottom:0;
        }
    </style>

</head>
<body>
    <div>div1</div>
    <div>div2</div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

z-index

图层:z-index默认是0,最高无限
opacity:背景透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #content{
            padding:0px;
            margin:0px;
            width:250px;
            overflow:hidden;
            font-size:12px;
            line-height:25px;
            border:1px black solid;
        }

        #ul,li{
            padding:0px;
            margin:0px;
            list-style:none;
        }

        /*父级元素相对定位*/
        #content ul{
            position:relative:
        }

        .tipText,.tipBg{
            position:absolute;
            width:150px;
            height:25px;
            top:200px;
        }

        .tipText{
            color:white;
            z-index:1;/*层级*/
        }

        .tipBg{
            background:#000;
            opacity:0.5;/*背景透明度*/
        }
    </style>

</head>
<body>

    <div id="content">
        <ul>
            <li><img src="../../../resources/image/a.png" alt=""></li>
            <li class="tipText">学习</li>
            <li class="tipBg"></li>
            <li>时间:01-01</li>
            <li>地点:厦门</li>
        </ul>
    </div>

</body>
</html>

在这里插入图片描述

标签:Title,color,元素,基础,background,border,选择器,CSS
来源: https://blog.csdn.net/qq_46128504/article/details/120625373

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有