CSS系统总结

最新推荐文章于 2023-02-13 12:04:26 发布
最新推荐文章于 2023-02-13 12:04:26 发布
阅读量425 收藏
点赞数
文章标签： 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 被隐藏的部分用省略号替代
*/
皮皮伍同学
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS系统学习总结
m0_63263973的博客
02-14 854
为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
全面系统CSS理解
CongJiYong的博客
04-06 431
vertical-align:center; //垂直元素都设置 垂直居中 margin-left: auto; margin-right: auto; //水平那个居中 给父元素设置 text-align:center
系统学习——CSS
zhaoguang2018的博客
11-19 824
从今天开始系统的学习一下CSS，以w3cschool提供的微课和文档基准，记录自己之前不知道的知识点
CSS系统学习之CSS简介
qq_40837310的博客
10-21 406
网页的构成 一个网页构成有三要素：结构、样式、行为，而结构用HTML控制，行为用JavaScript控制，样式用CSS控制。 CSS简介 CSS，层叠样式表，网页实际上是一个多层结构，通过CSS可以分别为网页的每一层来设计样式，而我们最终能看到的只是网页的最上面一层，总之就是CSS是用于设置网页中元素的样式。 CSS编写的位置 CSS编写的地方分为三个，内联样式、内部样式表，外部样式表。 内联样式： 内联样式又称行内样式，就是写在元素里面的样式，语法是使用元素的style属性来设置，样式的key和value
HTML+CSS实现一个管理系统页面的制作
热门推荐
weixin_50815545的博客
11-01 2万+
1.先来看成品效果 2.html的源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="main.css"> <title>信息管理系统</title> </head> <body> <div class="head"> <div .
论文管理系统常用样式总结
11-22
管理系统用到的基本样式
CSS media queries
09-25
最近在做一些页面打印时的特殊处理接触到了media queries，想系统学习一下，在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错，结合自己的使用总结一下
前端html+css+js学习指南图谱
最新发布
07-21
前端HTML+CSS+JS学习指南图谱是一个关于前端开发领域的知识总结和图形化展示。该图谱涵盖了HTML、CSS和JavaScript这三个前端开发的基础技术，包括它们的基本概念、语法规则、常用标签和属性、样式定义和布局、DOM...
CSS代码编写的一些性能优化技巧总结
01-19
CSS规范并没有明确浏览器如何去实现样式系统，仅仅是说明了它们必须这样做。有鉴于此，不同的样式系统引擎可能会拥有完全不同的表现和行为，特别是 Gecko 与 WebKit， 这两个引擎都是开源项目，实现了类似的算法，...
CSS学习总结
比较平凡的博客
04-06 121
CSS学习总结 CSS简介 1.CSS是什么？ （1）CSS即层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。 （2）CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 （3）CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。 2.CSS的基本语法 一条css样式规则由两个主要
《HTML与CSS设计》课程总结,网页设计课程学习心得总结
weixin_35443436的博客
06-05 3638
网页设计师需要不断地调整视觉元素，改进界面设计来满足不同用户的需求和偏好，图片是网页设计的重要设计元素，如何更好地在网页设计中应用图片元素显得尤为重要。下面是学习啦小编为大家整理的网页设计课程学习心得总结，供你参考!网页设计课程学习心得总结篇1转瞬之间，半个学期又接近尾声，在李导师的精心辅导下，度过了这个富有生机，富有朝气的学期。学到了很多做梦也不会遇到的如此奇特的有趣知识，对于我来讲是一个很好的...
CSS课程小结
qq_52215423的博客
05-18 117
#CSS介绍 CSS是Cascading Style Sheets的缩写，意思是级联样式表。HTML是网页的结构，而CSS则为这些结构进行修饰。 #CSS语法 *结构： 一条CSS语句由选择器和{ }内包含的其他的声明构成。 说明： 1、选择器就是你想要修饰的对象 2、每条属性由一个属性和一个值组成，不同声明之间用**;** 分隔。 3、属性和属性值之间用**：**分隔开。 *选择器类别： 1、id选择器：用法上一般是唯一的，在选择器前加"#“进行选择。 2、class选择器：也叫类选择器，元素的
1、无人系统控制站软件开发平台 CSS（Control Station Studio）概述
SGUav
02-16 1701
1、初衷 在CSS之前，通过参与开发数个大中型无人机地面控制站项目，在GCS（Ground Control Station）设计与实现方面积累了一些经验和感悟。在先前的开发过程中，一个机型对应一个控制站软件的开发方式逐渐显露出了低效和重复的缺点，于是逐渐萌生出了设计实现通用型控制站软件的想法。其时正好恰逢ArduPilot/MissionPlanner开源体系从诞生到壮大的过程。历经数年的...
【CSS笔记】CSS实现后台管理系统主界面布局
•一个写代码的• •知识星球•https://t.zsxq.com/15rGFbGEk
08-19 2078
【CSS笔记】CSS实现后台管理系统界面。
css - 后台管理系统基本布局源代码，提供可运行示例（CSS实现后台管理系统主界面布局）
高级前端工程师
02-13 2556
前端后台管理的漂亮界面，css html后台管理系统基本布局，CSS布局--全屏-常见后台管理系统布局，后台管理系统长css源码，后台管理页面布局的css，后台管理系统长css源码，后台管理页面基础布局HTML+CSS，CSS 页面布局、后台管理示例，CSS 后台管理系统布局示例(上左中)，后台管理css 相关实例(示例源码，css实现后台管理系统自适应布局，后台管理页面基础布局HTML+CSS，后台系统主要布局,css实现，后台管理系统前端模板(html + CSS，后台系统主要布局,css实现，CSS布
css系统是什么
qf2019的博客
07-09 597
css系统的英文全称是“Content Scrambling System”，是指内容扰乱系统，是一种防止直接从盘片上复制视频文件的数据加密和鉴定方法。 css系统是什么？ 内容扰乱系统(Content Scrambling System) 是一种防止直接从盘片上复制视频文件的数据加密和鉴定方法。每个获得许可的人都能得到一把密钥，它从加密光盘上的密钥组成的母集中取出来。 只要在以后的光盘上去除该密钥，许可就失效了。 原理 CSS解密算法与驱动器单元交换密钥，以生成加密用的密钥。这一生成的密钥用来扰乱盘片密钥
CSS系统学习一（基础）
CSDN_09的博客
02-25 718
学习内容来自w3school 一、CSS基础教程 简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 基础语法 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。 选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。 属性（property）是您希望设置的样式属性（sty...
CSS栅格系统
Y_ooo的博客
02-11 1285
CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。 这是一个二维系统，这意味着它可以同时处理列和行。 栅格系统与FLEX弹性布局有相似之处，都是由父容器包含多个项目元素的使用。由于兼容性并不强，效率也并未得到很大提升，因此目前不太普及。 1.声明栅格系统的容器 display: grid（块） | inline-grid（行） article { display: grid; width: 300px; height: 300px; border: s
CSS 实现 系统登录界面 （一）
稚枭天卓
08-11 9125
设置页面背景被全部覆盖实现过程中出现，图片周边存在边框，白边。这个边是 body 标签的 边框，去除边框实现代码详细如下： 可除去页面的边界。 设置登录界面中提交表单的文本框位置，可以通过 div 标签的相对位置实现。同时，设置文本是否显示在图层之上可以通过图层索引实现。 保证 在div之中， 各个模块的排列分布。 详细代码实现如下： 登
jsp+mysql+css学生信息管理系统
05-25
学生信息管理系统是一个非常常见的项目，使用JSP、MySQL和CSS可以轻松地构建这样的系统。下面是一个简单的指南，帮助您开始这个项目。 1. 数据库设计 首先，您需要设计数据库。您需要确定学生信息的数据类型和存储...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值