内部样式表
将CSS样式放在 style 标签中,通常 <style>
编写在 HTML 的 head 标签内部。
外部样式表
外部样式表是指将 CSS 编写在扩展名为 .css
的单独文件中,并从HTML <link>
元素引用它,通常 <link>
编写在HTML 的 head 标签内部。
- 格式:
<link rel="stylesheet" href="css文件">
rel:表示“关系 (relationship) ”,属性值指链接方式与包含它的文档之间的关系,引入 css 文件固定值为stylesheet。
href:属性需要引用某文件系统中的一个文件。
注释
CSS 中的注释以 /*
开头和 */
结尾
/* 设置h1的样式 */
h1 {
color: blue;
background-color: red;
border: 1px solid black;
}
选择器的分类:
分类 | 名称 | 符号 | 作用 | 示例 |
---|---|---|---|---|
基本选择器 | 元素选择器 | 标签名 | 基于标签名匹配元素 | div{ } |
类选择器 | . | 基于class属性值匹配元素 | .center{ } | |
ID选择器 | # | 基于id属性值匹配元素 | #username{ } | |
属性选择器 | 属性选择器 | [] | 基于某属性匹配元素 | [type]{ } |
伪类选择器 | 伪类选择器 | : | 用于向某些选择器添加特殊的效果 | a : hover{ } |
组合选择器 | 后代选择器 | 空格 | 使用空格符号 结合两个选择器,基于第一个选择器,匹配第二个选择器的所有后代元素 | .top li{ } |
子级选择器 | > | 使用 > 结合两个选择器,基于第一个选择器,匹配第二个选择器的直接子级元素 | .top > li{ } | |
同级选择器 | ~ | 使用 ~ 结合两个选择器,基于第一个选择器,匹配第二个选择器的所有后续兄弟元素 | .l1 ~ li{ } | |
相邻选择器 | + | 使用 + 结合两个选择器,基于第一个选择器,匹配第二个选择器相邻的后续兄弟元素 | .l1 + li{ } | |
通用选择器 | * | 匹配文档中的所有内容 | *{ } |
display
display
属性是 CSS 中用于控制元素的显示类型的重要属性。它可以改变元素的默认显示行为,使其在页面上以不同的方式进行布局。以下是 display
属性的一些常见值及其作用:
-
block:将元素显示为块级元素。块级元素会独占一行,宽度默认为父元素的宽度,可以设置宽度、高度、内外边距等属性。常见的块级元素有
<div>
、<p>
、<h1>
等。 -
inline:将元素显示为行内元素。行内元素不会独占一行,宽度仅为内容的宽度,不能设置宽度、高度、内外边距等属性。常见的行内元素有
<span>
、<a>
、<img>
等。 -
inline-block:将元素显示为行内块元素。行内块元素既不会独占一行,也可以设置宽度、高度、内外边距等属性,类似于块级元素。常见的行内块元素有
<input>
、<button>
等。 -
none:将元素隐藏,不占据任何空间。通常用于隐藏不需要显示的元素。
-
flex:将元素显示为弹性盒子。弹性盒子是一种现代布局方式,可以轻松实现响应式布局和自适应对齐。需要注意的是,
display: flex
应用于父元素,而不是子元素。 -
grid:将元素显示为网格容器。网格布局是一种二维布局方式,可以轻松实现复杂的布局需求。需要注意的是,
display: grid
应用于父元素,而不是子元素。
float 塌陷
float
塌陷是指浮动元素的父元素高度不能自动适应浮动元素的高度,导致父元素高度塌陷的现象。这会影响到后续元素的布局,使它们与浮动元素重叠。
-
清除浮动(clearfix):清除浮动是最常用的解决方法。我们可以为父元素添加一个伪元素(
::after
),并设置clear: both
属性,以清除浮动效果。这样,父元素的高度就能自动适应浮动元素的高度,避免塌陷。.clearfix::after { content: ""; clear: both; display: block; }
-
使用
overflow
属性:我们可以为父元素设置overflow
属性(如overflow: auto
或overflow: hidden
),以创建一个新的块格式化上下文(BFC)。这样,父元素的高度就能自动适应浮动元素的高度,避免塌陷。.parent { overflow: auto; }
-
使用 Flexbox 或 Grid 布局:现代布局中,我们更推荐使用 Flexbox 或 Grid 布局来替代
float
布局。这些布局方式可以更简单、直观地实现元素的排列和对齐,同时避免了float
塌陷的问题。.parent { display: flex; }
弹性布局(Flexbox)
弹性布局(Flexbox)是 CSS 中的一种布局模式,它可以让我们更简单、直观地实现元素的排列和对齐。Flexbox 布局主要用于一维布局,即在水平或垂直方向上排列元素。
以下是 Flexbox 布局的一些常见概念和属性:
-
容器(Flex Container):应用了
display: flex
或display: inline-flex
属性的元素被称为弹性容器。弹性容器内的子元素将按照弹性布局进行排列。 -
项目(Flex Item):弹性容器的子元素被称为弹性项目。它们将按照弹性布局进行排列和对齐。
-
主轴(Main Axis):弹性容器内的项目沿着主轴排列。主轴的方向由
flex-direction
属性决定。 -
侧轴(Cross Axis):弹性容器内的项目沿着侧轴对齐。侧轴的方向与主轴垂直。
-
flex-direction:用于设置弹性容器的主轴方向。可选值有
row
(默认值,水平方向)、row-reverse
(水平方向,反向排列)、column
(垂直方向)和column-reverse
(垂直方向,反向排列)。 -
flex-wrap:用于设置弹性容器内的项目是否换行。可选值有
nowrap
(默认值,不换行)、wrap
(换行)和wrap-reverse
(换行,反向排列)。 -
justify-content:用于设置弹性容器内的项目在主轴上的对齐方式。可选值有
flex-start
(默认值,左对齐)、flex-end
(右对齐)、center
(居中对齐)、space-between
(两端对齐,项目之间的间隔相等)和space-around
(每个项目两侧的间隔相等)。 -
align-items:用于设置弹性容器内的项目在侧轴上的对齐方式。可选值有
flex-start
(起点对齐)、flex-end
(终点对齐)、center
(居中对齐)、baseline
(基线对齐)和stretch
(默认值,如果项目未设置高度或设为auto,将占满整个容器的高度)。 -
align-content:用于设置弹性容器内的多行项目在侧轴上的对齐方式。可选值与
align-items
相同。 -
order:用于设置弹性项目的排列顺序。数值越小,排列越靠前,默认为0。
-
flex-grow:用于设置弹性项目的放大比例。默认为0,即如果存在剩余空间,也不放大。
-
flex-shrink:用于设置弹性项目的缩小比例。默认为1,即如果空间不足,该项目将缩小。
-
flex-basis:用于设置弹性项目在主轴方向上的初始大小。可以是长度值(如
200px
)或百分比(如50%
)。 -
flex:
flex-grow
、flex-shrink
和flex-basis
的简写属性。默认值为0 1 auto
。 -
align-self:用于设置单个弹性项目在侧轴上的对齐方式,覆盖
align-items
属性。可选值与align-items
相同。