关于CSS的一些个人总结 | 青训营笔记

JoJo1
170 阅读14分钟

这是我参与「第四届青训营 」笔记创作活动的第2天

CSS介绍

1.为什么需要CSS

使用CSS的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离，在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，并且修改的时候需要逐个修改，费心费力。是时候做出改变了，所以CSS就出现了。

2.CSS概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表

  1. 用于HTML文档中元素样式的定义，实现了将内容与表现分离，提高代码的可重用性和可维护性
  2. 文件后缀是.css

3.CSS和HTML之间的关系

  1. HTML用于构建网页的结构
  2. CSS用于构建HTML元素的样式
  3. HTML是页面的内容组成，CSS是页面的表现

4.语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

image.png

选择器通常是您需要改变样式的HTML元素
每条声明由一个属性和一个值组成
属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开

CSS的引入方式

1. 内联样式（也称为行内样式）

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
特点：缺乏整体性和规划性，不利于维护，维护成本高；

<p style="background: orange; font-size: 24px;">CSS<p>

2. 内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表
特点：单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

<head>
    <style> 
       h1 { background: red; } 
    </style>
</head>

3. 外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 标签链接到样式表。 标签在（文档的）头部：

<link rel="stylesheet" type="text/css" href="xxx.css">

4. 导入式（现在浏览器都很少使用）

<style type="text/css">
   @import url("css文件路径");
</style>

这里跟大家说明一下@import和link的区别

  1. @import是CSS提供加载样式的一种方式，只能用于加载CSS。link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义rel连接属性等。
  2. 加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候会比较明显。
  3. 兼容性的差别。@import在IE5以上才能识别，而link标签无此问题。
  4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为dom操作元素的样式时，用@import方式的样式也许还未加载完成。
  5. 使用@import方式会增加HTTP请求，会影响加载速度，所以谨慎使用该方法。

优先级

行内样式>内部样式（外部样式）

注意：内部样式和外部样式优先级一样，写在后面的生效

基础选择器

1. 全局选择器

可以与任何元素匹配，优先级最低，不推荐使用。

*{
     margin: 0;
     padding: 0;
 }

2. 元素选择器

HTML文档中的元素，p、b、div、a、img、body等。
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”。

p{
    font-size:14px;
}

再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变为红色字体，那么我可以用<span>标签把“前端”这两个字围起来，然后给<span>标签加一个标签选择器

<p>学完了<span>前端</span>，继续学Java</p>
span{
     color: red;
}

需要注意的是：

  • 所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等。
  • 无论这个标签藏的多深，一定能够被选择上。
  • 选择的所有，而不是一个。

3. 类选择器

规定用圆点.来定义，针对你想要的所有标签使用。
优点：灵活。

<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
    width:800px;
}

class属性的特点：

  • 特性1：类选择器可以被多种标签使用。
  • 特征2：类名不能以数字开头
  • 特性3：同一个标签可以使用多个类选择器。用空格隔开。举例如下
<h3 class="classone  classtwo">我是一个h3啊</h3>

而不能写成：

<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>

4. ID选择器

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以”#”来定义。

<h2 id="mytitle">你好</h2>
#mytitle{
    border:3px dashed green;
}

特别强调的是：

HTML页面，不能出现相同的id，哪怕他们不是一个类型。比如页面上有一个id为pp的p，一个id为pp的div，是非法的！ID名字不能以数字开头。
一个标签可以被多个css选择器选择， 比如，我们可以同时让标签选择器和id选择器作用于同一个标签。（用到了层叠）如下：

image.png 然后我们通过网页的审查元素看一下效果：

image.png

image.png

现在，假设选择器冲突了，比如id选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？
实际上，css有着非常严格的计算公式，能够处理冲突.一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义。

5. 并集选择器

语法：选择器1,选择器2,...{ }
作用：提取共同的样式，减少重复代码

.header,.footer{height:300px;}

6. 交集选择器

可以同时选中同时满足多个选择器的元素，选择器之间不需要分隔符，直接连在一起就可。

image.png image.png

7.选择器的优先级

css中用四位数字表示权重，权重的表达方式如：0，0，0，0
元素选择器的权重为0001
class选择器的权重为0010
id选择器的权重为0100
内联样式的权重为1000
优先级从高到低：
行内样式>ID选择器>类选择器>元素选择器

DIV+CSS布局

1. 优点

  1. 符合W3C标准。这保证您的网站不会因为将来网络应用的升级而被淘汰。
  2. 对浏览者和浏览器更具亲和力。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。这样就支持浏览器的向后兼容，也就是无论未来的浏览器大战，胜利的是什么，您的网站都能很好的兼容。
  3. 使页面载入得更快。页面体积变小，浏览速度变快，由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。
  4. 保持视觉的一致性。以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差。
  5. 修改设计时更有效率。由于使用了DIV+CSS制作方法，使内容和结构分离，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式，在团队开发中更容易分工合作而减少相互关联性。
  6. 搜索引擎更加友好。相对与传统的table,采用DIV+CSS技术的网页，由于将大部分的HTML代码和内容样式写入了CSS文件中，这就使得网页中代码更加简洁，正文部分更为突出明显，便于被搜索引擎采集收录。

2. DIV

<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

<div class="news">
  <h2>News headline 1</h2>
  <p>some text. some text. some text...</p>
  ...
</div>

3. 布局时需要的属性

width:数值;（宽度）
height:数值;（高度）
background-color:颜色;（背景颜色）
float:left; 使div不占据一行（浮动）

浮动

1. 浮动的定义

Float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
CSS 的 Float（浮动）使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。
说到脱离文档流，要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

2. 浮动的原理

  • 浮动以后使元素脱离了文档流（在页面中不占据位置）
  • 浮动是碰到父元素的边框或者浮动元素的边框就会停止
  • 浮动不会重叠
  • 浮动只有左右浮动，没有上下浮动
  • 浮动以后块级元素在同一行显示，行内元素可以设置宽高
  • 元素没有设置宽度和高度时，宽度为内容撑开

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

image.png

再请看下图，当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。

如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

image.png

如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：

image.png

3.浮动的语法

image.png

4. 清除浮动的影响

在这里先说明何为浮动的影响？
当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素，浮动元素会造成父元素高度塌陷。
实例4-1

<div class="box">
<div class="one"></div>
</div>
<style>
.box{
background-color: pink;
}
.one{
width: 200px;
height: 200px;
background-color: red;
}
</style>

子元素.one没加浮动时的样式如下：

image.png 父元素高度由子元素撑开

<style>
.box{
     background-color: pink;
}
.one{
     width: 200px;
     height: 200px;
     background-color: red;
     float: left;
}
</style>

给子元素设置浮动后效果如下：

image.png 所以当我们设置float后，要根据不同情况来清除浮动。下面介绍几种常用的方法：

（1）设置父元素的高度

设置父标签合适的高度，前提必须确定子布局的高度，来计算元素的合适高度，包裹住子元素

<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>

<style>
.box{
     background-color: pink;
     height: 200px;
}
.one,.two,.three{
     width: 200px;
     height: 200px;
     float: left;
}
.one{
     background-color: red;
}
.two{
     background-color: gold;
}
.three{
     background-color: green;
}
</style>

（2）受影响的元素加clear属性

clear:left | right | both;

<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="footer"></div>
<style>
.box{
background-color: pink;
}
.one,.two,.three{
width: 200px;
height: 200px;
float: left;
}
.one{
background-color: red;
}
.two{
background-color: gold;
}
.three{
background-color: green;
}
.footer{
height: 300px;
background-color: blueviolet;
clear:both;
}
</style>

image.png 清除浮动之前，由于box的三个子元素都加了浮动，排除到文档流之外，box的高度坍塌，所以下面的div被覆盖住了。
给受影响的div加clear，清除浮动的影响

image.png 清除完效果如下：

image.png

（3）overflow清除浮动

这种情况下，父布局不能设置高度。父级标签的样式里面加: overflow:hidden;

<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="footer"></div>
<style>
.box{
background-color: pink;
overflow: hidden;
}
.one,.two,.three{
width: 200px;
height: 200px;
float: left;
}
.one{
background-color: red;
}
.two{
background-color: gold;
}
.three{
background-color: green;
}
.footer{
height: 300px;
background-color: blueviolet;
}
</style>

效果如下：

image.png

（4）空div法

在最后一个浮动的盒子的后面，新添加一个标签。然后设置clear清除浮动。这种情况下，父布局不能设置高度。
优点： 通俗好理解。
缺点： 增加了太多的标签。

<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="clear"></div>
</div>
<div class="footer"></div>
.clear{
clear: both;
}

（5）伪对象法

为父标签添加伪类After,设置空的内容，并且使用clear:both;这种情况下，父布局不能设置高度。
优点： 无需添加多余的标签，并且可以全局调用。

<div class="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div class="footer"></div>
.box::after{
content: "";
display: block;
clear: both;
}

Position

1. 定义

position 属性指定了元素的定位类型。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

2. 取值

image.png

注意：子绝父相（子元素用绝对定位，父元素用相对定位）

3. z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
auto （默认值）。堆叠顺序与父元素相等。
注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）
该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。

<div class="box">
<div class="one"></div>
<div class="two"></div>
</div>
<style>
.box{
position: relative;
}
.one{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 50px;
z-index: 666;
}
.two{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
Left: 100px;
top: 100px;
}
</style>

效果如下：

image.png

display

1. 定义

display 属性规定元素应该生成的框的类型。
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。

2. 取值

值描述
none此元素不会被显示。
block此元素将显示为块级元素，此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block行内块元素。
table-cell此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
Flex弹性盒模型。

3. display:none;和visibility:hidden;和opacity:0;和overflow:hidden;四者的区别

  • 1）display:none; 隐藏自己，隐藏后原位置不保留
  • 2）visibility:hidden; 隐藏自己，隐藏后原位置保留
  • 3）opacity:0; 隐藏自己，隐藏后原位置保留
  • 4）overflow:hidden; 溢出部分隐藏

4. 原位置不保留的属性

  • 1）float:;
  • 2）position:absolute;
  • 3）position:fixed;
  • 4）display:none;

BFC

BFC（Block formatting context）直译为“块级格式化上下文”。他是一个独立渲染的区域它规定了内部如何布局，容器里面的子元素不会在布局上影响到外面的元素。

如何产生BFC？

  1. float取值left或者right
  2. Position取值为absolute或者fixed
  3. Overflow的值不是visible
  4. Display的值是inline-block、table-cell、flex等

结尾

目前学到的CSS方面的知识有限，之后还会进行内容的补充。

avatar
文章
阅读
粉丝