CSS3学习

最新推荐文章于 2024-01-20 22:42:41 发布
最新推荐文章于 2024-01-20 22:42:41 发布
阅读量161 收藏
点赞数
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44870321/article/details/119297837
版权

在这里插入图片描述

一、css入门

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

二、css的三种导入方式

在这里插入图片描述

三、基本选择器

3.1 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签选择器</title>
<!-- 标签选择器：
语法格式：标签{}
所有的属于同一类型的标签都会发生变化
-->
    <style>
        h1{
            color: cornflowerblue;
            background: burlywood;
        }
    </style>
</head>
<body>
<h1>标签选择器1</h1>
<h1>标签选择器2</h1>
<h1>标签选择器3</h1>
<h1>标签选择器4</h1>
</body>
</html>
3.2 类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
<!--类选择器：
语法格式：.类名{}
对相同的类会产生相同的结果
可以对多个标签归类 可以复用-->
    <style>
        .dy{
            color: chartreuse;
        }
        .zfc{
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<h1 class="dy">类选择器1</h1>
<h1 class="zfc">类选择器2</h1>
<h1 class="zfc">类选择器3</h1>
</body>
</html>
3.3 id选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
<!--id 选择器：
语法格式：#id名{}
id全局唯一 -->
    <style>
        #zfc{
            color: cornflowerblue;
        }
        #dy{
            color: chartreuse;
        }
    </style>
</head>
<body>
<h1 id="dy">id选择器1</h1>
<h1 id="zfc">id选择器2</h1>
<h1>id选择器3</h1>
</body>
</html>
  • 三种选择器优先级：id>class>标签

四、层次选择器

4.1 后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
<!-- 后代选择器：某个元素后面的所有元素 body标签后所有的p标签-->
    <style>
        body p{
            color: chartreuse;
        }
    </style>
</head>
<body>
<p>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>
<p>p7</p>
</body>
</html>

在这里插入图片描述

4.2 子选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>
<!--子选择器:只有一代儿子-->
    <style>
        body>p{
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<p>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>
<p>p7</p>
</body>
</html>

在这里插入图片描述

4.3 相邻兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>

<!-- 相邻兄弟选择器：被选中的元素的向下一个相邻的兄弟-->
    <style>
        .dy+p {
            color: blueviolet;
        }
    </style>
</head>
<body>
<p>p1</p>
<p class="dy">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>

</ul>
<p>p7</p>
</body>
</html>

在这里插入图片描述

4.4 通用兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层次选择器</title>

<!--通用兄弟选择器：当前选中元素的所有向下兄弟-->
    <style>
        .dy~p{
            color: blueviolet;
        }
    </style>
</head>
<body>
<p>p1</p>
<p class="dy">p2</p>
<p>p3</p>
<ul>
    <li>
        <p>p4</p>
    </li>
    <li>
        <p>p5</p>
    </li>
    <li>
        <p>p6</p>
    </li>

</ul>
<p>p7</p>
</body>
</html>

在这里插入图片描述

五、结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>
/*选中第一个li标签*/
    ul li:first-child{
        background: blueviolet;
    }
/*选中最后一个li标签*/
    ul li:last-child{
        background: chartreuse;
    }
/*选中第一个p标签：标签必须位于body内第一个（如果第一个不是p标签 而是其他） 否则失败*/
        body p:first-child{
            background: burlywood;
        }
/*选中最后一个p标签:标签必须位于body内最后一个 否则失败*/
    body p:last-child{
        background: blue;
    }
    </style>

</head>
<body>
<p>p1</p>
<p>p2</p>

<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
<p>p3</p>
</body>
</html>

在这里插入图片描述
扩充：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>
    <style>

/* 选中第一个p标签:nth-child(1)选择当前元素p的父元素，选择父级元素中的第一个，并且第一个必须是p元素才成功（如果第一个是h1，则失败） 否则失败，按顺序选*/
        p:nth-child(1){
            background: darkgreen;
        }
    /*选中最后一个p标签nth-of-type(3)按类型选，不存在顺序问题，即使第一个是h1 选第一个p也不会出错*/
      p:nth-of-type(3){
          background: darkgrey;
      }
    </style>

</head>
<body>

<p>p1</p>
<p>p2</p>

<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
<p>p3</p>
</body>
</html>

在这里插入图片描述

六、属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <style>
        .dy a{
            background: cornflowerblue;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            float: left;
            display: block;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
    /* 含有id的标签*/
    /*    a[id]{*/
    /*        background: chartreuse;*/
    /*    }*/
    
    /*id=123的标签*/
    /*    a[id="123"]{*/
    /*        background: blueviolet;*/
    /*    }*/
    
    /* class中包含links的标签*/
    /*    a[class*="links"]{*/
    /*        background: darkgreen;*/
    /*    }*/
    
    /* 以href中以a开头的标签*/
    /*    a[href^=a]{*/
    /*        background: coral;*/
    /*    }*/
    
    /*href中以pdf结尾的标签*/
    /*    a[href$=pdf]{*/
    /*        background: darkkhaki;*/
    /*    }*/
    </style>
</head>
<body>
<p class="dy">
    <a href="http://www.baidu.com" id="123" class="links item first">1</a>
    <a href="abc.jpg"class="links item" >2</a>
    <a href="a.pdf">3</a>
    <a href="x.doc">4</a>
    <a href="z.html">5</a>
</p>
</body>
</html>

七、字体风格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体风格</title>
<!--字体样式：
font-family:字体样式 可以写多个用逗号隔开
 font-size：字体大小
  font-weight：字体粗细 -->
    <style>
        body{
            font-family: "Arial Black",楷体;
            font-size: 30px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<h1>百度百科</h1>
<p>
    百度百科是百度公司推出的一部内容开放、自由的网络百科全书。其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条，参与词条编辑的网友超过717万人，几乎涵盖了所有已知的知识领域。 [1]
    “世界很复杂，百度更懂你”，百度百科旨在创造一个涵盖各领域知识的中文信息收集平台。百度百科强调用户的参与和奉献精神，充分调动互联网用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享。同时，百度百科实现与百度搜索、百度知道的结合，从不同的层次上满足用户对信息的需求。
</p>
<p>
    csdjvbeijfvbjekbvskjdbvkjfvbeifjb  ejfbvkjevbkvs s
</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--通常情况下 字体样式 都会写在一个总的font里面 分别是 字体粗细 大小 样式-->
    <style>
        p{
            font: bold 20px 楷体 ;
        }
    </style>
</head>
<body>
<p>
    百度百科是百度公司推出的一部内容开放、自由的网络百科全书。其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条，参与词条编辑的网友超过717万人，几乎涵盖了所有已知的知识领域。 [1]
    “世界很复杂，百度更懂你”，百度百科旨在创造一个涵盖各领域知识的中文信息收集平台。百度百科强调用户的参与和奉献精神，充分调动互联网用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享。同时，百度百科实现与百度搜索、百度知道的结合，从不同的层次上满足用户对信息的需求。
</p>

</body>
</html>

八、文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
<!-- 文本样式：
text-align：文本格式 左中右
color:颜色（两种表示方法：字母和RGB以及RGBA；RGB：0~F；#FF00000：红色；#00FF00绿色；#0000FF蓝色；RGBA的A表示透明度范围是0~1 ）
rgb(255,255,0) 红绿调色
rgba(255,255,0,0.9);透明度为0.9 越小越透明
text-indent: 2em;首行缩进两个字母
 line-height:行高
  height：高度
  行高和高度一样的时候 可以实现文本上下居中
  text-decoration:字体装饰 underline下划线 line-through中划线 overline上划线
  vertical-align 文字和图片对齐  即文字放在图片的中间
   text-decoration: none; 去掉下划线 尤其对于a标签来说
-->
    <style>
        h1{
            text-align: center;
            color: rgba(255,255,0,0.9);
        }
        .p1{
            background: aquamarine;
            height: 50px;
            text-indent: 2em;
            line-height: 50px;
        }
        .p3{
            text-decoration: underline;
        }
        .p4{
            text-decoration: line-through;
        }
        .p5{
            text-decoration: overline;
        }
        img,span{
            vertical-align: middle;
        }
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
<h1>百度百科</h1>
<a href="">dscwdc</a>
<p class="p3">123</p>
<p class="p4">123</p>
<p class="p5">123</p>
<p>
    <img src="images/a.jpeg" alt="">
    <span>adcsijdbvwijdv</span>
</p>
<p class="p1">
    百度百科是百度公司推出的一部内容开放、自由的网络百科全书。其测试版于2006年4月20日上线，正式版在2008年4月21日发布，截至2020年10月，百度百科已经收录了超2100万个词条，参与词条编辑的网友超过717万人，几乎涵盖了所有已知的知识领域。 [1]
    “世界很复杂，百度更懂你”，百度百科旨在创造一个涵盖各领域知识的中文信息收集平台。百度百科强调用户的参与和奉献精神，充分调动互联网用户的力量，汇聚上亿用户的头脑智慧，积极进行交流和分享。同时，百度百科实现与百度搜索、百度知道的结合，从不同的层次上满足用户对信息的需求。
</p>


</body>
</html>

八、文本阴影和超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a{
            text-decoration: none;
            color: #000000;
        }
        /* a:hover:超链接伪类 鼠标悬浮在上面的状态*/
        a:hover{
            color: aqua;
            font-size: 20px;
        }
        /*a:active：超链接伪类 鼠标点击不松手的状态*/
        a:active{
            color: blueviolet;
            font-size: 50px;
        }
        /*text-shadow: h-shadow v-shadow blur color;*/
        #aaa{
            text-shadow:10px 10px 5px red;
        }
    </style>
</head>
<body>
<a href="">
    <img src="images/a.jpeg" alt="">
</a>
<p id="aaa">
    <a href="">这是龚俊</a>
</p>
<p>
    <a href="">代表作:《山河令》</a>
</p>
</body>
</html>

在这里插入图片描述

九、列表样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<div id="nav">
    <h1>全部商品</h1>
    <ul>
        <li>
            <a href="https://huodong.taobao.com/wow/a/act/tao/dailyact/2633/wupr?wh_pid=dailyAct-214753" data-cid="1" data-dataid="222887" data-spm-anchor-id="a21bo.21814703.201867-main.1">女装</a>
            <a href="https://s.taobao.com/search?q=内衣" data-cid="1" data-dataid="222890" data-spm-anchor-id="a21bo.21814703.201867-main.2">内衣</a>
            <a href="https://s.taobao.com/search?q=家居" data-cid="1" data-dataid="222889" data-spm-anchor-id="a21bo.21814703.201867-main.3">家居</a>
        </li>
        <li>
            <a href="https://huodong.taobao.com/wow/a/act/tao/dailyact/2772/wupr?wh_pid=dailyAct-216657" data-cid="1" data-dataid="222887" data-spm-anchor-id="a21bo.21814703.201867-main.4">女鞋</a>
            <a href="https://s.taobao.com/search?q=%E7%94%B7%E9%9E%8B&amp;imgfile=&amp;commend=all&amp;ssid=s5-e&amp;search_type=item&amp;sourceId=tb.index&amp;spm=a21bo.2017.201856-taobao-item.1&amp;ie=utf8&amp;initiative_id=tbindexz_20170306" data-cid="1" data-dataid="222890" data-spm-anchor-id="a21bo.21814703.201867-main.5">男鞋</a>
            <a href="https://s.taobao.com/search?q=%E7%AE%B1%E5%8C%85&amp;imgfile=&amp;commend=all&amp;ssid=s5-e&amp;search_type=item&amp;sourceId=tb.index&amp;spm=a21bo.21814703.201856-taobao-item.1&amp;ie=utf8&amp;initiative_id=tbindexz_20170306" data-cid="1" data-dataid="222889" data-spm-anchor-id="a21bo.21814703.201867-main.6">箱包</a>
        </li>
        <li>
            <a href="https://s.taobao.com/search?ie=utf8&amp;initiative_id=staobaoz_20210219&amp;stats_click=search_radio_all%3A1&amp;js=1&amp;imgfile=&amp;q=%E6%AF%8D%E5%A9%B4&amp;suggest=history_1&amp;_input_charset=utf-8&amp;wq=%E6%AF%8D%E5%A9%B4&amp;suggest_query=%E6%AF%8D%E5%A9%B4&amp;source=suggest" data-cid="1" data-dataid="222887" data-spm-anchor-id="a21bo.21814703.201867-main.7">母婴</a>
            <a href="https://s.taobao.com/search?q=童装" data-cid="1" data-dataid="222890" data-spm-anchor-id="a21bo.21814703.201867-main.8">童装</a>
            <a href="https://s.taobao.com/search?q=玩具" data-cid="1" data-dataid="222889" data-spm-anchor-id="a21bo.21814703.201867-main.9">玩具</a>
        </li>
    </ul>

</div>

</body>
</html>

#nav{
    width: 200px;
    background: darkgrey;
}
h1{
    background: coral;
    font-size: 30px;
    text-indent: 1em;
    line-height:40px;
}
/*list-style: none 去掉圆点
decimal 数字
circle 圆
square 正方形*/
ul li{
    text-indent: 1em;
    list-style: none;
    height: 30px;
}
a{
    text-decoration: none;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

在这里插入图片描述

十、背景图像

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
        /*默认是平铺 即repeat*/
        .div1{
            background-image: url("images/a.jpeg");
        }
        /*向y平铺*/
        .div2{
            background-image: url("images/a.jpeg");
            background-repeat: repeat-y;
        }
        /*向x平铺*/
        .div3{
            background-image: url("images/a.jpeg");
            background-repeat: repeat-x;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

在这里插入图片描述

#nav{
    width: 200px;
    background: blueviolet;
}
h1{
    background: coral;
    font-size: 30px;
    text-indent: 1em;
    line-height:40px;
    background-image: url("images/d.jpeg");
    background-repeat: no-repeat;
    background-position: 185px 15px;
}
/*list-style: none 去掉圆点
decimal 数字
circle 圆
square 正方形*/
ul li{
    text-indent: 1em;
    list-style: none;
    height: 30px;
    background-image: url("images/r.jpeg");
    background-repeat:no-repeat;
    background-position: 145px 7px;
}
a{
    text-decoration: none;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

在这里插入图片描述

十一、盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        body{
            margin: 0;
        }
        #app{
            border: 1px solid gray;
            width: 280px;
        }
        h2{
            margin:0;
            color: black;
            font-size: 16px;
        }
        div:nth-of-type(1) input{
            border: 1px solid cornflowerblue;
        }
        /*dashed 虚线 solid 实线*/
        div:nth-of-type(2) input{
            border: 1px dashed #e83ded;
        }
    </style>
</head>
<body>
<!--写一个登录页面-->
<div id="app">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

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

  • margin:外边距
  • boder:边框
  • padding:内边距
  • 中间那个数的计算方式：外边距+内边距+边框+文字宽度
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        #app{
            border: 1px solid gray;
            width: 280px;
            margin: 0 auto;
        /*    margin padding 都有上下左右四个属性 只写一个是 表示上下左右 写两个表示上下相同和左右相同
        margin: 0 auto;表示上下为0 左右居中
         */
        }
        h2{
            margin:0;
            color: black;
            font-size: 16px;
        }
        div:nth-of-type(1) input{
            border: 1px solid cornflowerblue;
        }
        /*dashed 虚线 solid 实线*/
        div:nth-of-type(2) input{
            border: 1px dashed #e83ded;
        }
    </style>
</head>
<body>
<div id="app">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
    </form>
</div>

</body>
</html>

在这里插入图片描述
border-radius:圆角边框 有四个值：左上 右上 右下 左下 按照顺时针顺序 写一个代表四个值相同 写两个代表左上和右下相同 右上和左下相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #app1{
            /*圆形*/
            width: 100px;
            height: 100px;
            border: 1px solid red;
            border-radius: 50px;
        }
        #app2{
            /*半圆*/
            width: 100px;
            height: 50px;
            border: 1px solid red;
            border-radius: 50px 50px 0 0;
        }
        #app3{
            /*扇形*/
            width: 100px;
            height: 100px;
            border: 1px solid red;
            border-radius: 100px 0 0 0;
        }
    </style>
</head>
<body>
<div id="app1"></div>
<hr>
<div id="app2"></div>
<hr>
<div id="app3"></div>
</body>
</html>

在这里插入图片描述

十二、浮动

12.1 display
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*display:
inline 行内元素显示
 none 不显示
 block 块元素显示
 inline-block 任然是块元素 只不过显示在一行
 */
        div{
            width: 100px;
            height:100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            /*span是行内元素 独占一行 不管是否规定宽和高 他都是按照文字的大小 排成一行*/
            width: 100px;
            height:100px;
            border: 1px solid red;



        }
    </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>
        ul li{
            list-style: none;
        }
        div:nth-of-type(1){


            display: inline-block;
        }
        div:nth-of-type(2){


            display: inline-block;
        }
        div:nth-of-type(3){


            display: inline-block;
        }
        div:nth-of-type(4){
           

            display: inline-block;
        }

    </style>
</head>
<body>
<h1>视频播放器</h1>
<ul>
    <div>
        <li>腾讯视频</li>
    </div>
    <div>
        <li>爱奇艺视频</li>
    </div>
    <div>
        <li>芒果TV</li>
    </div>
    <div>
        <li>优酷视频</li>
    </div>
</ul>
</body>
</html>

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

12.2 float
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<div class="father">
    <div class="layer1">
        <img src="images/a.jpeg" alt="">
    </div>
    <div class="layer2">
        <img src="images/d.jpeg" alt="">
    </div>
    <div class="layer3">
        <img src="images/r.jpeg" alt="">
    </div>
    <div class="layer4">
        <p>
            你好，汉语词语，拼音是nǐ hǎo，是汉语中打招呼的敬语常用词语。
        </p>
    </div>
</div>

</body>
</html>

.father{
    border: 5px solid red;
}
.layer1{
    border: 1px dashed blue;
    display: inline-block;
    float: left;
}
.layer2{
    border: 1px dashed blue;
    display: inline-block;
    float: right;
}
.layer3{
    border: 1px dashed blue;
    display: inline-block;
    float: left;
}
.layer4{
    font-size: 10px;
    border: 1px dashed blue;
    display: inline-block;
    float: right;
}

在这里插入图片描述

  • 解决父级边框塌陷的问题
    1、增加父级边框高度
    在这里插入图片描述
    在这里插入图片描述
    2.增加一个空的div
    在这里插入图片描述
    在这里插入图片描述
    3、overflow
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid red;
            overflow: scroll;
        }
    </style>
</head>
<body>
<div>
    <img src="../12.2.float/images/a.jpeg" alt="">
    <p>
        你好，汉语词语，拼音是nǐ hǎo，是汉语中打招呼的敬语常用词语。
    </p>
</div>



</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
overflow解决父级边框塌陷的方式是在父级边框中设置 overflow=hidden
4、父级边框加一个伪类after
在这里插入图片描述

  • 消除浮动
    在这里插入图片描述

十三、定位

13.1、默认情况

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 10px;
        }
        #father{
            border: 1px solid black;
        }
        #first{
            border: 1px dashed black;
            background-color: cornflowerblue;
        }
        #second{
            border: 1px dashed black;
            background-color: #ed3752;
        }
        #third{
            border: 1px dashed black;
            background-color: #ede425;
        }

    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

在这里插入图片描述
13.2、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 10px;
        }
        #father{
            border: 1px solid black;
        }
        #first{
            border: 1px dashed black;
            background-color: cornflowerblue;
            position: relative;/*相对定位*/
            top:-20px;/*距离顶部的距离为-20px 即向上移动*/
            right: 20px;/*距离右端的距离为10px 即向左移动*/
        }
        #second{
            border: 1px dashed black;
            background-color: #ed3752;
        }
        #third{
            border: 1px dashed black;
            background-color: #ede425;
            position: relative;
            bottom: -15px;
            left: 10px;
        }

    </style>
</head>
<body>
<div id="father">
    <div id="first">第一个盒子</div>
    <div id="second">第二个盒子</div>
    <div id="third">第三个盒子</div>
</div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
13.3、绝对定位
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
13.4、固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 10000px;
        }
        div:nth-of-type(1){
            width: 50px;
            height: 50px;
            border: 1px solid #0a090a;
            font-size: 1px;
            background: #ede425;
            position: absolute;
            bottom: 0px;
            right: 0px;
        }
        div:nth-of-type(2){
            width: 30px;
            height: 30px;
            border: 1px solid rgba(1, 3, 3, 0.98);
            font-size: 1px;
            background: #4ffff8;
            position:fixed;
            bottom: 0px;
            right: 0px;
        }
    </style>
</head>
<body>
<div>绝对</div>
<div>固定</div>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

ps:opacity:0.5背景透明度

Maple！
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Css经典笔记
飘
04-24 1万+
# 课程目标: &gt; 1. 学会使用CSS选择器 &gt; 2. 熟记CSS样式和外观属性 &gt; 3. 熟练掌握CSS各种选择器 &gt; 4. 熟练掌握CSS各种选择器 &gt; 5. 熟练掌握CSS三种显示模式 &gt; 6. 熟练掌握CSS背景属性 &gt; 7. 熟练掌握CSS三大特性 &gt; 8. 熟练掌握CSS盒子模型 &gt; 9. 熟练掌握CSS浮动 &gt; 10.熟练...
CSS3学习心得
12-01
这是本人对CSS3学习的一些心得，如若有误，请批评指正，谢谢！
CSS 3学习
Reignsky的学习之路
05-29 286
一、什么是CSS Cascading Style Sheets层叠级联样式表 CSS:表现（美化网页） 二、CSS的简单入门 规范：<style>可以编写css的代码，每一个声明用分号结尾。 语法： 选择器{ 声明1; 声明2; 声明3; } 一般将CSS文件与HTML文件分开来写，然后通过标签连接。 <Link rel = "styl...
CSS3 知识点总结：详解篇
最新发布
m0_57587753的博客
01-20 1971
CSS3 是 CSS2 的升级版本，它在 CSS2 的基础上，新增了很多强大的新功能，从而解决一些实际面临的问题。 CSS3 的新特性如下： ● 新增了更加实用的选择器，例如：动态伪类选择器、目标伪类选择器、伪元素选择器等等。 ● 新增了更好的视觉效果，例如：圆角、阴影、渐变等。 ● 新增了丰富的背景效果，例如：支持多个背景图片，同时新增了若干个背景相关的属性。 ● 新增了全新的布局方案 —— 弹性盒子。 ● 新增了 Web 字体，可以显示用户电脑上没有安装的字体。 ……
css3全面学习
Khun_HWJ的博客
10-30 6070
结构框架：分为六个部分（属性、选择符、语法与规则、取值、css单位以及附录） 第一部分：属性（定位、布局、弹性盒模型、尺寸、外补白、内补白、边框、背景、颜色、字体、列表、表格、内容、用户界面、多栏、2D变换、过渡、动画、打印、媒体查询、only IE、only Firefox、only webkit） 第二部分：选择符（元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符） 第三部分：语法...
CSS3知识点精学
STATICHIT静砸的博客
12-28 851
CSS知识点精学1，之前学习html+css+JavaScript时比较仓促，基本是过了一遍基础之后，用到什么学什么，难免会漏掉很多细碎的知识点，写界面的时候也不太流畅，然后准备花费几天时间细致的重新学一遍，学了一半就感觉写样式顺畅了很多
学习CSS3
m0_60935443的博客
04-17 769
一，CSS基础知识 1，css概述 css简介 css语法结构 css注释 行内样式表 内部样式表 外部样式表 2，css选择器 通用选择器 标签选择器 类选择器 id选择器 后代选择器与子代选择器 交集选择器与并集选择器 伪类选择器 选择器的命名规则及优先级 二，css常用属性 1，css常用文本属性 字体，字号，与颜色属性 文本属性 2，css常用背景属性 背景颜色属性 背景图像属性 3，css其他常用属性 列表常用属性 超链接样式属性 ...
css3学习心得分享
09-25
几乎所有的主流浏览器的最新版本都对css3有着很好的支持(除了ie)，虽然IE对css3的支持不良，但好消息就是IE9将会全面支持html5和css3，下面与大家分享下本人对css3的认识，感兴趣的各位可以参考下
css3学习与例子
09-18
个人学习css3例子与笔记，包含基础部分与关键布局，阴影效果，动画效果，鼠标移过内容上浮效果，纯css画三角形圆形等例子与总结
CSS3学习笔记
01-28
CSS3学习笔记思维导图
CSS3 实战 CSS3学习必备书籍
07-10
CSS3学习必备书籍
CSS3入门基础（详解）
qq_44709805的博客
10-03 3132
CSS3入门基础详解 一、基本概念 css:层叠样式表(Cascading Style Sheets) 样式定义如何显示html元素 样式是为了解决内容与表现分离的问题 多个样式定义可层叠为一 样式通常存储在css文件中 css3是最新上午css标准 二、样式定义形式 内联样式：嵌在元素的style属性中定义（局部） 内部样式：在<style>标签中定义（页面级） 外部样式：在css文件中定义（可被多个页面调用） 1. 内联样式 margin-left:20px，元素的左外边距 注：不要在
学习CSS3基础，只需要这一篇就够了
m0_60121089的博客
03-22 516
CSS是啥 CSS指的是层叠样式表*(CascadingStyleSheets) CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素 CSS节省了大量工作。它可以同时控制多张网页的布局 外部样式表存储在CSS 文件中 *：也称级联样式表。 快速入门CSS 结构与样式不分离 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
CSS3 入门教程
Ifeng_iPhone的博客
09-28 887
css就是样式表，用来给html添加样式的html本身是素颜的，css就是化妆师，让我们html好看点。
CSS3学习笔记大全
furfur-jiang的博客
02-04 849
此片文章是CSS3 CSS3参考手册解读指南： [] 表示可选项 | 表示或者 || 表示多选一 ？ 0个或1个 *表示0个或多个 {} 表示范围 新增选择器 属性选择器 选取标签带有某些特殊属性的选择器 /* 获取到拥有该属性的元素 */ div[class^=font] { /* class^=font 表示 font 开始位置就行了 */ color: pink...
深入学习CSS3学习记录
爱吃红豆的猫
08-27 577
 初识CSS3 什么是CSS3？ CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。 在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览...
关于学习css3之后的一点心得
baidu_38766543的博客
09-02 759
。。。生活终于对我这个死肥宅下手了，自从学习了css3 之后，从过渡到动画，和之前的jq方法一起，感觉要记住一万个方法，一万万个属性。鬼鬼，都是人，为嘛人家分分钟就记住了我敲一遍还不一定记得住。难受啊马飞。...
html5&css3学习笔记下载
09-21
3. Canvas绘图：HTML5的元素允许开发者使用JavaScript绘制图形、动画和游戏等，提供了更强大的图形处理能力。 4. 本地存储：HTML5提供了本地存储功能，包括LocalStorage和SessionStorage，可以在客户端存储数据，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值