Day15_CSS3课堂笔记

最新推荐文章于 2022-12-15 18:24:28 发布

人生本该如此

最新推荐文章于 2022-12-15 18:24:28 发布

阅读量146

点赞数

分类专栏：前端文章标签：定位 css html 前端 flex

本文链接：https://blog.youkuaiyun.com/weixin_48733024/article/details/119702793

版权

前端专栏收录该内容

39 篇文章

订阅专栏

Day15 CSS3 笔记

1 回顾

多列布局

设置给多列容器：
column-count
column-width
columns
column-gap
column-rule-style
column-rule-color
column-rule-width
column-rule

设置给子元素
column-span: none/all
-webkit-column-break-inside: auto/avoid
-webkit-column-break-before: auto/avoid/always
-webkit-column-break-after: auto/avoid/always

伸缩盒布局：

设置给伸缩容器的样式：
display: flex/inline-flex
flex-direction: row/row-reverse/column/column-revers
flex-wrap: nowrap/wrap/wrap-reverse
flex-flow
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

设置给伸缩项目的样式：
flex-basis  伸缩项目在主轴上的长度
flex-grow   扩展比率
flex-shrink	收缩比率
flex		flex:1 1 0;    flex: 0 0 auto;
order
align-self: auto/stretch/flex-start/flex-end/center/baseline

2 媒体查询和响应式布局

2.1 视口 viewport

① 什么是视口

1. 视口就是页面的可视区域
2. 视口是根元素的初始包含块

② 移动端视口和PC端视口

1. PC端，视口大小用户可以调整，受到浏览器窗口大小以及开发者调试工具的影响
2. 移动端，视口大小用户不可以调整（分屏操作，手机横评，会影响视口大小）

③ 完美视口设置

什么是完美视口：

设备屏幕宽度 = 视口宽度

1. 默认，PC端就是完美视口，不需要设置
2. 默认，移动端视口大小会被缩放为 980px，与设备屏幕宽度不等

如何设置为完美视口：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.2 媒体查询基本语法

① 媒体类型

all			所有的类型，默认值
screen		屏幕，包括手机、电脑、电视机、屏幕...
print		打印机
speech      辅助阅读设备

/* 单独设置屏幕样式 */
@media screen {
    h1 {
        font-size: 100px;
    }

}

/* 单独设置打印机样式 */
@media print {
    h1 {
        border: 5px solid red;
        font-size: 400px;
    }
}

② 媒体特性

width				视口宽度
max-width			最大视口宽度
min-width			最小视口宽度
device-width		屏幕宽度
max-device-width	最大屏幕宽度
min-device-width	最小屏幕宽度

 /* 视口宽度小于等于 600 */
@media (max-width: 600px) {
    h1 {
        color: orange;
    }
    body {
        background-color: green;
    }
}

/* 视口宽度大于等于 1000px */
@media (min-width: 1000px) {
    h1 {
        color: red;
    }
    body {
        background-color: blue;
    }
}

③ 运算符

and			并且
,			或者
not			排除，只能用于媒体类型
only		只有，只能用于媒体类型

/* 视口宽度是 600~800 */
@media (min-width: 600px) and (max-width: 800px) {
    h1 {
        color: orange;
    }
    body {
        background-color: green;
    }
}

/* 视口宽度小于等于500 或者 视口宽度大于等于 1000 */
@media (max-width: 500px),(min-width: 1000px) {
    h1 {
        color: deeppink;
    }
    body {
        background-color: cyan;
    }
}

2.3 媒体查询在 CSS 中使用

① 第一种使用方式：媒体查询与其他CSS代码写在一起

1. 媒体查询中的样式不会提高样式的优先级，只有选择器才有优先级
2. 把媒体查询语句写在后面，生效的时候能够覆盖前面的

② 第二种使用方式： @media 配合 link 标签

 <link rel="stylesheet" href="screen.css" media="screen">
 <link rel="stylesheet" href="print.css" media="print">

2.4 响应式布局

① 阈值（断点）

方式一：
768px
992px
1200px

方式二：
800px
1024px

② 移动优先方案（媒体查询的设置）

1. 把所有类型都有的样式和最小屏幕的样式写在媒体查询以外
2. 媒体查询 使用 min-width ，从小到大，层层覆盖

.container {
    width: 100%;
    height: 400px;
    background-color: cyan;
}

/* 大于等于 768px  768~992 */
@media (min-width: 768px) {
    .container {
        margin: 0 auto;
        width: 750px;
    }
}

/* 大于等于 992px 992~1200*/
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

/* 大于等于 1200 */
@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

3 BFC

3.1 什么是 BFC

Block Formatting Context 简称 BFC，中文翻译为 块级格式上下文。

① W3C 中对 BFC 的定义

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

译文：

浮动、绝对定位元素、不是块盒子的块容器(如inline-blocks、table-cells和table-captions)，以及overflow属性的值除visible以外的块盒(除非该值已传播到视口)，将为其内容建立新的块格式化上下文。

② MDN 上对 BFC 的定义

A block formatting context is a part of a visual CSS rendering of a web page. It’s the region in which the layout of block boxes occurs and in which floats interact with other elements.