学习狂神说CSS

怕涨的小农思维真好笑 發表於 2024-6-16 04:00:00

2024-06-15
1.CSS快速入门示例及CSS导入及行内样式、本文件内style定义、外部css定义样式的优先级（就近原则）
CSS文件：
<div class="cnblogs_code">
<pre>h1{
color: red;
}</pre>
</div>
HTML文件：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 /* 标签选择器
 样式定义格式：
 声明1;
 声明2;*/
 h1{
 color: blue;
 }
</style>
<link rel="stylesheet" href="css/style.css"/>

</head>
<body>

<h1>我是标题</h1>
</body>
</html></pre>
</div>
2.三种基本选择器及优先级
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
 color: red;
}
.practice-class{
 color: blue;
}
#practice-id{
 color: green;
}
</style>
</head>
<body>
<p>段落1</p>
<p class="practice-class">段落2</p>


<p id="practice-id" class="practice-class">段落3</p>
</body>
</html></pre>
</div>
2024-06-16
1.层次选择器
hierarchical /ˌhaɪəˈrɑː.kɪ.kəl/ 按等级划分的
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 /* 不用id选择器、类选择器，来进行选择 */
 /* 层次选择器 */
 /* 1.后代选择器：选择所有后代：
 太爷爷爷爸爸孙子
 对太爷来说，爷爷爸爸孙子全是其后代 */
 /*body p{
 background: green;
 }*/
 /*ul p{
 background: blue;
 }*/
 /* 2.子选择器：选直接后代
 太爷爷爷爸爸孙子
 对太爷来说，爷爷是其直接后代 */
 /*body>p{
 background: red;
 }*/
 /* 3.相邻兄弟选择器
 我备注：也可以理解为相邻弟弟选择器，
 选择直接相邻的那个弟弟 */
 /*.practice-class + p{
 background: orange;
 }*/
 /* 4.通用选择器
 我备注：也可以理解为全部弟弟选择器 */
 .practice-class ~ p{
 background: brown;
 }
</style>
</head>
<body>
<p>p0</p>
<p>p1</p>
<p class="practice-class">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></pre>
</div>
2024-06-17
1.结构伪类选择器
伪类：条件
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 /* 结构伪类选择器
 伪类：条件
 结构伪类选择器，
 即在结构的基础上，
 伪类即条件去选择 */

 /* 在不用id、class选择器的基础上进行练习 */

 /* 选择ul第一个子元素 */
 ul li:first-child{
 background: brown;
 }

 /* 选择ul最后一个子元素 */
 ul li:last-child{
 background: green;
 }

 /* 选中p1：
 定位到父元素，
 选择当前的第一个（子）元素。
 注意：这个有个隐含条件是
 要选的元素必须是p标签，
 否则选不上，
 即假设p的父级下的第一个元素为div，
 则该div不会被选中 */
 p:nth-child(1){
 background: burlywood;
 }

 /* 选中p2：
 定位到父元素，
 选择当前的第二个类型为p的（子）元素，
 即必须是其父元素的所有类型为p标签的元素
 构成的列表中的第二个元素，
 若没有这元素（例如父元素总共也没有两个p标签子元素），
 则不会选中*/
 p:nth-of-type(2){
 background: blue;
 }

 /* 超链接鼠标移上去变色 */
 a:hover{
 background: darkorange;
 }
</style>
</head>
<body>
<a href="#">验证鼠标效果</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
 <li>l1</li>
 <li>l2</li>
 <li>l3</li>
</ul>
</body>
</html></pre>
</div>
2024-06-18
1.属性选择器（重要）
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* .test a 后代选择器 */
.test a{
 background: dodgerblue;
 border-radius: 170px;
 /* 我一开始不会将其变成球
 要设置浮动，否则是不会变成球的
 float: left，向左浮动*/
 float: left;
 width: 170px;
 height: 170px;
 /* 文字居中 */
 text-align: center;
 color: red;
 /* 去掉下划线 */
 text-decoration: none;
 /*font-style: italic; 斜体*/
 /*font-variant: 这个不会，不用它*/
 /*font-weight: bold;*/
 /*font-stretch: 不会，不用它*/
 font-size: large;
 /*line-height: 50px; 行高*/
 /*font-family: Arial;字体*/
 /* 我一开始写font: solid 10px 楷体;是错误的
 font的顺序是：
 下列字号font-size和font-family这俩是必须的
 其余均可选
 字号和行高用/分隔
 1.font-style: italic; 斜体
 2.font-weight: bold; 加粗
 3.font-size: 50px; 字号 / line-height: 170px; 行高
 4.font-family: Arial; 字体*/
 font: italic bold 50px/170px Arial;
 /* 外边距提供间距 */
 margin-left: 17px;
}

/*属性选择器：重要*/
/* 属性类似于id+class*/
/* 根据dom元素的属性，选择dom元素*/

/*1.选择含有id属性的*/
a{
 background: yellow;
}
/*2.选择class属性值为first的 = */
/* （完全等于）*/
/*下面这个选不到，
因为没有class完全等于first的*/
 /*a{
 background: green;
 }*/
/* 这个能选到 */
/*a{
 background: green;
}*/
/*3.选择class属性值包含first的 *= */
a{
 background: darkorange;
}
/*4.选择href属性以http开头的 ^= */
a{
 background: brown;
}
/*5.选择href属性以.pdf结尾的 $= */
a{
 background: darkorchid;
}
</style>
</head>
<body>
<p class="test">
<a class="links item first">1</a>
<a href="#" class="links item" id="second">2</a>
<a href="http://www.cnblog.com" class="links item">3</a>
<a href="https://www.baidu.com" class="links item">4</a>
<a href="test.doc" class="links item">5</a>
<a href="test.pdf" class="links item">6</a>
<a href="test.jpg" class="links item">7</a>
<a href="practice.pdf" class="links item">8</a>
<a href="study.txt" class="links item">9</a>
<a href="http://test.org" class="links item">10</a>
</p>
</body>
</html></pre>
</div>
 2024-06-27
1.span标签及文字样式
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 .span-big{
 /* font-weight粗细。bold加粗 */
 font-weight: bold;
 /* font-family字体 */
 /* 逗号分隔的，
 Centaur是英文字体则用于英文，
 楷体则应用于中文 */
 font-family: Centaur,'楷体';
 /* font-size大小 */
 font-size: 50px;
 /* color颜色 */
 /*color: red;*/
 /* rgb 红绿蓝 */
 /*color: #00ff00;*/
 /*color: rgb(0, 255, 0);*/
 /* rgba a:透明度，取值0~1，由浅变深 */
 color: rgba(0, 255, 0, 0.5);
 }
</style>
</head>
<body>

欢迎学习<span class="span-big">CSS课程</span>。
</body>
</html></pre>
</div>
2024-06-28
1.文本样式：对齐方式
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 /* 文本样式：
 对齐方式：text-align */
 .first-p{
 text-align: center;
 /*text-align: left;*/
 /*text-align: right;*/
 font-size: 50px;
 }
</style>
</head>
<body>

<h1>CSS基础</h1>
<div>
<p class="first-p">在Vue中，当你在模板中监听一个自定义事件时，通常你不需要在事件处理函数后面加上括号()，除非你想要在触发事件时立即执行某个方法并传递额外的参数（这通常不是从子组件传递的参数）。</p>
</div>
</body>
</html></pre>
</div>
2024-06-29
1.文本样式：首行缩进
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 /* 首行缩进：text-indent
 1em为（当前样式下）一个字的大小 */
 .practice-text-indent{
 text-indent: 2em;
 font-size: 50px;
 }
</style>
</head>
<body>
<h1>CSS基础</h1>
<div>
<p class="practice-text-indent">Tomcat使用这个目录来编译JSP页面和存放临时文件。删除work目录会清除所有编译的JSP页面和临时文件，这通常有助于解决一些运行时问题，尤其是与JSP相关的问题。</p>
</div>
</body>
</html></pre>
</div>
2024-06-30
1.文本样式：设置行高等于区域高度从而竖直方向居中、修饰（上中下划线）、两元素保持在水平方向上对齐
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 /* 文本样式：
 对齐方式：text-align */
 .first-p{
 text-align: center;
 /*text-align: left;*/
 /*text-align: right;*/
 font-size: 50px;
 }
 /* 首行缩进：text-indent
 1em为（当前样式下）一个字的大小 */
 .practice-text-indent{
 text-indent: 2em;
 font-size: 50px;
 }
 /* 文本竖直方向上居中：
 通过设置
 行高line-height等于当前区域高度
 来实现*/
 .practice-line-height{
 background: chartreuse;
 height: 500px;
 line-height: 500px;
 font-size: 50px;
 }
 /* 修饰：下、中、上划线
 text-decoration
 text-decoration: underline:下划线
 text-decoration: line-through:中划线
 text-decoration: overline:上划线
 */
 .text-decoration-underline{
 text-decoration: underline;
 font-size: 50px;
 }
 .text-decoration-line-through{
 text-decoration: line-through;
 font-size: 50px;
 }
 .text-decoration-overline{
 text-decoration: overline;
 font-size: 50px;
 }
 /* 实现两元素在水平方向上对齐
 img,span 要对齐的两个元素
 vertical-align: middle;
 */
 img,span{
 vertical-align: middle;
 }
</style>
</head>
<body>
<h1>CSS基础</h1>
<div>
<p class="first-p">在Vue中，当你在模板中监听一个自定义事件时，通常你不需要在事件处理函数后面加上括号()，除非你想要在触发事件时立即执行某个方法并传递额外的参数（这通常不是从子组件传递的参数）。</p>
<p class="practice-text-indent">Tomcat使用这个目录来编译JSP页面和存放临时文件。删除work目录会清除所有编译的JSP页面和临时文件，这通常有助于解决一些运行时问题，尤其是与JSP相关的问题。</p>
<p class="practice-line-height">从您提供的代码片段来看，您确实在第一次调用 this.$f7router.navigate 方法时遗漏了将 props 选项作为路由导航的第二个参数传递。在Framework7中（或类似的路由系统中），props 选项通常用于将自定义属性传递给路由的目标组件。</p>
<p class="text-decoration-underline">修饰-下划线</p>
<p class="text-decoration-line-through">修饰-中划线</p>
<p class="text-decoration-overline">修饰-上划线</p>
<p>
 <img src="images/sea.png" style="width: 100px; height: 100px;"/>
 <span>您错误地将 props 对象放在了字符串拼接的末尾，而不是作为 navigate 方法的第二个参数。这导致了 props 对象没有被正确地传递到路由中。</span>
</p>
</div>
</body>
</html></pre>
</div>
2024-07-01
1.超链接伪类
a:hovor 当鼠标悬停时的样式
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 .book-img{
 width: 200px;
 height: 300px;
 }
 /* 去掉超链接下划线
 text-decoration: none;*/
 a{
 text-decoration: none;
 color: #000000;
 }
 /* 超链接伪类，
 当鼠标悬停时的样式
 a:hover */
 a:hover{
 color: orange;
 font-size: 50px;
 }
</style>
</head>
<body>
<a href="#">
<img class="book-img" src="images/sea.png"/>
</a>
<p>
<a href="#">码出高效</a>
</p>
<p>
<a href="#">作者：孤尽老师</a>
</p>
<p>
￥99
</p>
</body>
</html></pre>
</div>
2024-07-02
1.文本阴影
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 /* 文本阴影
 text-shadow
 参数(h-shadow, v-shadow, blur, color)
 h-shadow x轴偏移
 v-shadow y轴偏移
 blur 模糊距离（模糊半径）
 模糊半径越小越清楚
 越大越模糊
 color 阴影颜色
 备注：
 偏移，方向定义：
 以窗口左上角为原点，
 原点水平向右为x轴正向，
 原点竖直向下为y轴正向 */
 #price{
 text-shadow: 50px 10px 3px red;
 }
</style>
</head>
<body>
<p id="price">
￥99
</p>
</body>
</html></pre>
</div>
2024-07-03
1.列表样式
页面：index.html：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div id="nav">
 <h2 class="title">全部商品分类</h2>
 <ul>
 <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
 <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
 <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a>
 <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
 <li><a href="#">服装鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a>
 <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
 <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a>
 <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
 </ul>
</div>
</body>
</html></pre>
</div>
样式：css/style.css：
<div class="cnblogs_code">
<pre>/* 通用规范是样式从最外层到内层写，
外层样式写在上方，
内层样式写在下方 */
#nav{
width: 300px;
background: darkgray;
}

.title{
font-size: 18px;
/* 加粗 */
font-weight: bold;
text-indent: 1em;
line-height: 35px;
background: red;
}

/*ul{*/
/* background: darkgray;*/
/*}*/

/* 选中所有ul下的li
层次选择器里
的后代选择器ul li{}

列表项前‘.’的样式
list-style: none;不展示
list-style: circle;空心圆
list-style: decimal;（有序）数字
list-style: square;正方形*/
ul li{
/* height给个列表项之间的间距 */
height: 25px;
list-style: none;
font-size: 14px;
text-indent: 1em;
}

a{
color: #000;
/* 去下划线 */
text-decoration: none;
}

a:hover{
color: orange;
text-decoration: underline;
}</pre>
</div>
2024-07-04
1.背景（图片）
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 /* border
 设置边框
 参数分别为：
 边框粗细、边框样式、边框颜色
 solid:实线*/
 /* background-image
 设置背景图片*/
 div{
 width: 1200px;
 height: 800px;
 border: 1px solid red;
 background-image: url("images/touXiang.png");
 /* 默认是平铺，平铺满整个区域 */
 /*background-repeat: repeat;*/
 }
 .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></pre>
</div>
2024-07-05
1.接昨天代码，背景（图片），向菜单列表嵌入向下向右箭头图片，补充偏移相关内容：
style.css：
<div class="cnblogs_code">
<pre>/* 菜单列表分别加向下和向右的箭头*/
.title{
font-size: 18px;
/* 加粗 */
font-weight: bold;
text-indent: 1em;
line-height: 35px;
/* css中都是用空格，而不是逗号分隔
直接合起来写background：
参数顺序：
background-color
background-image
 url里../ 取上一层目录
background-position
 即position-x、position-y
 相对于（左上角）原点的
 水平（x）、竖直（y）偏移量
background-repeat
repeat意思是重复*/
background: red url("../images/down.png") 260px 4px no-repeat;
}

ul li{
/* height给个列表项之间的间距 */
height: 25px;
list-style: none;
font-size: 14px;
text-indent: 1em;
/* 分开写background：
url里../ 取上一层目录
background-position
相对于（左上角）原点的偏移量*/
background-image: url("../images/right.png");
background-position: 221px 2px;
background-repeat: no-repeat;
}</pre>
</div>
2024-07-06
1.border边框
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 /* 盒子模型
 border设置边框
 参数顺序：
 粗细、样式、颜色
 粗细，例如2px;
 样式，例如solid实线，
 dashed，类似于带间隔的线样式*/
 #box{
 width: 300px;
 border: 1px solid red;
 /*border: 1px dashed red;*/
 }
</style>
</head>
<body>
<div id="box">
 <h2>用户登录</h2>
 <form action="#">
 <div>
 <span>用户名：</span>
 <input type="text" id="username"/>
 </div>
 <div>
 <span>密码：</span>
 <input type="text" id="pwd"/>
 </div>
 <div>
 <span>邮箱：</span>
 <input type="text" id="email"/>
 </div>
 </form>
</div>
</body>
</html></pre>
</div>
2024-07-07
1.接昨天的border边框，及新内容：margin外边距、padding内边距
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 /* 去掉body默认的
 8px的外边距 */
 body{
 margin: 0;
 }
 h2{
 font-size: 16px;
 background: cadetblue;
 margin: 0;
 }
 /* 盒子模型
 border设置边框
 参数顺序：
 粗细、样式、颜色
 粗细，例如2px;
 样式，例如solid实线，
 dashed，类似于带间隔的线样式

 margin的一个妙用：
 用于居中对齐
 margin: 0 auto;

 margin和padding都是：
 两个参数则：上下左右
 四个参数则：
 顺时针上右下左 */
 #box{
 width: 300px;
 border: 1px solid red;
 /*border: 1px dashed red;*/
 margin: 0 auto;
 }
 form{
 background: cadetblue;
 }
 /* 层次选择器：后代选择器 */
 .username-div input{
 border: 2px dashed black;
 }
 .pwd-div input{
 border: 2px solid darkorchid;
 }
 .email-div input{
 border: 2px solid darkorange;
 }
</style>
</head>
<body>
<div id="box">
 <h2>用户登录</h2>
 <form action="#">
 <div class="username-div">
 <span>用户名：</span>
 <input type="text" id="username"/>
 </div>
 <div class="pwd-div">
 <span>密码：</span>
 <input type="text" id="pwd"/>
 </div>
 <div class="email-div">
 <span>邮箱：</span>
 <input type="text" id="email"/>
 </div>
 </form>
</div>
</body>
</html></pre>
</div>
2024-07-08
1.圆角边框
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.circle{
 width: 500px;
 height: 500px;
 border: 10px solid red;
 /* border-radius
 圆角边框
 参数顺时针
 4个：左上右上右下左下
 2个：左上（及右下）右上（及左下）
 1个：所有
 border-radius值
 设置的是圆角的半径
 当父级是正方形，
 且border-radius等于
 父级长宽一半时，就是个圆
 border-radius: 250px;圆*/
 /*border-radius: 30px 60px 40px 80px;*/
 /*border-radius: 30px 80px;*/
 border-radius: 250px;
}
/* （上）半圆 */
.banYuan{
 width: 500px;
 height: 250px;
 border: 5px solid blue;
 border-radius: 250px 250px 0 0;
}
/* （右下）四分之一圆 */
.siFenZhiYiYuan{
 width: 250px;
 height: 250px;
 border: 5px solid green;
 border-radius: 0 0 250px 0;
}
</style>
</head>
<body>
<div class="circle"></div>
<div class="banYuan"></div>
<div class="siFenZhiYiYuan"></div>
</body>
</html></pre>
</div>
2024-07-09
1.盒子阴影
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 div{
 width: 800px;
 height: 500px;
 border: 5px solid red;
 /* 盒子阴影box-shadow
 参数：水平偏移垂直偏移模糊半径阴影颜色
 模糊半径越大，阴影越模糊 */
 box-shadow: 80px 30px 2px yellow;
 }
</style>
</head>
<body>
<div></div>
</body>
</html></pre>
</div>
2024-07-10
1.display 块级元素行内元素
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 /* 块级元素：独占一行：
 h1~h6 div p ul li

 行内元素：不独占一行：
 span a input

 块级元素内可以
 嵌套行内元素，
 但行内元素不能
 嵌套行内元素。

 display: block;
 设置为块级元素
 display: inline;
 设置为行内元素
 display: inline-block;
 设置为
 保持块级元素（的高度等）
 且不独占一行
 display: none;
 设置为不显示*/
 div{
 width: 500px;
 height: 400px;
 border: 2px solid red;
 /*display: block;*/
 display: inline-block;
 }
 span{
 width: 500px;
 height: 400px;
 border: 2px dashed blue;
 /*display: block;*/
 display: inline-block;
 }
</style>
</head>
<body>
<div>div内容</div>
<span>span内容</span>
</body>
</html></pre>
</div>
2024-07-11
1.float浮动
index.html：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="father">
 <div class="div1">
 <img src="images/car2.png"/>
 </div>
 <div class="div2">
 <img id="sea" src="images/sea.png"/>
 </div>
 <div class="div3">
 <img src="images/touXiang.png"/>
 </div>
 <div class="div4">
 <span>handleName()，Vue会尝试在渲染时就执行它，而不是在事件被触发时</span>
 </div>
</div>
</body>
</html></pre>
</div>
style.css：
<div class="cnblogs_code">
<pre>div{
margin: 10px;
padding: 5px;
}

#father{
border: 1px solid black;
}

/* float:浮动
left向左浮动
right向右浮动

clear: both;
清除浮动：
保持浮动的同时，
使其有块元素的效果。*/
.div1{
border: 1px dashed red;
/*display: inline-block;*/
float: left;
clear: both;
}

.div2{
border: 1px dashed blue;
/*display: inline-block;*/
float: right;
clear: both;
}

.div3{
border: 1px dashed green;
/*display: inline-block;*/
float: left;
clear: both;
}

.div4{
border: 1px dashed darkmagenta;
/*display: inline-block;*/
float: left;
clear: both;
}

#sea{
width: 200px;
height: 400px;
}</pre>
</div>
2024-07-12
1.float浮动：浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止
2.解决父级边框塌陷（共四种方法，这里先列出前两种）
index.html：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="father">
 <div class="div1">
 <img src="images/car2.png"/>
 </div>
 <div class="div2">
 <img id="sea" src="images/sea.png"/>
 </div>
 <div class="div3">
 <img src="images/touXiang.png"/>
 </div>
 <div class="div4">
 <span>浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止</span>
 </div>
 <div class="clear"></div>
</div>
</body>
</html></pre>
</div>
style.css：
<div class="cnblogs_code">
<pre>div{
margin: 10px;
padding: 5px;
}

#father{
border: 1px solid black;
/*height: 1000px;*/
}

/* float:浮动
left向左浮动
right向右浮动

浮动的盒子可以
向左浮动，也可以
向右浮动，
直到它的外边缘碰到
包含框或
另一个浮动盒子为止

clear: both;
清除浮动：
保持浮动的同时，
使其有块元素的效果。*/

/* 解决父级边框塌陷的方法：
1.给父级边框足够的高度
#father{
border: 1px solid black;
height: 1000px;
}
2.设置空的div，
且div设置如下3点：
（1）左右清除浮动，
（2）margin为0，
（3）padding为0

备注：
clear: left;清除左侧浮动
clear: right;清除右侧浮动
clear: both;清除两侧浮动
clear: none;不清除浮动
常用的是clear: both;
*/
.div1{
border: 1px dashed red;
/*display: inline-block;*/
float: left;
clear: both;
}

.div2{
border: 1px dashed blue;
/*display: inline-block;*/
float: right;
clear: both;
}

.div3{
border: 1px dashed green;
/*display: inline-block;*/
float: left;
clear: both;
}

.div4{
border: 1px dashed darkmagenta;
/*display: inline-block;*/
float: left;
clear: both;
}

#sea{
width: 200px;
height: 400px;
}

.clear{
clear: both;
margin: 0;
padding: 0;
}</pre>
</div>
2024-07-13
1.解决父级边框塌陷的第三种方式：设置父级元素overflow: hidden
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 img{
 /*float: left;*/
 }
 #content{
 border: 1px solid black;
 width: 200px;
 height: 100px;
 /* 解决父级边框塌陷的第三种方式：设置父级元素overflow: hidden */
 overflow: hidden;
 /* overflow: scroll; 滚动*/
 /*overflow: scroll;*/
 }
</style>
</head>
<body>
<div id="content">
<img src="images/car2.png"/>
<div>哈哈，指一个人发出的笑声，高兴开心欢乐时的状态，抒发快乐的心情，表现一个人很开心快乐的状态。也指人通常用来开玩笑。一种很逗的心情。</div>
</div>
</body>
</html></pre>
</div>
2024-07-14
1.解决父级边框塌陷的第四种方式，也是最推荐的方式：对父级元素设置伪类
<div class="cnblogs_code">
<pre>#father:after{
content: '';
display: block;
clear: both;
}</pre>
</div>
解决父级边框塌陷四种方式完整代码：
index.html：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
<div id="father">
 <div class="div1">
 <img src="images/car2.png"/>
 </div>
 <div class="div2">
 <img id="sea" src="images/sea.png"/>
 </div>
 <div class="div3">
 <img src="images/touXiang.png"/>
 </div>
 <div class="div4">
 <span>浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止</span>
 </div>

</div>
</body>
</html></pre>
</div>
style.css：
<div class="cnblogs_code">
<pre>div{
margin: 10px;
padding: 5px;
}

#father{
border: 1px solid black;
/*height: 1000px;*/
/*overflow: hidden;*/
}

/* float:浮动
left向左浮动
right向右浮动

浮动的盒子可以
向左浮动，也可以
向右浮动，
直到它的外边缘碰到
包含框或
另一个浮动盒子为止

clear: both;
清除浮动：
保持浮动的同时，
使其有块元素的效果。*/

/* 解决父级边框塌陷的方法：
1.给父级边框足够的高度
#father{
border: 1px solid black;
height: 1000px;
}
2.设置空的div，
且div设置如下3点：
（1）左右清除浮动，
clear: both;
（2）margin为0，
（3）padding为0

备注：
clear: left;清除左侧浮动
clear: right;清除右侧浮动
clear: both;清除两侧浮动
clear: none;不清除浮动
常用的是clear: both;

3.设置父级元素overflow: hidden

4.对父元素设置伪类
这是最好的方式
#father:after{
content: '';
display: block;
clear: both;
}
*/
.div1{
border: 1px dashed red;
/*display: inline-block;*/
float: left;
clear: both;
}

.div2{
border: 1px dashed blue;
/*display: inline-block;*/
float: right;
clear: both;
}

.div3{
border: 1px dashed green;
/*display: inline-block;*/
float: left;
clear: both;
}

.div4{
border: 1px dashed darkmagenta;
/*display: inline-block;*/
float: left;
clear: both;
}

#sea{
width: 200px;
height: 400px;
}

.clear{
clear: both;
margin: 0;
padding: 0;
}

#father:after{
content: '';
display: block;
clear: both;
}</pre>
</div>
2024-07-15
1.开始学习定位：相对定位、绝对定位、z-index
今天先是最开始的默认情况：index.html：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 div{
 margin: 10px;
 padding: 5px;
 font-size: 12px;
 line-height: 25px;
 }
 #father{
 border: 1px solid black;
 padding: 0;
 }
 #first{
 background-color: cadetblue;
 border: 1px dashed blue;
 }
 #second{
 background-color: yellow;
 border: 1px dashed darkorange;
 }
 #third{
 background-color: burlywood;
 border: 1px dashed brown;
 }
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html></pre>
</div>
2024-07-16
1.相对定位：
<div class="cnblogs_code">
<pre>相对定位：相对于该元素原来的位置进行偏移
position: relative;
元素仍在文档流中，其原始位置仍被保留。
（所以示例中div3已经向下偏移出父级div了。但因为其原始位置仍被保留了，所以没出现父级边框塌陷</pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
 padding: 50px;
}
div{
 margin: 10px;
 padding: 5px;
 font-size: 12px;
 line-height: 25px;
}
#father{
 border: 1px solid black;
 padding: 0;
}
/* 相对定位：相对于该元素原来的位置进行偏移
position: relative;
元素仍在文档流中，其原始位置仍被保留。
（所以示例中div3已经向下偏移出父级div了。但因为其原始位置仍被保留了，所以没出现父级边框塌陷）
top right bottom left*/
#first{
 background-color: cadetblue;
 border: 1px dashed blue;
 position: relative;
 top: -60px;
 left: 20px;
}
#second{
 background-color: yellow;
 border: 1px dashed darkorange;
}
#third{
 background-color: burlywood;
 border: 1px dashed brown;
 position: relative;
 right: 30px;
 bottom: -60px;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html></pre>
</div>
示例中div3已经向下偏移出父级div了。但因为其原始位置仍被保留了，所以没出现父级边框塌陷。效果：
<img src="https://img2024.cnblogs.com/blog/1370036/202407/1370036-20240717080702371-1077701698.png">
2024-07-17
1.相对定位练习
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 #father{
 text-align: center;
 }
 #sequar{
 border: 1px solid red;
 width: 300px;
 margin: 0 auto;
 padding: 10px;
 /* 直接设置父级边框高度，来解决父级边框塌陷 */
 height: 300px;
 }
 /* 父级正方形设置伪类，解决父级边框塌陷。但这里测试不好使。
 改为直接设置父级边框高度，来解决父级边框塌陷 */
 /*#sequar:after{
 content: '';
 display: block;
 clear: both;
 }*/
 a{
 width: 100px;
 height: 100px;
 background-color: hotpink;
 color: white;
 /*display: inline-block;解决原默认inline设置width、height失效问题。
 同时又因为通过设置父级高度解决了父级边框塌陷问题，
 所以就不用担心我一开始练习时用block导致整体5行，不会解决父级塌陷的问题了。
 而inline-block，左右会有间距。所以这里就用block。*/
 display: block;
 line-height: 100px;
 text-decoration: none;
 }
 a:hover{
 background-color: blue;
 }
 #a2{
 position: relative;
 top: -100px;
 left: 200px;
 }
 #a4{
 position: relative;
 top: -100px;
 left: 200px;
 }
 #a5{
 position: relative;
 top: -300px;
 left: 100px;
 }
</style>
</head>
<body>
<div id="father">
<div id="sequar">
 
 <a id="a1" href="#">链接1</a>
 <a id="a2" href="#">链接2</a>
 <a id="a3" href="#">链接3</a>
 <a id="a4" href="#">链接4</a>
 <a id="a5" href="#">链接5</a>
</div>
</div>
</body>
</html></pre>
</div>
效果：
<img src="https://img2024.cnblogs.com/blog/1370036/202407/1370036-20240717200340542-1667359417.png">
2024-07-18
1.绝对定位：position: absolute;
1.1相对于已定位的父级元素位置进行定位，如果没有已定位的父级元素，则相对于浏览器定位。
1.2脱离标准文档流，其在文档流中的原始位置不会被保留。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
 margin: 10px;
 padding: 5px;
 font-size: 12px;
 line-height: 25px;
}
#father{
 border: 1px solid black;
 padding: 0;
 position: relative;
}
#first{
 background-color: cadetblue;
 border: 1px dashed blue;
}
/* 绝对定位：position: absolute;
1.相对于已定位的父级元素位置进行定位，如果没有已定位的父级元素，则相对于浏览器定位。
2.脱离标准文档流，其在文档流中的原始位置不会被保留。*/
#second{
 background-color: yellow;
 border: 1px dashed darkorange;
 position: absolute;
 /*left: 100px;*/
 /*top: 300px;*/
 right: 300px;
}
#third{
 background-color: burlywood;
 border: 1px dashed brown;
}
</style>
</head>
<body>
<div id="father">
<div id="first">第一个盒子</div>
<div id="second">第二个盒子</div>
<div id="third">第三个盒子</div>
</div>
</body>
</html></pre>
</div>
2024-07-19
1.positon: fixed;固定定位。
1.1这里div1绝对定位因为所有父级都没有定位，所以根据浏览器定位，但浏览器有滚动效果，基于浏览器定位的绝对定位是受滚动条影响的。随着页面滚动，该div1的位置也会动。
1.2position: fixed;固定定位。根据之前上网查，我的理解是可以认为是相对于浏览器的（可视）窗口进行定位。其不受页面是否有滚动影响。div2都会固定在浏览器可视窗口的最右下角。
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 /* 这里将body高度设为高于屏幕实际高度，目的是测试滚动条对绝对定位、固定定位的影响。从而更好的理解两种定位。 */
 body{
 height: 1000px;
 }
 /* 这里div1绝对定位因为所有父级都没有定位，所以根据浏览器定位，但浏览器有滚动效果，基于浏览器定位的绝对定位是受滚动条影响的。
 随着页面滚动，该div1的位置也会动。*/
 div:nth-of-type(1){
 width: 100px;
 height: 100px;
 background-color: red;
 position: absolute;
 right: 0;
 bottom: 0;
 }
 /* position: fixed;固定定位。根据之前上网查，我的理解是可以认为是相对于浏览器的（可视）窗口进行定位
 其不受页面是否有滚动影响。div2都会固定在浏览器可视窗口的最右下角。*/
 div:nth-of-type(2){
 width: 50px;
 height: 50px;
 background-color: orange;
 position: fixed;
 right: 0;
 bottom: 0;
 }
</style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html></pre>
</div>
效果：
<img src="https://img2024.cnblogs.com/blog/1370036/202407/1370036-20240720073420364-1856065106.png">
2024-07-20
1.z-index设置图层高度，opacity设置透明度，取值在0~1之间
index.html：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="content">
<ul>
 <li><img src="images/SpringBootBackground.jpg"/></li>
 <li class="tipBackground"></li>
 <li class="tipText">学SpringBoot，找狂神说</li>
 <li>时间：2099-01-01</li>
 <li>地点：火星基地</li>
</ul>
</div>
</body>
</html></pre>
</div>
style.css：
<div class="cnblogs_code">
<pre>#content{
margin: 0;
padding: 0;
font-size: 12px; /* 字体12px，行高25px是常用的一个选择组合 */
line-height: 25px;
border: 1px solid #000000;
width: 140px;
}
ul{
margin: 0;
padding: 0;
list-style: none; /* 去掉列表项前符号 */
position: relative; /* 给url一个定位，用于子元素li“学SpringBoot，找狂神说"可以绝对定位 */
}
img{
width: 141px;
height: 117px;
}
.tipText, .tipBackground{
position: absolute;
top: 90px;
width: 140px;
height: 25px;
}
.tipText{
z-index: 999; /* z-index设置图层高度 */
color: white;
}
.tipBackground{
background: #000000;
opacity: 1; /* 透明度，取值在0~1之间 */
}</pre>
</div>
至此狂神说CSS教程已学完。 
来源：https://www.cnblogs.com/pingfanliliang/p/18250159

頁: [1]

琼殿技术论坛's Archiver

学习狂神说CSS