14.CSS学习（五）

上一篇：13.CSS学习（四）

布局

• 布局是对网页的全面设计和排版
• 常见布局：两列布局、三列布局（圣杯布局，双飞翼布局）
  1. 两列布局，左侧固定宽度，右侧宽度自适应
  2. 三列布局，左右固定宽度，中间宽度自适应

多列布局（column）

• CSS3 可以将文本内容设计成像报纸一样的多列布局
  

属性设置

1. column-width 属性指定了列的宽度
2. column-count 属性指定了分割的列数
3. column-gap 属性指定了多列之间的间隙
4. column-rule-width 属性指定了两列之间的边框厚度
5. column-rule-style 属性指定了两列之间的边框样式
6. column-rule-color 属性指定了两列之间的边框颜色
7. column-rule 属性是 column-rule-* 所有属性的简写
   例：column-rule: 2px dotted blue;

是否跨列

• column-span 指定元素是否要跨列（一般是标题元素）
• 默认值为 none，表示不跨列
• 设置为 all，表示跨列

瀑布流布局

• break-inside 属性描述了在多列布局页面下的内容盒子如何中断

• break-inside: avoid; 防止内容盒子断裂

响应式设计

响应式设计，让网站可以在任意类型的设备、任意尺寸的屏幕上比较完美的展示和使用

优势

• 一个网站能够兼容多个终端
• 多终端视觉和操作体验风格统一
• 兼容当前及未来新设备
• 节约了开发成本，维护成本也降低很多

不足

• 兼容性：低版本浏览器兼容性有问题
• 移动带宽流量：相比较手机定制网站，流量稍大，但比较加载一个完整pc端网站显然是小得多
• 代码累赘，会出现隐藏无用的元素，加载时间加长
• 在设计的初期就要考虑页面如何在多终端显示，兼容各种设备工作量大

@media 媒体查询

• 使用css3的媒体查询，你可以针对不同的媒体类型定义不同的样式
• @media 可以针对不同的屏幕尺寸设置不同的样式，用来实现响应式设计
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

媒体查询：由设备类型、逻辑关键字、监测媒体特性表达式构成，语法：

@media 设备类型 逻辑关键字 (媒体特性){
   css样式
}

设备类型：
- all 表示所有媒体类型
- screen 手机、电脑、pad等屏幕
- print 打印设备

逻辑关键字：
- and 表示两侧必须有空格，用来将多个媒体特性链在一起 &&与
- , 逗号是或者的意思，如 media="screen,print" 表示为屏幕设备或打印设备时使用样式 ||或
- not 放在设备类型的前面，反向选择【排除某个范围】

媒体特性：
- min-width 表示最小宽度
- max-width 表示最大宽度
- orientation 指定设备处于横屏还是竖屏。通过媒体特性的width和height来进行判断，如果height大于或等于width时返回portrait(竖屏状态)，width大于或等于height时返回landscape(横屏状态)

/* 竖屏 */
.box{
    width: 200px;
    height: 200px;
    background-color: red;
}
/* 横屏 */
@media screen and (orientation:landscape) {
    .box{
        width: 200px;
        height: 200px;
        background-color: blue;
    }
}

外联CSS语法：

<link rel="stylesheet" media="screen and (min-width:1024px)" href="red1.css" />
<link rel="stylesheet" media="screen and (max-width:992px)" href="red2.css" />

内嵌样式的语法：

<style>
   @media all and (min-width: 768px) and (max-width : 1024px){
       css样式
    }
style>

我们设置的768、992、1180这些叫断点
断点是媒体查询中设置的点，它用来指定媒体查询在断点处改变布局设计

媒体查询一般用于样式微调
例如：浮动、显示隐藏、文本大小、宽高…等

弹性盒子(Flex Box)

• 弹性盒子是 CSS3 的一种新的布局模式
• 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式
• 弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空间

关键点：

1. 弹性盒子由弹性父容器(Flex container)和弹性子元素(Flex item)组成
2. 弹性盒子里面的子元素都是沿着主轴排列
3. 主轴：有可能是X轴也有可能是Y轴，如果X轴为主轴，Y轴就是侧轴
4. 默认情况下X轴为主轴

弹性父容器属性设置：

• display: flex; 触发弹性盒子

• flex-direction: value; 设置主轴的方向

  • row X轴为主轴，默认值

  

• row-reverse 以X轴为主轴反向排列

  • column Y轴为主轴

• column-reverse 以Y轴为主轴反向排列

• justify-content: value; 主轴的对齐方式

  • flex-start 默认状态：在弹性盒子开始的地方显示

  • flex-end 在弹性盒子末端对齐

  

• center 居中对齐

  

  • space-between 左右元素顶格对齐，其他元素平均分配间距

    

  • space-around 每个元素的左右间距相等，平均分配间距

    

  • space-evenly 元素之间的间距平均分配（兼容性不太好）

    

• align-items: value; 侧轴的对齐方式

  • flex-start 侧轴开始的位置

  • flex-end 侧轴结束的位置

  

  • center 侧轴居中的位置

    

  • baseline 基线（flex-start位置等效，但排序不一样）

    

  • stretch （默认值）拉伸

• flex-wrap: value; 弹性盒子里面的子元素换行处理

  • wrap 换行

  

  • nowrap 不换行，默认值

    

  • wrap-reverse 反向换行

• align-content: value; 控制行与行的对齐方式

  • 作用：设置弹性盒内部各个项目在垂直方向排列方式

  • 条件：弹性父容器需设置 flex-wrap: wrap; 才会起作用

  • stretch 默认值。元素被拉伸以适应容器

  • flex-start 在弹性盒子开头对齐

  • flex-end 在弹性盒子末端对齐

    

  • center 在弹性盒子中心对齐

    

  • space-between 行与行之间两端对齐

  • space-around 每行前后的间距相对，平均分配间距对齐

  • space-evenly 每行平均分配间距

弹性子元素属性设置：

• align-self: value; 控制弹性盒中子元素在侧轴的对齐方式

  • auto 默认值，元素继承父容器的 align-items 属性

  • stretch 元素被拉伸以适应容器

  • center 元素位于容器的中心

  • flex-start 元素位于容器的开头

  • flex-end 元素位于容器的结尾

    

• order: 1; 控制子元素的排列顺序，数值越大越往后排列，支持负数（black.order=1,red.order=-1）
  

• flex: 1; 分配主轴剩余空间（简写形式）（以box1为例）

  

• flex-grow 扩展(扩展元素大小)
• flex-shrink 收缩(是否压缩元素大小)
• flex-basis 主要成分(设置元素大小)
• flex-shrink:0; 不压缩

• 给弹性子元素设置 margin: auto; 即可上下左右居中（以box1为例）

  

例题：弹性盒子布局

 .bbox{
            width: 810px;
            height: 510px;
            margin: auto;
            border: 5px solid black;
            display: flex;
            /* justify-content: space-between; */
            /* justify-content: space-evenly; */
        }
        .bbox div:nth-child(1){
            width: 200px;
            height: 100%;
            background-color: tomato;
        }
        .bbox div:nth-child(2){
            flex: 1;
            height: calc(100% - 10px);
            background-color: yellow;
            margin: 5px;
        }
        .bbox div:nth-child(3){
            flex: 1;
            height: 100%;
            background-color: pink;
        }
        .bbox div:nth-child(4){
            width: 100px;
            height: 100%;
            background-color: skyblue;
        }

<div class="bbox">
        <div class="bbox1">div>
        <div class="bbox2">div>
        <div class="bbox3">div>
        <div class="bbox4">div>
    div>

CSS3 新单位

• vw：viewport width，视窗宽度，1vw等于视窗宽度的1%

• vh：viewport height，视窗高度，1vh等于视窗高度的1%

• vmin：vw和vh中较小的那个

• vmax：vw和vh中较大的那个

• rem：相对根元素(html元素)的font-size（两者100倍关系）

  html{
  font-size:100px;
  }
  div{
  font-size:0.2rem;  //设置字体大小为20px
  }
  

了解 viewport 视口

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

BFC原理及应用

• 思考以下问题：

1. 兄弟元素上下margin折叠问题
2. 元素浮动后与正常块重叠问题
3. 子元素margin穿透问题
4. 子元素浮动后父元素高度塌陷问题

• 如果你深入去研究，你会发现背后有个神秘的东西叫 BFC ！

BFC是什么？

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部无关。

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的有 Block fomatting context ( 简称 BFC ) 和 Inline formatting context ( 简称 IFC )。

• BFC的主要渲染规则：

1. 同一个BFC中的两个相邻Box的margin会发生重叠
2. BFC的区域不会与float box重叠
3. BFC是一个隔离的独立容器，容器里面的子元素与外面的元素互不影响
4. 计算BFC的高度时，浮动元素也参与计算

BFC如何生成？

• CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC：

1. 根元素
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block, table, table-cell, flex …
5. overflow不为visible (hidden、auto、scroll)
6. display为flow-root，只是单纯的触发BFC

BFC的应用

• BFC可用于解决以下问题：

1. 兄弟元素上下margin折叠问题

   给任意一个兄弟盒子嵌套一个父盒子，设置属性：
   1. display:flow-root
   2. border: 1px solid transparent;
   3. overflow: hidden;
   4. display: flex;
   ......
   

2. 元素浮动后与正常块重叠问题

   1.overflow: hidden;
   2.display: flex;
   3.display: flow-root;
   ......
   

3. 子元素margin穿透问题（子想离父上边有距离）

   (不能用儿子的margin去踹，而是用父亲的padding去挤)

   1. padding: 30px 0 0 20px;
   2. border: 1px solid #000;
   3. padding: 1px;
   4.display: flow-root;
   ......
   

4. 子元素浮动后父元素高度塌陷问题

   1. 父元素自身浮动
   2. 父元素设置overflow:hidden;
   3. 在父元素末尾添加一个空的块属性元素设置clear:both;
   4. .box::after{
        content: '';
        display: block;
   	 clear: both;
       }
   5. display: flow-root;
   6. 父元素设置高度（不推荐）
   

下一篇：15.JS基础（一）

友情推荐：全栈大佬笔记     Android领域肥宅