CSS系统总结

最新推荐文章于 2023-02-14 19:36:47 发布
最新推荐文章于 2023-02-14 19:36:47 发布
阅读量472 收藏
点赞数
文章标签： css 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CYW2014_HUST/article/details/122052835
版权

文章目录

一、简介

1、前端三要素

在这里插入图片描述

  • HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
  • CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式
  • JavaScript（行为）：是一种弱类型脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为

2、CSS

在这里插入图片描述
CSS用来设置网页中元素的样式

CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可引用，它主要有以下缺陷：

  • 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器
  • 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护

这些缺陷导致前端开发人员在工作中无端增加了很多工作量。

为了解决以上问题，前端开发人员会使用一种称之为【CSS预处理器】的工具，提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性，从而大大提高前端在样式上的开发效率。

3、CSS预处理器

在这里插入图片描述
CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。通俗易懂的话就是，用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用

常用的CSS预处理器有以下两种：

二、基础知识

1、修改样式的三种方式

CSS是用来设置网页中元素的样式的。使用CSS来修改元素的样式有三种方式，分别为内联样式、内部样式表和外部样式表

内联样式

也叫行内样式，在标签内部通过style属性来设置元素的样式：

<p style="color:red;">
    华科男女七比一，一对情侣三对基
</p>

这种方式存在一些问题：首先，使用内联样式，样式只能对一个标签生效，如果希望影响到多个元素必须在每一个元素中都复制一遍；其次，当样式发生变化时，我们必须要一个一个的修改，非常的不方便。

注意：开发时最好要避免使用内联样式

内联样式表

将样式编写到head中的style标签里，然后通过CSS的选择器来选中元素并为其设置各种样式。

<head>
    <title>Hello World</title>
    <style>
        p{
            color:red;
        }
    </style>
</head>
  • 优点：可以同时为多个标签设置样式，并且修改时只需要一处即可全部应用
  • 缺点：只能对一个网页起作用，样式不能跨页面进行复用

外部样式表

外部样式表是CSS修改样式的最佳方式。开发人员通过将CSS样式编写到一个外部的CSS文件中，然后通过link标签来引入外部的CSS文件。

<!--外部样式表 style.css-->
p{
	color:red;
}

<!--Web页面 index.html-->
<head>
    <link rel="stylesheet" href="./style.css">
</head>

这样的方式意味着只要想使用这些样式的网页都可以对其进行引用，使样式可以在不同页面之间进行复用。除此之外，由于浏览器的缓存机制，将样式编写到外部的CSS文件中，可以加快网页的加载速度，提高用户体验。

2、基本语法

注释

CSS中的注释符号为/* [注释内容] */

/*这是一个注释*/

基本语法

CSS的基本语法是：选择器+声明块

CSS通过选择器可以选中页面中的指定元素，而通过声明块可以指定要为元素设置的样式。

p{
    color:red;
    font-size:20px;
}
  • 在上例中，p即为选择器，它选中了页面中所有的p元素
  • 之后的{}里面的内容则指定了页面中所有的p元素的样式

3、颜色单位

在CSS中主要有四种颜色单位可供使用：颜色名、RGB值、RGBA值和十六进制的RGB值

颜色名

比如red、orange、yellow、blue。

Web页面的颜色种类成千上万，我们不可能记住所有的颜色英文名称，因此这种方式在实际开发中很少用到。

RGB值

所以RGB，即以三种颜色（Red、Green和Blue）的不同浓度来调配出不同的颜色，每一种颜色的范围在 0255（或0%100%）之间。语法：RGB(红色,绿色,蓝色)。

值得注意的是，RGB采用的三种颜色是光的三原色，而非绘画时使用的红黄蓝三色。

RGBA值

在RGB值的基础上增加了透明度这一选项，语法为：RGBA(红色,绿色,蓝色,透明度)，透明度的取值范围是 0~1。其中，1表示完全不透明，0表示完全透明，0.5表示半透明

十六进制的RGB值

这种方式在开发中应用得十分广泛。语法：#红色绿色蓝色，颜色浓度范围是00~ff。如果颜色两位重复可以进行简写

颜色使用示例：

<style>
    box1{color:red;}	/*颜色名*/
    box2{color:RGB(255,0,0)}	/*RGB值*/
    box3{color:RGBA(255,0,0,0.5)}	/*RGBA值*/
    box4{color:#bbffaa}		/*十六进制的RGB值*/
</style>

4、清除浏览器默认样式

通常情况下，浏览器都会为元素设置一些默认样式，其存在会影响到页面的布局，在通常情况下编写网页时必须要祛除浏览器的默认样式（PC端的页面）

祛除使用的reset.css代码如下：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

在祛除时，使用link标签导入即可。

三、选择器

1、常用选择器

/* 元素选择器 */
p{color:red;}

/* id选择器 */
#box1{color:red;}

/* 类选择器 */
.box1{color:red;}

/* 通配选择器 */
*{}

  • 元素选择器可以根据标签来选中指定的元素

    其语法为：标签名{}

    示例：p{color:red;}

  • id选择器可以根据元素的id属性值选中一个元素

    其语法为：#id属性值{}

    示例：#box1{color:red;}

  • 类选择器也叫class选择器，与id选择器不同，class可以重复使用，类选择器可以根据元素的class属性选中一组元素

    其语法为：.class属性值{}

    示例：.box1{color:red;}

  • 通配选择器选择页面中所有的元素并为其指定样式

    示例：*{}

2、复合选择器

复合选择器有两种，分别是①交集选择器；②并集选择器

交集选择器的作用是选中同时符合多个条件的元素

语法：选择器1选择器2选择器3选择器n{}

示例：div.box1{color:orange;}，此示例的含义是选中类名为box1并且是div的元素

并集选择器的作用是同时选择多个选择器对应的元素

语法：选择器1，选择器2，选择器3，选择器n{}

示例：div,.box1{color:orange;}，此示例的含义是选中类名为box1或者为div的元素

3、关系选择器

在学习关系选择器之前，要先学习一下元素之间都有哪些关系：

  • 父子关系

    父元素：直接包含子元素的元素叫做父元素；

    子元素：直接被父元素包含的元素叫做子元素

  • 祖先和后代关系

    祖先元素：直接或间接包含后代元素的元素叫做祖先元素

    后代元素：直接或间接被祖先元素包含的元素叫做后代元素

    **注意点：**一个元素的父元素也是它的祖先元素！

  • 兄弟关系

    兄弟元素：拥有相同父元素的元素是兄弟元素

鉴于以上这三种关系，由此产生了三种关系选择器：

子元素选择器

作用：选中指定的父元素的指定子元素

语法：父元素 > 子元素{}

示例：div > span{color:orange;}，此示例的含义是选中div元素中的span元素。div元素即为父元素，span元素即为子元素。

后代元素选择器

作用：选中指定元素内的指定后代元素

语法：祖先元素 后代元素{}

示例：div span{color:orange;}，此示例的含义是选中div元素中的所有后代span元素。

兄弟选择器

如果只想要选择下一个相邻的兄弟元素，使用语法：前一个元素 + 后一个元素{}。例如：div + span{color:orange;}，如果div元素的下一个相邻兄弟元素是span元素，那这个span元素即被此选中了。

如果想要选择后面所有的兄弟元素，使用语法：前一个元素 ~ 后一个元素{}。例如：div ~ span{color:orange;}

4、属性选择器

这个选择器比较少用到，简单记录一下：

/*
	[属性名] 选择含有指定属性的元素
    [属性名=属性值] 选择含有指定属性和属性值的元素
    [属性名^=属性值] 选择含有指定属性并且该属性值以指定值开头的元素
    [属性名$=属性值] 选择含有特定属性并且该属性值以指定值结尾的元素
    [属性名*=属性值] 选择含有特性属性并且该属性值中含有指定值的元素
*/
p[title]{
    color:orange;
}

5、伪类选择器

什么是伪类？

伪类可以理解为不存在的类，用来描述一个元素的特殊状态，如第一个子元素，被鼠标点击的元素，鼠标移入的元素…

伪类有个特点，一般情况下都是：开头

常用的伪类选择器根据效果可以分为三类：

1）根据所有子元素进行排序的伪类选择器：

  • :first-child，指第一个子元素

  • :last-chile，指第二个子元素

  • :nth-child(n)，指第n个子元素，该伪类存在着特殊值：

    特殊值：

    ​ n 第n个 n的范围从0到正无穷

    ​ 2n或even 选中偶数位的元素

    ​ 2n+1或odd 选中奇数位的元素

2）根据同类型子元素进行排序的伪类选择器：

  • first-of-type，指同类型中的第一个子元素
  • last-of-type，指同类型中的第二个子元素
  • nth-of-type，指同类中的第n个子元素，特殊值同上。

3）否定伪类，将符合条件的元素从选择器中祛除：:not()

所有子元素和同类型子元素怎么理解?

看以下示例：

<!-- head部分 -->
<head>
    <style>
        /* 所有子元素的第一个，会选中span */
        ul > li:first-child{
            color:red;
		}
        
        /* 同类型子元素中第一个，会选中第一个li */
        ul > li:first-of-type{
            color:orange;
        }
    </style>
</head>

<!-- body部分 -->
<body>
    <!-- ul为父元素，li和span为元素 -->
    <ul>
        <span>我是所有子元素中的第一个</span>
        <li>我是所有同类型li元素中的第一个</li>
        <li>第二个</li>
        <li>第三个</li>
    </ul>
</body>

上例中，由于span是ul的第一个子元素，所以针对所有子元素的选择器first-child将会选中span元素；而li是ul中的第一个li类型的元素，所以针对同类型子元素的选择器first-of-type将会选中第一个li元素。

超链接的伪类

超链接a元素的伪类是值得我们拿出来特别学习的。

有以下这四种伪类：

/*
	:link 用来表示没访问过的链接（正常的链接）
	:visited 用来表示访问过的链接
	:hover	用来表示鼠标移入的状态
	:active	用来表示鼠标点击的状态
*/
a:link{
    color:red;
}

a:visited{
    font-size:50px;
    color:blue;
}

值得注意的是，由于隐私的原因，:visited这个伪类只能修改链接的颜色

6、伪元素选择器

什么是伪元素？

伪元素表示页面中一些特殊的并不真实的存在的元素，用来描述一个元素的特殊位置。

伪元素使用::开头：

::first-letter /* 表示第一个字母 */
::first-line /* 表示第一行 */
::selection /* 表示鼠标选中的内容 */
::before /* 元素的开始位置 */
::after /* 元素的末尾位置 */
	- before 和 after 必须结合content属性来使用

7、选择器的权重问题

当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。样式的冲突问题采用权重（或者叫优先级）来解决。

选择器的权重分配可以这么理解：

  • 内联样式 权重值：1000
  • id选择器 权重值：100
  • 类和伪类选择器 权重值：10
  • 元素选择器 权重值：1

比较优先级时，需要将所有的选择器的优先级进行相加计算，最后总的权重值越高，则越优先显示。

值得注意的是，选择器的累加不会超过其最大的数量级，类选择器再高也不会超过id选择器。如果优先级计算后相同，此时则优先使用靠下的样式。

如果想要使用最高优先级，其权重值甚至超过内联样式的数量级，可以在样式的后边添加“!important”。但是，在我们自己开发过程中，这种方法一定要谨慎使用！

四、盒子模型

1、模型简介

盒子模型，也称为盒模型或框模型（box model）。CSS将页面中的所有元素都设置为一个矩形的盒子。将元素设置为矩形的盒子后，对页面的布局就转变成了将不同的盒子摆放到不同的位置。
在这里插入图片描述
每一个盒子都由四个基本部分组成，它们分别是：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。

2、四个基本部分

在这里插入图片描述

  • 内容区（Content）

    元素中的所有的子元素和文本内容都在内容区中排列。内容区的大小由Width（宽度）和Height（高度）两个属性共同来设置。

  • 内边距（Padding）

    内容区和边框之间的即是内边距。总共有四个方向的内边距：

    • padding-top
    • padding-right
    • padding-bottom
    • padding-left

    内边距的设置会影响到盒子的大小

    背景颜色会延伸到内边距上

  • 边框（Border）

    边框属于盒子边缘，边框里边属于盒子内部，出了边框都是盒子的外部。要设置边框，需要至少设置三个样式：

    • 宽度 border-width

      默认情况下是3px，可以指定四个方向的边框的宽度

      如果设定为4个值，则为：上 下 左 右

      如果设定为3个值，则为：上 左右 下

      如果设定为2个值，则为：上下 左右

      如果设定为1个值，则为：上下左右

      这样的四个方向值的设定模式，在CSS中是通用的。除了border-width设置上下左右所有边框，也可以单独设置某一方位的边框样式：

      • 上宽度 border-top-width
      • 下宽度 border-bottom-width
      • 左宽度 border-left-width
      • 右宽度 border-right-width

    • 颜色 border-color

      指定边框的颜色，同样也可以分别指定四个边的边框，模式同上。

    • 样式 border-style

      border-style:solid;/* 边框线为实线 */
border-style:dotted;/* 边框线为点状虚线 */
border-style:dashed;/* 边框线为虚线 */
border-style:double;/*边框线为双线 */
border-style:none;/* 默认值，无边框 */
border-style:inherit;/* 从父元素继承其边框样式 */

    简写属性 border，可以同时设置宽度，颜色和样式，也可分为border-top、border-bottom、border-left和border-right。

  • 外边距（Margin）

    外边距不会影响盒子可见宽的大小，但是会影响盒子的位置。

    和Padding与Border一样，外边距有简写属性margin，也有四方向分别设置的属性margin-top、margin-bottom、margin-left和margin-right：

    • margin-top

      上外边距，设置一个正值，元素会向下移动

    • maring-bottom

      下外边距，设置一个正值，其下边的元素会向下移动

    • margin-left

      左外边距，设置一个正值，元素向右移动

    • margin-right

      右外边距，默认情况下没有任何效果，除非出现了横向布局float的情况

    这四个属性也可设置为负值，与正值方向相反移动。

    3、垂直方向布局

（盒子模型的水平方向布局太麻烦了，又没有好记的，博主就不写了T.T）

垂直方向，子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出。溢出问题可以使用overflow属性来设置父元素如何处理溢出的子元素。

overflow的可选值有：

  • visible，默认值，子元素会从父元素中溢出，在父元素外部的位置显示
  • hidden，溢出的内容将会被裁剪不会显示
  • scroll，生成两个滚动条，通过滚动条来查看完整的内容
  • auto，根据需要生成滚动条
/* 父元素样式 */
.outer{
    background-color:#bfa;
    /* 默认情况下父元素的高度被内容撑开 */
    overflow:hidden;
}

/* 子元素样式 */
.inner{
    width:100px;
    background-color:yellow;
    height:200px;
    margin-bottom:100px;
}

4、外边距的折叠问题

垂直外边距的重叠（也可叫折叠）问题：相邻的垂直方向外边距会发生重叠现象：

  • 兄弟元素

    兄弟元素间的垂直外边距会取两者之间的最大值

    特殊情况：如果相邻的外边距一正一负，则取两者的和；如果相邻的外边距都是负值，则取两者中绝对值较大的

    兄弟元素之间的外边距的重叠，对开发是有利的，所以我们不需要进行处理

  • 父子元素

    父子元素间相邻外边距，子元素的会传递给父元素（上外边距）

    父子外边距的折叠会影响到页面的布局，必须要进行处理

外边距的折叠问题的解决方案，会在第五部分：浮动与高度塌陷问题一起解决。

5、行内元素的盒子模型

行内元素的盒子模型是不支持设置宽度和高度的，其内容完全由当中的内容撑开。

行内元素可以设置padding、border、margin，但是垂直方向padding、border和margin不会影响页面的布局。

display可以解决行内元素的盒子模型不支持宽度和高度的问题：

可选值有：

  • inline，将元素设置为行内元素

  • block，将元素设置为块元素

  • inline-block，将元素设置行内块元素

    行内块元素既可以设置宽度和高度，又不会独占一行。它集成了行内元素和块元素的优点，同时也集成了两者之缺点。

  • table，将元素设置为一个表格

  • none，元素不在页面中显示

当行内元素设置为display:block;或者display:inline-block时，它便可以设置宽度和高度。

visibility用来设置元素的显示状态，可选值有：

  • visible，默认值，元素在页面中正常显示
  • hidden，元素在页面中隐藏，不显示，但是依然占据页面的位置

6、轮廓与圆角

outline用来设置元素的轮廓线，用法和border一模一样，和边框不同的点在于，轮廓不会影响到可见宽的大小。

box-shadow用来设置元素的阴影效果，阴影不会影响页面页面布局。语法：box-shadow:水平偏移量值,垂直偏移量值,阴影的颜色,[阴影的模糊半径]

border-radius用来设置圆角，圆角设置的是圆的半径大小

五、浮动与高度塌陷问题

1、什么是浮动？

在了解浮动之前，我们要先理解一个概念：什么是文档流？

文档流（normal flow）

实际上，网页是一个多层的结构，一层摞着一层。而对于用户来说，他们看的是多层叠加后形成的效果，就和我们看一个3D物体的俯视图一样。而在这些层中，处于最底下的一部分页面层称之为文档流。

在这里插入图片描述
如上图所示，从网页最底层到网页第K层（K由开发人员决定）都属于文档流。这里有个易错点是，我们容易误认为文档流仅仅是网页最底层而已。

对于开启了定位元素，可以通过z-index属性来指定元素的层级，z-index需要一个整数作为参数，值越大元素的层级越高，元素的层级越高则越优先显示。

.box1{
    z-index:2;/* 指定class="box1"的元素在网页第二层 */
}

如果元素的层级一样，则优先显示靠下（指代码从上往下）的元素；祖先的元素的层级再高也不会盖住后代元素。

对于我们来说，元素主要是两种状态：①在文档流中；②不在文档流中（脱离文档流）。

元素在文档流中的特点：

块元素

  • 块元素会在页面中独占一行；
  • 默认宽度是父元素的全部（会把父元素撑满）；
  • 默认高度是背内容撑开（子元素）

行内元素

  • 行内元素不会独占一行，只占自身的大小；
  • 行内元素在页面中从左向右水平排列，如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列；
  • 行内元素的默认宽度和高度都是被内容撑开

什么是浮动

浮动是指通过设置元素的float属性来使该元素向其父元素的左侧或右侧移动。浮动被广泛应用于Web网页的布局之中，比如小米商城的导航条等需要将多个块元素进行横向排列的时候：
在这里插入图片描述
使用float属性来设置元素的浮动：

/* 
	float可选值：
		none 默认值 元素不浮动
		left 元素向左浮动
		right 元素向右浮动
*/
.box1{
    float:left;
}

浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，通过浮动可以制作一些水平方向的布局。

浮动的特点

  • 浮动元素会完全脱离文档流，不再占据文档流中的位置
  • 设置浮动以后元素会向父元素的左侧和右侧移动
  • 浮动元素默认不会从父元素中移出
  • 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
  • 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
  • 浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高

由于元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动上移。这样会造成高度塌陷问题。

2、如何解决高度塌陷问题？

高度塌陷问题

在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失。

父元素的高度丢失后，其下的元素会自动上移，导致页面的布局混乱。所以高度塌陷问题是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！

BFC

BFC（Block Formatting Context），块级格式化环境。BFC是一个CSS中的一个隐含属性，可以为一个元素开启BFC，开启BFC后该元素会变成一个独立的布局区域。

元素开启BFC后有以下特点：

  • 开启BFC后的元素不会被浮动元素所覆盖
  • 开启BFC的元素，子元素和父元素的外边距不会重叠
  • 开启BFC的元素可以包含浮动的子元素

可以通过一些特殊方式来开启元素的BFC：

  • 设置元素的浮动（不推荐）
  • 将元素设置为行内块元素（display:inline-block;）
  • 将元素的overflow属性设置为一个非visible的元素，常用的是hidden

开启元素的BFC，可以使其包含浮动元素，这样就可以解决高度塌陷的问题。但是，这并非解决高度塌陷问题的最优方案。

clear

clear属性的作用是清除浮动元素对当前元素的影响

可选值：

  • left 清除左侧浮动元素对当前元素的影响
  • right 清除右侧浮动元素对当前元素的影响
  • both 清除两侧中最大影响的那一侧

clear的原理是设置清除浮动后，浏览器会自动为元素添加一个上外边距，以使其不受其他元素的影响

解决高度塌陷问题的最优方案（clearfix）

<!-- 页面头部 -->
<head>
    <style>
        /* clearfix解决高度塌陷问题 */
        .clearfix::before,
        .clearfix::after{
            content:'';
            diaplay:table;
            clear:both;
        }
        
    	/* 父元素 */
        .outer{
            border:10px red solid;
        }
        
        /* 子元素 */
        .inner{
            width:100px;
            height:1000px;
            background-color:#bfa;
        }
    </style>
</head>

<!-- 页面主体 -->
<body>
    <div class="outer clearfix">
        <div class="inner">
            
        </div>
    </div>
</body>

六、定位

1、简介

定位是一种更高级的布局手段，通过定位可以将元素摆放到页面的任意位置。

使用position属性来设置定位，可选值有：

  • static 默认值，元素是静止的没有开启定位
  • relative 开启元素的相对定位
  • absolute 开启元素的绝对定位
  • fixed 开启元素的固定定位
  • sticky 开启元素的粘滞定位

2、相对定位

当元素的position属性值设置为relative时则开启了元素的相对定位。

相对定位的特点：

  • 元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
  • 相对定位是参照于元素在文档流中的位置进行定位的
  • 相对定位会提升元素的层级
  • 相对定位不会使元素脱离文档流
  • 相对定位不会改变元素的性质，块还是块，行内还是行内

偏移量（offset）

当元素开启了定位以后，可以通过偏移量来设置元素的位置：

  • top 定位元素和定位位置上边的距离
  • bottom 定位元素和定位位置下边的距离
  • left 定位元素和定位位置左边的布局
  • right 定位元素和定位位置右边的距离

3、绝对定位

当元素的position属性值设置为absolute时则开启了元素的绝对定位。

绝对定位的特点：

  • 开启绝对定位后，如果不设置偏移量，元素的位置不会发生变化
  • 开启绝对定位后，元素会从文档流中脱离
  • 绝对定位会改变元素的性质，行内变成块，块的宽度被内容撑开
  • 绝对定位会使元素提升一个层级
  • 绝对定位元素是相对于其包含块进行定位的

包含块（Containing Block）

正常情况下，包含块就是离当前元素最近的祖先块元素。

绝对定位情况下的包含块指的是离元素最近的开启了定位（不是static）的祖先元素。如果所有的祖先元素都没有开启定位则根元素就是它的包含块。

4、固定定位

将元素的position属性设置为fixed则开启了元素的固定定位。

固定定位也是一种绝对定位，所以固定定位的大部分特点都和绝对定位一样。唯一不同的是固定定位永远参照于浏览器的视口进行定位。

固定定位最常见的应用是网页中的小广告，不论用户如何上下滑动页面，小广告的位置是一直不变的。

5、粘滞定位

当元素的position属性设置为sticky时则开启了元素的粘滞定位。

粘滞定位和相对定位的特点基本一致。不同点是粘滞定位可以在元素到达某个位置时将其固定。

七、字体与文本

1、字体基本样式

字体的基本样式包括：①颜色color；②字体大小font-size；③字体族font-family；④行高line-height；⑤字重font-weight；⑥字体的风格font-style：

  • color 用来设置字体颜色

  • font-size

    px 像素大小

    em 相当于当前元素的一个font-size

    rem 相对于根元素的一个font-size

  • font-family

    可选值有：

    • serif 衬线字体
    • sans-serif 非衬线字体
    • monospace 等线字体

    指定字体的类别，浏览器会自动使用该类别下的字体

    font-family可以同时指定多个字体，多个字体间使用,隔开，字体生效时优先使用第一个，第一个无效使用第二个，以此类推

  • line-height

    行高指的是文字占有的实际高度；

    行高可以直接指定一个大小（px em）

    也可以直接为行高设置一个整数

    如果是一个整数的话，行高将会是字体的指定的倍数

  • font-weight

    若值为bold，则为加粗

    若值为normal，则不加粗

  • font-style

    若值为normal，则为正常字体

    若值为italic，则为斜体

2、图标字体

/*
	图标字体（iconfont）
                    - 在网页中经常需要使用一些图标，可以通过图片来引入图标
                        但是图片大小本身比较大，并且非常的不灵活
                    - 所以在使用图标时，我们还可以将图标直接设置为字体
                        然后通过font-face的形式来对字体进行引入
                    - 这样我们就可以通过使用字体的形式来使用图标

                fontawesome 使用步骤
                    1.下载 https://fontawesome.com/
                    2.解压
                    3.将css和webfonts移动到项目中
                    4.将all.css引入到项目中
                    5.使用图标字体
                        - 直接通过类名来使用图标字体
                            class="fas fa-bell"
                            class="fab fa-accessible-icon"
*/

3、文本

/* 
    text-align 文本的水平对齐
        可选值：
            left 左侧对齐
            right 右对齐
            center 居中对齐
            justify 两端对齐

    vertical-align 设置元素垂直对齐的方式
        可选值：
            baseline 默认值 基线对齐
            top 顶部对齐
            bottom 底部对齐
            middle 居中对齐

    文本的其他样式
        text-docoration 设置文本修饰
            可选值：
                none 什么都没有
                underline 下划线
                line-through 删除线
                overline 上划线

        white-space 设置网页如何处理空白
            可选值：
                normal 正常
                nowrap 不换行
                pre 保留空白

        溢出处理 overflow: hidden
        text-overflow: ellipsis 被隐藏的部分用省略号替代
*/
皮皮伍同学
关注
CSS栅格系统
Y_ooo的博客
02-11 1719
CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行。 栅格系统与FLEX弹性布局有相似之处，都是由父容器包含多个项目元素的使用。由于兼容性并不强，效率也并未得到很大提升，因此目前不太普及。 1.声明栅格系统的容器 display: grid（块） | inline-grid（行） article { display: grid; width: 300px; height: 300px; border: s
CSS学习总结
qq_55002082的博客
07-27 1180
CSS代码风格，选择器和样式详解
css系统是什么
qf2019的博客
07-09 653
css系统的英文全称是“Content Scrambling System”，是指内容扰乱系统，是一种防止直接从盘片上复制视频文件的数据加密和鉴定方法。 css系统是什么？ 内容扰乱系统(Content Scrambling System) 是一种防止直接从盘片上复制视频文件的数据加密和鉴定方法。每个获得许可的人都能得到一把密钥，它从加密光盘上的密钥组成的母集中取出来。 只要在以后的光盘上去除该密钥，许可就失效了。 原理 CSS解密算法与驱动器单元交换密钥，以生成加密用的密钥。这一生成的密钥用来扰乱盘片密钥
20个优秀的 CSS 网格系统（CSS Grid Systems）推荐
weixin_34184561的博客
01-04 114
在制作网站的时候，你必须要确保有一个系统化、结构合理的布局使得能够更快更轻松的组织网站的内容。网格系统为网页设计师们提供了一种快速构造网页内容布局的方法。借助这个工具，设计师可以根据预制结构进行布局，节省了大量的时间和精力。今天这篇文章向大家推荐20个优秀的 CSS 网格系统，其中还有融合了最新的响应式设计理念的响应式 CSS 网格系统。1.Less Framework 4...
全面系统CSS理解
CongJiYong的博客
04-06 459
vertical-align:center; //垂直元素都设置 垂直居中 margin-left: auto; margin-right: auto; //水平那个居中 给父元素设置 text-align:center
CSS布局系统
天盟 - 技术博客 - Eamon
10-13 444
css 布局系统 包含 盒子模型 和 布局模型，把页面元素看作一个个盒子，布局就是一个个盒子的排列和摆放 一、盒子模型从第一层到第五层依次为：border、content+padding、background-image、background-color、margin。二、布局模型（一）Flow（流动布局）display设置block、 inline 、none 、 inline-block（二）
CSS3系统升级维护404特效
07-24
总结来说，"CSS3系统升级维护404特效"是利用CSS3的高级特性，如新选择器、动画、布局工具等，为404错误页面增添互动性和视觉吸引力，提升用户体验。通过精心设计的404页面，开发者不仅可以修复用户遇到的问题，还能...
css总结1
08-03
在“css总结1”中，我们探讨了几种引入CSS样式的方法以及一些基本的CSS属性。 首先，让我们来看一下CSS样式的组成。一个CSS规则通常由两部分构成：选择器和声明。选择器指向你想要应用样式的HTML元素，如`h3`或`p`...
学生信息管理系统(html + js + css)
07-01
总结来说，"学生信息管理系统(html + js + css)"是一个集成了HTML结构、CSS样式和JavaScript交互的实例，它充分展示了前端技术在实际项目中的应用，是学习和提升Web开发技能的理想平台。通过这样的项目实践，开发者...
html+css笔记总结
11-06
3. **Grid布局**: CSS Grid提供二维网格布局系统，适合创建复杂的布局设计。 4. **响应式设计**: 使用媒体查询@media，可以根据设备的屏幕大小和方向调整样式，实现跨设备兼容。 5. **CSS预处理器**: 如Sass、Less和...
CSS系统学习一（基础）
CSDN_09的博客
02-25 765
学习内容来自w3school 一、CSS基础教程 简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 基础语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（sty...
CSS系统学习二（基础）
CSDN_09的博客
03-08 332
学习内容来自w3school CSS 链接 链接的四种状态： a:link - 普通的、未被访问的链接 a:visited - 用户已访问的链接 a:hover - 鼠标指针位于链接的上方 a:active - 链接被点击的时刻 为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后！！ CSS 列表 CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表...
系统学习——CSS
zhaoguang2018的博客
11-19 861
从今天开始系统的学习一下CSS，以w3cschool提供的微课和文档基准，记录自己之前不知道的知识点
CSS系统学习总结
最新发布
m0_63263973的博客
02-14 891
为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
CSS系统学习之CSS简介
qq_40837310的博客
10-21 478
网页的构成 一个网页构成有三要素：结构、样式、行为，而结构用HTML控制，行为用JavaScript控制，样式用CSS控制。 CSS简介 CSS，层叠样式表，网页实际上是一个多层结构，通过CSS可以分别为网页的每一层来设计样式，而我们最终能看到的只是网页的最上面一层，总之就是CSS是用于设置网页中元素的样式。 CSS编写的位置 CSS编写的地方分为三个，内联样式、内部样式表，外部样式表。 内联样式： 内联样式又称行内样式，就是写在元素里面的样式，语法是使用元素的style属性来设置，样式的key和value
css 百度百科
hanhongning的专栏
10-23 3089
我的百科 我的贡献草稿箱百度首页 | 登录    新闻   网页   贴吧   知道   MP3   图片   视频   百科帮助设置 添加到搜藏 返回百度百科首页 编辑词条CSS目录[隐藏]CSS历史 使用C
CSS基本功能介绍
weibinwps的博客
02-21 802
CSS body CSS 背景属性 Property 描述 background 简写属性，作用是将背景属性设置在一个声明中。 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。 background-image 把图像设置为背景。 background-position 设置背景图像的起始位置。 background-repeat 设置背景图像是否及如何重复。 背景颜色 b
通过CSS设计模式搭建自己系统的CSS架构
nidongla的博客
06-05 216
theme: qklhk-chocolate返利 m.cpa5.cn 传统的CSS书写风格是随意命名，堆叠样式，造成了混乱不堪的结果，复杂页面的样式书写通常会出现几百行甚至上千行的代码，CSS设计模式在实际应用中的横空出世拯救了样式混乱，代码行数冗余的局面。例如：BEM设计模式通过BEM的命名规范语义化了类名，ITCSS设计模式解决了CSS设计的分层架构，ACSS原子类的设计思想实现了单一变量单一原子样式，便于调用。 最近在研究关于CSS架构的设计方案，通过学习理解CSS设计模式的设计思想并结合实际项.
用css、html、js模拟操作系统2
weixin_53862758的博客
09-07 563
目录 1.整体 2.最上边的框 3.分类 今天接着上一篇文章往下写，今天写的是下面输入框点击之后出现一个窗口的内容 上一篇文章地址，有需要的可以先看第一篇文章 模拟操作系统1_更何况不过刚好的博客-CSDN博客 1.整体 html写一个div，class为apply，下面是css代码 width:850px; height:500px; background-color:rgb(237,237,237); position: fixed; bott..
CSS经典总结：em、ex与单位详解及选择符应用
本文档是一篇关于CSS经典总结的文章，主要讨论了以下几个关键知识点...总结起来，这篇文章深入浅出地介绍了CSS的基础概念、选择器系统、样式应用以及与HTML元素的交互，对于理解和使用CSS进行网页设计和开发非常实用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值