居中布局

• Centering in CSS: A Complete Guide：非常全面的居中定位博客，包括各种情况下的水平居中，垂直居中和水平垂直居中方案。有展示示例及相应的 HTML 和 CSS 代码

文章大致结构：

• 水平居中

• 对于行内元素(inline)/内部是文字的块级元素/行内块元素(inline-block)：给父元素设置text-align: center;

• 对于块级元素(block)：设置宽度且 marigin-left 和 margin-right 是设成 auto

• 对于多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;；或者使用 flex 布局。

• 对于任何元素，父元素设置flex,自己设置margin：auto。或者父元素设置justify-content: center;

• 垂直居中

• 对于行内元素(inline)

• 单行：设置上下 pandding 相等；或者设置 line-height 和 height 相等

• 多行：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局；或者使用伪元素

• 对于块级元素(block)：下面前两种方案，父元素需使用相对布局

• 已知高度：子元素使用绝对布局 top: 50%;，再用负的 margin-top 把子元素往上拉一半的高度

• 未知高度：子元素使用绝对布局 position: absolute; top: 50%; transform: translateY(-50%);

• 使用 Flexbox：选择方向，justify-content: center;

• 水平垂直居中

• 定高定宽：

• 先用绝对布局 top: 50%; left: 50%;，再用和宽高的一半相等的负 margin 把子元素回拉；

• 先用绝对布局四个方向的偏移量都设置为0，然后设置margin：auto;

• 先用绝对定位，设置偏移量top: calc(50% - 自身宽度的一半px); left: calc(50% - 自身宽度的一半50px);

• 高度和宽度未知：

• 先用绝对布局 top: 50%; left: 50%;，再设置 transform: translate(-50%, -50%);

• 通过给父元素设置line-height等于height,tex-aligin: center，子元素设置display:inline-block,由于text-aligin会被继承，所以需要将子元素设置text-aligin:left来改变其水平显示。

• 使用 Flexbox：justify-content: center; align-items: center;

• 使用子元素绝对定位并且规定宽高，父元素相对定位。并且设置left, right, top, bottom为0.margin设置为auto;

width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;

writing-mode 属性

文本水平或垂直排布以及在块级元素中文本的行进方向。

属性值：

• horizontal-tb：对于左对齐(ltr)脚本，内容从左到右水平流动。对于右对齐(rtr)脚本，内容从右到左水平流动。下一水平行位于上一行下方。

• vertical-rl： 对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行左侧。

• vertical-lr：对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行右侧。

• sideways-rl：对于左对齐(ltr)脚本，内容从左到右水平流动。对于右对齐(rtr)脚本，内容从右到左水平流动。所有字形（即使是垂直脚本中的字形）都朝向右侧。

• sideways-lr：对于左对齐(ltr)脚本，内容从上到下垂直流动。对于右对齐(rtr)脚本，内容从下到上垂直流动。所有字形（即使是垂直脚本中的字形）都朝向左侧。

响应式布局

media属性

@media all and (min-width: 100px) and (max-width: 500px) {
  选择器 {
    符合条件的样式；
  }
}

清除浮动

上下排列

• 直接clear：both;即可

嵌套排列（父元素高度塌陷，影响后面的元素布局）

• 在父元素内最后加上一个空子元素，样式位clear：both；

• 缺点： 多设置一个无用的标签

• 将父容器设置固定的高度

• 缺点： 高度设置死了，不利于以后维护

• 父元素浮动，后面的元素设置clear：both；

• 这样虽然可以，但是影响嵌套元素的布局

• 父元素设置overflow：hidden / auto / scroll

• 缺点：如果子元素想要溢出，会受到影响

• 父元素设置display: inline-block / flex / table-cell

• 会影响到后面的元素

• 使用after伪类

• 注意：clear: both只作用于块级元素，内联元素不起作用，行内块元素也不行

父:after {
  content: "";
  display: block;
  clear: both;
}

BFC

触发BFC的条件

• 根元素，即HTML元素

• float的值不为none

• overflow的值不为visible(hidden, scroll, auto)

• display的值为inline-block、table-cells、table-caption

• position的值为absolute或fixed

bfc的特性

1. 内部box会在垂直方向，一个接一个地放置。

2. Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。解决：margin的叠加。

3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）

4. 形成了BFC的区域不会与float box重叠。解决：实现 两栏布局。

5. 计算BFC高度时，浮动元素也参与计算。解决：清除浮动。

作用

• BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。

解决问题

• 在同一个bfc下元素margin的叠加问题

• 只将margin设置在一个元素上

• 将这两个元素分别放在不同的bfc下，利用以上条件触发bfc

• 添加省略号

width: 必须;
white-space: nowrap//不让内容折行
overflow: hidden;//溢出隐藏
text-overflow: ellipsis;//添加省略号

表格

display

• table：指定对象作为块元素级的表格。类同于html标签（CSS2）

• 可以设置margin和padding

• inline-table：指定对象作为内联元素级的表格。类同于html标签

（CSS2）

• 可以设置margin和padding，margin负值也可以

• table-caption：指定对象作为表格标题。类同于html标签

（CSS2）

不可设置margin和padding，border也不会显示

• table-row-group：指定对象作为表格行组。类同于html标签

（CSS2）

• table-column：指定对象作为表格列。类同于html标签

（CSS2）

• table-column-group：指定对象作为表格列组显示。类同于html标签

（CSS2）

• table-header-group：指定对象作为表格标题组。类同于html标签

（CSS2）

• table-footer-group：指定对象作为表格脚注组。类同于html标签

（CSS2）

结构性伪类选择器

• nth-of-type()表示同一类型的元素

• nth-child()表示全部元素

• （）内数字，也可以是2n(表示偶数行)，2n+1(表示奇数行)

css3背景样式

background-size:

• 只作用于引入的背景图片，不作用于背景颜色

• 写在background-image: url()后面才生效

• ..px ..px(宽 高) /

• cover(覆盖)背景图片可能显示不完全，容器完全覆盖

• contain(包含)图片完整，容器可能有空隙

• 当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值:

• 如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为auto。

• 如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。

background-origin(背景图片填充的位置):

• 只作用于引入的背景图片，不作用于背景颜色

• padding-box(默认)：即在padding区域填充

• border-box：在border处填充

• content-box：在content处填充

• 注意：当使用 background-attachment为fixed时，该属性将被忽略不起作用。

background-clip：(背景的截取位置)

• 这里背景图片和颜色都会起效果

• border-box(默认)：边框及边框以内都会有背景显示

• padding-box：padding区域即内容区域有背景显示

• content-box：只用内容区域有背景显示

• text（为测试api,不可以使用）：表示剪贴在文字上。如果想要做出剪贴效果，我们需要设置文字颜色为**transparent**

background-position: 背景图片的位置

background-position: right 50px bottom 70px;//这个表示在右下方，然后距离右边50px,距离下边70px

• 如果不加right等单词，只写数字偏移，他的参考点是左上角。

• 一个 position 定义一组 x/y 坐标（相对于一个元素盒子模型的边缘），来放置这个项目 （原文为 item） 。它可以被定义为一个值或者两个值。如果被定义为两个值，那么第一个值代表水平位置，第二个代表垂直垂直位置。如果只指定一个值，那么第二个值默认为 center。

background-attachment：背景图片如何随从文本

• scroll：表示随着滚动条滚动。此关键属性值表示背景相对于元素本身固定， 而不是随着它的内容滚动（对元素边框是有效的）。

• fixed: 表示固定位置不变。此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。

• local：表示跟随文字滚动。此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。

background-repeat: 背景图片的重叠样式。

• space: 图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间。即容器可能不会被全部覆盖。

• round：图像会被压缩或者扩展来填满整个容器。这一点需要看容器的大小。

background-image: 主要看css3渐变。可以设置多个背景图片，并且先设置的最贴近用户

注意

<style>
    div {
      width: 100px;
      height: 100px;
      /* 这样是错误的， 只能设置一个背景颜色, 并且只能是最后一个属性值 */
      /* background: red, blue; */
      /* background: red, url('https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/mirror-assets/171de8ad450b4f25c89~tplv-t2oaga2asx-image.image'); */
      background: url('https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/mirror-assets/171de8ad450b4f25c89~tplv-t2oaga2asx-image.image'), red;
    }
  </style>

疑问：

• 为什么渐变可以通过background-size改变大小，他不是背景颜色吗？而且他还可以在background-image上面设置background-size呢？

• 笨，虽然是颜色，但是他的background-image的属性值，所以可以设置background-size，改变的是整体的渐变背景大小。

• 为什么可以利用background-position设置动态渐变？

• 因为我们可以结合完全平铺的方式，虽然改变了位置，还是会完全填充的。我当时忽略了背景完全平铺的方式，认为改变了位置，应该会空出一部分空间的。

<style>
    div {
      width: 500px;
      height: 20px;
      border: 1px solid black;
      background-size: 16px 16px;
      //这里的0表示两侧的渐变颜色是突变，而非平缓过度
      background-image: linear-gradient(-45deg, #D9CFBB 25%, #C3B393 0, #C3B393 50%,
          #D9CFBB 0, #D9CFBB 75%, #C3B393 0);
      animation: panoramic 20s linear infinite;
    }
    @keyframes panoramic {
      to {
        background-position: 200% 0;
      }
    }
  </style>
  <div></div>

渐变

linear-gradirent线性渐变

• 渐变颜色后指定的值都是颜色结束的位置。但是颜色会从前一个颜色指定的位置过渡到后一个颜色指定的位置。

• 可以只指定位置而不指定颜色，也可以指定颜色而不指定位置。

• 默认渐变方向是从上到下

• 可以利用关键字left，bottom，top，right结合 to 来指明渐变方向，也可以使用角度指明渐变方向

• 0deg表示从下边开始，正值表示顺时针，负值表示逆时针
  也就是说， background-image: linear-gradient(to top, #7A88FF, #7AFFAF);

等价于： background-image:linear-gradient(0deg, #7A88FF, #7AFFAF);

• 颜色后的数字，表示过度的范围。每两种颜色设置的数值就是该范围，该范围是缓性的，不是突变的。

//表示0~20为#66CC99色，20~30为#6666CC，30~40,40~100都为#66cc99
background-image: linear-gradient(45deg, #66CC99 20px, #6666CC 30px, #66CC99 40px)

radial-gradirent 径向渐变

• 渐变形状(默认是椭圆) at 渐变开始的中心位置，颜色 颜色范围，...

<style>
    div {
      width: 200px;
      height: 120px;
      /* 注意这里20~22是缓性渐变，而不会立刻从20以后就开始是#b4a078 */
      background-image: radial-gradient(circle at 100px -8px, transparent 20px, #b4a078 22px);
    }
  </style>
  <div></div>

repeating-linear-gradient 重复渐变

div {
  background: repeating-linear-gradient(-45deg, red 0 5px, blue 5px, 10px);
}

注意

• 要在渐变中包含一个实心的非过渡颜色区域，请包含颜色起止点的两个位置。颜色起止点可以有两个位置，这相当于两个连续颜色在不同位置具有相同的颜色起止点。颜色将在第一个颜色起止点时达到完全饱和，保持该饱和度到第二个颜色起止点，并通过相邻颜色起止点的第一个位置过渡到相邻颜色起止点的颜色。

.multiposition-stops {
 // 方法一
   background: linear-gradient(to left,
       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
 // 方法二
   background: linear-gradient(to left,
       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
}

动态渐变

• 只需要认真思考

<style>
    div {
      height: 600px;
      width: 600px;
      animation: gradientChange 2s infinite alternate;
      background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BFF88 95%);
      /* background-repeat: no-repeat; */
      /* 这里确实移动了，但是仔细想一想，如果不放大背景，他会出现平铺的背景，我们只需要视觉上感觉是颜色渐变，所以放大后，我们移动背景位置，视觉上感觉颜色在改变，其实是渐变颜色而已，只不过在不同位置显示颜色 */
      background-size: 200% 200%;
    }
    @keyframes gradientChange {
      0% {
        background-position: 0 100%;
      }
      /* 50% {
        background-position: 50% 50%;
      } */
      100% {
        background-position: 100% 0;
      }
    }
  </style>
  <div></div>

outline（style,width,color的简写）

与border的区别

• 轮廓不占据空间，绘制于元素内容周围。

div {
      width: 100px;
      height: 100px;
      box-sizing: border-box;
      border: 5px solid black;
      outline: 2px solid red;//这里的2px不占空间
    }
 <div></div>

• 根据规范，轮廓通常是矩形，但也可以是非矩形的。

• outline-color：轮廓的颜色

• outline-style: 轮廓的样式

• 元素轮廓是绘制于元素周围的一条线，位于border的外围，使元素突出

• none 无轮廓 (outline-width 为0).

dotted 轮廓为一系列点.

dashed 轮廓为一系列短线.

solid 轮廓为实线.

double 轮廓为两根有空隙的线. outline-width 为线与空间的总和.

groove 轮廓呈凹下状.

ridge 与groove相反: 轮廓呈凸起状.

inset 轮廓呈嵌入状.

outset 与inset相反: 轮廓呈突出状.

• outline-width：轮廓的宽度

• ..px、rem / thin(细) / medium (中) / thick(密)

• outline-offset 用于设置 outline 与一个元素边缘或边框之间的间隙。

• ..px(正负都可)

利用box-shadow做一些事情

• box-shadow是会紧贴border-radius圆角边的，所以我们可以做一个内角盒子

• 描边outline并不会与圆角边border-radius贴合

<style>
    div {
      background: #fff;
      width: 100px;
      height: 100px;
      border-radius: 10px;
      outline: 5px solid black;
      box-shadow: 0 0 0 4px black;
    }
  </style>
  <div></div>