WEB之CSS

于 2021-04-01 10:24:32 发布
阅读量383 收藏 8
点赞数
分类专栏： WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47314449/article/details/115365934
版权

一、CSS简介

       CSS是层叠样式表/级联样式表（Cascading Style Sheets）的缩写。在前端网页制作中负责给其内容添加样式，比如颜色、位置、大小、背景等等，用来美化页面，使网页更加美观。

二、CSS书写方式

1、CSS语法

       一条CSS样式规则由两个主要的部分构成：选择器和以{ }包裹的一条或多条声明，如：
h1 { color : red ; font-size : 14px ; }
       其中，h1是选择器，**{ }**里面是声明，这里面有两条声明：color:red和font-size:14px。color和font-size是属性，red和14px是值。

  • 选择器是我们需要改变样式的对象（上例就是一级标题生效）。
  • 每条声明由一个属性和一个值组成。（无论是一条或多条声明，都需要用{}包裹，且声明用;分割）
  • 属性是您我们希望设置的样式属性。每个属性有一个值。属性和值用:分开。

2、CSS代码书写方式

A、嵌入式：将CSS代码嵌入在HTML文件中。用标签<style></style>包裹起来，此标签可以放在HTML文件中的任何地方，但一般放在头部。如：

  <head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>页面标题</title>
    <style>
      pre{
        color: rgb(255, 60, 0);
        font-size: 20px;
      }
    </style>
</head>
<body>
  <pre>
    黄色的树林里分出两条路，
    可惜我不能同时去涉足，
    我在那路口久久伫立，
    我向着一条路极目望去，
    直到它消失在丛林深处。
     
    但我选了另外一条路，
    它荒草萋萋，十分幽寂，
    显得更诱人，更美丽；
    虽然在这条小路上，
    很少留下旅人的足迹。
     
    那天清晨落叶满地，
    两条路都未经脚印污染。
    啊，留下一条路等改日再见！
    但我知道路径延绵无尽头，
    恐怕我难以再回返。
     
    也许多少年后在某个地方，
    将轻声叹息将往事回顾：
    一片树林里分出两条路——
    而我选择了人迹更少的一条，
    从此决定了我一生的道路。
  </pre>
</body>

效果如下：

在这里插入图片描述

B、外链式：单独写一个css代码文件，在HTML中引用。
如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>页面标题</title>
    <link rel="stylesheet"  type="text/css"   href="../css/style.css">
    <!-- <style>
      pre{
        color: rgb(255, 60, 0);
        font-size: 20px;
      }
    </style> -->
</head>
<body>
  <pre>
    但我选了另外一条路，
    它荒草萋萋，十分幽寂，
    显得更诱人，更美丽；
    虽然在这条小路上，
    很少留下旅人的足迹。
  </pre>
</body>
</html>

style.css

pre{
    color: rgb(0, 183, 255);
    font-size: 20px;
  }

效果如下：
在这里插入图片描述

一般我们会在项目目录下建一个文件夹如css来专门存放样式表文件，现在一般都是采用外链式，方便改动。

C、行内式：将CSS代码书写在HTML标签的style属性中。
如：

<body>
  <pre style="color: blueviolet;font-size: 20px;">
    但我选了另外一条路，
    它荒草萋萋，十分幽寂，
    显得更诱人，更美丽；
    虽然在这条小路上，
    很少留下旅人的足迹。
  </pre>
</body>

效果如下：
在这里插入图片描述

接下来我们将上面的三种CSS书写方式都应用在HTML中，看看浏览器呈现哪一种效果；

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>页面标题</title>
    <link rel="stylesheet"  type="text/css"   href="../css/style.css"> 
    <style>
      pre{
        color: rgb(255, 60, 0);
        font-size: 20px;
      }
    </style> 
</head>
<body>
  <pre style="color: blueviolet;font-size: 20px;">
    但我选了另外一条路，
    它荒草萋萋，十分幽寂，
    显得更诱人，更美丽；
    虽然在这条小路上，
    很少留下旅人的足迹。
  </pre>
</body>
</html>

浏览器呈现结果：
在这里插入图片描述

由此可以看出，行内式的优先级最高，接下来对比一下外链式和嵌入式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>页面标题</title>
    <link rel="stylesheet"  type="text/css"   href="../css/style.css"> 
    <style>
      pre{
        color: rgb(255, 60, 0);
        font-size: 20px;
      }
    </style> 
</head>
<body>
  <pre> 
    但我选了另外一条路，
    它荒草萋萋，十分幽寂，
    显得更诱人，更美丽；
    虽然在这条小路上，
    很少留下旅人的足迹。
  </pre>
</body>
</html>

浏览器显示结果：
在这里插入图片描述

可以看到浏览器呈现的是嵌入式CSS代码的结果，因此得出，嵌入式的优先级比外链式优先级高。

结论：行内式>嵌入式>外链式
注意：CSS文件不能单独运行，只能在HTML中运行。一个HTML可以引入多个CSS文件。

3、CSS文件中代码的注释

与HTML的注释格式不同，CSS文件中使用/* 注释内容 */来注释代码。

三、走进CSS

1、选择器

  • 通用选择器
    格式：
*{
属性：值；
}

通用选择器书写的样式对所有html的标签内容生效。
例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>页面标题</title>
    <link rel="stylesheet"  type="text/css"   href="../css/style.css"> 
</head>
<body>
  <pre> 
    但我选了另外一条路，
    它荒草萋萋，十分幽寂，
    显得更诱人，更美丽；
    虽然在这条小路上，
    很少留下旅人的足迹。
  </pre>
  <p>我和上面的样式一样</p>
  <p>same</p>
</body>
</html>

结果：
在这里插入图片描述

  • 标签选择器
    格式:
标签名{
	属性：值；
	}

标签选择器，只对设置了CSS格式的标签内容生效。

  • 类选择器
    格式：
.class{
	属性：值；
	}
或
标签名.class{
	属性：值；
	}

类选择器的CSS代码只对该类生效。
如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>页面标题</title>
    <link rel="stylesheet"  type="text/css"   href="../css/style.css"> 
</head>
<body>
  <pre> 
    但我选了另外一条路，
    它荒草萋萋，十分幽寂，
    显得更诱人，更美丽；
    虽然在这条小路上，
    很少留下旅人的足迹。
  </pre>
  <p class="color">我是紫色的</p>
  <p>nothing</p>
</body>
</html>

css代码

.color{
    color: rgb(153, 0, 255);
    font-size: 20px;
  }

效果：
在这里插入图片描述

  • id选择器
    格式：
#id属性值{
	属性：值；
	}

如：

 <pre id="red"> 
    但我选了另外一条路，
    它荒草萋萋，十分幽寂，
    显得更诱人，更美丽；
    虽然在这条小路上，
    很少留下旅人的足迹。
  </pre>
  <p class="color">我是紫色的</p>
  <p>nothing</p>

css代码：

.color{
    color: rgb(153, 0, 255);
    font-size: 20px;
  }
#red{
    color: rgb(252, 4, 4);
}

效果如下：
在这里插入图片描述

2、文本属性

  • color:可用十六进制、英文单词或RGB来表示。如：#ff0000、red、rgb(3,5,8)。
  • text-align:center/right/left(文本居中/靠右对齐/靠左对齐)。
  • text-decoration:none(无样式)/underline(下划线)/overline(上划线)/line-through(删除线)。
  • text-indent::首行缩进，一般用em作为单位。1个em表示一个汉字的位置。如：text-indent: 2em。
  • letter-spacing:用来实现字符之间的间隔为3px。如：letter-spacing:3px。
  • word-spacing:单词之间的间隔为3px。用于设置单词之间的间隔。如：word-spacing: 3px。
  • line-height:用于设置行高，单位是px。此属性可用于设置文本垂直方向居中对齐（行高与高度相同）。

3、字体属性

  • font-style:normal(正常)/italic(斜体)。
  • font-weight:用于设置字体属性。其值有normal(正常)/bold(加粗)。
  • font-size:设置字体大小，单位为px。
  • font-family:设置字体类型。如：“楷体”。
  • font:字体属性。其值可用有多个，用空格隔开，如：font:italic bold;。

4、复合选择器

  • 多元选择器，如：
h1,p{
	属性：值；
	属性：值；
	}
  • 后代选择器
    格式：
E F{
	属性：值;
	}

例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>页面标题</title>
    <link rel="stylesheet"  type="text/css"   href="../css/style.css"> 
</head>
<body>
  <div id="red"> 
    <p>但我选了另外一条路，</p>
    <span>它荒草萋萋，十分幽寂，</span>
    <p>显得更诱人，更美丽；</p>
    <p>虽然在这条小路上，</p>
    很少留下旅人的足迹。
  </div>
  <p class="color">我是紫色的</p>
  
</body>
</html>

css代码

.color{
    color: rgb(153, 0, 255);
    font-size: 20px;
  }
#red{
    color: rgb(252, 4, 4);
}
#red span{
  color: blueviolet;
}

效果：
在这里插入图片描述

  • 子元素选择器
    格式：
E > F{
	属性：值；
	}

将上例中的css代码改为：

.color{
    color: rgb(153, 0, 255);
    font-size: 20px;
  }
#red>p{
    color: rgb(252, 4, 4);
}

效果如下：
在这里插入图片描述

  • 相邻元素选择器
    格式：
E + F{
	属性：值；
	}

例如：

.color{
    color: rgb(153, 0, 255);
    font-size: 20px;
  }
span+p{
    color: rgb(199, 76, 76);
}

效果：
在这里插入图片描述

注意:相邻元素选择器中，E与F必须是兄弟关系，而且E与F必须是紧挨着的，没有其它元素阻隔，F必须在E的后面。

5、列表样式属性

  • list-style-type:none(去除实心点)/disc(实心点)/square(正方形)/circle(圆)。
  • list-style-position:inside/outside。
  • list-style-imge:url(图像路径)。
  • list-style：简写属性，可以将上面几个属性合在一起写，用空格隔开。

6、伪类选择器和伪元素

①伪类选择器

  • :link:未被访问的链接。
  • :hover:鼠标悬停在连接上，未点击。
  • :active:鼠标点击连接的一瞬间，还未发生跳转。
  • visited:已被访问过的链接。

CSS代码示例：

a:link{
  text-decoration: none;  /*去掉下划线*/
  color: rgb(218, 76, 21);
}
a:hover{
  color: rgb(184, 104, 104);
}
a:active{
  color: black;
}
a:visited{
  color: rgb(182, 139, 54);
}

②伪元素

  • :first-letter:对当前元素内容的第一个字进行操作。
  • :first-line:对当前元素的第一行进行操作。
  • ::before:在元素内容的最前面添加新的内容。
  • ::aftetr:在元素内容的末尾添加新的内容。

css示例：

/*paragragh1第一个字字体变大，颜色为brown*/
.paragragh1::first-letter{
  font-size: 27px;
  color: brown;
}
/*paragragh2第一行设置颜色*/
.paragragh2::first-line{
  color: aqua;
}
/*在paragragh3前面补充内容，并设置字体颜色*/
.paragragh3::before{
  content: "我是刚刚补充的";
  color: bisque;
}
/*在paragragh3后面补充内容，并设置字体颜色*/
.paragragh3::after{
  content: "我补充在最后面";
  color: blueviolet;
}

7、背景样式属性

  • background-color:用于给元素设置背景颜色（注意：元素要么是有内容的，要么元素又宽高度）。
  • background-image:给元素设置背景图片（默认平铺）。
  • background-repeat:repeat(平铺)/repeat-x(水平平铺)/repeat-y(垂直平铺）。
  • background-position:用于设置背景图片的位置（水平位置、垂直位置），表示方式有三种：英文（水平：left/center/right,垂直：top/center/bottom)、固定值、百分比。
  • background-attachment:fixed(固定)/scroll(滚动)。

8、盒子模型

       CSS中的盒子包括：Content（内容）+padding（内边距）+border（外边框）+margin（外边距）。一个盒子的总宽度为：盒子里面内容的宽度+左右两两边的内边距+左右两边的外边框+左右两边的外边距。

  • content 盒子的内容，如文本、图片等
  • padding 填充，也叫内边距，即内容和边框之间的区域。其属性有padding-top、padding-right、padding-bottom、padding-left。这四个属性可以合在一起写，用空格隔开。
  • border 边框，默认不显示。它的属性有粗细、线型、颜色。线型有：solid/dotted/dashed/double/grooved等，可以去官方文档里查看。
  • margin 外边距，边框以外与其它元素的区域。margin的小属性和padding类似，如：margin-top。margin可实现居中:margin-left:auto;margin-right:auto;。

margin的注意事项:
竖直方向的margin值不会叠加，选择最大的margin值。
使用margin水平居中时，元素要有固定的宽度，否则会占父元素的100%宽度，只有块元素才能实现水平居中，只有标准流的盒子才能使用margin实现水平居中。margin不能用于文本水平居中。文本的水平居中用text-align。

CSS盒子示例：

.box2 {
  height: 260px;
  width: 260px;
  background-color:#946c9c;
  color: aliceblue;
  border: 10px solid rgb(143, 86, 129);
  padding: 25px;
  margin: 25px;
}

结果：
在这里插入图片描述
在浏览器中审查元素：
在这里插入图片描述
这就是盒子模型的基本结构。

9、定位

       CSS中的定位（position)属性值有：

  • static:静态
    设置为静态定位position: static;，这是元素默认的定位方式，不管是否设置，元素都按正常的页面布局进行。
    即：按照元素在 HTML出现的先后顺序从上到下，从左到右进行元素的安排。
  • relative:相对定位（相对于原来的自己）
    特点:不脱离标准文档流；如果没有设置定位坐标，那么相对元素还在原来的文字；如果设置了定位坐标，会在原来的地方留下空间（原来的自己）；会将标准文档流中的元素压盖住；相对定位的坐标可以是负值。
    例如：
<div class="relative">我偏移了正常显示的位置。去掉我的样式对比看看？</div>

css代码：

.relative {
  position: relative;
  left: 60px;
  top: 40px;
  background-color: rgb(173, 241, 241);
}
  • fixed:固定定位。position:fixed;,相对于浏览器窗口定位，不会因为鼠标滑动而改变位置。
    特点:脱离了标准文档流；固定定位的层级比标准文档流里面的元素高；固定定位元素不占用空间。
  • position:absolute;:绝对定位。相对于“祖先定位元素”定位——>就近原则。如果没有其他定位元素就相对于浏览器窗口定位。
    特点:绝对定位脱离了标准文档流；不再占用空间；祖先元素可以是相对/固定/绝对的,一般规则是子元素采用绝对定位，父元素采用相对定位。

10、溢出

       当元素内容超过其指定的区域时，我们通过溢出overflow属性来处理这些溢出的部分。
溢出属性有一下几个值：

  • visible: 默认值，溢出部分不被裁剪，在区域外面显示。
  • hidden:将溢出的部分隐藏。
  • scroll ：裁剪溢出部分，但提供上下和左右滚动条供显示。
  • auto ：裁剪溢出部分，视情况提供滚动条。

例如：

.box2 {
  height: 160px;
  width: 160px;
  background-color:#946c9c;
  color: aliceblue;
  border: 10px solid rgb(143, 86, 129);
  padding: 25px;
  margin: 25px;
  overflow: scroll;
  /*可任意替换上面overflow的值看一下效果*/
}

html代码：

 <div class="box2"><p class="paragragh2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时光就这样昏开在眼底，让我们遇见了，遇见，是缘分的开始。可是很多时候，我们无法选择这样的开始，也无法预料结局，只守着最后一个句点，让无奈游离。生命的路上，总是有赏不完的风景。喜欢看的花，不一定永远喜欢。曾经迷恋的故事，或许有一天也会忘记。这世上在不经意中演绎着错过的，除了风景，还有缘分。</p></div>

11、浮动

       浮动效果由float属性来实现，它的值可以是left/right。
特点:脱离标准文档流；不占用空间；到达父元素边框之后不再移动。
如：

<div id="red"> 
    <p>但我选了另外一条路，</p>
    <span>它荒草萋萋，十分幽寂，</span>
    <p>显得更诱人，更美丽；</p>
    <p>虽然在这条小路上，</p>
    <span>很少留下旅人的足迹。</span>
    </div>

#red{
  float: right;
}

关于图片的浮动，例子如下：
html代码：

 <div>
    <img src="../images/2.png" class="float"></img>
    <img src="../images/3.png" class="float"></img>
    <img src="../images/4.png" class="float"></img>
  </div>

css代码如下：

 <div>
    <img src="../images/2.png" class="float"></img>
    <img src="../images/3.png" class="float"></img>
    <img src="../images/4.png" class="float"></img>
  </div>

效果如下：
在这里插入图片描述

12、不透明度

       可以用opacity对任何元素（不过常用于图片）设置不透明度。值在[0.0～1.0]之间，值越低，透明度越高。
代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>页面标题</title>
    <link rel="stylesheet"  type="text/css"   href="../css/style.css"> 
    <style>
      img {
        width: 25%;
        border-radius: 10px;
        float: left;
        margin: 10px;
      }
      .opacity-1 {
        opacity: 0.2;
      }
      .opacity-2 {
        opacity: 0.5;
      }
      .opacity-3 {
        opacity: 1;
      }
    </style>
</head>
<body>
  <div>
    <img src="../images/2.png" class="opacity-1"></img>
    <img src="../images/3.png" class="opacity-2"></img>
    <img src="../images/4.png" class="opacity-3"></img>
  </div>
</body>
</html>

效果如下：
在这里插入图片描述

四、总结

       关于CSS样式还有很多其他的内容，如果大家感兴趣的画也可以自己去查一查。欢迎大家在下方留言！

大海是蓝色的
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web基础篇-css
weixin_44803968的博客
06-28 954
【代码】web基础篇-css。
纯CSS实现海浪效果
Zexious的博客
05-18 4199
转载自Chokcoco 原文章：https://www.cnblogs.com/coco1s/archive/2017/07/18/7197662.html 感谢高产大佬的技术文 赶紧码住，说不定以后可能会用到类似的想法。 体验： 1、颜色选的是极好的：#76DAFF，纯正的天蓝色（理想的）。利用透明度实现海水和浪花（脑洞可以说是很大了），深色覆盖浅色，所以未覆盖部分就是...
WEB_CSS的各种样式
mulinghanxue的博客
06-20 2509
文章目录span标签Div标签字体样式超链接伪类列表样式网页背景背景尺寸渐变 span标签 span标签是行内元素,能够让几个文字或者某个词语凸显出来 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</ti...
Web：CSS概述
weixin_44330955的博客
08-19 936
1. CSS简介 css是层叠样式表(Cascading Style Sheets)的缩写 css可以用来为网页创建样式表，通过样式表可以对网页进行装饰 所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的 而css就可以分别为网页的各个层次设置样式 总之，css用来设置网页中元素的样式 2. CSS编写位置 2.1 内联样式 使用css修改元素的样式的第一种方式是，内联样式，也叫行内样式 特点： 在标签内部通过style属性来设置元素的样式 缺点： 使用内联样式，只能对一个.
webcss
06-15
webcss应用详解
web之css.xmind
04-09
前端的知识很多，这是我自己做的关于web前端中的css的知识思维导图，需要用xmind打开，有需要的可以下载看看
标准web之CSS学习教程源码
11-11
"标准web之CSS学习教程源码"是一份全面的资源，旨在帮助开发者深入理解和掌握CSS技术。这份教程不仅涵盖了CSS的基础知识，还特别强调了浏览器兼容性问题，这是许多Web开发者在实际工作中必须面对的关键挑战。 1. **...
Web前端学习之CSS课件
01-21
CSS相关技术文档-例如CSS基础：类选择器。就是建立一个类，并为这个类定义一些样式，在需要应用的标签内以class=“类名”的形式套用，例如： .student{color:#00f;} “student”>张三 类名的前边一定要加上一个...
cssweb
03-19
"cssweb"这个标题和描述暗示我们将会探讨的是关于使用CSS来构建网页设计的相关知识。在这个名为"cssweb-main"的压缩包文件中，可能包含了实现一个基于CSS的网页设计的各种资源，如HTML文件、CSS样式表、图片和其他...
myxamppweb_css_ｗｅｂ_
10-01
【标题】"myxamppweb_css_ｗｅｂ_" 暗示了这是一个与Web开发相关的项目，特别是使用了XAMPP环境，XAMPP是一个流行的开源软件包，用于搭建本地Web服务器，支持PHP、MySQL等服务。同时，"css"标签表明这个项目包含了...
蓝色海洋CSS网页模板
12-14
蓝色海洋CSS网页模板 蓝色 商务 运动 企业 商业 公司 设计 主页 HTML DIV+CSS 模板下载
海洋淡蓝色css模板
12-01
海洋淡蓝色css模板
纯CSS3大海蓝天动画背景特效.zip
07-03
纯CSS3大海蓝天动画背景特效是一款个性的基于CSS3实现的海天一色页面动画背景特效。
CSS一级导航-天蓝色（带阴影）
weixin_30709809的博客
11-10 5846
一款亮丽的导航，能给网站一个画龙点睛的作用。导航在指引用户搜寻内容时，还能改变用户浏览网站的心情，浏览网站也像一场旅行，有创意的导航栏让用户欣赏起来也会更加愉悦，增加对网站的兴趣。本人不擅长美工制作，不过可以从某些漂亮的网站中提取不错的部分为自己所用，也为他人分享。今天这里为大家准备了一款天蓝色导航一起学习。我们先看最终效果：第一步：放置一个div作为导航主体部分 <div ...
CSS3动画
一只大海
02-28 154
调用动画 div{ width: 100px; height: 100px; background-color: green; position: relative; left: 0; animation：动画名称 花费的时间 运动曲线 等待时间 播放次数（infin...
css 相对电脑窗口定位
大海
04-08 655
position: fixed;         left:50%;         margin-left: 500px;
WEB基础之HTML、CSS
Daycym的博客
02-27 759
一、知识体系结构 二、课程介绍 1.HTML 用于勾勒出网页的结构和内容 2.CSS 用于美化网页 3.JavaScript 让网页呈现动态的数据和效果 4. jQuery 框架，提高JavaScript的开发效率 三、HTML原理 四、XML和HTML的联系 1.XML 可扩展标签语言 标签，属性，标签的嵌套关系都可以扩...
CSS3动画 晴朗夏日漂洋过海的海贼船 飘动的云朵
前端一线搬运工的博客
05-24 1027
效果图:除了船是图片,其他都是代码生成的素材.代码:&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-s
css3动画案例—太阳大海跳动
Scrow1204的博客
10-30 2391
要点： 1.一个动画定义完成之后，任何元素只要调用这个动画的名字，都可以执行这个动画 2.同一个动画，里面的多个效果也是有前后顺序的，注意效果的差别 html代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Docume
web前端css盒子
最新发布
11-17
CSS盒子模型是Web前端开发中非常重要的概念，它描述了一个HTML元素在页面中所占据的空间。盒子模型由四个部分组成：内容区域、内边距、边框和外边距。以下是CSS盒子模型的详细介绍： 1. 内容区域：指的是HTML元素的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值