526互联

css笔记

发布时间 2023-03-22 21:16:08作者: 少年と山

水平布局

这段时间编写静态页面，学习了几种水平布局，其中有不小的差异和注意事项，特此记录汇总一下。

1. display: inline-block

将元素修改为行内块元素，可以在不脱离文档流的情况下实现水平布局，且兼容性极佳。
但是存在元素上下、左右边距不贴合的问题，解决方法如下：

  • 设置父元素font-size:0，可解决左右边距不对齐（两个div元素之间的换行符会被浏览器默认占一个字节）
  • 设置子元素vertical-align:top，可解决上下边距不对齐

2. float

设置元素浮动，使其向父元素的左侧或右侧移动，浮动的特点如下：

  • 浮动元素会完全脱离文档流，不再占据文档流中的位置
  • 浮动元素默认不会从父元素中移出
  • 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
  • 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
  • 浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高

存在的问题：高度塌陷

  • 在浮动布局中，父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流。
  • 子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失，父元素的高度丢失后，其下的元素会自动上移，导致页面布局混乱

解决方式一：BFC（Block Formatting Context）块级格式化环境

BFC是CSS中的一个隐含属性，可以为一个元素开启BFC，开启BFC该元素会变成一个独立的布局区域。

  • 元素开启BFC后的特点：
    1. 开启BFC的元素不会被浮动的元素所覆盖
    2. 开启BFC的元素子元素和父元素外边距不会重叠
    3. 开启BFC的元素可以包含浮动的子元素
  • 可以通过一些特殊方式来开启元素的BFC：
    1. 设置元素的浮动（不推荐）
    2. 将元素设置为行内块元素（不推荐）
    3. 将元素的overflow设置为一个非visible的值（常用：overflow:hidden）

解决方式二：clear

作用：清除浮动元素对当前元素所产生的影响

可选值：

  • left 清除左侧浮动元素对当前元素的影响
  • right 清除右侧浮动元素对当前元素的影响
  • both 清除两侧中最大影响的那侧

原理：设置清除浮动后，浏览器会自动为元素添加一个上外边距，以使其不受其他元素的影响

清除浮动的究极形态

此方法影响最小，几乎没有缺陷。父元素加上下列buff:

.clearFix::after,
.clearFix::before {
    content: '';
    display: table;
    clear: both;
}

不使用display:block，因为它也不能解决问题。应该是因为table前后自带换行

3. display: flex

flex（弹性盒，伸缩盒），是CSS的又一种布局手段，主要用来替代浮动完成页面的布局。flex可以使元素具有弹性，让元素可以跟随页面的大小改变而改变。父元素设置display: flex即可完成水平布局。但兼容性较差，IE要求11.0.

父元素的六个属性以控制子元素显示方式：

  1. flex-direction 设置主轴对齐方式，默认row
    • column 垂直堆叠flex项目，从上到下
    • column-reverse 垂直堆叠flex项目，从下到上
    • row 水平堆叠 flex 项目，从左到右
    • row -reverse 水平堆叠 flex 项目，从右到左
  2. flex-wrap 子元素换行的方式，默认nowrap
    • nowrap 值规定将不对 flex 项目换行
    • wrap 值规定 flex 项目将在必要时进行换行
    • wrap-reverse 值规定如有必要，弹性项目将以相反的顺序换行
  3. flex-flow 是flex-direction和flex-wrap的简写 默认row nowrap（flex-flow: row wrap;）
  4. justify-content 子元素的对齐方式 默认flex-start 左对齐
    • center 值将 flex 项目在容器的中心对齐
    • flex-start 值将 flex 项目在容器的开头对齐
    • flex-end 值将 flex 项目在容器的末端对齐
    • space-around 值显示行之前、之间和之后带有空格的 flex 项目
    • space-between 值显示行之间有空格的 flex 项目
  5. align-items 侧轴的对齐方式 默认stretch
    • center 值将 flex 项目在容器中间对齐
    • flex-start 值将 flex 项目在容器顶部对齐
    • flex-end 值将弹性项目在容器底部对齐
    • stretch 值拉伸 flex 项目以填充容器
    • baseline 值使 flex 项目基线对齐
  6. align-content 用于对齐弹性线 默认stretch
    • space-between 值显示的弹性线之间有相等的间距
    • space-around 值显示弹性线在其之前、之间和之后带有空格
    • stretch 值拉伸弹性线以占据剩余空间
    • center 值在容器中间显示弹性线
    • flex-start 值在容器开头显示弹性线
    • flex-end 值在容器的末尾显示弹性线

设置在子元素项目的六个属性：

  1. order 子元素排列的位置 ，默认先后顺序 （order 值必须是数字，默认值是 0）
  2. flex-grow 放大比例，默认为0
  3. flex-shrink 缩小比例，默认为1
  4. flex-basis 规定 flex 项目的初始长度（在分配多余空间之前，项目占据的主轴空间）
  5. flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
  6. align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

使用 flex: auto 使子元素自动撑开，如果子元素高度大于父元素剩余空间，需要给子元素加上 overflow:hidden

文字不转行

white-space: nowrap;

改变切图颜色

img {
    filter: drop-shadow(0 0 0 #ccc)
}
// offsetX offsetY blur-radius 神器啊 必要时将原图片隐藏

旋转

.loading-img {
    animation: loading-rotate 2s infinite linear;
}
@keyframes loading-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}