我的博客

# css基础

CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。
通过使用 CSS 我们可以大大提升网页开发的工作效率！ 在我们的 CSS 教程中，您会学到如何使用 CSS 同时控制多重网页的样式和布局。
CSS3 现在已被大部分现代浏览器支持，而下一版的 CSS4 仍在开发中。

# css的三大特性

层叠性、继承性、优先级

# 层叠性

如果相同的选择器设置了相同的样式 此时后一个样式就会覆盖前一个样式来显示，不冲突的情况下就不会，两个样式都有效果

# 继承性(子承父业)

子元素可以继承父元素的样式（text-、font-、line-、color-）

# 行高的继承性

  • 行高可以跟单位也可以不跟单位
  • 如果子元素没有设置行高，则会继承父元素的行高
  • body行高1.5这样写法最大的优势就是里面子元素可以根据自己的文字大小自动调整行高

# 优先级

  • 当同一个元素被指定了多个选择器就会有优先级产生
  • 如果选择器相同则执行层叠性
  • 如果选择器不同则根据选择器权重执行

# 权重

  • 继承》元素选择器》类选择器、伪类选择器》id选择器》行内样式》importent（重要的）
  • color：red!importent;
  • 复合选择器会有权重叠加的问题
  • 权重虽然会叠加但不会有进位的问题

# css的元素显示模式

# 块元素

常见的有div h p ul li等

# 块元素的特点

  1. 比较霸道 自己独占一行
  2. 高度 宽度 外边距 内边距都可以控制
  3. 宽度默认是容器的100%
  4. 是一个容器及盒子 里面都可以放内或者块级元素

    WARNING

    文字类的标签内不能使用块级元素 p标签主要用于存放文字 因此p标签里不能放块级元素如

    同理 h标签也是如此

# 行内元素

# 行内元素特点

  1. 相邻行内元素在一行上 一行可以显示多个
  2. 宽和高直接设置是无效的
  3. 默认宽度就是内容本身的宽度
  4. 行内元素只能容纳文本或其他行内元素

    WARNING

    注意: 链接里面不能再放链接 特殊情况链接可以放块级元素 但是给a转换一下块级模式更安全

    # 行内块元素

    在行内元素中存在几个特殊的标签 <img>、<input>、 <td>他们同时具有块元素和行内元素的特点 称为行内块元素.

# 行内块元素特点

  1. 和相邻行内元素在一行上 他们之间会有空白缝隙 一行可以显示多个
  2. 默认宽度就是他本身内容的宽度（行内元素的特点）
  3. 高度 行高 外边距 内边距都是可以控制的（块级元素的特点）

# 元素显示模式的转换（行内元素和块级元素的相互转换）

  1. 转换为块级元素：display：block；
  2. 转换为行内元素：display：inline；
  3. 转换为行内块元素：display：inline-block；

# css属性书写顺序

  1. 布局定位属性
  2. 自身属性
  3. 文本属性
  4. 其他属性

# 选择器的分类

# 基础选择器

  • 基础选择器、复合选择器两大类
  • 基础选择器是由单个选择器组成的
  • 基础选择器又包括：标签选择器、类选择器、id选择器、通配符选择器
  • css多类名选择器 class="类名1 类名2" 中间加空格
  • id选择器只能调用一次

# 复合选择器

css复合选择器包括： 后代选择器、子选择器、并集选择器、伪类选择器

  1. 后代选择器：可以选择父元素里面的子元素
 ol li {
    color: red;
}
  1. 子选择器：只能选择某元素的最近一级子元素，简单理解就是选亲儿子元素
  .nva > li {
    color: pink;
}
  1. 并集选择器：可以选择多组标签，同时为他们定义相同的样式 多标签用，号分割
  ul,
ol {
    background-color: gray;
}
  1. 伪类选择器：用于向某些选择器添加特殊的效果，或选择第一个、第n个元素 伪类选择器最大的特点是用：号来表示 比如：hover、first-child
  2. 链接伪类选择器
    • a:link{选择所有未被访问的链接}
    • a:visited{选择所有已被访问的链接}
    • a:hover{鼠标经过效果}
    • a:active{鼠标按下未弹起的链接} 顺序不可颠倒
    • :focus伪类选择器：用于选取获得焦点的表单元素
 input:focus {
    background-color: pink;
}

# css定位

# 为什么需要定位

  1. 让某个元素可以自由的在一个盒子内移动位置 并且压住其他盒子
  2. 当我们滚动窗口的时候 盒子是固定在屏幕某个位置的

# 定位的组成

  • 定位是将盒子定在某个位置 所以定位也是摆放盒子 按照定位的方式移动盒子
  • 定位=定位模式+边偏移
  • 定位模式用于指定一个元素在文档中的定位方式 边偏移则决定了该元素的最终位置

# 定位模式

定位模式决定元素的定位方式 它通过css的position属性来设置 其值有四个

  1. static静态定位
  2. relative 相对定位
  3. absolute 绝对定位
  4. fixed 固定定位

# 边偏移

边偏移就是定位的盒子移动到最终的位置
具体参数有top、bottom、left和right四个属性

# css五大定位

# 静态定位static

  • 静态定位是元素默认的定位方式 无定位的意思
  • 静态定位是按照标准流特性摆放位置，它没有偏移
  • 静态定位在布局中很少使用

# 相对定位 relative

相对定位是元素在移动位置的时候，是相对于它原来位置来说的

  1. 他是相对于原来的位置来移动的（移动位置的时候参照点是原来的位置）
  2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标 继续保留原来的位置）
  3. 它最典型的运用就是给绝对定位当爹的

# 绝对定位 absolute

绝对定位是元素在移动位置的时候 是相对于他的祖先元素来说的
绝对定位的特点：
如果没有祖先元素或者祖先元素没有定位，则以浏览器为主定位

# 固定定位 Fixed

固定定位是元素固定与浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时元素的位置不会改变
语法：选择器（position：fixed）

# 固定定位的特点：（务必记住）
  1. 以浏览器的可视窗口为参照点移动元素
  2. 跟父元素没有任何关系
  3. 不随滚动条滚动
  4. 固定定位不占有原先的位置
  5. 固定定位也是脱标的 其实固定定位也可以看作是一种特殊的决定定位
  6. 固定定位小技巧：固定在版心右侧位置
  7. 让固定定位的盒子left：50% 走到浏览器可视区（也可以看作版心）的一半位置
  8. 让固定定位的盒子margin-left版心宽度一半的距离 多走版心宽度一半的位置

# 粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合 sticky粘性的
语法（position：sticky；top：10px）

# 粘性定位的特点：
  1. 以浏览器的可视窗口为参照点移动元素（固定定位的特点）
  2. 粘性定位占有原先的位置（相对定位的特点）
  3. 必须添加top、left、right、bottom其中一个才有效

# css定位拓展

# 绝对定位的盒子居中

加了绝对定位的盒子不能通过margin：0 auto；水平居中，但是可以通过以下计算方法实现水平和垂直居中
left：50%(父容器宽度的一半)
margin-left：负值（盒子宽度的一半）

# 定位的特殊性

绝对定位和固定定位也和浮动定位类似

  1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
  2. 块级元素添加绝对和固定定位如果不给宽度或者高度。默认大小是内容大小
  3. 脱标的盒子不会触发外边距塌陷问题
  4. 浮动元素、绝对定位（固定定位）元素的都不会触发外边距合并的问题

绝对定位（固定定位）会完全压住盒子
浮动元素不同 只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

# 定位叠放次序z-index

  • 在使用定位布局时，可能会出现定位重叠的情况，此时可以使用z-index来控制盒子的前后次序（z轴）
  • 数值可以是正整数 负整数或0 默认是auto 数值越大，盒子越靠上
  • 如果数值相同，按照书写顺序，后来者居上
  • 数字后面不能加单位
  • 只有定位的盒子才有z-index属性

# 浮动

# 传统网页布局的三种方式：普通流、浮动、定位

标准流：页面标签按照规定好的默认方式排列
标准流是最基本的网页布局方式

# 为什么需要浮动

  1. 让多个块级的盒子水平排列到一行
  2. 虽然转换为行内块元素可以实现一行显示 但是他们之间会有大的空白缝隙 很难控制

# 浮动定义

float属性用于创建浮动框 将其移动到一边 直到左边缘或右边缘及包含块 或另一个浮动框的边缘

# 网页布局第一准则：

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

# 浮动的特性

加入了浮动的元素会具有很多特性

  1. 浮动元素会脱离文档流（脱标）
  2. 浮动元素会一行内显示并且元素顶部对齐
  3. 浮动元素会具有行内块元素的特性
  4. 行内元素如果有了浮动，则不需要转换块级和行内块元素 可以直接给宽度和高度
  5. 如果块级盒子没有设置宽度 默认宽度和父级一样宽 但是添加浮动后 他的大小根据内容来决定

    浮动布局注意点

    • 浮动元素经常和标准流父级搭配使用
    • 浮动经常和标准流的父盒子搭配使用,先用标准流的父元素排列上下位置 之后内部子元素采取浮动排列左右位置
    • 如果一个元素浮动了 理论上其余兄弟元素也要浮动,浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流

# 浮动布局练习

# 案列1

# 案列1示例代码

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .maxbox li {
        list-style: none;
    }

    .maxbox {
        width: 1226px;
        height: 285px;
        background-color: #ccc;
        margin: 0 auto;
    }

    .maxbox li {
        float: left;
        width: 296px;
        height: 285px;
        background-color: pink;
        margin-right: 14px;
    }

    /* 这里必须写.maxbox .end注意权重问题 */
    .maxbox .end {
        margin-right: 0px;
    }

    .maxbox li:hover {
        box-shadow: 0px 20px 20px 1px rgba(0, 0, 0, .3);
    }
</style>
<div class="maxbox">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li class="end">4</li>
    </ul>
</div>

# 案例二

# 案列二示例代码


<style>
    .maxboxFlot {
        width: 100%;
        height: 615px;
        background-color: #ccc;
    }

    .maxboxFlot > div {
        float: left;
    }

    .maxboxFlot .left {
        width: 234px;
        height: 100%;
        background-color: red;
    }

    .maxboxFlot .right {
        width: 992px;
        height: 100%;
        background-color: pink;
    }

    .maxboxFlot .right > div {
        width: 234px;
        height: 300px;
        float: left;
        background-color: black;
        margin-left: 14px;
        margin-bottom: 14px;
        color: #fff;
    }
</style>
<div class="maxboxFlot">
    <div class="left"></div>
    <div class="right">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</div>

# 清除浮动

  1. 清除浮动的本质就是清除浮动所带来的影响
  2. 如果父盒子有高度就不需要清除浮动
  3. clael：（both清除左右两边的浮动 left清除左边的浮动 right清除右边的浮动）

# 清除浮动的方法

清除浮动的策略是闭合浮动

  1. 父级添加overflow属性
  2. 父级添加after伪元素
  3. 父级添加双伪元素
  4. 额外标签法 也称为隔墙法 是w3c推荐的方法

# 盒子阴影

# 盒子阴影示例代码


<style>
    .boxShodw {
        width: 200px;
        height: 200px;
        /* 盒子阴影 box-shadow（水平距离 垂直距离 模糊距离 阴影尺寸 阴影颜色 inset） */
        transition: all .1s;
        background-color: pink;
    }

    .boxShodw:hover {
        box-shadow: 0px 10px 10px -4px rgba(0, 0, 0, .3);
    }
</style>
<div class="boxShodw"></div>

# 列表标签

# 无序列表

无序列表 <ul></ul> 无序列表里只能跟li

# 无序列表代码示例


<ul>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
    <li>我是无序列表</li>
</ul>

# 有序列表

有序列表 <ol></ol> 无序列表里只能跟li

# 有序列表代码示例


<ol>
    <li>我有序列表</li>
    <li>我有序列表</li>
    <li>我有序列表</li>
    <li>我有序列表</li>
</ol>

# 自定义列表

自定义列表

适合用于对术语或名词进行解释和描述
dl里只能包含dt或dd

# 自定义列表代码示例


<dl>
    <dt>自定义列表标题</dt>
    <dd>我是对标题的描述</dd>
    <dd>我是对标题的描述</dd>
</dl>

# 文本格式化标签

# 文本格式化标签代码示例

 <strong>我是加粗文字</strong><b>或者</b><br>
<em>我是倾斜文字</em><i>或者</i><br>
<del>我是删除线文字</del><s>或者</s><br>
<ins>我是下划线文字</ins><u>或者</u>

# 文字围绕浮动元素

# 文字围绕浮动元素代码示例


<style>

    .boxFlot {
        width: 300px;
        height: 70px;
        padding: 5px;
        background-color: pink;
    }

    .boxFlot .sun {
        float: left;
        height: 70px;
        margin-right: 5px;
    }

    .boxFlot .sun img {
        height: 100%;
    }
</style>

<div class="boxFlot">
    <div class="sun">
        <img src="/10.jpg" alt="">
    </div>
    <p>
        浮动布局注意点
        1.浮动经常和标准流的父盒子搭配使用
    </p>
</div>

# 文字阴影

# 文字阴影示例

你是阴影，我是火影

# 文字阴影代码示例


<style>
    div {
        color: pink;
        font-size: 20px;
        /* 文字阴影 text-shadow（水平距离 垂直距离 模糊距离 模糊颜色） */
        text-shadow: 5px 5px 6px rgba(0, 0, 0, .3)
    }
</style>
<div>你是阴影，我是火影</div>

# css盒子模型

# border属性

属性值依次为 颜色、边框类型 边框粗细值 示例：border: 5px solid #000;
solid实线边框 dashed虚线边框 dotted点线边框

# padding属性

示例：
padding：5px;一个值代表上下左右内边距都有5px的像素 padding：5px，10px两个值代表上下有5像素，左右有10像素 padding：5px 10px 5px三个值代表上内边距5像素 左右内边距10像素 下内边距5像素 padding：5px 10px 20px 30px四个值代表上有5像素 右有10像素 下有20像素 左有30像素

# 外边距合并

嵌套块元素垂直外边距塌陷
对于两个嵌套关系（父子关系）的块元素 父元素有外边距的同时子元素也有外边距,此时父元素会塌陷较大的外边距值

# 解决方案

  1. 可以为父元素定义上边框
  2. 可以为父元素加上内边距
  3. 可以为父元素添加overflow hidden
  4. 还有其他方法 比如浮动、固定、绝对定位的盒子不会有塌陷问题

# 清除内外边距

*{margin:0,padding:0}这句话也是我们写css的第一行代码
行内元素兼顾兼容性，尽量只设置左右内外边距 不要设置上下内外边距 但是转换为块级或行内块元素就可以

# 盒模型总结

# 布局为什么要用不同的盒子 我只想用

标签都是有语义的 合理的地方要用合理的标签 比如产品标题就用h 大量文字段落就用p

# 为什么用那么多的类名

类名就是给每个盒子都起了一个名字 可以更好的找到这个盒子 选取盒子更加容易 后期维护也更加方便

# 用margin还是用padding

大部分情况下两者都会混用 两者各有缺点 但是根据实际情况 盒子与盒子之间的距离用margin

# css盒子模型示例代码


<style>
    div {
        width: 200px;
        height: 200px;
        border: 5px solid #000;
        border-collapse: collapse;
    }
</style>
<div></div>

# css用户界面样式

用户界面样式包括

  1. 更改用户鼠标样式
  2. 表单轮廓
  3. 防止表单域进行拖拽

# 鼠标样式 cursor

cursor:pointer小手|default默认|move移动|text文本|not-allowed禁止

# 表单轮廓线

outline：none

# 防止拖拽文本域

resize：none

# 2D转换

2D转换（transform）可以实现元素的位移、旋转、缩放等效果

  1. 移动：translate
  2. 旋转：rotate
  3. 缩放：scale

注意

transform最大的优点是不会影响其他的元素 里面的宽度是可以跟百分比单位的，
移动的距离基于自身的宽度和高度 对于行内元素是无效的
rotate里面跟度数 单位是deg
角度为正时。顺时针，角度为负时逆时针
默认旋转中心点是元素的中心点

# 2D转换中心点

transform-origin：（x y）后面的x y用空格隔开
xy默认为50%
可以给xy设置像素或方位名词（top bottom left right center）

# 2D转换之缩放scale

transform：scale（x，y）其中x和y用逗号分割
transform：scale（1，1）宽高都放大一倍，相当于没有放大
transform：scale（2，2）宽高都放大两倍，
transform：scale（2）只写一个参数 第二个参数和第一个一样
transform：scale（0.5，0.5）缩小
sacle缩放的最大优势，可以设置转换中心点的缩放 默认以中心点缩放 并且不影响其他盒子

# 2D转换综合性写法

同时使用多个转换，其格式为： transform：translate rotate scale
其顺序会影响转换效果 先旋转会改变其坐标轴的方向
当同时有位移和其他属性时，应把位移放在最前面

# css3D转换

  1. 3D位移 translate3d(x,y,z)
  2. 3D旋转 trtate3d(x,y,z)
  3. 透视 perspective
  4. 3D呈现transform-style

# css3D转换示例代码


<style>
    body {
        /* 透视写到被观察元素的父盒子上面 */
        perspective: 500px;
    }

    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        transition: all 1s;
    }

    .box:hover {
        /* transform: translateX(100px) translateY(100px) translateZ(100px); */
        /* 1.translate沿着z轴移动 后面的单位通常时px */
        /* 2.translateZ(100px)向外移动100px */
        /* 4.简写方法 */
        /* transform: translate3d(x,y,z); */
        transform: translate3d(400px, 100px, 200px);
        /* 5.里面的xyz是不能省略的 如果没有则写0 */
    }

    .box1 {
        /* 3D旋转 */
        width: 200px;
        height: 100px;
        background: url(./img/4.jpg) no-repeat;
        background-size: 200px;
        transition: all 1s;
        margin: auto;
    }

    .box1:hover {
        /* transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); */
        /* 简写显示 */
        transform: rotate3d(10, 0, 0, 45deg);
    }

    .box2 {
        perspective: 500px;
        position: relative;
        width: 200px;
        height: 200px;
        margin: auto;
        transition: all 1s;
        /* 3D呈现transform-style
        1.代码写给父级，但影响的是子盒子 */
        transform-style: preserve-3d;
    }

    .box2 div {
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: plum;
    }

    .box2 div:last-child {
        background-color: powderblue;
        transition: all 1s;
        transform: rotateX(60deg)
    }

    .box2:hover {
        transform: rotateY(60deg);
    }

</style>
<div class="box"></div>
<div class="box1"></div>
<div class="box2">
    <div></div>
    <div></div>
</div>

# 元素的显示与隐藏

# 显示与隐藏方法

  1. display 显示与隐藏
  2. visiblity 显示与隐藏
  3. overflow 溢出显示隐藏

# display

主要作用是设置一个元素如何显示

  • display:none 隐藏对象 不再占有原来的位置
  • display:block 转换位块级元素/显示元素

# visiblity (可见性)

  • visiblity:hidden 隐藏元素 继续占有原来的位置
  • visiblity:;visible 显示元素

# overflow (溢出)

主要是对内容溢出进行操作

  • overflow:visible 溢出部分显示
  • overflow:hidden 溢出部分隐藏
  • overflow:scroll 溢出部分显示滚动条 不溢出也显示滚动条
  • overflow:auto 在需要的时候添加滚动条

# css3动画的基本使用

# 定义动画

页面一打开，一个盒子就从左边走到右边
form 和 to等同于0%和100%

  1. 可以做多个状态的变化
  2. 里面的百分比要是整数
  3. 里面的百分比就是时间的划分

# 示例代码：

  @keyframes move {
      0% {
          transform: translateX(0);
      }

      100% {
          transform: translate(500px, 0);
      }
  }

# animation属性使用动画

  • animation-name: move;:元素使用动画
  • animation-duration: 3s;:动画持续时间
  • animation-timing-function: ease-in-out;:动画速度曲线
  • animation-delay: 1s;:定义动画延迟时间
  • animation-iteration-count: 3;:规定动画播放的次数 默认为1
  • animation-direction: alternate;:是否反方向播放
  • animation-fill-mode: forwards;:规定动画结束时的状态

# 鼠标经过停止动画

 div:hover {
    /* 鼠标经过div让动画停止 */
    animation-play-state: paused;
}

# 动画简写属性

animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态;
示例：animation: fist 1s ease infinite normal;

# css过度

# transition属性

transition:要过度的属性 花费时间 运动曲线 何时开始

# 过度属性代码示例

 .box {
    transition: height 0.5s ease-in-out, width 0.3s ease-in-out;
}

# CSS3图片背景

# 插入背景图片

示例：background-image: url(img/3.jpg);

# 背景平铺

  • 可以使用background-repeat属性
  • repeat（平铺） no-repeat（不平铺）repeat-x（x轴平铺） repeat-y（y轴平铺） 示例：background-repeat: no-repeat

# 背景图片位置

background-position（x，y 或方位名词）属性可以改变图片在背景中的位置
示例：background-position: top center;
如果只写一个参数 第二个参数默认居中对齐

# 背景图像固定（背景附着）

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动
背景图像固定效果后期可以制作视差滚动效果
属性：scroll（背景图像是随对象内容滚动）fixed（背景图像固定）
示例：background-attachment: fixed;

# 背景复合性写法

顺序 背景颜色、背景图片地址、背景平铺、背景图像滚动、背景图片位置
示例：background: url(img/3.jpg) no-repeat fixed -300px -100px;

# 流式布局

# 实现方式

  • 通过写入百分比的方式实现流式布局
  • 通过定义最大和最小范围来保护内容
 section div {
    width: 50%;
    max-width: 980px;
    min-width: 320px;
}

# 移动端css初始化

  a {
    /* 解除a标签高亮显示 */
    -webkit-tap-highlight-color: transparent;
}

img,
a {
    /* 静止长按时弹出菜单 */
    -webkit-touch-callout: none;
}

input {
    /* 清除ios端按钮默认样式 */
    -webkit-appearance: none;
}

# flex弹性盒布局原理

任何一个容器都可以指定flex布局

注意

  1. 当我们为父盒子指定flex布局后,子元素的float clear vertical-align属性将失效
  2. 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
  3. 它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

# 弹性盒基本属性

  • flex-direction 设置主轴的方向
  • flex-wrap 设置子元素是否换行
  • justify-content 设置主轴上的子元素排列方式
  • align-content:设置侧轴上主元素的排列方式(多行)
  • align-items设置侧轴上主元素的排列方式(单行)
  • flex-flow 复合属性同时设置flex-direction和flex-wrap

# display: flex

定义弹性盒，默认使元素排列在一行

  • 默认主轴方向为x轴 水平向右
  • 默认侧轴方向为y轴 水平向下

# flex-direction: row;

设置主轴的方向 添加在父级

  • row 默认从左到右
  • row-reverse：主轴为水平方向，起点在右端。翻转
  • column：主轴为垂直方向，起点在上沿。
  • column-reverse：主轴为垂直方向，起点在下沿。翻转

# justify-content

设置主轴上的子元素排列方式 添加在父级

  • flex-start（默认值）：左对齐
  • flex-end：右对齐
  • center： 居中
  • space-between：两端对齐，项目之间的间隔都相等。
  • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

# flex-wrap

设置子元素是否换行

  • nowrap（默认）：不换行。如果装不开会缩小子元素的宽度
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。

# align-items

设置侧轴上主元素的排列方式(单行)

  • flex-start：交叉轴的起点对齐。
  • flex-end：交叉轴的终点对齐。
  • center：交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 拉升,子盒子不能加高度

# align-content

设置侧轴上主元素的排列方式(多行)

  • flex-start：与交叉轴的起点对齐。
  • flex-end：与交叉轴的终点对齐。
  • center：与交叉轴的中点对齐。
  • space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch（默认值）：轴线占满整个交叉轴。

# flex子项布局常见属性

  • flex 子项慕占的份数
  • align-self 控制项目在子项上的排列方式
  • order 属性定义了子项的排列顺序

# 网格布局基本原理

# 基本概念

为容器指定display:grid 开启网格布局

  1. 采用网格布局的父元素盒子 称为“容器”（container）
  2. 容器内部采用网格定位的子元素 称为项目(item)
  3. 网格内子元素可以是块级元素 也可以是行内元素

    注意

    块级元素网格布局,设置display: grid;属性后所有盒子变为块级元素
    行内元素网格布局 设置display: inline-grid;属性后所有盒子变为行内元素

# grid-template-columns设置列

  • grid-template-columns:50px 100px 200px;
  • grid-template-columns:1fr 2fr 1fr;fr单位是网格布局的专属单位 表示所占份数
  • auto关键字 自动沾满盒子剩余部分
  • repeat函数 解决重复写值 repeat(重复的次数，每列所占宽度)
  • 通过将auto-fill与repeat() ，我们告诉Grid可以自动计算出多少个项目可以容纳在容器大小内，而无需进行任何其他计算。
  • minmax定义一个大小范围，该范围大于或等于min且小于或等于max 。
  • auto-fill是一个特殊值，设置以后，只要网格装得下，浏览器就会尽可能生成多的轨道，并且不会和minmax的限制产生冲突。

# grid-template-rows设置行

grid-template-rows: 1fr 2fr 1fr ;

# grid-column-gap设置列与列之间的空隙

grid-column-gap: 10px;

# grid-row-gap设置行与行之间的空隙

grid-row-gap: 30px;

# gap设置盒子中间空隙

gap: 20px;

# justify-items控制项目在水平上的对齐方式

justify-items: end;

# align-items控制项目在垂直上的对齐方式

align-items: start;

# 两个属性的简写形式

place-items: 水平 垂直; place-items: center center;

# 示例：控制整体网格布局在容器中的对齐方式

.box {
    /* 水平对齐 */
    justify-content: center;
    /* 垂直对齐 */
    align-content: center;
    /* 简写形式 */
    place-content: center center;
}

# 网格布局区域命名

给某个子元素设置单独的样式

  • 命名可以重复 如某个单元格不需要命名则用.表示
  • 重复命名的区域相当于合并单元格

# 网格布局区域命名代码示例

.box {
    grid-template-areas: "a b c c" 
                        "a b c c" 
                        "a b f e"
}

# 媒体查询

@media 媒体类型 关键字 媒体特性

# 媒体类型

all（所有）print（打印机）scree（用于电脑屏幕 平板电脑 智能手机）

  @media screen and (max-width: 800px) {
    body {
        background-color: rosybrown;
    }
}

@media screen and (min-width: 800px) {
    body {
        background-color: red;
    }
}

# rem基础

rem单位

  • rem是相对于父元素的字体大小来说的
  • rem是相对于html元素的字体大小
  • rem的优势就是可以通过修改html里面的文字大小来改变页面中元素的大小可以主题控制

# vw和vh

  • vw和vh是一个相对单位
  • vw是视口宽度单位
  • vh是视口高度单位
  • 相对视口的尺寸计算结果
  • 1vw=1/100视口宽度
  • 1vh=1/100视口高度
上次更新: 3/31/2023, 3:36:19 PM

其他技巧 →