前端基础--CSS3

已于 2023-10-10 08:04:09 修改
阅读量300 收藏
点赞数 1
分类专栏： Java SE # 前端基础 文章标签： css3 前端 css
于 2023-10-09 23:03:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67781178/article/details/133719611
版权

1 CSS简介

CSS，全称是层叠样式表（Cascading Style Sheets），是一种用于网页设计和排版的样式表语言。他的主要作用是控制网页的外观和布局，包括文字的字体、颜色、大小，以及元素的位置、间距、背景等方面的样式。

1.1 CSS的优势

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

1.2 CSS的作用

想象一下你正在设计一个网页，就像在画一幅画一样。HTML负责定义页面的结构和内容，就像是绘图的轮廓，但如果你想要让这幅画看起来漂亮，你需要CSS。

  1. 颜色和字体：CSS可以让你选择网页上的文字的颜色和字体样式。想象一下，你可以将文字变成红色，或者使用不同的字体，就像在选择画笔和颜料一样。
  2. 页面布局：你可以使用CSS来控制页面上的元素的位置和间距。这就像在画布上移动和排列不同的元素，使它们呈现出你想要的布局。
  3. 背景和边框：CSS还可以帮助你设置页面的背景颜色或图片，以及元素的边框样式。这就像在为你的画添加背景和边框装饰。
  4. 动画和交互：如果你想要一些特殊的效果，比如元素的平滑过渡或悬停时的动画效果，CSS也可以做到这一点。这就像为你的画加入动画和互动元素。

1.3 CSS的3种导入方式

  1. 内部样式
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导入方式</title>

<!--内部样式
    即将CSS代码写在<head>标签内的<style></style>里
    -->
  <style>
    h1 {
      color: red;
    }
  </style>

</head>
<body>

<h1>这是标题</h1>

</body>
</html>
  1. 外部样式
    在这里插入图片描述

test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导入方式</title>

  <!-- 外部样式
      即将样式规则保存在一个独立的CSS文件中，并通过链接到HTML文档来应用这些样式
   -->
  <link rel="stylesheet" href="css/style.css">

</head>
<body>

<h1>这是标题</h1>

</body>
</html>

style.css

h1 {
    color: red;
}
  1. 行内样式
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>导入方式</title>

</head>
<body>

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

</body>
</html>

2 选择器

选择器是用于指定应用样式的HTML元素的标识符。例如，可以使用标签名、类名、ID等选择器来选择特定的元素。

2.1 基本选择器

2.1.1 标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /* 选择一类标签，就会选择页面上所有的此类标签元素 */
    h1{
      color: red;
    }
    p{
      color: blue;
    }

  </style>
</head>
<body>
<h1> 标题1 </h1>
<h1> 标题2 </h1>
<p> 我是段落 </p>
</body>
</html>

在这里插入图片描述

2.1.2 类选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /* 类选择器用 点 + 类名 + 大括号的形式选择
       类名相同的都会被选择
     */
    .aaa{
        color: red;
    }
    .bbb{
      color:green;
    }

  </style>
</head>
<body>
<!--在标签上添加class属性，并命名-->
<h1 class="aaa"> 标题1 </h1>
<h1 class="aaa"> 标题2 </h1>
<p class="bbb"> 我是段落 </p>
</body>
</html>

在这里插入图片描述

2.1.3 ID选择器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    /* id选择器，用 # + id名选择 */
    #aaa{
        color: red;
    }
    #bbb{
      color:green;
    }
    #ccc{
      color: blue;;
    }

  </style>
</head>
<body>
<!--在标签上设置全局唯一的id，即id不能重复-->
<h1 id="aaa"> 标题1 </h1>
<h1 id="bbb"> 标题2 </h1>
<p id="ccc"> 我是段落 </p>
</body>
</html>

在这里插入图片描述

2.2 层次选择器

准备工作，设置出以下结构

在这里插入图片描述

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



</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>
</body>
</html>

2.2.1 后代选择器

使用后代选择器，您可以选择一个元素的所有后代元素，不仅仅是直接子元素。这可以通过在选择器中使用空格来实现。

例如选择<body>下的所有<p>元素

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

  <style>
      
  /* 选择所有<p>元素，它们是<body>元素的后代 */
    body p{
      background: red;
    }

  </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>
</body>
</html>

在这里插入图片描述

2.2.2 子选择器

子元素选择器使用 “>” 符号，只选择直接子元素。

例如选择<body>的直接<p>元素

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

  <style>

    /* 选择<body>的直接<p>元素，只有一代*/
    body > p{
      background: red;
    }

  </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>
</body>
</html>

在这里插入图片描述

2.2.3 相邻兄弟选择器

相邻兄弟选择器使用 “+” 符号，选择紧接在另一个元素后面的元素。同辈、相邻（对下不对上）、只往同一层 向后 传递一次，选中他的第一个弟弟

给第二个p标签先添加一个类属性，以方便区分和选择

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

  <style>

    /* 选择第二个p标签的下面紧挨的同层的第一个p标签, 注意若紧挨着的第一个同层标签不是p标签，则不会改变 */
    .pp + p{
      background: red;
    }

  </style>

</head>
<body>

<p>p1</p>
<p class="pp">p2</p>
<p>p3</p>

<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p5</p>
  </li>
  <li>
    <p>p6</p>
  </li>
</ul>
</body>
</html>

2.2.4 通用选择器

通用兄弟选择器使用 “~” 符号，选择与另一个元素具有相同父元素的所有兄弟元素，即选中它后面的所有弟弟。

例： 我们先再添加一个<h1>标签，然后选择它后面同层的所有<p>标签

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

  <style>

    h1 ~ p{
      background: red;
    }

  </style>

</head>
<body>

<h1>h1</h1>
<p class="p1">p1</p>
<p class="p2">p2</p>
<p class="p3">p3</p>

<ul>
  <li>
    <p>p4</p>
  </li>
  <li>
    <p>p5</p>
  </li>
  <li>
    <p>p6</p>
  </li>
</ul>
</body>
</html>

在这里插入图片描述

2.3 结构伪类选择器

  • 在CSS中，结构伪类选择器（structural pseudo-class selectors）用于选择文档中特定位置的元素，而不是仅仅基于元素的类型或属性来选择元素。这些伪类选择器通常用于根据元素在其父元素内的位置来选择元素。以下是一些常见的结构伪类选择器以及它们的含义：

    1. :first-child：选择父元素下的第一个子元素。

    2. :last-child：选择父元素下的最后一个子元素。

    3. :nth-child(n)：选择父元素下的第 n 个子元素。可以使用整数（如 2、3）或表达式（如 2n、3n+1）来指定具体的位置。

    4. :nth-last-child(n)：选择父元素下的倒数第 n 个子元素。

    5. :only-child：选择是其父元素的唯一子元素的元素。

    6. :first-of-type：选择同类型元素中的第一个元素。

    7. :last-of-type：选择同类型元素中的最后一个元素。

    8. :nth-of-type(n)：选择同类型元素中的第 n 个元素。

    9. :nth-last-of-type(n)：选择同类型元素中的倒数第 n 个元素。

    10. a:hover ：用于选择鼠标悬停在链接（<a> 元素）上时应用的样式。

  • 部分演示

开始的结构

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

  <link rel="stylesheet" href="css/style.css">

</head>
<body>

<p>p0</p>
<h1>h1</h1>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
  <li>
    <h3>h4</h3>
    <p>p4</p>
  </li>
  <li>
    <p>p5</p>
    <p>p5</p>
  </li>
  <li>
    <p>p6</p>
  </li>
</ul>
<p>p7</p>

<a href="https://i.csdn.net/#/user-center/profile?spm=1011.2266.3001.5111">我的CSDN</a>

</body>
</html>

在这里插入图片描述

演示1

/*:first-child：选择父元素下的第一个子元素。
nth-child(n)：选择父元素下的第 n 个子元素。可以使用整数（如 2、3）或表达式（如 2n、3n+1）来指定具体的位置。
*/
p:first-child{
    background: #ff5e83;
}
/*上面的等价与
p:nth-child(1){
   background: #ff5e83;
}*/

效果1

在这里插入图片描述

解释1

p:first-child会先定位所有p标签的父级标签，即对于p1,p2,p3,p7来说先找到父标签body， 然后再找body的第一个儿子（first-child），如果这个标签是p标签，则执行操作，否则无影响。

这也就是为什么p4背景没有变化，因为p4的父级标签是一个li标签，这个li标签的第一个child标签不是p标签而是一个h3标签，所以没有任何变化，但第一个p5和p6都改变了背景色。

演示2

/*选中ul的第一个子元素：li*/
ul li:first-child{
    background: blueviolet;
}

在这里插入图片描述

演示3

/* :first-of-type：选择同类型元素中的第一个元素。*/
p:first-of-type{
    background: red;
}

/* 等价与
p:nth-of-type(1) {
     background: red;
}
*/

效果3

在这里插入图片描述

解释3

p:first-of-type加入了type限制，只考虑父元素下的第一个p元素，和演示1对比效果可以发现这里p4也改变了。

演示4

a:hover{
    color: orange;
}

在这里插入图片描述

解释4

当用户将鼠标指针悬停在链接上时（不必点击链接，只需将鼠标指针移到链接上），浏览器会应用 a:hover 中定义的样式。
通常，这些样式包括改变链接的文字颜色、背景颜色、边框等，以提示用户链接是可点击的。

2.4 属性选择器（最常用）

属性选择器是CSS中的一种选择器，它允许您选择具有特定属性及其属性值的HTML元素。属性选择器以方括号（[]）包围属性和属性值，具体语法如下：

element[attribute=value] {
  /* 样式规则 */
}
  • element：可选，表示要选择的HTML元素类型（标签名）。如果省略 element，则选择任何具有指定属性及其属性值的元素。
  • attribute：要匹配的属性名。
  • value：要匹配的属性值。

准备工作

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

    /* 选择class=demo下的所有a标签元素，然后为每个标签做一些美化（下一节学习）*/
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: blue;
      text-align: center;
      color: red;
      text-decoration: none ;
      margin-right: 5px;
      font: bold 20px/50px Arial;
    }

  </style>
</head>


<body>
<!-- 准备10个带有多个不同属性的a标签元素-->
<p class="demo">
  <a href= "/abc.pdf" class="item first" id="first">1</a>
  <a href="" class="item active" target="_ blank" title="test" id="second">2</a>
  <a href="images/123.html" class="links item">3</a>
  <a href="images/123.png" class="links item">4</a>
  <a href= "https://www.baidu.com" class="name item">5</a>
  <a href="abc" class="name item">6</a>
  <a href="/a.pdf" class="name item">7</a>
  <a href="images/123.jpg" class="name item">8</a>
  <a href="abc.doc" class="name item">9</a>
  <a href="abcd.doc" class="name item last">10</a>
</p>

</body>
</html>

在这里插入图片描述

演示

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

    /* 选择class=demo下的所有a标签元素，然后为每个标签做一些美化（下一节学习*/
    .demo a{
      float: left;
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background: blue;
      text-align: center;
      color: red;
      text-decoration: none ;
      margin-right: 5px;
      font: bold 20px/50px Arial;
    }

/*------------------------演示部分-----------------*/
    /*属性名，属性名=属性值(正则)
    = 是绝对等于
    *= 是包含这个元素
    ^= 以这个元素开头
    $= 以这个元素结尾
    */


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

    /*选中id=second的元素*/
    a[id=second] {
      background: orange;
    }

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

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

    /*选中href中以jpg结尾的元素*/
    a[href$=jpg] {
      background: purple;
    }
/*------------------------演示部分-----------------*/
  </style>



</head>


<body>
<!-- 准备10个带有多个不同属性的a标签元素-->
<p class="demo">
  <a href= "/abc.pdf" class="item first" id="first">1</a>
  <a href="" class="item active" target="_ blank" title="test" id="second">2</a>
  <a href="images/123.html" class="links item">3</a>
  <a href="images/123.png" class="links item">4</a>
  <a href= "https://www.baidu.com" class="name item">5</a>
  <a href="abc" class="name item">6</a>
  <a href="/a.pdf" class="name item">7</a>
  <a href="images/123.jpg" class="name item">8</a>
  <a href="abc.doc" class="name item">9</a>
  <a href="abcd.doc" class="name item last">10</a>
</p>

</body>
</html>

效果

在这里插入图片描述

3 美化网页元素

3.1 为什么要美化网页

1、有效的传递页面信息
2、美化网页，页面漂亮，才能吸引用户
3、凸显页面的主题
4、提高用户的体验

span标签：span–范围，重点要突出的字，用span标签套起来

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

<!--  <link rel="stylesheet" href="CSS/style.css">-->
  <style>
    #title{
      font-size: 50px;
      font-family: 楷体;
      font-weight: lighter;
    }
  </style>

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

</body>
</html>

在这里插入图片描述

3.2 字体样式

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

  <!--
      color :字体颜色
      font-family：指定文本的字体族列。
      font-size：设置文本的字体大小。可以使用像素（px）、百分比（%）、em等单位。
      font-weight：定义文本的字体粗细。常用值包括normal（正常）、bold（粗体）、lighter（较轻）等
      font-style：指定文本的字体风格，通常为normal（正常）或italic（斜体）。
      text-decoration：用于添加文本装饰效果，如下划线、删除线等
      text-transform：控制文本的大小写转换，如大写、小写、首字母大写等。
  -->

  <style>
    body {
      font-family: 楷体;
      color: hotpink;
    }
    h1{
      font-size: 30px;
      font-weight: bolder;
    }
    h2 {
      font-size: 40px;
      font-weight: lighter;
      font-style: italic;
    }
    h3{
      font-size: 50px;
      text-decoration: underline;
      text-transform: uppercase;
    }
  </style>

</head>

<body>
  <h1>这是h1</h1>
  <h2>这是h2</h2>
  <h3>这是h3</h3>
  <h4>这是h4</h4>

</body>
</html>

在这里插入图片描述

3.3 文本样式

1、颜色 color· rgb rgba

2、文本对齐的方式 text-align=center

3、首行缩进 text-indent:2em

4、行高 line-height: 单行文字上下居中：line-height= height

5、装饰 text-decoration，text-decoration: none – 去掉下划线

6、文本图片水平对齐: vertical-align: middle

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!--
      颜色:
        单词: yellow
        RGB: 0~F
        RGBA A: 0~1
      text-align :排版,居中。
      text-indent: 2em;段落首行缩进两个字符
      height: 300px;
      line-height: 300px;
      行高，需要和块的高度一致，就可以上下居中
  -->
  <style>
    h1{
      color: rgba(0,255,255,10);
      text-align: center;
    }
    .p1{
      text-indent: 2em;
    }
    .p3{
      background: hotpink ;
      height: 300px;
      line-height: 300px;
    }
    /*下划线*/
    .l1 {
      text-decoration: underline;
    }
    /*中划线*/
    .l2{
      text-decoration: line-through;
    }
    /*上划线*/
    .l3 {
      text-decoration: overline;
    }
    /*超链接去下划线*/
    a{
      text-decoration: none ;
    }

  </style>

</head>
<body>
<a href="">123</a>
<p class="l1">123456789</p>
<p class="l2">123456789</p>
<p class="l3">123456789</p>

<h1>故事介绍</h1>

<p class="p1">
  公元2110年1月1日，距离地球能源完全枯竭还有3650天，为了解决能源危机，人类制造赛尔机器人和宇宙探险飞船赛尔号，探索传说中的无尽能源。
</p>

<p class="p3">
  公元2110年1月1日，距离地球能源完全枯竭还有3650天，为了解决能源危机，人类制造赛尔机器人和宇宙探险飞船赛尔号，探索传说中的无尽能源。
</p>
</body>
</html>

在这里插入图片描述

3.4 阴影

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

  <style>
    /*text-shadow:阴影颜色，水平偏移:左负右正，垂直偏移:上负下正，阴影模糊半径*/
    h1{
      text-shadow: #3cc7f5 20px 10px 2px;
    }

  </style>


</head>
<body>
<h1>这是标题</h1>


</body>
</html>

在这里插入图片描述

3.5 超链接伪类

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

  <style>
    /*默认颜色*/
    a{
      text-decoration: none;
      color: #000000;
    }
    /*鼠标悬浮的状态(重点)*/
    a:hover{
      color: coral;
      font-size: 24px;
    }
    /*鼠标按住未释放的状态*/
    a:active {
      color: green;
    }
    /*text-shadow:阴影颜色，水平偏移，垂直偏移，阴影半径*/
    #price{
      text-shadow: #3cc7f5 10px 0px 2px;
    }
  </style>

</head>

<body>
<a href="#">
  <img src="images/a.jpg" alt="">
</a>
<p>
  <a href="#">龙族四之奥丁之渊</a>
</p>
<p>
  <a href="">故乡游</a>
</p>
<p id="price">
  ￥99
</p>
</body>
</html>

鼠标悬浮但不点击

在这里插入图片描述

点击效果

在这里插入图片描述

3.6 列表

list-style 是一个CSS属性，用于控制列表（无序列表 <ul> 和有序列表 <ol>）的样式，包括列表项标记的类型、位置和图像。list-style 属性有三个子属性，分别是：

  1. list-style-type：用于指定列表项标记的类型，可以设置为以下值之一：
    • disc：使用实心圆点作为标记（默认值，用于无序列表）。
    • circle：使用空心圆圈作为标记（用于无序列表）。
    • square：使用实心方块作为标记（用于无序列表）。
    • decimal：使用阿拉伯数字（1, 2, 3，…）作为标记（用于有序列表）。
    • lower-roman：使用小写罗马数字（i, ii, iii，…）作为标记（用于有序列表）。
    • upper-roman：使用大写罗马数字（I, II, III，…）作为标记（用于有序列表）。
    • 其他标记类型。
  2. list-style-position：用于指定列表项标记的位置，可以设置为以下值之一：
    • inside：标记位于列表项内部（默认值）。
    • outside：标记位于列表项外部。
  3. list-style-image：用于指定自定义图像作为列表项标记，可以使用图像的 URL 来定义。

准备工作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>列表样式</title>

  <link rel="stylesheet" href="css/style.css">

</head>

<body>
<h2 class="title">全部商品分类</h2>
<ul>
  <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a>&nbsp;&nbsp;</li>
  <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a>&nbsp;&nbsp;</li>
  <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
  <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a>&nbsp;&nbsp;</li>
  <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
</ul>
</body>
</html>

在这里插入图片描述

演示

/* 标题样式 */
.title {
    background: orange; /* 背景颜色为橙色 */
    font-family: 楷体; /* 字体样式为楷体 */
    font-size: 50px; /* 字体大小为50像素 */
    font-weight: bold; /* 字体加粗 */
    text-align: center; /* 文本居中对齐 */
    line-height: 70px; /* 行高为70像素，垂直居中 */
}

/* 无序列表样式 */
ul {
    background: #3cc7f5; /* 背景颜色为浅蓝色 */
}

/* 列表项样式 */
ul li {
    height: 50px; /* 列表项高度为50像素 */
    font-family: 楷体; /* 字体样式为楷体 */
    text-indent: 1em; /* 段落缩进为1em */
    list-style: none; /* 移除默认的列表标记 */
}

/* 链接样式 */
a {
    color: orangered; /* 文本颜色为橙红色 */
    text-decoration: none; /* 移除链接下划线 */
    font-size: 30px; /* 字体大小为30像素 */
}

/* 鼠标悬停链接样式 */
a:hover {
    color: green; /* 文本颜色在悬停时变为绿色 */
    text-decoration: underline; /* 添加链接下划线 */
}

在这里插入图片描述

3.7 背景

background 是一个用于定义元素背景样式的CSS属性。它允许您设置元素的背景颜色、图像、位置、大小以及其他相关属性。background 属性有多个子属性，以下是其中一些常见的：

  1. background-color：用于设置元素的背景颜色，可以使用颜色值或者颜色的名称。例如：

    background-color: #FF5733; /* 使用颜色值 */
background-color: red;     /* 使用颜色名称 */

  2. background-image：用于设置元素的背景图像，通常需要提供图像的URL。例如：

    background-image: url('background-image.jpg');

  3. background-repeat：定义背景图像的重复方式，可以设置为 repeat（默认，横向和纵向都重复）、repeat-x（仅横向重复）、repeat-y（仅纵向重复）、no-repeat（不重复）。例如：

    background-repeat: repeat-x;

  4. background-size：设置背景图像的大小，可以是像素值、百分比或者关键词值（如 cover 或 contain）。例如：

    background-size: 100px 50px; /* 宽度100像素，高度50像素 */
background-size: cover;      /* 图像按比例缩放以填充整个元素 */

  5. background-position：用于设置背景图像的位置，可以使用百分比值或者关键词值（如 center）。例如：

    background-position: 50% 50%; /* 水平和垂直居中 */
background-position: right top; /* 图像位于右上角 */

  6. background-attachment：定义背景图像是否随着页面滚动，可以设置为 scroll（默认，跟随滚动）、fixed（固定在视口）、local（随元素滚动）。例如：

    background-attachment: fixed;

背景图片演示

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

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

  <style>
    div { /* 设置div的基础样式 */
      width: 1920px; /* 设置div宽度为1920像素 */
      height: 1080px; /* 设置div高度为1080像素 */
      border: 1px solid red; /* 添加1像素宽度的红色边框 */
      background-image: url("../resources/image/1.png"); /* 设置背景图像的URL路径 */
      background-repeat: no-repeat; /* 阻止背景图像重复平铺 */
      background-position: 30% 10%; /* 设置背景图像的位置为水平30%和垂直10%的位置 */
    }
  </style>
</head>
<body>
<div class="div"></div>
</body>
</html>

可以在网页打开开发者模式（F12），手动调节

下图绿色坐标轴是指background-position

在这里插入图片描述

3.8 渐变

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

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

  <style>
    div { /*设置div的基础设置*/
      width: 1920px;
      height: 1080px;
      /*background-color: #0093E9;*/
        
      /*background-image设置了 <div> 元素的背景图像。它使用了线性渐变（linear-gradient），在45度角上从蓝色（#0093E9）渐变到另一种颜色（#80D0C7）。这样的背景图像创建了一种颜色渐变效果*/
      background-image: linear-gradient(45deg, #0093E9 0%, #80D0C7 100%);
    }
  </style>

</head>

<body>
<div class="div"></div>
</body>
</html>

在这里插入图片描述

4 盒子模型

4.1 什么是盒子模型

在这里插入图片描述

CSS盒子模型是用于布局和渲染网页元素的基本概念之一。它将每个HTML元素都视为一个矩形框，这个框包含了内容（文本、图像等）、内边距（padding）、边框（border）和外边距（margin）这四个部分。这四个部分组成了元素的盒子，决定了元素在页面上的大小、定位和间距。

以下是盒子模型的四个主要组成部分：

  1. 内容 (Content): 这是元素内部的实际内容，例如文本或图像。内容的宽度和高度由元素的width和height属性决定。
  2. 内边距 (Padding): 内边距是内容与边框之间的空白区域。您可以使用padding属性来控制内边距的大小，可以分别指定上、下、左、右的内边距值，也可以一次性设置所有边。
  3. 边框 (Border): 边框是围绕内容和内边距的线条或者样式，用来分隔元素的内容和其他元素。您可以使用border属性来设置边框的宽度、样式和颜色。
  4. 外边距 (Margin): 外边距是元素与其周围元素之间的空白区域，它们用于控制元素之间的距离。您可以使用margin属性来设置外边距的大小，也可以分别指定上、下、左、右的外边距值，也可以一次性设置所有边。

4.2 边框

准备工作

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

  <link rel="stylesheet" href="CSS/style.css">


</head>

<body>
<div id="box">
  <h2>会员登录</h2>
  <form action="#">
    <div>
      <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>邮&nbsp;&nbsp;&nbsp;箱：</span>
      <input type="text">
    </div>
  </form>
</div>
</body>
</html>

在这里插入图片描述

演示

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

  <style>
    /*body：总有一个默认的外边距margin: 0; ,常见操作*/
    /*h1,ul,li,a,body {*/
    /*    margin: 0;*/
    /*    padding: 0;*/
    /*    text-decoration: none;*/
    /*}*/
    /*border:粗细，样式，颜色*/
    #box {
      width: 300px;
      border: 2px solid red;
    }

    h2{
      font-size: 24px;
      background-color: #3cbda6;
      line-height: 30px;
    }

    form{
      background: #3cbda6 ;
    }
    div:nth-of-type(1) input{
      border: 3px solid black;
    }
    div:nth-of-type(2) input{
      border: 3px dashed #4d0b8c ;
    }
    div:nth-of-type(2) input {
      border: 2px dashed #008c27;
    }
  </style>



</head>

<body>
<div id="box">
  <h2>会员登录</h2>
  <form action="#">
    <div>
      <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>邮&nbsp;&nbsp;&nbsp;箱：</span>
      <input type="text">
    </div>
  </form>
</div>
</body>
</html>

注意border作用的元素是谁

在这里插入图片描述

4.3 外边距

margin 是CSS中用于控制元素外边距（margin）的属性。外边距是元素与其周围元素之间的空白区域，它可以用来控制元素与其他元素之间的距离。

margin 属性可以设置一个值、两个值、三个值或四个值，具体取决于您希望控制的边和方向。下面是 margin 属性的详细讲解：

  1. 一个值： 如果只设置一个值，它将应用于元素的所有四个边。例如，margin: 10px; 将为元素的上、右、下、左四个边都设置为10像素的外边距。
  2. 两个值： 如果设置两个值，第一个值将应用于元素的上和下边，而第二个值将应用于左和右边。例如，margin: 10px 20px; 将为上下边设置10像素的外边距，为左右边设置20像素的外边距。
  3. 三个值： 如果设置三个值，第一个值将应用于元素的上边，第二个值将应用于左和右边，第三个值将应用于下边。例如，margin: 10px 20px 30px; 将为上边设置10像素的外边距，为左右边设置20像素的外边距，为下边设置30像素的外边距。
  4. 四个值： 如果设置四个值，它们将分别应用于元素的上、右、下和左边。例如，margin: 10px 20px 30px 40px; 将为上边设置10像素的外边距，为右边设置20像素的外边距，为下边设置30像素的外边距，为左边设置40像素的外边距。

margin 属性的值可以是正数、负数、百分比，甚至可以是 auto。下面是一些示例：

  • 正数：margin: 10px; 设置10像素的外边距。
  • 负数：margin: -5px; 设置-5像素的外边距。
  • 百分比：margin: 5%; 设置外边距为父元素宽度的5%。
  • auto：margin: auto; 用于水平居中元素，使左右外边距自动分配相等的空间。
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    #box {
      width: 300px;
      border: 8px solid red;
      margin: 8px auto;
    }

    h2{
      font-size: 24px;
      background-color: #3cbda6;
      line-height: 30px;
      text-align: center;
      margin: auto;
    }

    form{
      background: #3cbda6 ;
    }
    div:nth-of-type(1) input{
      border: 3px solid black;
    }
    div:nth-of-type(2) input{
      border: 3px dashed #4d0b8c ;
    }
    div:nth-of-type(2) input {
      border: 2px dashed #008c27;
    }
  </style>

</head>
<body>
<div id="box">
  <h2>会员登录</h2>
  <form action="#">
    <div>
      <span>用户名：</span>
      <input type="text">
    </div>
    <div>
      <span>邮&nbsp;&nbsp;&nbsp;箱：</span>
      <input type="text">
    </div>
  </form>
</div>
</body>
</html>

在这里插入图片描述

4.4 圆角边框

border-radius 是CSS属性，用于创建元素的圆角效果。它允许您将元素的角部分变为圆角，使元素看起来更加圆滑和美观。

border-radius 属性有两种常见的用法：

  1. 单一值用于四个角：

    border-radius: 10px;

    这会将所有四个角都设置为相同的圆角半径，以10像素为例。这将使元素的所有角都变为圆角。

  2. 四个值分别用于四个角：

    border-radius: 10px 20px 30px 40px;

    这会分别为元素的四个角指定不同的圆角半径，顺序分别是顶左、顶右、底右和底左角。在这个示例中，顶左角的半径是10像素，顶右角是20像素，底右角是30像素，底左角是40像素。

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

  <style>

     div{
       width: 100px;
       height: 75px;
       border: 10px solid red;
       text-align: center;
       margin:auto;
       border-radius: 50px;
     }


  </style>

</head>
<body>
<div id="box">
</div>
</body>
</html>

在这里插入图片描述

4.5 盒子阴影

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

    <style>
        img{
            border-radius: 58px;
            box-shadow: 10px 10px 108px yellow;
        }
    </style>
</head>
<body>
<div style="width: 500px ;display: block;text-align: center">
    <img src="../resources/image/1.png" alt="">
</div>
</body>
</html>

在这里插入图片描述

5 浮动 (一般不用了)

5.1 标准文档流

标准文档流（Standard Document Flow），也称为正常文档流或文档流动，是指HTML文档中元素按照默认的排列方式在页面上排列的过程。在标准文档流中，元素按照其在HTML文档中出现的顺序从上到下排列，每个块级元素都会占据一行，而内联元素则水平排列在其上一个元素的旁边。

以下是一些标准文档流的关键特点和概念：

  1. 元素按顺序排列：元素在HTML文档中的顺序决定了它们在页面上的排列顺序。先出现在HTML中的元素会在页面上显示在后出现的元素之上。
  2. 块级元素和内联元素：HTML元素可以分为块级元素和内联元素。块级元素（如<div>、<p>、<h1>等）会占据整个可用宽度，每个块级元素都会从新的一行开始。内联元素（如<span>、<a>、<strong>等）则会在水平方向上排列，允许它们在同一行内显示。
  3. 元素的尺寸和位置由内容决定：在标准文档流中，元素的尺寸和位置通常由其内部内容的大小和排列方式来决定。这意味着元素会根据其内容自动调整大小。
  4. 浮动和定位：浮动和定位是可以打破标准文档流的CSS属性。通过使用float属性或position属性，您可以将元素移动到页面上的其他位置，从而实现更复杂的布局。
  5. 流动性：标准文档流是流动的，这意味着如果页面大小发生变化，元素会根据可用空间自动调整位置。这有助于实现响应式设计。

在这里插入图片描述

块级元素：独占一行

h1~h6 p div 列表等

行内元素：不独占一行

span a img strong等

5.2 display

display 是CSS属性之一，用于控制HTML元素在文档中的显示方式。它定义了元素应该如何呈现，以及元素在布局中所占据的空间。display属性的取值可以是多种类型，每种类型都影响元素的显示方式和布局。以下是一些常见的display属性值及其作用：

  1. display: block;：
    • 作用：将元素显示为块级元素，它会占据一整行，并在默认情况下会在上下文中换行。
    • 示例：<div>、<p>、<h1> 等块级元素。
  2. display: inline;：
    • 作用：将元素显示为内联元素，它只占据其内容所需的空间，不会强制换行。
    • 示例：<span>、<a>、<strong> 等内联元素。
  3. display: inline-block;：
    • 作用：将元素显示为内联块级元素，结合了块级和内联元素的特性。它占据一整行，但不强制换行，并允许其他元素在其旁边。
    • 示例：常用于创建水平排列的元素，如按钮或图像。
  4. display: none;：
    • 作用：将元素完全隐藏，不占据页面空间。
    • 示例：通常用于根据条件来显示或隐藏元素，而不需要改变HTML结构。
  5. display: flex;：
    • 作用：创建一个弹性容器，用于实现灵活的布局。子元素可以按照水平或垂直方向排列，具有弹性的尺寸分配。
    • 示例：使用 display: flex; 创建导航菜单、按钮组、居中内容等。
  6. display: grid;：
    • 作用：创建一个网格容器，用于实现复杂的网格布局。您可以定义网格中的行和列，以便精确控制元素的位置。
    • 示例：用于创建多列布局、复杂的网页结构等。
  7. display: table;、display: table-row;、display: table-cell;：
    • 作用：模拟表格布局，元素会呈现类似于HTML表格的方式，但不需要实际的<table>元素。
    • 示例：用于创建表格布局的行、列、单元格等。
  8. display: inline-flex; 和 display: inline-grid;：类似于 display: flex; 和 display: grid;，但将元素显示为内联元素，而不是块级元素。
  9. display: list-item;：
    • 作用：将元素显示为列表项，通常与list-style属性一起使用，用于创建自定义列表样式。
    • 示例：用于自定义列表。

不设置display

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }

    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
  </style>

</head>
<body>
<div>div块元素</div>
<span>span行内元素1</span>
<span>span行内元素2</span>
</body>
</html>

在这里插入图片描述

演示

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

  <!--
      block块元素
      inline行内元素
      inline-block:是块元素，但是可以内联，在一行!
  -->
  <style>
    div{
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }

    span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: block;
    }
  </style>

</head>
<body>
<div>div块元素</div>
<span>span行内元素1</span>
<span>span行内元素2</span>
</body>
</html>

在这里插入图片描述

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

  <style>
    div, span{
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
    }
  </style>

</head>
<body>
<div>div块元素</div>
<span>span行内元素1</span>
<span>span行内元素2</span>
</body>
</html>

注：display: inline-block; 元素的默认垂直对齐方式是基线（baseline）对齐，这意味着它们的文本基线会对齐。由于<div>和<span>元素中可能包含不同的文本内容，因此它们的基线位置可能不同，导致它们在垂直方向上不对齐。

在这里插入图片描述

将vertical-align属性应用于这些元素，以明确设置它们的垂直对齐方式。例如，将其设置为middle，使它们在垂直方向上居中对齐：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  
  <style>
    div, span {
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline-block;
      vertical-align: middle;
    }

  </style>

</head>
<body>
<div>div块元素</div>
<span>span行内元素1</span>
<span>span行内元素2</span>
</body>
</html>

在这里插入图片描述

这是inline的效果

  <style>
    div, span {
      width: 100px;
      height: 100px;
      border: 1px solid red;
      display: inline;
      vertical-align: middle;
    }
  </style>

在这里插入图片描述

5.3 float (一般不使用了)

  1. float属性：
    • float属性用于指定元素在页面中的浮动方式，即元素会浮动到容器的左侧或右侧，并允许其他元素围绕它排列。
    • 常用的取值有：
      • float: left;：元素向左浮动，其他元素会围绕在其右侧。
      • float: right;：元素向右浮动，其他元素会围绕在其左侧。
      • float: none;（默认值）：元素不浮动，它会按照正常的文档流排列。
  2. 浮动元素的特点：
    • 浮动元素会脱离文档流，因此不再占据正常的布局空间。这意味着浮动元素不会影响其后续元素的位置。
    • 浮动元素会尽量靠近容器的左侧或右侧，直到碰到容器的边缘或其他浮动元素。
    • 浮动元素之间可以通过clear属性来清除浮动，以防止它们重叠或不按预期排列。

准备

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


    <style>
        div {
            margin: 10px;
            padding: 5px;
        }
        #father {
            border:1px #000 solid;
        }
        .layer01 {
            border:1px #F00 solid;
            display: inline-block;
            /*float: left;*/
        }
        .layer02 {
            border:1px #00F solid;
            display: inline-block;
            /*float: right;*/
        }
        .layer03 {
            border:1px #060 solid;
            display: inline-block;
            /*float: right;*/
        }
        .layer04 {
            border:1px #666 solid;
            font-size:12px;
            line-height:23px;
            display: inline-block;
            /*float: right;*/
        }
    </style>


</head>
<body>

<div id="father">
    <div class="layer01">
        <img src="../resources/image/1.png" alt="">
    </div>
    <div class="layer02">
        <img src="../resources/image/2.png" alt="">
    </div>
    <div class="layer03">
        <img src="../resources/image/3.png" alt="">
    </div>
    <div class="layer04">
        公元2110年1月1日，距离地球能源完全枯竭还有3650天，为了解决能源危机，人类制造赛尔机器人和宇宙探险飞船赛尔号，探索传说中的无尽能源。
    </div>
</div>

</body>
</html>

在这里插入图片描述

演示

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


    <style>
        div {
            margin: 10px;
            padding: 5px;
        }
        #father {
            border:1px #000 solid;
        }
        .layer01 {
            border:1px #F00 solid;
            display: inline-block;
            float: left;
        }
        .layer02 {
            border:1px #00F solid;
            display: inline-block;
            float: right;
        }
        .layer03 {
            border:1px #060 solid;
            display: inline-block;
            float: right;
        }
        .layer04 {
            border:1px #666 solid;
            font-size:12px;
            line-height:23px;
            display: inline-block;
            float: right;
        }
    </style>


</head>
<body>

<div id="father">
    <div class="layer01">
        <img src="../resources/image/1.png" alt="">
    </div>
    <div class="layer02">
        <img src="../resources/image/2.png" alt="">
    </div>
    <div class="layer03">
        <img src="../resources/image/3.png" alt="">
    </div>
    <div class="layer04">
        公元2110年1月1日，距离地球能源完全枯竭还有3650天，为了解决能源危机，人类制造赛尔机器人和宇宙探险飞船赛尔号，探索传说中的无尽能源。
    </div>
</div>

</body>
</html>

在这里插入图片描述

5.4 解决父级边框塌陷问题

1、增加父级元素的高度

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

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

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


    <style>
        /*
            clear: right; 右侧不允许有浮动元素
            clear: Left; 左侧不允许有浮动元素
            cLear: both; 两侧不允许有浮动元素
            clear: none;
        */
        .clear{
            clear: both;
            margin: 0;
            padding: 0;
        }
        div {
            margin: 10px;
            padding: 5px;
        }
        #father {
            border:1px #000 solid;
        }
        .layer01 {
            border:1px #F00 solid;
            display: inline-block;
            float: left;
        }
        .layer02 {
            border:1px #00F solid;
            display: inline-block;
            float: right;
        }
        .layer03 {
            border:1px #060 solid;
            display: inline-block;
            float: right;
        }
        .layer04 {
            border:1px #666 solid;
            font-size:12px;
            line-height:23px;
            display: inline-block;
            float: right;
        }
    </style>


</head>
<body>

<div id="father">

    <div class="layer01">
        <img src="../resources/image/1.png" alt="">
    </div>
    <div class="layer02">
        <img src="../resources/image/2.png" alt="">
    </div>
    <div class="layer03">
        <img src="../resources/image/3.png" alt="">
    </div>
    <div class="layer04">
        公元2110年1月1日，距离地球能源完全枯竭还有3650天，为了解决能源危机，人类制造赛尔机器人和宇宙探险飞船赛尔号，探索传说中的无尽能源。
    </div>

    <div class="clear"></div>
</div>

</body>
</html>

在这里插入图片描述

在CSS中，清除浮动的主要目的是解决父级元素的高度坍塌问题，以确保父级元素能够正确包含其浮动的子元素。但清除浮动不会取消子元素的浮动属性。

浮动元素仍然会保持其浮动性质，不会因为父级元素的清除浮动而取消浮动。这是因为浮动属性是直接应用于子元素的，与父级元素的清除浮动无关。

  1. 在父级元素中增加一个overflow:hidden; 或overflow: scroll;

    overflow: hidden; 的使用在这种情况下通常被用作一种清除浮动的技巧。当子元素都是浮动元素时，父元素的高度可能会坍塌，导致无法正确包含子元素。通过设置 overflow: hidden;，父元素会自动扩展以包含所有浮动子元素，从而解决了高度坍塌的问题。

​ 这种技巧常被称为 “clearfix”，因为它会强制父元素包含浮动元素，同 时隐藏溢出的内容。这是一种常见的清除浮动的方法，尤其在处理浮动 元素时，它可以确保父元素具有适当的高度和边框样式。

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


    <style>
        div {
            margin: 10px;
            padding: 5px;
        }
        #father {
            border:1px #000 solid;
            overflow: hidden;
        }
        .layer01 {
            border:1px #F00 solid;
            display: inline-block;
            float: left;
        }
        .layer02 {
            border:1px #00F solid;
            display: inline-block;
            float: right;
        }
        .layer03 {
            border:1px #060 solid;
            display: inline-block;
            float: right;
        }
        .layer04 {
            border:1px #666 solid;
            font-size:12px;
            line-height:23px;
            display: inline-block;
            float: right;
        }
    </style>


</head>
<body>

<div id="father">

    <div class="layer01">
        <img src="../resources/image/1.png" alt="">
    </div>
    <div class="layer02">
        <img src="../resources/image/2.png" alt="">
    </div>
    <div class="layer03">
        <img src="../resources/image/3.png" alt="">
    </div>
    <div class="layer04">
        公元2110年1月1日，距离地球能源完全枯竭还有3650天，为了解决能源危机，人类制造赛尔机器人和宇宙探险飞船赛尔号，探索传说中的无尽能源。
    </div>
</div>

</body>
</html>

overflow: scroll; 属性：

  • 当您将 overflow 属性设置为 scroll 时，它会在需要时显示滚动条，无论内容是否溢出元素的可见区域。
  • 如果元素的内容没有溢出，将不会显示滚动条，但如果内容溢出了可见区域，就会显示水平和垂直滚动条，以便用户可以滚动查看隐藏的内容。
  1. 父类添加一个伪类：after（推荐）
#father:after{
            content :'';
            display: block;
            clear: both;
        }

即添加一个空的盒子把父类撑起来

完整代码

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


    <style>
        div {
            margin: 10px;
            padding: 5px;
        }
        #father {
            border:1px #000 solid;
        }
        #father:after{
            content :'';
            display: block;
            clear: both;
        }
        .layer01 {
            border:1px #F00 solid;
            display: inline-block;
            float: left;
        }
        .layer02 {
            border:1px #00F solid;
            display: inline-block;
            float: right;
        }
        .layer03 {
            border:1px #060 solid;
            display: inline-block;
            float: right;
        }
        .layer04 {
            border:1px #666 solid;
            font-size:12px;
            line-height:23px;
            display: inline-block;
            float: right;
        }
    </style>


</head>
<body>

<div id="father">

    <div class="layer01">
        <img src="../resources/image/1.png" alt="">
    </div>
    <div class="layer02">
        <img src="../resources/image/2.png" alt="">
    </div>
    <div class="layer03">
        <img src="../resources/image/3.png" alt="">
    </div>
    <div class="layer04">
        公元2110年1月1日，距离地球能源完全枯竭还有3650天，为了解决能源危机，人类制造赛尔机器人和宇宙探险飞船赛尔号，探索传说中的无尽能源。
    </div>
</div>

</body>
</html>

6 定位

6.1 相对定位

相对定位（Relative Positioning）是CSS中一种用于调整元素位置的布局技术。与绝对定位不同，相对定位是相对于元素在正常文档流中的原始位置进行调整，而不是相对于父元素或视口的位置。以下是相对定位的基本概念和用法：

  1. 基本语法： 使用相对定位时，您需要为要定位的元素应用 position: relative; 样式。例如：

    .relative-box {
    position: relative;
    left: 20px;
    top: 10px;
}

    在上面的例子中，.relative-box 类的元素将相对于其原始位置向左偏移20像素，向上偏移10像素。

  2. 调整位置：

    • 使用 left 和 top 属性可以分别调整元素相对于原始位置的水平和垂直位置。
    • 正值会使元素相对于原始位置向右或向下移动，负值会使元素相对于原始位置向左或向上移动。

  3. 相对性质：

    • 相对定位不会脱离正常文档流，元素仍会占据其原始位置的空间。
    • 其他元素仍会根据元素的原始位置来布局。

  4. 层叠顺序：

    • 相对定位的元素在层叠顺序中位于正常流元素之上，但位于绝对定位元素之下。
    • 您可以使用 z-index 属性来调整元素的层叠顺序。

  5. 用途：

    • 相对定位常用于微调元素的位置，例如在制作特定效果时，稍微移动图像或文本的位置。
    • 也可以与其他定位技术（如绝对定位、固定定位）一起使用，以创建复杂的布局。

演示

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

    <style>
        body {
            padding: 28px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background-color: #a13d30;
            border: 1px dashed #b27530;
            position: relative; /*相对定位*/
            tpp: - 20px;
            left: 28px;
        }
        #second{
            background-color: #255099;
            border: 1px dashed #255066;
        }
        #third{
            background-color: #1c6699 ;
            border: 1px dashed #1c6615;
            position: relative;
            bottom: -10px;
            right: 20px;

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

</body>
</html>

在这里插入图片描述

练习

img

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

  <style>
    #father{
      width: 300px;
      height: 300px;
      border: 2px solid red;
      padding: 2px;
    }
    a{
      width: 100px;
      height: 100px;
      background: hotpink;
      text-decoration: none;
      display: block;
      text-align: center;
      line-height: 100px;
    }
    a:hover{
      background: #64c8ff;
    }
    .a2, .a4{
      position: relative;
      top:-100px;
      left:200px;
    }
    .a5{
      position: relative;
      top:-300px;
      left: 100px;
    }
  </style>


</head>
<body>

<div id="father">
  <a href="" class="a1">链接1</a>
  <a href="" class="a2">链接2</a>
  <a href="" class="a3">链接3</a>
  <a href="" class="a4">链接4</a>
  <a href="" class="a5">链接5</a>
</div>

</body>
</html>

6.2 绝对定位

绝对定位（Absolute Positioning）是CSS中一种用于将元素精确放置在页面上的布局技术。与相对定位不同，绝对定位是相对于最接近的已定位的祖先元素进行定位的，而不是相对于正常文档流中的位置。以下是绝对定位的基本概念和用法：

  1. 基本语法： 使用绝对定位时，您需要为要定位的元素应用 position: absolute; 样式。例如：

    cssCopy code.absolute-box {
    position: absolute;
    left: 20px;
    top: 10px;
}

    在上面的例子中，.absolute-box 类的元素将相对于其最近的已定位祖先元素（通常是一个具有 position 属性的祖先元素）向左偏移20像素，向上偏移10像素。

  2. 调整位置：

    • 使用 left 和 top 属性可以分别调整元素相对于已定位祖先元素的水平和垂直位置。
    • 正值会使元素相对于原始位置向右或向下移动，负值会使元素相对于原始位置向左或向上移动。

  3. 已定位祖先元素：

    • 绝对定位的元素的定位是相对于最近的已定位的祖先元素。如果没有已定位的祖先元素，则相对于视口（浏览器）进行定位。
    • 已定位的祖先元素通常是具有 position: relative;、position: absolute; 或 position: fixed; 样式的元素。

  4. 相对性质：

    • 绝对定位的元素脱离了正常文档流，不再占据原始位置的空间。
    • 其他元素不会受到其位置的影响，继续按照正常文档流排列。

  5. 层叠顺序：

    • 绝对定位的元素默认位于层叠顺序的顶部，即位于正常流元素和相对定位元素之上。
    • 您可以使用 z-index 属性来调整元素的层叠顺序。

  6. 用途：

    • 绝对定位常用于创建特定的布局效果，如弹出框、下拉菜单、悬浮提示等。
    • 它允许您在页面上精确地放置元素，无论它们在文档流中的位置如何。

演示

<!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 #666;
      padding: 0;
      position: relative;
    }
    #first{
      background-color: #a13d30;
      border: 1px dashed #b27530;
    }
    #second{
      background-color: #255099;
      border: 1px dashed #255066;
      position: absolute;
      left: 100px;
    }
    #third{
      background-color: #1C6699;
      border: 1px dashed #1c6615;
    }
  </style>

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

</body>
</html>

在这里插入图片描述

6.3 固定定位 fixed

position: fixed; 是CSS中的一种定位属性，用于将元素固定在视口（浏览器窗口）中的位置，而不受页面滚动的影响。以下是有关position: fixed;的详细信息：

  1. 基本语法： 使用position: fixed;时，您可以指定元素相对于视口的位置。例如：

    .fixed-box {
    position: fixed;
    top: 0;
    left: 0;
}

    上面的例子将.fixed-box类的元素固定在视口的左上角。

  2. 相对性质：

    • 使用position: fixed;的元素会脱离正常文档流，不会随页面滚动而移动。
    • 它们将始终保持在指定的位置，不受页面滚动的影响。

  3. 定位位置：

    • top、left、right和bottom属性用于指定元素相对于视口的位置。
    • 通过调整这些属性的值，可以将元素放置在视口的不同位置。

  4. 层叠顺序：

    • 使用position: fixed;的元素通常位于层叠顺序的顶部，即它们在页面上的其他元素之上。
    • 您可以使用z-index属性来调整元素的层叠顺序。

  5. 用途：

    • position: fixed;通常用于创建固定导航栏、悬浮工具栏、弹出通知、返回顶部按钮等界面元素。
    • 它对于在用户滚动页面时保持某些元素的可见性非常有用。

需要注意的是，position: fixed;的元素会相对于视口进行定位，因此它们不会受到父级元素的影响。这使得它们适用于创建在整个页面上固定显示的元素。

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

  <style>
    body {
      height: 1000px;
    }
    div:nth-of-type(1) { /*绝对定位:相对于浏览器*/
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      right: 0;
      bottom: 0;
    }
    div:nth-of-type(2){ /*fixed, 固定定位*/
      width: 50px;
      height: 50px;
      background: yellow;
      position: fixed;
      right: 0;
      bottom: 0;
    }
  </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html

在这里插入图片描述

6.4 z-index

z-index 是CSS属性，用于控制元素在层叠上下文（stacking context）中的层叠顺序。它决定了哪个元素在页面上显示在其他元素之上或之下。z-index 只能应用于已定位的元素，例如具有 position: relative;、position: absolute; 或 position: fixed; 属性的元素。

以下是有关 z-index 的重要信息：

  1. 基本语法： z-index 的值是一个整数，用于确定元素的层叠顺序。较大的值表示元素位于较上层，较小的值表示元素位于较下层。

    .element {
    position: relative; /* 或其他定位属性 */
    z-index: 1; /* 整数值，控制层叠顺序 */
}

  2. 层叠顺序：

    • 默认情况下，HTML文档中的元素按照它们在文档流中的顺序进行层叠，后出现的元素位于较上层。
    • 通过设置 z-index，您可以改变元素的默认层叠顺序，使其覆盖或被覆盖其他元素。

  3. 相对性质：

    • z-index 只在同一层叠上下文内有效。如果两个元素属于不同的层叠上下文，那么它们的 z-index 不会相互影响。
    • 层叠上下文的创建方式包括具有 position: relative;、position: absolute;、position: fixed; 或 position: sticky; 属性的元素，以及具有一些 CSS3 属性（如 transform 和 opacity）的元素。

  4. 负值和小数：

    • z-index 可以接受负值和小数，但通常最好使用整数值以避免混淆和不必要的复杂性。
    • 具有较高 z-index 的元素会覆盖具有较低 z-index 的元素。

  5. 继承：

    • z-index 不是可以继承的属性。子元素的 z-index 不会继承其父元素的 z-index 值。

  6. 默认值：

    • 元素的 z-index 默认值是 auto，它与文档流中的顺序相关。如果没有明确指定 z-index，则元素将按照文档流的顺序进行层叠。

在这里插入图片描述

演示

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

  <style>
    #content{
      width: 380px;
      padding: 0px;
      margin: 0px;
      overflow: hidden;
      font-size: 12px;
      line-height: 25px;
      border: 1px #000 solid;
    }
    ul, li{
      padding: 0px;
      margin: 0px;
      list-style: none;
    }
    /*.父级元素相对定位*/
    #content ul{
      position: relative;
    }
    .tipText,.tipBg{
      position: absolute;
      width: 200px;
      height: 25px;
      top: 101px;
    }
    .tipText{
      color: red;
      z-index: 1;
    }
    .tipBg {
      background: #000;
      /*可以设置透明度，则图层关系看的更明显*/
      /*opacity: 0.5; !*背景透明度*!*/
      /*filter:Alpha(opacity=50);*/
    }

  </style>

</head>
<body>
<div>
  <ul>
    <li><img src="../resources/image/4.png" alt=""> </li>
    <li class="tipText">学习 微服务，找狂神</li>
    <li class="tipBg"></li>
    <li>时间: 2099-01-01</li>
    <li>地点:月球一号基地</li>
  </ul>
</div>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

7 Flex布局（重要）

7.1 关键概念和属性

Flex布局，也称为弹性盒子布局（Flexbox），是一种用于网页布局的现代CSS布局模型。它的目的是提供一种更加高效和可预测的方式来排列、对齐和分布容器内的元素，尤其是在响应式设计中非常有用。

以下是Flex布局的一些关键概念和属性：

  1. 容器和项目：
    • Flex布局的基本单位是容器（flex container）和项目（flex item）。
    • 容器是要布局的父元素，项目是容器内的子元素。
  2. 主轴和交叉轴：
    • 容器有一个主轴和一个交叉轴，它们决定了项目的排列方式。
    • 主轴是项目的主要排列方向，可以是水平或垂直的。
    • 交叉轴是与主轴垂直的轴。
  3. flex属性：
    • 在容器上使用display: flex;或display: inline-flex;来启用Flex布局。
    • 使用flex属性来控制项目在主轴上的伸缩能力（如flex: 1;）。
  4. 主轴对齐和交叉轴对齐：
    • 使用justify-content属性控制项目在主轴上的对齐方式。
    • 使用align-items属性控制项目在交叉轴上的对齐方式。
    • 使用align-self属性在单个项目上覆盖align-items的值。
  5. 项目排序：
    • 使用order属性为项目指定排列顺序。
  6. 弹性增长和收缩：
    • 使用flex-grow属性控制项目的增长能力。
    • 使用flex-shrink属性控制项目的收缩能力。
  7. 空间分配：
    • 使用flex-basis属性设置项目在主轴上的初始大小。
    • 使用flex-wrap属性控制项目是否允许换行。
  8. 嵌套的Flex容器：
    • 可以在一个Flex项目内部创建另一个Flex容器，从而创建复杂的布局结构。

7.2 属性

Flex布局的属性主要分为容器属性和项目属性。

容器属性（适用于父容器）：

  1. display：用于启用Flex布局的关键属性。
    • 示例：display: flex;或display: inline-flex;
  2. flex-direction：控制主轴的方向。
    • 示例：flex-direction: row;（默认值）、flex-direction: column;
  3. flex-wrap：定义如何处理项目在容器内换行。
    • 示例：flex-wrap: nowrap;（默认值）、flex-wrap: wrap;
  4. flex-flow：flex-direction和flex-wrap的简写。
    • 示例：flex-flow: row wrap;
  5. justify-content：控制项目在主轴上的对齐方式。
    • 示例：justify-content: flex-start;（默认值）、justify-content: center;
  6. align-items：控制项目在交叉轴上的对齐方式。
    • 示例：align-items: stretch;（默认值）、align-items: flex-end;
  7. align-content：在有多行项目时，控制各行在交叉轴上的对齐方式。
    • 示例：align-content: flex-start;（默认值）、align-content: space-between;

项目属性（适用于子项目）：

  1. order：定义项目的排列顺序，数值越小越靠前。
    • 示例：order: 2;
  2. flex-grow：定义项目在剩余空间中的增长能力。
    • 示例：flex-grow: 1;
  3. flex-shrink：定义项目在空间不足时的收缩能力。
    • 示例：flex-shrink: 0;
  4. flex-basis：定义项目在主轴上的初始大小。
    • 示例：flex-basis: 30%;
  5. flex：flex-grow、flex-shrink和flex-basis的简写。
    • 示例：flex: 1 0 auto;
  6. align-self：覆盖父容器的align-items属性，控制单个项目在交叉轴上的对齐方式。
    • 示例：align-self: center;

7.3 Flex游戏总结

游戏网址：Play Flex Box Adventure – CSS Game to Learn Flexbox (codingfantasy.com)

7.3.1 justify-content

定义浏览器如何在项目之间和项目周围水平分布空间

常用6个值

  1. center ：在容器的中心对齐项目

    .wrapper {
  display: flex;
  justify-content: center;
}

    在这里插入图片描述

  2. flex-start (默认的) : 在容器的开头对齐项目。

    .wrapper {
  display: flex;
  justify-content: flex-start;
}

    在这里插入图片描述

  3. flex-end ： 在容器的末尾对齐项目。

    .wrapper {
  display: flex;
  justify-content: flex-end;
}

在这里插入图片描述

  1. space-between : 第一个和最后一个项目将与容器的末端齐平，并且所有空间在项目之间平均共享。

    .wrapper {
  display: flex;
  justify-content: space-between;
}

    在这里插入图片描述

  2. space-around : 每个项目之间的空间是相等的，但首项目和左边缘以及最后一个项目和右边缘的距离都是项目间距离的一半，即。

    .wrapper {
  display: flex;
  justify-content: space-around;
}

    在这里插入图片描述

  3. space-evenly : 物品周围具有相等的空间。(evenly – 均匀地 )

    .wrapper {
  display: flex;
  justify-content: space-evenly;
}

在这里插入图片描述

space-around和space-evenly

在这里插入图片描述

7.3.2 align-item

定义浏览器如何在项目之间和项目周围垂直分布空间。

  1. center

    .wrapper {
  display: flex;
  align-items: center;
}

    在这里插入图片描述

  2. flex-start : 在容器的开头对齐项目。

.wrapper {
  display: flex;
  align-items: flex-start;
}

在这里插入图片描述

  1. flex-end

    .wrapper {
  display: flex;
  align-items: flex-end;
}

    在这里插入图片描述

  2. baseline : 对齐项目，使其基线对齐。

    .wrapper {
  display: flex;
  align-items: baseline;
}

    在这里插入图片描述

  3. stretch : 拉伸项目以填充容器

    .wrapper {
  display: flex;
  align-items: stretch;
}

    在这里插入图片描述

7.3.3 flex-direction

用于设置 Flex 容器主轴方向

  1. row (default) : Flex 项目在主轴上水平排列。这意味着主轴从左到右。
.wrapper {
  display: flex;
  flex-direction: row;
}

在这里插入图片描述

  1. row-reverse : 与 row 类似，但是主轴方向相反，项目从右到左排列

    .wrapper {
  display: flex;
  flex-direction: row-reverse;
}

    在这里插入图片描述

  2. column : Flex 项目在主轴上垂直排列。这意味着主轴从上到下。

.wrapper {
  display: flex;
  flex-direction: column;
}

在这里插入图片描述

  1. column-reverse : 与 column 类似，但是主轴方向相反，项目从下到上排列。

    .wrapper {
  display: flex;
  flex-direction: column-reverse;
}

    在这里插入图片描述

7.3.4 order

是用于定义 Flex 项目在 Flex 容器中的排列顺序。默认Flex 项目的 order 值为 0，它们按照其在 HTML 结构中的出现顺序排列。order 属性的值可以是任何整数，包括负数。项目的排列顺序按照 order 属性的值从小到大排序。具有相同 order 值的项目按照它们在 HTML 结构中的顺序排列。

/*排序前*/
.wrapper {
  display: flex;
}

在这里插入图片描述

.wrapper {
  display: flex;
}
/*排序*/
#arthur {
  order: 2;
}

#marilyn {
  order: 1;
}

在这里插入图片描述

7.3.5 align-self

用于单个 Flex 项目（Flex容器的子项目）在交叉轴上自定义对齐方式的CSS属性。

  1. center

    #box1 {
  align-self: center;
}

    在这里插入图片描述

  2. flex-start

    #box1 {
  align-self: flex-start;
}

    在这里插入图片描述

  3. flex-end

    #box1 {
  align-self: flex-end;
}

    在这里插入图片描述

  4. stretch

    #box1 {
  align-self: stretch;
}

    在这里插入图片描述

7.3.6 flex-wrap

用于控制 Flex 容器内的项目是否允许换行。

  1. nowrap (default) : Flex 项目不会换行，它们将在一行上尽可能多地排列

    wrapper {
  display: flex;
  flex-wrap: nowrap;// 可以省略不写
}

    在这里插入图片描述

  2. wrap

    .wrapper {
  display: flex;
  flex-wrap: wrap;
}

    在这里插入图片描述

  3. wrap-reverse : 与 wrap 类似，但是换行的方向相反，从下向上排列

    .wrapper {
  display: flex;
  flex-wrap: wrap-reverse;
}

    在这里插入图片描述

7.3.7 align-content

用于控制多行项目在交叉轴上的对齐方式

  1. center

    .wrapper {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

    在这里插入图片描述

  2. flex-start

    .wrapper {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

    在这里插入图片描述

  3. flex-end

    .wrapper {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

    在这里插入图片描述

  4. space-between

    .wrapper {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

    在这里插入图片描述

  5. space-around

    .wrapper {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}

在这里插入图片描述

埋了吧汰.
关注
专栏目录
CSS背景图片居中置顶
qq_17627195的博客
11-10 2309
.bg{ height: 100%; background-image: url("../../public/img/bg.png"); background-repeat: no-repeat; background-position: center top; }
css 图片外面包裹得原始大于图片本身
qq_25239049的博客
09-03 148
解决： （1）外面原始高度设置成图片高度 （2）图片设置成display：block
CSS 实现左侧溢出
雾里看花叹朦胧
03-24 1266
使用 CSS 的 direction 属性： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <h1>我的第一个HTML页面我的第一个HTML页面</h1> </body> </html> h1{ width: 600px; b
css 实现背景图片拉伸
dxh_0829的专栏
08-19 1528
使用css3 属性：background-size background-size：cover   即可实现像桌面壁纸一样拉伸 以下是w3c上面的解释： 语法 background-size: length|percentage|cover|contain; 值 描述   length 设置背景图像的高度和宽
cursor属性 鼠标指针放在元素范围内时的光标形状
Gamin
11-06 840
/*默认 浏览器设置的光标*/ cursor: auto; cursor属性 url 需使用的自定义光标的 URL。 注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。 default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动。 e-re..
前端项目-flexiblegs-css.zip
09-03
例如，我们可能有一个针对手机的布局（1-2列），一个平板布局（2-3列）和一个桌面布局（3-4列）。 5. **响应式类（Responsive Classes）**：为了简化开发，Flexible Grid System CSS 提供了一系列预定义的类，可以...
前端项目-angular-css.zip
09-02
【压缩包子文件的文件名称列表】：“angular-css-master”很可能代表了项目的主目录或者源代码仓库。在AngularJS项目中，"master"通常指的是主要分支或基础版本，这可能包含项目的结构、源代码、样例、测试和其他...
前端-HTML-CSS-JS-个人网页制作实例
最新发布
06-16
在本项目中，“前端-HTML-CSS-JS-个人网页制作实例”是一个涵盖了网页开发基础知识的实践案例。这个实例以“天气之子”这一主题为风格，展现了如何结合HTML、CSS和JavaScript技术来创建一个富有创意和个人特色的网页...
前端项目-shoelace-css.zip
09-03
"shoelace-css-master" 作为压缩包中的唯一文件名，很可能表示这是 "shoelace-css" 项目的主分支或者是最完整的版本。通常，"master" 分支代表了一个项目的默认或主要分支，包含最新的稳定代码。这个目录可能包含了...
前端基础-CSS样式的分类
01-08
3.外部样式 新建一个css文件，然后和html页面关联起来 a) 使用标签关联 b) 使用指令关联 /* 在style标签中 */ @import url(css文件路径) 多学一招：做项目最常用的是外部样式，link标签 三种样式表总结 样式...
html前端图片定位,前端学习 -- Html&Css -- 相对定位 绝对定位 固定定位
weixin_42195978的博客
06-04 1203
相对定位- 定位指的就是将指定的元素摆放到页面的任意位置，通过定位可以任意的摆放元素。- 通过position属性来设置元素的定位。-可选值：static：默认值，元素没有开启定位；relative：开启元素的相对定位；absolute：开启元素的绝对定位；fixed：开启元素的固定定位(也是绝对定位的一种)。当元素的position属性设置为relative时，则开启了元素的相对定位当开启了元素...
HTML5 第1阶段第1周周考试题与解析
热门推荐
weixin_41860983的博客
10-16 2万+
HTML5 第1阶段第1周周考 答题限时:60分钟 满分:100分 合格分数:60分 一、单选题 1.下面关于外部样式表的说法错误的是 A . 文件扩展名为 .cs B .外部样式表内容不需要使用C .使用标签引入外部样式 D.使用外部样式表可以使网站更加简洁，风格保持统一 正确答案: A 解析:文件扩展名为 .css 2.在HTML中引入css内部样式表使用 A style B p C link D strong 正确答案: A 解析:内部样式表的语法 <style type="tex
CSS第四天
huster0828的博客
08-04 519
一. 定位1.1 为什么需要定位1.2 定位的组成1.3 静态定位 static1.4 相对定位 relative1.5 绝对定位 absolute 一. 定位 1.1 为什么需要定位 浮动可以让多个块级盒子一行没有缝隙排列显示,经常用于横向排列盒子. 定位则是可以让盒子自由在某个盒子内移动或者固定屏幕中某个位置,并且可以压住其他盒子. 第二点的效果,标准流或者浮动都无法快速实现,此时就需要用定位来实现. 1.2 定位的组成 定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子..
html背景置顶,css设置背景图片位置固定
weixin_35721505的博客
06-02 1338
先看下实例html>css背景图片固定body{background-image:url("https://picsum.photos/id/100/1080/1400");background-repeat:no-repeat;background-attachment:fixed;background-position:center0%;}h3{line-height:500...
前端背景图放置_前端JavaScript-设置背景图片位置
weixin_30783205的博客
12-24 1349
代码实例如下： web前端学习交流扣qun：731771211 志同道合者进 #antzone{ width:309px; height:99px; } window.onload=function(){ var obt=document.getElementById("bt"); var odiv=document.getElementById("antzone");...
HTML中怎么设置图片的位置和大小
weixin_34310785的博客
01-28 2万+
其他的也不多废话了直接上代码： <html> <head> <style type="text/css"> <! 设置图片的属性> img{ position:absolute; <! 绝对位移> left:300px; top:150px;<! wid...
控制web前端图片位置
qq_52660776的博客
02-16 7996
控制图片位置: 距离页面右端 margin-right:200px 距离页面左端： margin-left:200px 距离页面顶部： margin-top:200px 距离页面底部： margin-bottem:200px
html背景大小会超过div吗,关于CSS：背景图片是否可以大于div本身？
weixin_29214715的博客
06-08 669
我有一个100％宽度的页脚div。 高约50像素，具体取决于其内容。是否可以为#footer提供背景图像，从而使该div溢出？该图像约为800x600px，我希望将其放置在页脚的左下角。 它的工作方式应该类似于我网站的背景图片，但是我已经在自己的身体上设置了背景图片。 我需要在我的网站的左下角放置另一个图片，并且#footer div十分适合。#footer {clear: both;width:...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值