学习笔记——CSS

王志芬 發表於 2022-8-23 22:28:00

<h1>一、学习重点</h1>
<img src="https://img2022.cnblogs.com/blog/2927160/202208/2927160-20220823201051215-1085768640.png">
<h1>二、学习内容</h1>
例题一
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div{
 width: 50px;
 height: 565px;
 overflow: hidden;
 /* float: left; */
 display: inline-block;
 transition: width 1s ease-in;
 }
 div:hover {
 overflow: visible;
 width: 1000px;
 }
 </style>
</head>
<body>
 <div>
 <img src="../img/libai.jpeg" alt="">
 </div>
 <div>
 <img src="img/libai.jpeg" alt="">
 </div>
 <div>
 <img src="img/libai.jpeg" alt="">

 </div>
 <div>
 <img src="img/libai.jpeg" alt="">

 </div>

</body>
</html></pre>
</div>
例题二
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 .div1{
 width: 200px;
 height: 200px;
 background-color: skyblue;
 float: left;
 }
 .div2{
 width: 200px;
 height: 200px;
 background-color: orange;
 float: left;
 }
 .div3{
 width: 200px;
 height: 200px;
 background-color: grey;
 }
 </style>
</head>
<body>
 <div class="div1"></div>
 <div class="div2"></div>
 <div class="div3"></div>
</body>
</html></pre>
</div>
例题三
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <link
 rel="stylesheet"
 href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
 />
 <title>Document</title>
</head>
<body>
 <h1 class="animate__animated animate__bounce animate__faster">An
 animated element</h1>
</body>
</html></pre>
</div>
<h1>三、笔记内容</h1>
<div>
<h2>CSS三大特性</h2>
1、层叠性
一个标签可以有多个CSS样式
浏览器处理冲突的能力，如果一个属性通过两个相同的选择器设置到元素上，样式的层叠规则
按照样式的声明顺序来层叠，就近原则
前提：选择器必须是同一种
样式不冲突，不会层叠
2、继承性
字标签会继承父标签的某些样式
比如文本颜色和字号。
3、优先级
权重：
    （1）继承0---最低
    （2）行内样式100
    （3）权重相同，就近原则
    （4）!important命令无限大
<table style="height: 207px; width: 288px" border="0" align="left">
<tbody>
<tr align="center" valign="middle">
<td>css权重公式</td>
<td>   贡献值</td>
</tr>
<tr>
<td>继承、*  </td>
<td>       0,0,0,0</td>
</tr>
<tr>
<td>标签选择器</td>
<td>       0,0,0,1</td>
</tr>
<tr>
<td>类、伪类选择器</td>
<td align="center"> 0,0,1,0</td>
</tr>
<tr>
<td>ID选择器</td>
<td>       0,1,0,0</td>
</tr>
<tr>
<td>行内样式 </td>
<td>       1,0,0,0</td>
</tr>
</tbody>
</table>
 
     
    
 
      
     
 
!important     无穷大
width,height   大于无穷大
max-width,max-height
min-width,min-height
<table style="height: 167px; width: 292px" border="0" align="left">
<tbody>
<tr>
<td align="center" valign="middle">div ul li</td>
<td>        0,0,0,3</td>
</tr>
<tr>
<td>        li </td>
<td>        0,0,0,1</td>
</tr>
<tr>
<td>     a:link</td>
<td>　　  0,0,1,1</td>
</tr>
<tr>
<td>     div a</td>
<td>        0,0,0,2</td>
</tr>
</tbody>
</table>
  
 
 
 
 
 
权重不能被继承
贡献值是没有进位
!important。如果同时有max-width，max-height，!important不管用
<div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>

 .fontStyle {
 color: yellow;
 font-size: 20px;
 }
 .a {
 color: red;
 }
 .backgroundStyle {
 background-color: green;
 }
 div {
 height: 200px;
 width: 200px;
 }
 p{
 height: 100px;
 width: 100px;
 background-color: blue!important;
 }
 /* div下的ul下的li */
 div ul li {
 color: red;
 }
 /* 这个页面上所有的li */
 li {
 color: yellow;
 }

 a:link {
 color: red;
 }
 div a {
 color: yellow;
 }
 </style>
</head>
<body>
 <div>
 <ul>
 <li>111111</li>
 <li>111111</li>
 <li>111111</li>
 </ul>
 </div>

 <h1 class="a fontStyle backgroundStyle">我是H1标签</h1>
 <div class="backgroundStyle">
 <p style="background-color: red;">我是div里的p</p>
 </div>

 <div>
 <a href="#">a标签</a>
 </div>

</body>
</html></pre>
</div>
<div>
常用的单位
px（像素）：最常用
em：绝对单位，比如说父级的字号16px，
    我可以设置成2em。
rem：由整个html的字号决定。当我们改变了浏览器的
    字号设置，页面的字号也会发生变化
百分比：相对父元素的比例
</div>
</div>
<div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 h1{
 font-size: 10em;
 }
 div {
 width: 80%;
 height: 300px;
 background-color: yellow;
 }
 </style>
</head>
<body>
 <h1>我是h1标签</h1>
 <div>123123</div>
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 p {
 /* 字体大小 */
 font-size: 20px;
 /* 字体样式 */
 font-style: italic;
 /* 字体粗细 */
 font-weight: bold;
 /* 字体修饰 */
 text-decoration:underline;
 /* 字体 */
 font-family: monospace;
 /* 复合属性 */
 /* font: 30px italic bold; */
 }

 div {
 /* 背景颜色 */
 /* background-color: rgba(25, 77, 135, 0.7); */
 width: 400px;
 height: 400px;
 /* 背景图片 */
 background-image: url(img/libai.jpeg);
 background-size: 400px;
 background-repeat:no-repeat;
 background-position: center;
 /* background:no-repeat center; */
 }

 </style>
</head>
<body>
 <input type="color">
 <div>
 <p>我是div里的p</p>
 </div>
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div ul li {
 list-style-type: decimal;
 list-style-position: outside;
 /* list-style-image: url(img/libai.jpeg); */
 }

 .div1 {
 width: 200px;
 height: 200px;
 background-color: yellow;
 border-radius: 50px;
 border-bottom-left-radius: 100px;
 border-style: solid;
 border-color: blue;
 /* border: 1px solid red; */
 }

 </style>
</head>
<body>
 <div>
 <ul>
 <li>111</li>
 <li>222</li>
 <li>333</li>
 <li>444</li>
 <li>555</li>
 <li>666</li>
 </ul>
 </div>

 <div class="div1">

 </div>

</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div {
 width: 200px;
 height: 200px;
 display: inline-block;
 }
 .div1,.div4{
 border-bottom-left-radius: 50%;
 border-top-right-radius: 50%;
 }
 .div2,.div3{
 border-bottom-right-radius: 50%;
 border-top-left-radius: 50%;
 }
 /* 区块属性：定义一个元素的显示方式 */
 .div1{
 background-color: green;
 }
 .div2 {
 background-color: blue;
 }
 .div3 {
 background-color: yellow;
 }
 .div4 {
 background-color: red;
 }

 .div5 {
 background-color: orange;
 /* 隐藏元素 */
 display: none;
 }

 </style>
</head>
<body>
 <div class="div1"></div>
 <div class="div2"></div><br>
 <div class="div3"></div>
 <div class="div4"></div>

 <hr>
 <div class="div5"></div>

</body>
</html></pre>
</div>
盒子模型
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div {
 width: 300px;
 height: 300px;
 background-color: orange;
 /* 外边距 */
 margin:100px;
 border: 10px solid red;
 padding: 20px;
 /* border-box：保证盒子的大小是300*300，外边距不包括 */
 /* box-sizing: border-box; */
 /* content-box：保证当前div的尺寸是300*300，不包含内边距和边框线 */
 box-sizing: content-box;
 /*
 会算盒子的各个尺寸
 */
 }
 </style>
</head>
<body>
 
 <div></div>
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 * {
 /* *号选择器初始化 */
 margin: 0;
 padding: 0;
 }
 div {
 width: 300px;
 height: 300px;
 background-color: orange;
 /* 外边距 */
 margin:100px;
 padding: 100px;
 }
 </style>
</head>
<body>
 <div>123456</div>
</body>
</html></pre>
</div>
<div>
文档流：
在网页中将窗体自上而下分成好多行
并在每行从左到右的顺序排列元素，即为文档流。
网页默认的布局方式。
定位position
1.static：文档流，默认的
2.absolute：绝对定位
    相对于一个父元素的绝对定位。
    当设置了绝对定位之后，原来的元素会脱离文档流。
    在页面上浮起来。
3.relative：相对定位
    相对于上一个元素的位置。
4.fixed：固定定位
子绝父相
子元素绝对定位
父元素相对定位
</div>
</div>
<div>
定位的left和top right和bottom
left是相对于父元素的位置
left是定位的属性
margin-left有啥区别？
相对于自己的初始位置
margin是盒子模型的属性
在开发中，尽量统一使用 

</div>
<div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 .div1 {
 width: 300px;
 height: 300px;
 background-color: orange;
 position: absolute;
 left: 150px;
 top: 50px;
 /* margin-left: 150px; */
 /* display: none; */
 }
 .div2 {
 width: 200px;
 height: 200px;
 background-color: skyblue;
 /* 绝对定位 */
 position: absolute;
 /* 坐标 */
 left: 150px;
 top: 400px;
 /* visibility: hidden; */
 }
 .container {
 width: 600px;
 height: 800px;
 background-color: pink;
 position: relative;
 top: 100px;
 left: 200px;
 }
 .nav {
 width: 100%;
 height: 100px;
 background-color: red;
 /* 水平居中 */
 margin: auto;
 position: fixed;
 /* z轴的索引 */
 z-index: 1;
 }
 </style>
</head>
<body>
 <div class="nav">我是导航栏</div>
 <div class="container">
 <div class="div1"></div>
 <div class="div2"></div>
 </div>
</body>
</html></pre>
</div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div {
 width: 200px;
 height: 200px;
 background-color: skyblue;
 /* 可见性 */
 /* visibility: hidden; */
 /* 溢出策略 */
 overflow:scroll;
 }
 </style>
</head>
<body>
 <div>
 <img src="img/libai.jpeg" alt="">
 </div>
</body>
</html></pre>
</div>
清除浮动
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 li {
 list-style: none;
 height: 30px;
 width: 100px;
 float: left;
 background-color: green;
 margin-left: 20px;
 }
 ul {
 background-color: pink;
 /* height: 50px; */
 /* 我想要的就是ul的尺寸是根据li的尺寸来自动确定 */
 /* 清除浮动，解决内容坍塌 */
 }
 /* 推荐使用的清除浮动 */
 .ulstyle:after{
 content: '';
 height: 0;
 line-height: 0;
 display: block;
 visibility: hidden;
 clear: both;
 }
 </style>
</head>
<body>
 <ul class="ulstyle">
 <li>1111</li>
 <li>2222</li>
 
 </ul>
</body>
</html></pre>
</div>
双列布局
三列布局
<div>css3兼容性问题</div>
<div>
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 div {
 /* 针对于火狐浏览器 */
 /* -moz-transition: ; */
 /* 针对于Safari和Google */
 /* -webkit-animation: ; */
 /* 针对Opera浏览器 */
 /* -o-animation: ; */

 /* Transition */
 width: 100px;
 height: 100px;
 background-color: orange;
 transition: width 2s ease-in 3s,height 3s,background-color ease-out 2s;
 /* transition-delay: 2s;
 transition-property: width;
 transition-timing-function: ease-in-out;
 transition-duration: 3s; */
 }
 div:hover {
 width: 500px;
 height: 500px;
 background-color:aqua;
 }
 </style>
</head>
<body>
 
 <div></div>
</body>
</html></pre>
</div>
动画效果
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 .div1 {
 /* 引用自定义动画，延迟时间 */
 animation: myAnim 5s;
 }
 /* 先声明动画，再使用 */
 @keyframes myAnim {
 0% {
 width: 100px;
 height: 100px;
 background-color: orange;
 }
 25%{
 width: 200px;
 height: 200px;
 background-color: blue;
 }
 50% {
 width: 400px;
 height: 400px;
 background-color: red;transform: rotate(45deg);
 }
 75% {
 width: 200px;
 height: 200px;
 background-color: blue;transform: rotateZ(180deg);
 }
 100% {
 width: 100px;
 height: 100px;
 background-color: orange;transform: rotate3d(270deg);
 }
 }
 </style>
</head>
<body>
 
 
 <div class="div1">123</div>
</body>
</html></pre>
</div>
排列方向
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 .container {
 display: flex;
 /* 排列方向 */
 /* flex-direction: row; */
 /* 如果一条轴线上装不下，换行的方式 */
 /* flex-wrap:wrap-reverse; */
 /* flex-flow: row wrap; */
 /* 设置主轴的排列策略 */
 justify-content: space-evenly;
 /* 交叉轴 */
 align-items:flex-start;
 align-content: center;
 width: 900px;
 height: 900px;
 background-color: pink;
 }
 .flex1 {
 width: 200px;
 height: 200px;
 background-color: green;
 order: 1;
 /* 要将哪个项目放大，默认是0 */
 /* flex-grow: 2; */
 /* 要将哪个项目缩小,默认是0 */
 flex-shrink: 20;
 align-self: flex-end;
 }
 .flex2 {
 width: 200px;
 height: 200px;
 background-color: yellow;
 order: -2;
 }
 </style>
</head>
<body>
 
 <div class="container">
 <div class="flex1">123</div>
 <div class="flex2">456</div>
 <div class="flex1">123</div>
 <div class="flex2">456</div>
 <div class="flex1">123</div>
 <div class="flex2">456</div>
 </div>
 <hr>
 <div class="container">
 <div class="flex1">123</div>
 <div class="flex2">456</div>
 <div class="flex1">123</div>
 <div class="flex2">456</div>
 <div class="flex1">123</div>
 <div class="flex2">456</div>
 </div>
</body>
</html></pre>
</div>
重点内容：
1、选择器******************* 2、css三大特征，层叠性，继承性，优先级 3、盒子模型，会算 4、定位 5、浮动，清除浮动**** 6、常见的属性，字体，背景，列表，边框... 7、元素的隐藏，元素内容的溢出，overflow，display，visibility
开发中，推荐使用外部引入的方式。

</div>

</div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>

</div> 
来源：https://www.cnblogs.com/ljmskipper/p/16615942.html

頁: [1]

琼殿技术论坛's Archiver

学习笔记——CSS