[前端学习] HTML + CSS 学习笔记(七)

最新推荐文章于 2024-07-20 18:16:53 发布

Paxlsean

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量355

点赞数 5

文章标签：前端学习 html

本文链接：https://blog.csdn.net/weixin_49160784/article/details/135689998

版权

本文详细介绍了HTML和CSS中的多列布局、伸缩盒模型（flex布局）以及响应式设计，包括媒体查询的使用和块级格式化上下文(BFC)的概念，帮助读者理解和实践这些关键的布局技术。

摘要由CSDN通过智能技术生成

HTML + CSS 学习笔记(七)

一、多列布局

作用：专门用于实现类似于报纸新闻的布局。
常用属性：

column-count：指定列数，值是数字；
column-width：指定宽度，值是长度；
columns：复合属性，同时指定列数和宽度，值没有数量和顺序要求；
column-gap：指定列边距，值是长度；
column-rule-width：设定列与列之间的边框宽度，值是长度；
column-rule-style：设定列与列之间的边框线条样式；
column-rule-color：设定列与列之间的边框颜色；
column-rule：复合属性，设置列边框；
column-span：指定是否跨列，值是none或all。
若在段落中有图片，可以设置图片宽度为100%，则图片也会自动分列，可以用这个实现多列图片。

二、伸缩盒模型

伸缩盒模型简介

2009年，W3C提出了一种新的盒子模型 —— Flexble Box（伸缩盒模型，又称：弹性盒子）
可以轻松控制：元素分布方式、元素对齐方式、元素视觉顺序……
除了部分IE 浏览器不支持，其他浏览器均支持
伸缩盒模型出现，演变出来一种新的布局方案 —— flex布局
传统布局指：基于传统盒模型，主要靠display、position、float属性。
flex布局目前在移动端应用比较广泛，因为传统布局不能很好地呈现在移动设备上。

伸缩容器和伸缩项目

开启了flex的元素，就是伸缩容器

给元素设置display: flex;或display: inline-flex。
display: inline-flex很少使用。
一个容器可以同时是伸缩容器和伸缩项目。
伸缩容器的子元素自动变成了伸缩项目

只有子元素是伸缩项目，孙子元素及其他后代元素都不是。
不管原来是什么元素（块、行内块、行内），一旦变成了伸缩项目，全都会“块状化”。

主轴方向flex-direction
伸缩项目沿主轴排列，主轴默认水平，从左往右；侧轴与主轴垂直，默认从上往下。
可通过设置属性flex-direction的值修改主轴方向。
属性值说明
row 默认值，水平方向从左往右
row-reverse 水平方向从右往左
column 主轴方向垂直从上往下
column-reverse 主轴方向垂直从下往上
主轴换行方式flex-wrap
属性值说明
nowrap 默认值，不换行
wrap 自动换行
wrap-reverse 反向换行，从最下面开始依次排列，换行在上方添加新行
复合属性flex-flow，是flex-direction和flex-wrap的复合属性，值没有顺序要求。

属性值	说明
`row`	默认值，水平方向从左往右
`row-reverse`	水平方向从右往左
`column`	主轴方向垂直从上往下
`column-reverse`	主轴方向垂直从下往上

属性值	说明
`nowrap`	默认值，不换行
`wrap`	自动换行
`wrap-reverse`	反向换行，从最下面开始依次排列，换行在上方添加新行

主轴对齐方式justify-content

属性值	说明
`flex-start`	默认值，主轴起点对齐
`flex-end`	主轴终点对齐
`center`	居中对齐
`space-between`	均匀分布，两端对齐
`space-around`	均匀分布，两端距离是中间的一半
`space-evenly`	均匀分布，两端距离与中间距离一致

侧轴对齐方式

一行的情况下的侧轴对齐方式align-items：

属性值	说明
`stretch`	默认值，若伸缩项目未设置高度，则伸缩项目将进行拉伸，高度将占满整个容器
`flex-start`	侧轴起点对齐
`flex-end`	侧轴终点对齐
`center`	侧轴中点对齐
`baseline`	伸缩项目的第一行文字基线对齐

多行的情况下的侧轴对齐方式align-content：

属性值	说明
`stretch`	默认值，若伸缩项目未设置高度，则伸缩项目将进行拉伸，高度将占满整个容器
`flex-start`	侧轴起点对齐
`flex-end`	侧轴终点对齐
`center`	侧轴中点对齐
`space-between`	与侧轴两端对齐，中间每行均匀分布
`space-around`	每行之间的距离相等，顶端与底部距离是中间行距的一半
`space-evenly`	均匀分布，两端距离与中间距离一致

元素水平垂直居中
- 方案一：父元素设置display: flex，然后父元素再设置justify-content: center; align-items: center;；
- 方案二：父元素设置display: flex，然后子元素设置margin: auto;。
基准长度flex-basis
设置主轴方向上的基准长度，会让宽度/高度失效。浏览器根据这个值计算主轴是否有多余空间，默认值为auto，即伸缩项目的宽/高。
伸缩项目的拉伸与缩小

拉伸：flex-grow，定义伸缩项目的放大比例，默认值为0，即不放大。
使用规则：
- 若所有伸缩项目的flex-grow值都为1，则将均分父容器剩余的空间；
- 若几个伸缩项目的flex-grow的值不一样，则它们将根据设置的值按比例分配父容器剩余的空间。
缩小：flex-shrink，定义伸缩项目的放大比例，默认值为1，即如果空间不够，则按元素原来的大小比例进行缩小。一般不单独设置flex-shrink，直接使用默认值。缩小的极限是保证伸缩项目中内容的呈现。

复合属性flex
是flex-grow、flex-shrink、flex-basis三个值的复合属性，默认值是flex: 0 1 auto。
|属性值|说明|
|-|-|
|flex: 0 1 auto|默认值，不可以拉伸，可以收缩，不设置基准长度；可简写为flex: 0 auto;|
|flex: 1 1 auto|可以拉伸，可以收缩，不设置基准长度；可简写为flex: auto;|
|flex: 1 1 0|可以拉伸，可以收缩，设置基准长度为0；可简写为flex: 1;|
|flex: 0 0 auto|不可以拉伸，不可以收缩，不设置基准长度；可简写为flex: none;|
排序与单独对齐

排序：给伸缩项目设置order属性，值为数字，可以为负数，值越小越靠前。
单独对齐：给某个伸缩项目设置align-self属性，可以单独调整该项目的对齐方式；默认值为auto，表示继承父元素的align-items属性。

三、响应式布局

媒体查询

媒体类型
使用@media，可以用下面的值查询媒体类型：all(检测所有设备)、screen(检测电子屏幕)、print(检测打印机)等，完整列表参https://developer.mozilla.org/zh-CN/docs/Web/CSS/@media。
例如：
```
span {
  color: skyblue;
}
@media print {
  span {
    color: red;
  }
}
```

媒体特性
也可以给@media后加上下面的值设置特定的样式。

属性值	说明
`width`	检测视口宽度
`min-width`	检测视口最小宽度
`max-width`	检测视口最大宽度
`height`	检测视口高度
`min-height`	检测视口最小高度
`max-height`	检测视口最大高度
`device-width`	检测屏幕宽度
`min-device-width`	检测屏幕最小宽度
`max-device-width`	检测屏幕最大宽度
`orientation`	检测视口的旋转方向（是否横屏）； `portrait`：视口处于纵向，即高度大于等于宽度； `landscape`：视口处于横向，即宽度大于高度

div {
  background-color: skyblue;
}
/* 检测到屏幕宽度为800px时 */
@media (width: 800px) {
  div {
    background-color: red;
  }
}
/* 检测到屏幕宽度小于等于700px时 */
@media (max-width: 700px) {
  div {
    background-color: orange;
  }
}
/* 检测到屏幕宽度大于等于900px时 */
@media (min-width: 900px) {
  div {
    background-color: green;
  }
}

运算符
也可以给@media后加上下面的值设置特定的样式。

属性值	说明
`and`	且
`,`，`or`	或
`not`	否定
`only`	肯定

div {
  background-color: skyblue;
}
/* 检测到屏幕宽度大于等于700px且小于等于900px时 */
@media (min-width: 700px) and (max-width: 900px) {
  div {
    background-color: red;
  }
}
/* 检测到不是屏幕时 */
@media not screen {
  div {
    background-color: green;
  }
}

常用阈值
在实际开发中，会将屏幕分为几个区间：
小屏幕 —— 768px —— 中等屏幕 —— 992px —— 大屏幕 —— 1200px —— 超大屏幕
通常可以适配不同屏幕的样式使用不同的css文件通过引入外部样式表进行使用：

<!-- 用法一：css文件中需写 @media及其值-->
<link rel="stylesheet" href="./css/small.css">
<!-- 用法二：在标签中使用 media，css文件中只写样式，不写@media及其值-->
<link rel="stylesheet" media="screen and (min-width:1200px)" href="./css/huge.css">

四、块级格式化上下文（BFC）

一个元素可以通过一些特定条件开启BFC。

开启BFC后，可以解决以下问题：

开启BFC的元素的子元素不会产生margin塌陷问题；
开启BFC的元素本身不会被其他浮动元素所覆盖；
开启BFC的元素不会因为其子元素的浮动而改变高度，也就是本身的高度不会塌陷。

如何开启BFC
- 根元素(html)本身就是一个BFC；
- 使用overflow属性，设置为visible以外的值，如hidden；
- 浮动元素，使用float属性，设置为left、right；
- 绝对定位、固定定位元素，设置position属性值为absolute、fixed；
- 行内块元素，设置display属性值为inline-block、flex、inline-flex、flow-root、table-cell、table-caption等；
- 表格单元格table、thead、tbody、tfoot、th、td、tr、caption；
- 伸缩项目；
- 多列容器；
- column-span为all的元素（即使不再多列容器中）。