CSS基础总结

已于 2022-11-25 14:20:52 修改
阅读量416 收藏
点赞数 1
分类专栏： 网页web 文章标签： css css3 html
于 2022-01-18 10:47:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Luweb1/article/details/121915227
版权

CSS基础总结

前言

css，cascading style sheets，叠层样式表，用于设置和布置网页 - 例如，更改内容的字体，颜色，大小和间距，将其拆分为多个列，或添加动画和其他装饰功能。—— MDN

基本语法

h1{
	background-color: blue; 
	position: fixed;
}
/*或者 
<h1 style="background-color: blue; position: fixed;">...</h1>
*/

注释使用/* */

/*单行注释*/
/*
多行注释
*/

！注意：css代码一定要按照语法规则来写，不然一个错误会导致整段代码废掉，只要{}内存在错误，则{}内的CSS代码都是无效的。一定要写;，别写成, 。

—— 参考CSS语法规则

css样式属性非常多，不必所有都学，掌握常用的，剩下在项目中慢慢熟练；

就像字典里的字一样，并不是所有字都要吃透，一样的道理（偷懒的理由）；

一、CSS代码位置

1. 行内

第一种是inline styling，也就是直接在标签里，设置该标签的css样式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的title</title>
</head>
<body style="background-color: aqua;">
<p style="color:red">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore neque reiciendis deserunt quas modi repellat explicabo optio nihil facere, labore facilis veritatis totam perferendis tenetur incidunt consequatur similique rem! Nihil.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi ea, unde quaerat iste error officiis velit vel repellendus, repudiandae ullam molestiae, veniam beatae incidunt esse! Odit itaque expedita laudantium sit?
</p>
</body>
</html>

可以看到设置css属性的标签，样式发生了变化。
请添加图片描述
行内样式的方法，只对当前标签起作用，只修改该标签的样式；

2. 内联

第二种internal Styling，内部样式，在HTML文件内部的head元素中使用style标签，用css语法，对文件下的指定标签全局引用样式；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的title</title>
  <style>
    p{
      color:red;
      background-color: rgb(119, 207, 36)
    }
    body{
      background-color: aqua;
    }
  </style>
</head>
<body>
<p >
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore neque reiciendis deserunt quas modi repellat explicabo optio nihil facere, labore facilis veritatis totam perferendis tenetur incidunt consequatur similique rem! Nihil.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi ea, unde quaerat iste error officiis velit vel repellendus, repudiandae ullam molestiae, veniam beatae incidunt esse! Odit itaque expedita laudantium sit?
</p>
</body>
</html>

请添加图片描述

3. 外联

第三种external Styling，外部文件引用。
创建.css文件，在文件内写css样式，在HTML文件内部的head元素中使用link标签导入外部文件，对特定标签全局引用样式；

/*index.css文件*/
p{
    color:red;
    background-color: rgb(119, 207, 36)
  }
  body{
    background-color: aqua;
  }
h1{
    color: blueviolet;
}

<!-index.html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的title</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <h1>
    title
  </h1>
<p >
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore neque reiciendis deserunt quas modi repellat explicabo optio nihil facere, labore facilis veritatis totam perferendis tenetur incidunt consequatur similique rem! Nihil.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi ea, unde quaerat iste error officiis velit vel repellendus, repudiandae ullam molestiae, veniam beatae incidunt esse! Odit itaque expedita laudantium sit?
</p>
<p>
  Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque itaque minima aut cupiditate consequatur ullam similique perferendis sit, ex laboriosam amet illo voluptate debitis illum velit. Sapiente necessitatibus numquam eaque.
</p>
</body>
</html>

请添加图片描述
三种使用CSS样式的优先级，理论上就近原则：行内>内联>外联导入；
而一般情况下，都推荐使用第三种用法external Styling，在外部文件引用，增加项目的可维护性，且能在多个页面使用；
而第一种情况，则会在对特殊样式要求上，起到很好的作用；

二、CSS selectors 选择器

1. 全局选择器（universal selector）

使用*可以对全局，所有标签下的内容做一个样式设定；

* {
color : #0000ff; 
}

2. 元素、class、id选择器

在HTML中，所有的标签，都可以设置它们的class和id属性。
class属性值可能会有重复的，并且一个标签可以设置多个class，使用空格隔开；

<p class="blueText blueBgColor">...</p> <!-这个标签有两个class值，blueText 和 blueBgColor-->

而id属性必须是唯一的、单一的。

<p class="blue_text" id="p1">...</p> 
<p class="blue_text" id="p2">...</p>

CSS样式，则可以通过选择对应的标签名、class属性值或者id属性值来设定；
语法：

  • element selector ，直接使用标签名来选择标签
p {
color : rgb(255,255,0); 
}
  • class selector， 使用.class属性值来选择对应属性值下的样式设定；
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的title</title>
  <style>
    .red_text{
		color:red;
		}
	.blue_bgColor{
		background-color : aqua;
		}
  </style>
</head>
<body>
<p class="red_text">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore neque reiciendis deserunt quas modi repellat explicabo optio nihil facere, labore facilis veritatis totam perferendis tenetur incidunt consequatur similique rem! Nihil.
</p>
<p class="red_text blue_bgColor">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi ea, unde quaerat iste error officiis velit vel repellendus, repudiandae ullam molestiae, veniam beatae incidunt esse! Odit itaque expedita laudantium sit?
</p>
</body>
</html>
  • id selector ，使用#id值来选择对应id值的内容做样式设定；
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的title</title>
  <style>
    .red_text{
		color:red;
		}
	#p1{
		background-color : aqua;
		}
	#p2{
		color : black;
		background-color : blue;
		}
  </style>
</head>
<body>
<p class="red_text" id="p1">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore neque reiciendis deserunt quas modi repellat explicabo optio nihil facere, labore facilis veritatis totam perferendis tenetur incidunt consequatur similique rem! Nihil.
</p>
<p class="red_text" id="p2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi ea, unde quaerat iste error officiis velit vel repellendus, repudiandae ullam molestiae, veniam beatae incidunt esse! Odit itaque expedita laudantium sit?
</p>
</body>
</html>
  • 优先级高的选择器会覆盖掉与优先级低重复的样式属性；
  • 三种选择器的优先级是：id>class>标签名，因为id是唯一单一的，所以是最特殊的，优先级也最高。
  • 并且三种选择器可以结合一起使用
p.red_text#p1{         /*选择标签为 p，class为 red_text，id为 p1的元素*/
background-color : aqua;
color:red;
}
/*还有
p.red_text{}
p#p1{}
.red_text#p1{}
*/

3. 多选（grouping selector）

可以选择多个目标来做统一样式，中间使用,隔开；
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网页的title</title>
  <style>
    h1,h2,
    h3,
    p#p2{
      background-color: aqua;
      color: red;
    }
  </style>
</head>
<body>
<h1>title 1 </h1>
<h2>title 2 </h2>
<h3>title 3 </h3>
<p class="red_text" id="p1">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore neque reiciendis deserunt quas modi repellat explicabo optio nihil facere, labore facilis veritatis totam perferendis tenetur incidunt consequatur similique rem! Nihil.
</p>
<p class="red_text" id="p2">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi ea, unde quaerat iste error officiis velit vel repellendus, repudiandae ullam molestiae, veniam beatae incidunt esse! Odit itaque expedita laudantium sit?
</p>
</body>
</html>

4.后代（descendant selector）

  • 后代选择器,父子元素之间,使用空格隔开
  • 例如，div.link1 a{} 就是：
<div class="link1">
	<a>...</a> <!-- 选择该元素 -->
</div>
  • div.link2 a.blueT{} 就是:
<div class="link2">
	<a class="blueT">...</a> <!-- 选择该元素 -->
</div>
  • div.link2 .blueT{}就是
<div class="link2">
	<tag class="blueT">...</tag> <!-- tag可以是任何标签，并选择该元素 -->
</div>
  • 可以通过鼠标放到选择器上,能看到选择器的选择目标
    在这里插入图片描述

代码示例：

<!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.link1 a{
            color: red;
        }
        div.link2 a.blueT{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="link1">
        <a  href="https://developer.mozilla.org/zh-CN/">MDN官网</a>
        <a  href="https://www.w3.org/">W3C官网</a>
    </div>
    <div class="link2">
        <a class="blueT" href="https://www.runoob.com/w3c/w3c-tutorial.html">菜鸟教程</a>
    </div>

</body>
</html>

5.属性选择器（ attribute selector）

  • 语法标签名[属性名="属性值"]{}
  • 例如input[type="text"]{}就是选择input标签,并且type="text"的元素

代码示例：

<!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>
        input[type="text"]{
            color:red;
            margin: 1px;
        }   
        input[type="number"]{
            color:green;
            margin: 1px;
        }   
        input[type="email"]{
            color:blue;
            margin: 1px;
        }   
    </style>
</head>
<body>
    <label for="name">name</label>
    <input id="name" type="text" name="name"/>
    <br>
    <label for="age">age</label>
    <input id="age" type="text" name="age"/>
    <br>
    <label for="phone">phone</label>
    <input id="phone" type="number" name="phone"/>
    <br>
    <label for="email">email</label>
    <input id="email" type="email" name="email"/>
    <br>
    
</body>
</html>

6.伪类（ pseudo classes）

  • 指定要选择的元素的特殊状态
  • 标签状态改变要做哪些事情
  • 语法选择元素:行为状态{}
  • textarea.textA:hover{} ,选择textarea标签,class为textA的元素, 使用:hover
  • :hover是移入鼠标事件,只有鼠标移入之后, 对应的css代码才会生效
  • 常用的pseudo classes
    1. :hover ,移入鼠标
    2. :focus , 焦点聚焦该元素时
    3. :active ,按住鼠标时
  • 更多伪类，参考MDN官网

示例代码：

<!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>
        textarea{
            background: red;
        }
        textarea.textA:hover{
            background-color: burlywood;
        }
        textarea.textB:focus{
            background-color: aqua;
        }
        textarea.textC:active{
            background-color: darkolivegreen;
        }
    </style>
</head>
<body>
    <textarea name="text1" class="textA" id="text1" cols="30" rows="10"></textarea>
    <textarea name="text2" class="textA" id="text2" cols="30" rows="10"></textarea>
    <textarea name="text3" class="textA" id="text3" cols="30" rows="10"></textarea>
    <br>
    <textarea name="text4" class="textB" id="text4" cols="30" rows="10"></textarea>
    <textarea name="text5" class="textB" id="text5" cols="30" rows="10"></textarea>
    <textarea name="text6" class="textB" id="text6" cols="30" rows="10"></textarea>
    <br>
    <textarea name="text7" class="textC" id="text7" cols="30" rows="10"></textarea>
    <textarea name="text8" class="textC" id="text8" cols="30" rows="10"></textarea>
    <textarea name="text9" class="textC" id="text9" cols="30" rows="10"></textarea>
    <br>
</body>
</html>

7.伪元素（pseudo element）

  • 伪元素是一个附加至选择器末的关键词
  • 允许对被选择元素的特定部分进行样式修改
  • 常用的一些伪元素：
    1. ::after 元素内容尾部的设定
    2. ::before 元素内容前部的设定
    3. ::first-letter 元素内容的第一个字
    4. ::selection 选择的元素内容(双击全选,按住鼠标左键滑动)
  • 更多伪元素，参考MDN官网

示例代码：

<!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::before{
            content: ">>";
            color: red;
        }
        p::after{
            content: "<<<<";
            color: blue;
        }
        h1::first-letter{
            font-size: 3rem;
        }
        h2::selection,p.c1::selection{
            background-color: aqua;
        }
    </style>
</head>
<body>
    <h1 class="h1">heading1</h1>
    <h2 class="h2">heading2</h2>
    <p class="c1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, in qui nulla perspiciatis, nesciunt quis voluptate inventore soluta explicabo quod cupiditate! Velit similique alias eveniet quibusdam harum asperiores rerum quia.
    </p>
    <p class="c2">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, veritatis labore? Cupiditate, reprehenderit beatae. Labore beatae recusandae reiciendis tempora repudiandae molestiae eos. Cum mollitia ad obcaecati voluptatum dolorum laborum deleniti?
    </p>
    <p class="c3">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias deleniti cumque minus quos aperiam quia ab temporibus eaque ducimus accusantium, error libero harum repellendus laudantium accusamus sed facere iusto unde.
    </p>
</body>
</html>

注意：与伪元素比较，伪类 能够根据状态改变元素样式。

三、CSS代码规则

1.叠层、阶层（cascade）

cascade，就是cascading style sheets里的cascading，表示CSS代码遵守从上到下的规则。
例如在js代码的变量中：

let a ;
a = 0;
a = 1;
a = 2;

自然的，编译后，a是等于2的，这就是从上到下的代码规则，同一变量赋值，后面会覆盖前面的，在css中也有这种规则。

  • 当选择器一模一样时, 后面的样式表会覆盖前面的样式
  • 越下面的代码, 越是后面被执行
    p{
        color: blue;
    }
    p{
        color: red;
    }
    p{
        color: green;
    }
    p.c1{
        color: darkmagenta;
    }
  • 后面的p选择器会覆盖前面的p，而 p.c1只会对class为c1标签做样式, 不会覆盖所有的p标签。

2.权值、特定度（Specificity）

  • 将上面的选择器变换顺序, 发现p选择器, 并不会覆盖p.c1的样式;
    p.c1{
        color: blue;
    }
    p{
        color: red;
    }
  • Specificity---- 特定度(权值), css选择器有不同的权值, 通过id、class、tag（标签）来加权；
  1. id - 权值（1，0，0）
  2. class - 权值（0，1，0）
  3. tag - 权值（0，0，1）
  • 数字越前面，权值越高，故而权值大小： id > class > tag；
  • 例如，p.c1的权值为（0，1，1），p.c1#i1的权值为（1，1，1）；
  • css会选择权值高的选择器做样式的选择，权值低的无法覆盖权值高的样式表；
  • 鼠标放到选择器上， 可以看到它的权值
    请添加图片描述

代码示例：

<!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.c1#i1{
            color: darkmagenta;
        }
        p.c1{
            color: blue;
        }
        p.c2{
            color: green;
        }
        p{
            color: red;
        }
    </style>
</head>
<body>

    <p class="c1" id="i1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, in qui nulla perspiciatis, nesciunt quis voluptate inventore soluta explicabo quod cupiditate! Velit similique alias eveniet quibusdam harum asperiores rerum quia.
    </p>
    <p class="c1" >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, veritatis labore? Cupiditate, reprehenderit beatae. Labore beatae recusandae reiciendis tempora repudiandae molestiae eos. Cum mollitia ad obcaecati voluptatum dolorum laborum deleniti?
    </p>
    <p class="c2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias deleniti cumque minus quos aperiam quia ab temporibus eaque ducimus accusantium, error libero harum repellendus laudantium accusamus sed facere iusto unde.
    </p>
    <p class="c3">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, accusamus, iure minima est dicta recusandae, delectus at earum distinctio odit beatae voluptates consequuntur! Maxime architecto, nisi ipsa provident iste assumenda?
    </p>
</body>
</html>
  • ！权值只在外联或内联样式中，而行内样式，优先级远远高于外联和内联。
  • inline styling > id > class > element > inheritance

3.继承（Inheritance）

  • 元素的css样式，来自于：
    1. 自身的css样式
    2. Inheritance, 继承自父辈元素的

在浏览器按下F12如图，可以看到，h1的样式一部分是自身的，还有一部分是通过继承的；

请添加图片描述

四、CSS颜色

网页中色彩样式非常重要，它决定了网页的美观，CSS中使用颜色的方式，一般有以下几种；

  1. reserved color 保留关键字
    现代浏览器都支持140种颜色名称，像常用的red、blue、green、white等等，参考CSS颜色保留关键字，可以在CSS中直接使用
p{
color : red;
}
  1. RGB、RGBA，三原色
    这是电脑中，取得颜色最常用的一种方式。R就是red、G就是green、B就是blue，也就是常说的三原色，由它们取值大小组成所有CSS中任意颜色。
    它们的值对应三种颜色的强度，取值范围为0~255，也就是一字节，直接使用取得对应颜色rgb(0~255，0~255，0~255)；
    这种方式能取得共256*256*256种颜色，相比关键字，rgb能取得大自然相对更为完整的颜色组合；
p{
color : rgb(255,0,0);/*red为255，另外两种颜色值为0，就是红色*/
}
h1{
color : rgb(0,0,0);/*值都为0，什么都没有，一片漆黑，就是black*/
}
h2{
color : rgb(255,255,255);/*都为最大时，三种颜色交汇为白色*/
}
  • rgba，在取得颜色的基础加上了alpha，透明度，它的值介于0~1之间，rgba(0~255,0~255,0~255,0~1)，而0就是完全透明了；
  1. hex，十六进制 hexadecimal
    使用十六进制的颜色编码，获取对应颜色，取值范围#000000~#ffffff，共6个十六进制数。
    其实它与rgb是相互对应的，16*16===256，前两个数就是对应的red值，中间两个数对应green的值，最后两个数对应blue的值；
    例如rgb(255,0,0)===#ff0000、rgb(255,255,0)===#ffff00、rgb(255,255,255)===#ffffff
    —参考
p{
color : #0000ff;  /*blue*/
}
h1{
color : #000000;  /*black*/
}
  1. HSL 颜色
    HSL就是Hue-saturation-lightness的缩写，色相-饱和度-亮度；
    一般情况下，都会使用前三种方式取得所要得颜色，使用这种配颜色的方式不常见，具体可以参考CSS-hsl

五、文字样式

  • CSS里有两种单位：

    1. absolute 绝对单位
    2. relative 相对单位

  • 绝对单位 cm ,mm, ln, px（像素） ,pt, pc

  • 相对单位 em, ex, ch, rem, vw, vh, vmax, %

  • 网页预设的字体大小默认为16px，浏览器设备可以更改字体的预设大小

  • rem 相对网页预设大小的倍数，1rem=16px（1倍的预设，不一定是16px），2rem=32px

  • 所以相对大小rem会比px好用，不同人群根据自己需要更改设备的预设字体时，网页字体也会相应改变

  • 常用属性：

    1. font size 文字大小
    2. text-align居中
    3. text-decoration 装饰
    4. line-height 行高
      —MDN参考
    5. letter spacing 字体间距
      —MDN参考
    6. font-family 设置字体
      ----常用字体参考；
      属性值'Courier New', Courier, monospace; 通常三个为限，如果电脑没有Courier New-使用-> Courier–也没有，使用->monospace；
      ----安全字体参考；
      font-weight 设置字体线条粗细 400是预设的正常值；
    7. text-indent 每个段落开头的留白(通常2rem，两个字)

示例代码：

<!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.px{
	font-size : 32px ;
	}
        p.rem{
	font-size : 2rem ;
	}
        p.textAlign{
	text-align : center ;
	}
        p.textDecoration{
	text-decoration: line-through;
	}
        p.fontFamily{
            font-family: 'Courier New', Courier, monospace;
            font-weight: 800;
            text-indent: 2rem;
        }
    </style>
</head>

<body>
    <p class="px">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum maxime commodi tempore impedit at! Cumque amet
        vitae, error vero dolor, aliquid modi sit et labore, nihil eveniet incidunt vel itaque.
    </p>
    <p class="rem">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestias, quae. Pariatur atque quidem illum non odio
        earum, aperiam alias consequatur inventore laudantium possimus quos voluptatibus quia nesciunt veritatis ut?
        Labore.
    </p>
    <p class="textAlign">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, in qui nulla perspiciatis, nesciunt quis
        voluptate inventore soluta explicabo quod cupiditate! Velit similique alias eveniet quibusdam harum asperiores
        rerum quia.
    </p>
    <p class="textDecoration">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Temporibus dicta animi placeat neque necessitatibus
        iusto, harum est et dolorum aliquid. Quisquam laboriosam corporis nemo ut harum dignissimos aliquid, sapiente
        at!
    </p>
    <p class="fontFamily">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam voluptatum ex dolores quia totam perspiciatis inventore minus omnis dolor nostrum?
    </p>

</body>

</html>

六、背景设置

  • background-color背景颜色

  • background-image背景图片

  • background-size: cover; 背景图片大小
    -具体参考；

  • background-position: center; 背景图片位置
    -具体参考；

示例代码

<!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>
        body {
            background-image: url("https://joeschmoe.io/api/v1/random");
            background-size: cover;
            background-position: center;
        }

        p {
            background-color: aqua;
        }
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum maxime commodi tempore impedit at! Cumque amet
        vitae, error vero dolor, aliquid modi sit et labore, nihil eveniet incidunt vel itaque.
    </p>
</body>
</html>
  • background属性，是两者的结合体：
 background: url("https://joeschmoe.io/api/v1/random");
/* */
 background: aqua;

七、盒模型（Box Model）

在这里插入图片描述

  • 在html中，所有的元素都是box，并且都是有宽(width)和高(height)的盒子；
  • 一个盒子必须包含以下几个属性：
    1. content 内容（就是元素的内容）
    2. padding 内间距
    3. border 外框
    4. margin外间距
  • 故而每个html元素，都至少包含以上六个属性；
    ----MDN；

1.盒模型的属性

一、内间距 padding

  • 通过padding-top, padding-right, padding-bottom, padding-left，分别设置盒的上下左右内间距；
  • 通过padding设置，该属性可以有多个值：
    1. padding: 1rem; ，设置上下左右都一样的；
    2. padding: 2rem 1rem; ，设置上下，左右；
    3. padding： 1rem 2rem 3rem 4rem； ，设置上右下左；

示例代码：

<!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>
        button.b1 {
            /* padding-top: 2rem; */
            /* padding-left: 3rem; */
            /* padding :1rem; */
            /* padding :1rem 2rem; */
            padding: 1rem 2rem 3rem 4rem;
        }
    </style>
</head>

<body>
    <button class="b1">
        内容
    </button>
</body>

</html>
  • 在浏览器中用开发者工具查看，打开element–>点击要查看的元素，所在的代码行 ：
    请添加图片描述
  • 通过浏览器的盒模型，能直观看到padding各个方向上的值；

二、外间距margin
它的属性与padding非常相似

  • 可以设置margin-top, margin-right, margin-bottom, margin-left的值
  • 通过margin设置，该属性可以有多个值：
    1. margin: 1rem; ，设置上下左右都一样的；
    2. margin: 2rem 1rem; ，设置上下，左右；
    3. margin： 1rem 2rem 3rem 4rem； ，设置上右下左；

示例代码：

<!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>
        button {
            /* margin-top: 2rem; */
            /* margin-left: 3rem; */

            /* margin :1rem; */
            /* margin :1rem 2rem; */
            margin: 1rem 2rem 3rem 4rem;
        }
    </style>
</head>
<body>
    <button class="col1 row1">
        内容
    </button>
    <button class="col2 row1">
        内容
    </button>
    <button class="col3 row1">
        内容
    </button>
    <br>
    <button class="col1 row2">
        内容
    </button>
    <button class="col2 row2">
        内容
    </button>
    <button class="col3 row2">
        内容
    </button>
    <br>
    <button class="col1 row3">
        内容
    </button>
    <button class="col2 row3">
        内容
    </button>
    <button class="col3 row3">
        内容
    </button>
    <br>
</body>
</html>

在这里插入图片描述

三、外框border

  • 外框有粗细、颜色、线条等等；
  • border: 5px solid black , 5px就是线条粗细，solid就是实线，black是线条颜色；
    ----border属性；

示例代码：

<!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>
        button.b1 {
            padding: 10px;
            border: 10px solid black;
        }
    </style>
</head>

<body>
    <button class="b1">
        内容
    </button>
</body>

</html>

在这里插入图片描述

四、宽高（width 、height）

  • 元素宽高设定需要注意两个方面：
  1. 元素是block元素还是inline元素 ：
	 * 宽度和高度只能在`block元素`中设定；
	 * 在`inline元素`的高度和宽度只与内容有关，不能设定；
  1. 宽高设定的对象 ：
    ----可以使用box-sizing属性；
	 * 默认是内容的宽和高；
	 * 通过box-sizing属性设定

示例代码：

<!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 {
            background: #000;
            color: beige;
            width: 50vw;
            height: 30vh;
        }

        a {
            background: royalblue;
            color: white;
            text-decoration: none;
            padding: 0.75rem 1rem;
            width: 200px;/*不生效*/
            height: 300px;/*不生效*/
        }

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

<body>
    <h1>这是标题，是block元素</h1>
    <a href="https://developer.mozilla.org/zh-CN">这是一个超链接，也是一个inline元素</a>
</body>

</html>
五、其他补充

相对单位 Relative units

  • % ，设定的宽度和高度，就是相对于父元素的宽度和高度；

  • vw，viewport width 相对设备视窗宽度, 取值范围0-100，相对于百分比；

  • vh，viewport height 相对设备视窗高度, 取值范围0-100；

  • 使用相对单位，能更好的适应不同设备视窗大小；

<!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>
        .box1 {
            background: #000;
            width: 500px;
            height: 500px;
        }
        .box2 {
            background: aqua;
            width: 50%;
            height: 50%;
        }
        .box3 {
            background: mediumaquamarine;
            width: 50vw;
            height: 30vh;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    <div class="box3"></div>
</body>
</html>

2. 行内与块级元素

  • block元素
    默认宽度：100%

  • inline元素
    不能设定width和height

在html中，有块级block和行内inline两种类型元素，在css中则可以通过display来任意设定，元素是block还是inline；

  • 例如 a标签设定display: block;之后，就可以设定元素的宽高；

示例代码：

<!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>
        a {
            background: royalblue;
            color: white;
            text-decoration: none;
            padding: 0.75rem 1rem;
            display: block;
            width: 200px;
            height: 300px;
        }

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

<body>
    <a href="https://developer.mozilla.org/zh-CN">这是一个超链接</a>
</body>

</html>
  • inline-block

既是inline也是block，将两者结合；

  1. block元素 ，默认宽度：100%，可改变
  2. inline元素，默认宽度是内容长度，不可改变

  • 所以inline-block，就是默认宽度是内容宽度，并且可改变

  • 在html中，有5个inline-block属性的标签：img、input、button、select、textarea

  • 它们像inline element在排版上从左到右，又像block element可以设定高度和宽度

3. 补充

  • margin属性在对inline element设定时，要注意，它不能设定上下margin，只能设定左右的margin；

示例代码：

<!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>
        a {
            background: royalblue;
            color: white;
            text-decoration: none;
            padding: 0.75rem 1rem;
            margin: 4rem;
        /* display: inline-block; */
        }
        a:hover {
            background: darkslateblue;
        }
    </style>
</head>
<body>
    <h1>title</h1>
    <a href="https://developer.mozilla.org/zh-CN">a标签</a>
</body>
</html>

请添加图片描述

  • 可以看到，对a标签设定margin时，上下的margin并不生效，但是浏览器盒子中却是显示有上下的margin，这是需要注意的地方；
    ----参考官方文档；
    请添加图片描述
  • 注意这段话，设置inline element垂直方向上的margin，是没有作用的；
  • 所以，要想上下margin生效，要给inline元素加上display: block;或display: inline-block;
Display typeExamplewidth \ heightmarginpadding \ border
inline<a>, <span>…无法调整只能调整左右可调
block<h1>,<div>,<section>…可以调整上下左右皆可可调
inline-block<img>,<input>…可以调整上下左右皆可可调
flex-level任何在flex下的元素可以调整上下左右皆可可调

八、CSS元素位置(position)

----MDN；

1. 静态位置 static

  • position:static，CSS默认的position，不需要特别去设定
  • 前面说的inline element在排版上从左到右，block 则是从上到下，这就是static静态的排版
  • No Stacking context (非叠层上下文)

初始示例代码：

<!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.container {
            width: 500px;
            height: 1000px;
            background: #000000;
        }
        .box {
            width: 200px;
            height: 200px;
        }
        .box1 {
            background: #ff0000;
        }
        .box2 {
            background: #00ff00;
        }
        .box3 {
            background: #0000ff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
    </div>
</body>
</html>

请添加图片描述

2.相对位置relative

  • 相对：是指相对元素本身；
  • 通过top, right, bottom, left 属性设置相对距离；
  • 通过z-index 属性设置z轴值，决定元素的前后位置（叠层上下文）；

还是上面的示例代码，修改box1样式，添加position属性：

.box1 {
            background: #ff0000;
            position: relative;
            left: 100px;
            top: 100px;
        }

可以得到，原来位置在当前位置的左100px和上100px：
在这里插入图片描述

  • 想要绿色方块在上面，使用z-index属性：
        .box2 {
            background: #00ff00;
            z-index: 3;
            }

在这里插入图片描述
可以看到z-index并没有生效，这是因为，position默认是static，它是非叠层上下文，不存在z-index属性，需要设定position才能生效；

        .box2 {
            background: #00ff00;
            position: relative;
            z-index: 3;
        }

在这里插入图片描述

3.绝对位置 absolute

当元素使用absolute定位时，会有以下几个特点：

  • 元素会被移出正常文档流(normal flow)，并不为元素预留空间；
  • 它相对于最近已经定位的祖先元素（只要position是非static的元素）来确定位置，如果没有则是：最外层的<html>元素—initial containing block(上下滑动栏在最上方，左右滑动栏在最左边)；
  • Stacking context（叠层上下文）；

回到初始代码，在box2上加上绝对位置：

        .box2 {
            background: #00ff00;
            position: absolute;
            bottom: 0;
            right: 0;

请添加图片描述

  • 此时box2相对的是浏览器视窗，通过top, right, bottom, left 属性设置box2与对应边框的距离；
  • 绿色的box2此时已经被移出css正常文档流，蓝色的box3向上移动，填补空下的位置；
  • 当放大缩小浏览器视窗时，box2与边框距离会保持不变;

再修改box的定位方式看看：

        div.container {
            width: 500px;
            height: 1000px;
            background: #000000;
            position: relative;
            /* position: absolute; */
        }

在这里插入图片描述

  • 可以看到，此时最近已经定位的祖先元素是div.container，所以box2的绝对定位，就是相对于div.container的；

4.固定位置Fixed

与absolute非常相似

  • 元素会被移出正常文档流(normal flow)，并不为元素预留空间；
  • 相对于浏览器视窗，与absolute不同的是，absolute的元素在滑动位置时，元素也会跟着移动，而fixed的元素在滑动位置时，元素则是固定不动的；
  • 当元素祖先的 transform, perspective 或 filter 属性非 none 时，容器由视口改为该祖先;
  • Stacking context（叠层上下文）;

回到初始的示例代码，还是对box2做修改：

        .box2 {
            background: #00ff00;
            position: fixed;
            top: 10px;
            right: 100px;
        }

把container容器也做长一点：

        div.container {
            width: 500px;
            height: 2000px;
            background: #000000;
        }

在这里插入图片描述

  • 此时，上下滑动，绿色的box2会在窗口一直保持不变，常用作于导航栏；

5.粘性位置Sticky

  • 在css正常文档流里（遵守cssnormal flow）；
  • sticky元素会“固定”在离它最近的一个拥有“滚动机制”(overflow)的祖先上;
  • Stacking context（叠层上下文）;

初始示例代码，对box2做修改：

 	div.container {
            width: 500px;
            height: 2000px;
            background: #000000;
        }
    ...
    .box2 {
            background: #00ff00;
            position: sticky;
            top: 0px;
        }
    ...

在这里插入图片描述

  • 可以看到，box2还在之前的css正常文档流里，当向下滑动时，它会粘在预设好的距离上，所以sticky元素，也常用作于导航栏；
    在这里插入图片描述

最后：

  1. 在没有对元素设定position属性时，默认都是static，静态位置；
  2. 只有static元素，不能做z-index的设定，其他四种都行；

九、CSS其他常用属性

1.css默认样式(default）

  • html里的h1~h6、p等元素都有自带的默认样式；
  • 通过F12开发者工具查看；
  • 更多的默认样式查看，参考W3C官网；

示例代码：

<!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>
</head>
<body>
    <h1>title</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, ducimus!</p>
</body>
</html>

请添加图片描述

2.列表样式(List)

  • 通过list-style-type可以设定列表里，每个子列表的标识符；
  • 对ul或者ol进行样式设定；
<!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>
        ul {
            list-style-type: armenian;
        }
        ol {
            list-style-type: lower-alpha;
        }
    </style>
</head>
<body>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ul>
    <ol>
        <li>北京</li>
        <li>上海</li>
        <li>广州</li>
        <li>深圳</li>
    </ol>
</body>
</html>

在这里插入图片描述

3.表格样式(Table)

  • border-collapse、 border 、 padding 、 width 、 height等常用属性；
<!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>
        table {
            width: 200px;
            height: 100px;
        }
        table,
        th,
        td {
            border: 1px solid #000; /*设置边框*/
            border-collapse: collapse; /*合并多边框*/
        }
        th,
        td {
            padding: 0.5rem 0.75rem;
        }
        th {
            background: aqua;
            color: #fff;
            font-size: 1.5rem;
        }
        td:hover {
            background: aqua;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>name</th>
            <th>age</th>
            <th>phone</th>
        </tr>
        <tr>
            <td>王子</td>
            <td>20</td>
            <td>147258</td>
        </tr>
        <tr>
            <td>公主</td>
            <td>19</td>
            <td>369852</td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述

4.透明度(opacity)和鼠标(cursor)

  • opacity属性取0~1，表示透明度；
  • cursor设定鼠标移动到该元素的鼠标样式，(a标签链接默认cursor: pointer)，更多参考MDN介绍；

示例代码：

<!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,
        p {
            opacity: 0.5;
        }
        p {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>title</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae fugit quae fuga suscipit porro tempore, quis
        eius cumque aliquid aperiam. Pariatur doloribus modi officia voluptatibus optio dicta tempore officiis delectus.
    </p>
    <h1>titie2</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, veniam!</p>
</body>
</html>

在这里插入图片描述

  • 将鼠标放到p元素上，可以发现鼠标样式改变了；

5.转换属性transition

  • 可以为一个元素在不同状态之间切换的时候定义不同的过渡效果；
    ----MDN-transition

  • 语法规则transition: value1 value2 value3，该属性可以放入三个值:

    1. value1放的是需要转换效果的属性，例如background–>对该属性设定转换效果，all–>所有属性；
    2. value2放的是过度时间（1s–>1秒）
    3. value3–>动画样式（ease等）

示例代码：

<!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.p1 {
            /* transition: background-color 2s ease; */
            /* transition: color 2s ease; */
            transition: all 2s ease;
        }
        p:hover {
            background-color: aqua;
            color: blue;
        }
    </style>
</head>
<body>
    <h1>title</h1>
    <p class="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae fugit quae fuga suscipit porro
        tempore, quis
        eius cumque aliquid aperiam. Pariatur doloribus modi officia voluptatibus optio dicta tempore officiis delectus.
    </p>
    <h1>titie2</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, veniam!</p>
    <p class="p1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, quaerat?</p>
</body>
</html>

6. 变换 transform

一、 translate() 移位，transform:translate(value1,value2)

  • value1: 右移的权值，当为负值时即为左移，例如100px、20%;
  • value2: 下移的权值，当为负值时即为上移；
  • transform:translate(100px,200px)

初始示例代码：

<!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.container {
            width: 800px;
            height: 800px;
            background: #000000;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: aqua;
            transition: all 1s;/*增加渐变过程，可选*/
        }
        .box:hover {
            transform: translate(100px, 200px);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

在这里插入图片描述

  • 当鼠标放上去时就会发生盒子位移；

也可以直接使用，修改上面的CSS样式，先不加transform属性：

        div.container {
            width: 800px;
            height: 800px;
            background: #000000;
            position: relative;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            top: 50%;/*以父元素的50%*/
            left: 50%;
        }
  • 想要个居中的盒子，但是如下，得到只有左上角的点是居中的；
    在这里插入图片描述
  • 修改box里的css样式，加入transform属性：
        .box {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            top: 50%;/*以父元素的50%*/
            left: 50%;
            transform: translate(-50%, -50%);/*以自身的-50%*/
        }
  • 此时盒子向上左各移动，自身50%的距离，得到一个居中的盒子；
    在这里插入图片描述

二、rotate() 旋转，transform:rotate(value)；

  • value值即为角度，顺时针为正，逆时针为负；

以上面的初始示例代码，仅修改CSS部分属性：

        .box:hover {
            transform: rotate(90deg);
            /* transform: rotate(-90deg); */
        }
  • 鼠标放上去时，box就会产生旋转效果；

三、 scale() 放大缩小，transform:scale(value1,value2)；

  • value1值为宽度放大缩小倍数；
  • value2值为高度放大缩小倍数；
  • 也可以只放一个value，就是宽高的倍数；

以上面的初始示例代码，修改：

        .box:hover {
            transform: scale(2,3);
            /* transform: scale(0.5); */
        }
  • 鼠标放上去时，box就会按设定放大缩小；

当然，放大缩小也可以直接设定：

        .box:hover {
            width: 200px;
            height: 300px;
        }
  • 直接修改原盒子的宽高，与transform: scale()有本质区别；
  • 直接修改原盒子的宽高，它的中心点是左上角；
  • transform: scale()放大缩小，中心点则是盒子正中心；

四、3D变换

  • transform: rotateX()、transform: rotateY()、transform: rotateZ()，在原来的rotate()上加上坐标轴；
        .box:hover {
            /* transform: rotateX(90deg); */
            /* transform: rotateY(90deg); */
            transform: rotateZ(90deg);
        }

7. 动画(animation)

  • @keyframes ，动画设置的语法：@keyframes 动画名{ from{ } to{ } }
  • animation-name，使用的动画名，animation-name: 动画名
  • animation-duration，动画渐变时间，animation-duration: 时间（s）
  • animation-delay，动画开始延迟时间，animation-delay: 时间（s）
  • animation-iteration-count，动画循环，animation-iteration-count: 次数; 循环次数
  • animation-direction，动画运行方向，animation-direction: alternate;反复
  • animation-timing-function，时间函数，animation-timing-function: ease-in;先快后慢
  • animation-fill-mode，动画结束后的位置

------参考MDN

  • 类似padding、margin，animation属性也有比较快速的写法，语法：animation: name duration timing-function delay iteration-count direction

初始示例代码:

<!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.container {
            width: 800px;
            height: 800px;
            background: #000000;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>

请添加图片描述

  • 在初始代码加上动画：
    1. @keyframes设置动画样式；
    2. animation-name: cross;给box绑定动画；
    3. animation-duration: 2s;，渐变过程2s；
    4. animation-delay: 2s;，延迟2s后开始；
    5. animation-iteration-count: infinite; 无限循环;
    6. animation-direction: alternate;按原来方向反复；
    7. animation-timing-function: ease-in;先慢后快；
.box {
            width: 100px;
            height: 100px;
            background-color: aqua;
            animation-name: cross;
            animation-duration: 2s;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: ease-in;
            /*快速写法如下：*/
            /* animation: cross 2s ease-in 2s infinite alternate; */
            /* animation: cross 2s ease-in 2; */
            position: relative;
        }

@keyframes cross {
            from {
                background-color: aqua;
                top: 0;
                left: 0;
            }

            to {
                background-color: blueviolet;
                top: 700px;
                left: 700px;
            }
        }

请添加图片描述

  • 由于动画运行后总是回到初始位置，可以加上animation-fill-mode: forwards;使动画固定在结束位置：

上面代码做一些修改：

        .box {
            width: 100px;
            height: 100px;
            background-color: aqua;
            animation-name: cross;
            animation-duration: 2s;
            animation-delay: 2s;
            animation-fill-mode: forwards;
            /* animation: cross 2s ease-in forwards; */
            position: relative;
        }
  • 可以看到动画结束时，不会回到原来的位置了，而是固定在结束位置；

8. 其他

  • border-radius边框圆角，border-radius: 50%;方形直接变成圆形；MDN
<!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.container {
            width: 800px;
            height: 800px;
            background: #000000;
            position: relative;
            border-radius: 20px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: aqua;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>
  • overflow, 设定无法适应时的操作，例如元素溢出父元素时，应采取的操作，MDN参考
<!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.container {
            width: 800px;
            height: 800px;
            background: #000000;
            overflow: scroll;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: aqua;
            animation: cross 2s ease-in forwards;
            position: relative;
        }
        @keyframes cross {
            from {
                background-color: aqua;
                top: 0;
                left: 0;
            }
            to {
                background-color: blueviolet;
                top: 700px;
                left: 900px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>
  • float and clear , 元素浮动的位置（很头疼的属性，最好别用），float, clear

终！

丶山有木兮
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS基础总结-1
m0_49935332的博客
11-07 109
CSS_1 1.什么是CSS? CSS-Cascading Style Sheet [层叠样式表] 是用于(增强)控制网页[html]样式并允许将样式信息与网页内容分离的一种标记性语言. 2.CSS的作用? 给网页[html]的元素/标记/标签设置样式的。可以让HTML网页变得好看。 3.在HTML网页中如何使用CSS? 1.内联定义 (Inline Styles) 内联定义即是在[html]的元素/标记/标签的内部使用对象的style属性定义适用其的样式表属性。已达到控制当前html元素的样式。 在[ht
CSS基础知识点总结、一
weixin_52192654的博客
11-07 299
css_1 一、什么是CSS? CSS-Cascading Style Sheet[层叠样式表] 是用于(增强)控制网页[html]样式并允许将样式信息与网页内容分离的一种标记性语言. 二、CSS的作用？ 给网页[html]的元素/标记/标签设置样式的。可以让HTML网页变得好看。 三、在HTML网页中如何使用CSS? 1.第一种方式： 内联定义 (Inline Styles) 内联定义即是在[html]的元素/标记/标签的内部使用对象的s...
基础CSS笔记（一）
云淡风轻
04-04 323
一 每种浏览器都有其默认的页面格式，但是各个浏览器之前的默认格式差异不大。我们在学习CSS的时候需要知道有默认格式的存在，以便于再以后编辑CSS时有效的利用或者克服不同浏览器之前的默认格式，使自己设计的网站能兼容更多的浏览器。 二 CSS 中有三类选择器： ID选择器，类选择器，标签选择器                           css中的格式
a:hover鼠标悬浮选择器
weixin_43573013的博客
06-03 8152
a：hover表示当鼠标选定在a标签上时a标签的样式变化。 这是css中伪类的使用格式。 伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudo class { property: value; }，简单地用一个半角英文冒号（:）来隔开选择符和伪类。CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类： :link用在未访问的连接上。 :visited用在已经访问过的连接上。 :active用于获得焦点（比
CSS三大特性之继承性
热门推荐
安静的对折的专栏
08-25 2万+
CSS有三大特性，分别是继承性，层叠性，优先级，这里讲解继承性 继承性是指子元素可以继承父元素的属性，例如下面的代码，div中包含2个p标签，1一个span标签，当给div设置字体颜色为红色时，他的子标签会继承父元素的属性，因而会显示红色。 div { color: red; }
CSS的一些知识点（一）
chuxialia的博客
05-18 101
CSS的几种选择器，盒子模型，精灵图片及它的优缺点，inline-block 有间隙时该如何解决？display: none; 与 visibility: hidden; 的区别，为什么会出现浮动？何时需清除浮动?清除浮动的方式?rgba()和 opacity 的透明效果的区别，CSS 优化、提高性能的方法有哪些？line-height 三种赋值方式有何区别
html+css基础总结（思维导图）
02-20
HTML和CSS基础知识点总结（xmind编辑的思维导图）
CSS基础入门总结（很详细的哟）
10-25
（1）基础选择器 （i）标签选择器 （ii）类选择器 （iii）id选择器 （iv）通配符选择器 （2）复合选择器 （i）后代选择器 （ii）子代选择器 （iii）并集选择器 （iv）伪类选择器 三、CSS字体属性 （1）字体大小 （2...
css基础知识总结-学习
12-02
CSS，全称Cascading Style Sheets，是一种用于描述HTML或...总之，CSS是构建网页样式的关键技术，掌握其基本概念和用法是Web开发的基础。通过合理利用选择器、属性和显示模式，我们可以创建出美观、响应式的网页设计。
CSS样式的基础学习总结
09-25
【CSS样式的基础学习总结】 CSS，全称Cascading Style Sheets，中文译为级联样式表，是一种用于描述HTML或XML文档（包括如SVG、MathML等各种XML方言）外观和格式的语言。它允许我们将样式信息与结构化内容分离，...
CSS特性之继承性
一风
04-20 2737
一、CSS的继承性    1、无继承性的属性        （1）文本属性：属性说明vertical-align垂直文本对齐text-decoration规定添加到文本的装饰text-shadow文本阴影效果white-space空白符的处理unicode-bidi设置文本的方向    （2）盒子模型的属性：属性说明width宽度height高度margin的各个系列外边距的各个系列border的...
CSS 笔记
qq_43505867的博客
09-19 287
CSS 基础
Web前端-Web开发CSS基础3-盒模型
a15735748145a的博客
07-16 465
1. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；2. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；3. 假如某父元素包含了一个纵队的子元素，父元素的宽度为400像素，那么为了最好的显示效果，应使得子元素的：宽度+内边距*2+________*2+外边距*2=400；
Web前端-Web开发CSS基础6-弹性盒子
最新发布
a15735748145a的博客
07-16 1105
10. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。11. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。12. stretch，这意味着弹性盒子在布局的时候，不论是一行一行地布局，还是一列一列地布局，垂直方向上的各元素都将会自动扩展，以填满父元素的高度。
Web前端-Web开发CSS基础5-浮动
a15735748145a的博客
07-16 362
1. 设置<div>元素的宽为100像素，高也为100像素，并且向左悬浮；12. 设置类名为class1的元素，让其自动下移到右边没有悬浮元素为止；13. 设置类名为class2的元素，让其自动下移到右边没有悬浮元素为止；14. 设置类名为class3的元素，让其自动下移到右边没有悬浮元素为止；9. 设置<button>元素，让其自动下移到左边没有悬浮元素为止；10. 设置<input>元素，让其自动下移到左边没有悬浮元素为止；11. 设置<img>元素，让其自动下移到左边没有悬浮元素为止；
JS+CSS特效：HTML+JS+CSS 实现精致的带二级菜单的头部菜单
uu0216的博客
07-16 513
既然a标签把它填满导致了原来的内圆角没有了，而去掉了a标签的背景色依然没有出现圆角。那么我不妨把第一行的两个菜单项和最后一行的两个菜单项写个圆角。这里利用子选择器实现。为了避免菜单项数量改变而导致样式的变化，需要把样式写在最后两个子列表项上，而不是第7和第8上面。所以，在最后两个列表项上，我们使用的 nth-last-child 而不是 nth-child。
在学期间html前端知识总结
06-03
"这篇资料是关于在校学习HTML前端知识的总结，涵盖了HTML基本标签、CSS样式设置、JavaScript和jQuery的基础内容，以及相关的案例笔记。" HTML是超文本标记语言，用于构建网页结构，其常用标签包括： 1. `a`标签用于...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值