HTML与CSS学习笔记(7)

1、响应式布局

利用媒体查询，即media queries，可以针对不同的媒体类型定义不同的样式，从而实现响应式布局。

常见选项：

媒体类型

and、not

min-width、max-width:

例如

@media all and (min-width:500px) and (max-width: 700px){

.box{background: blue;}

}

当分辨率大于最小宽度并小于最大宽度时，执行{}内的样式(注意and两边要空格隔开)

在all前面加not表示取反;多个响应时要注意操作顺序：

@media all and (min-width:500px) {

.box{background: blue;}

}

@media all and (min-width: 700px){

.box{background: yellow;}

}

这样写width=500~700时显示蓝色，大于700时显示黄色，顺序反过来则只显示蓝色

        orientation：portrait、orientation：landscape:
            针对横竖屏的响应式触发，先写条件，选择器和样式写在{}内，注意and两边一定要用空格隔开：
            @media all and (orientation: portrait){
            .box{    background: blue;}
            }
            @media all and (orientation: landscape){
                .box{    background: yellow;}
            }
        <link>:
            <link rel="stylesheet" href="style1.css" media="all and (min-width:400px/orientation: portrait)">
            当满足()内条件时，引入相应的css文件,条件也可以写横竖屏，实现横竖屏不一样的样式
    常见修改样式：
        display
        float
        width
        注：响应式代码写到要适配的css后面
        两种常见的响应式方法：
            1、被动的：
                 @media all and (min-width: 1200px){
                    .container{max-width: 1140px;}
                }
            {}内的选择器不变，当()内条件改变时，相同的选择器内样式不同。
            2、主动式：
                @media all and (min-width:768px){
                    .mt-md-50{margin-top: 50px;}
                }
            {}内的选择器不同，当需要不同样式时，在body里添加相应的类：
              <div class="container mt-lg-50">hello media</div>

*重要的一个小细节，在浏览器页面按住ctrl+鼠标滚轮，向前滚，表面上是放大，其实是减小分辨率；同理向后滚，表面上是页面缩小，实际上是增大分辨率。浏览器右上角的百分数100%时为正常页面分辨率；超过100%为减小浏览器分辨率(这个浏览器显示的像素)；小于100%表示增大浏览器分辨率；别弄混了！

2、Bootstrap

Bootstrap是最受欢迎的Html、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目

特色：

1、响应式布局

2、基于flex的栅格系统

3、丰富的组件和工具方法

4、常见的交互使用

官网：https://getbootstrap.com/
熟悉相应类名的定义，了解其功能，通过使用相关类名达到布局的效果。
(意思就是，某个类名框架已经给你写好样式了，你只需要记住这个类名，当需要用到这种样式时，为相关标签添加该类名就可以了)
*具体可以参考官网文档与例子
Containers:版心属性
    container
    container-fluid
    Responsive breakpoints
Grid system:栅格系统
    Grid options:网格配置
    Responsive classes：响应式的类
    Gutters：间距
    Alignment：对齐方式
    Reordering：排序
    Offsetting：位置边距
    ....
    [class*=col]{border: 1px black solid;}该选择器表示，所有包含col的类
    *即该框架向当于把几乎所有的新特性样式集成到各个类名里面，编写程序时，把直接添加(调用)样式的方式变为为标签添加封装有相应样式的类名即可。主要的意义在于省的让我们自己去写样式；只要背几个class就不用了写任何样式的设计网页，就是该框架的初衷。
    常见的margin类：
        mr-auto:margin-top:auto;
        mt-5:margin-top:5rem;   注意了这些类的单位都是rem
        mt-md-5:margin-top:5rem;    md响应式范围内生效
        mx-5:margin-left:5em;   margin-right:5rem;
        my-5:margin-left:5em;   margin-right:5rem;
        mt-n5:margin-top:-5rem;
        py-5:padding-top:5rem;padding-bottom:5rem;
Content
    Reboot：重置默认样式
    Typography：针对设备
    Code:代码
    Image:图片
    Tables：表格
    Figures：图片描述
    ..
    *使用时去官网看文档:很多的类都是以样式名来命名的
Components:组件
    Alerts:弹出提示
    Badge:徽章
    Breadcrumb：面包屑(导航的一搬叫面包屑)
    Buttons：按钮
    Button group：按钮组
    Card：卡片
    ....
    *多看参考文档，多练习，才能掌握Bootstrap
(非常重要)*利用Bootstrap插件可以快速创建相关样式，格式为b4-相关样式名称。
Utilities：工具方法
    Borders：边框
    Clearfix：清除浮动
    Close icon：关闭icon
    Colors：颜色
    Display：显示类型
    Embed：媒体
    ...
*通過Blog首页的制作，熟悉了Bootstrap的基本使用，它适合快速搭建中小型项目，不适合搭建大型项目，因为类会太多。还有一个优点是，适合用来做针对不同设备的响应式布局。

3、CSS新特性之自定义属性

CSS自定义属性（也称为了"CSS变量"），在目前所有的现代浏览器中都得到了支持。
    定义与使用: --color:red;通过"--"来定义； background: var(--color);这样来使用
    计算
    默认值
    作用域
CSS新特性之shapes
    CSS Shapes布局可以实现不规则的文字环绕效果，需要和浮动配合使用。
        shape-outside
        clip-path
        shape-margin

4、CSS新特性之scrollbar

CSS scrollbar用于实现自定义滚动条样式(主要利用伪元素实现)
    ::-webkit-scrollbar: widht: 1px;定义的是滚动条的横向宽度，即它有多粗
    ::-webkit-scrollbar-thumb:设置拖拽块的样式
    ::-webkit-scrollbar-track:定义滚动条上下移动的容器样式

5、CSS 新特性之Scroll Snap

CSS Scroll Snap（滚动捕捉）允许你在用户完成滚动后多锁定特定的元素或位置,即是滚动条移动到相应区域。
    scroll-snap-type
        x
        mandatory
    例如： scroll-snap-type: x mandatory;与scroll-snap-align配合使用
    scroll-snap-align
        start:每个子元素靠左对齐(即防止出现滚动条拖动的位置只显示某个子元素的一部分)
        center
        end