NTML的CSS与页面布局

原创已于 2024-09-17 19:31:39 修改 · 851 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #html

于 2024-09-17 19:30:56 首次发布

内部样式表

将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 相同。