html&css笔记总结

用户2277637747046
146 阅读21分钟

html 与 html5 区别？

  1. html5 文档声明更简单。html5 不区分是否是严格模式还是传统模式，而 html 声明时有严格、传统、框架模式；

  2. html5 新增了语义标签。html 没有语义化标签，所以 html5 的代码结构更清晰，并且提高了代码可读性； 如：header、nav、footer、main、article、section 等。

  3. html5 新增了 canvas 画布。html 无法在网页上动态的绘制图片，而 html5 新增了 canvas 画布，canvas 绘制的图片放大后会失真，而 SVG 可绘制矢量图形。

html 语义化理解

HTML5 的语义化指的是合理正确的使用语义化的标签来创建页面结构。【正确的标签做正确的事】

常用标签：header nav main article section aside footer

语义化优点

  • 在没 CSS 样式的情况下，页面整体也会呈现很好的结构效果
  • 代码结构清晰，易于阅读，
  • 利于开发和维护 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
  • 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

html5 新特性？

  1. Canvas、SVG -- 用于绘画的元素，canvas 绘制的图片会失真而 SVG 绘制的不会失真。
  2. video、audio -- 用于播放视频和音频的媒体。
  3. Drag 、Drop -- 用于拖放的 。
  4. Geolocation -- 用于获取地理位置。
  5. localStorage、sessionStorage -- 用于本地离线存储。
  6. webSQL、IndexDB -- 前端数据库操作，由于安全性极低，目前 h5 已放弃。
  7. web Worker -- 独立于其他脚本，不影响页面性能运行在后台的 javascript。
  8. webSocket -- 单个 TCP 连接上进行全双工通讯的协议。
  9. 新的特殊内容元素 -- 如：article、footer、header、nav、section。
  10. 新的表单控件 -- 如：date、time、email、url、search。

html5 优缺点？

优点

  1. 提高可用性和可维护性，改进了用户体验。
  2. 新增语义化标签，有助于开发人员定义清晰的结构。
  3. 可以播放视频音频，增加多媒体元素。
  4. 利用 h5 动画，友好地替代了 flash 和 silverlight。
  5. 爬虫抓取网站的时候，对于 SEO 很友好。
  6. H5 被大量应用于移动应用和游戏开发。
  7. 可移植性好。

缺点

现在大多数高版本浏览器都支持 html5，但是少部分的低版本浏览器目前不支持 html5，因新标签的引入，各浏览器之间将缺少一种统一的数据描述格式，造成用户体验不佳。

css3 新特性？

新增选择器

相邻兄弟选择器、属性选择器

新的伪类选择器:

  • :nth-child(n)

新样式

边框

新增三个边框属性：

  • border-radius：创建圆角边框；
  • border-shadow: 为元素添加阴影； 设置属性：
    • 水平阴影（必须）
    • 垂直阴影（必须）
    • 模糊距离
    • 阴影尺寸
    • 阴影颜色
    • 内/外阴影
  • border-image: 使用图片绘制边框；

背景

新增几个关于背景的属性

  1. background-clip 通常情况下，背景是覆盖整个元素的，此属性可以设定背景颜色 or 图片的覆盖范围

    background-clip: border-box; /* 背景从border开始显示 */
background-clip: padding-box; /* 背景从padding开始显示 */
background-clip: content-box; /* 背景从content区域开始显示 */
background-clip: no-clip; /* 默认属性，等同于border-box */

  2. background-origin 默认情况下，设置的背景图片会以 padding 的左上角对齐，通过此属性可以设置背景图片以谁的左上角对齐

    background-origin: border-box; /* 从border开始计算background-position */
background-origin: padding-box; /* 从padding开始计算background-position */
background-origin: content-box; /* 从content开始计算background-position */

  3. background-size 用于调整背景图片的大小

    background-size: contain;
/* 缩小图片以适合元素（维持像素长宽比） */
background-size: cover; /* 扩展元素以填补元素（维持像素长宽比） */
background-size: 100px 100px; /* 缩小图片至指定的大小 */
background-size: 50% 100%; /* 缩小图片至指定的大小，百分比是相对父元素的尺寸 */

  4. background-break 元素可以被分成几个独立的盒子（如使内联元素 span 跨越多行），该属性用来控制背景怎样在这些不同的盒子中显示

    background-break: continuous; /* 默认值。忽略盒之间的距离（也就是像元素没有分成多个盒子，依然是一个整体一样） */
background-break: bounding-box; /* 把盒之间的距离计算在内； */
background-break: each-box; /* 为每个盒子单独重绘背景 */

文字

/* 指定了怎样在单词内断行。 */
word-break: normal; /* 使用浏览器默认的换行 */
word-break: break-word; /* 允许在单词内换行 */

/* 文本阴影 */
text-shadow

/* 定义文本修饰线外观 */
text-decoration

颜色

css3 新增了新的颜色表示方式 rgba 与 hsla

  • rgba 分为两部分，rgb 为颜色值，a 为透明度
  • hala 分为四部分，h 为色相，s 为饱和度，l 为亮度，a 为透明度

transition

指定一个 or 多个 css 属性的过渡效果，多个属性之间用逗号分隔，必须规定两项内容：过渡效果 & 持续时间

/* 简写 */
transition： CSS属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)

/* 分开写 */
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

transform

可以旋转、倾斜、缩放或平移元素

transform-origin: (
  0,
  0,
  0
); /* 转换元素的原点（围绕那个点进行转换），默认值为(x,y,z):(50%,50%,0) */

transform: translate(120px, 50%); /* 位移 */
transform: scale(2, 0.5); /* 缩放 */
transform: rotate(0.5turn); /* 旋转 */
transform: skew(30deg, 20deg); /* 倾斜 */

animation

预设动画

animation-name  /* 动画名称 */
animation-duration  /* 动画持续时间 */
animation-timing-function  /* 动画时间函数 */
animation-delay  /* 动画延迟时间 */
animation-iteration-count  /* 动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环 */
animation-direction  /* 动画执行方向 */
animation-paly-state  /* 动画播放状态 */
animation-fill-mode  /* 动画填充模式 */

渐变

颜色渐变是指在两个颜色之间平稳地过渡

background-image: linear-gradient(
  direction,
  color-stop1,
  color-stop2,
  ...
); /* 线性渐变 */

background-image: radial-gradient(0deg, red, green); /* 径向渐变 */

其他

flex 布局、grid 布局、媒体查询等等

css 动画（animation 和 transition ）

css 实现动画的方式，有如下几种：

  • transition 实现渐变动画
  • transform 转变动画
  • animation 实现自定义动画

transition 的属性如下：

property:填写需要变化的 css 属性 duration:完成过渡效果需要的时间单位(s 或者 ms) timing-function:完成效果的速度曲线 delay: 动画效果的延迟触发时间

其中 timing-function 的值有如下：

值 描述 linear 匀速（等于 cubic-bezier(0,0,1,1)） ease 从慢到快再到慢（cubic-bezier(0.25,0.1,0.25,1)） ease-in 慢慢变快（等于 cubic-bezier(0.42,0,1,1)） ease-out 慢慢变慢（等于 cubic-bezier(0,0,0.58,1)） ease-in-out 先变快再到慢（等于 cubic-bezier(0.42,0,0.58,1)），渐显渐隐效果 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

注意：并不是所有的属性都能使用过渡的，如 display:none<->display:block

transform 转变动画

包含四个常用的功能：

translate：位移 scale：缩放 rotate：旋转 skew：倾斜 一般配合 transition 过度使用

注意的是，transform 不支持 inline 元素，使用前把它变成 block

animation 实现自定义动画

animation 是由 8 个属性的简写，分别如下：

属性 描述 属性值 animation-duration 指定动画完成一个周期所需要时间，单位秒（s）或毫秒（ms），默认是 0 animation-timing-function 指定动画计时函数，即动画的速度曲线，默认是 "ease" linear、ease、ease-in、ease-out、ease-in-out animation-delay 指定动画延迟时间，即动画何时开始，默认是 0 animation-iteration-count 指定动画播放的次数，默认是 1 animation-direction 指定动画播放的方向 默认是 normal normal、reverse、alternate、alternate-reverse animation-fill-mode 指定动画填充模式。默认是 none forwards、backwards、both animation-play-state 指定动画播放状态，正在运行或暂停。默认是 running running、pauser animation-name 指定 @Keyframes 动画的名称

CSS 动画只需要定义一些关键的帧，而其余的帧，浏览器会根据计时函数插值计算出来，

通过 @keyframes 来定义关键帧

如果我们想要让元素旋转一圈，只需要定义开始和结束两帧即可：

/* from 表示最开始的那一帧，to 表示结束时的那一帧 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 也可以使用百分比刻画生命周期 */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 使用： */
div {
  animation: rotate 2s;
}

总结

transition（过度）用于设置元素的样式过度，和 animation 有着类似的效果，但细节上有很大的不同； transform（变形）用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于 color 一样用来设置元素的“外表”； translate（移动）只是 transform 的一个属性值，即移动； animation（动画）用于设置复杂的自定义画属性，他是一个简写的属性，包含 6 个属性

flex 和 grid 的区别？

flexbox 弹性布局

  • 采用 flex 布局的元素称为 flex 容器（container）；
  • 该容器的所有子元素自动成为 flex 容器成员，称为 flex items；
  • 容器中有主轴和交叉轴，默认主轴方向为水平方向，交叉轴方向为垂直方向，项目沿着主轴方向排列；
  • 使用场景：
    1. 方便实现元素水平垂直居中；
    2. 方便实现自适应布局，对于移动端、小程序开发建议使用 flex 布局；
/* flex 容器属性 */
.container {
  /* 指定主轴方向
  row (默认)，主轴为水平方向，起点在左侧；
  row-reverse 水平方向，起点在右侧；
  column 主轴为垂直方向，起点在上方；
  column-reverse 主轴为垂直方向，起点在下方；
  */
  flex-direction: row | row-reverse | column | column-reverse;

  /* 当items 过大的时候，是否允许元素 wrap 到下一行
  nowarp (默认) 不换行；
  wrap 换行，第一行在上方
  wrap-reverse 换行，第一行在下方 */
  flex-wrap: nowarp | warp |wrap-reverse;

  /* 指定 items 沿着主轴方向的排列方式
  flex-start (默认) 左对齐；
  flex-end 右对齐；
  center 居中；
  space-between 两端对齐，items 之间的距离相等；
  space-around: items 两侧的空间相等；
  space-evenly: items 两侧的空间和 items 之间的空间相等；
   */
  justify-content: flex-start | flex-end | center | space-between | space-around
    | space-evenly;

  /* 指定项目沿着交叉轴的排列方式
  stretch (默认) 如果 items 没有指定高度，将占满整个容器的高度；
  flex-start：交叉轴的起点对齐；
  flex-end：交叉轴的终点对齐；
  center：交叉轴的中点对齐；
  baseline: 项目的第一行文字的基线对齐；
  */
  align-items: stretch | flex-start | flex-end | center | baseline;

  /* 指定多根轴线的排列方式，
  只有在有多行时（主轴方向为行）/ 多列（主轴方向为列）时有效，即 flex-wrap: wrap 时
  stretch（默认值）：轴线占满整个交叉轴；
  flex-start：与交叉轴的起点对齐；
  flex-end：与交叉轴的终点对齐；
  center：与交叉轴的中点对齐；
  space-between：与交叉轴两端对齐，轴线之间的间隔平均分布；
  space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍；
   */
  align-content: stretch | flex-start | flex-end | center | space-between |
    space-around;

  /* items 之间的空间 */
  gap: 0 | <length>;
}

.item1 {
  /* 为 item 自己重写容器的 align-items */
  align-self: auto | stretch | flex-start | flex-end | center | baseline;

  /* 控制 item 的排列顺序，-1 在最前面，1 在最后面；数值越小越靠前 */
  order: 0 | <integer>;

  /* 当容器有剩余空间时，item 的放大比例；
  默认为 0，即即使有剩余空间，item 也不放大；
  如果所有元素的该属性为 1，代表他们将平分剩余空间；
  如果有一个元素的该属性为 2， 其他元素的该属性为 1，表示该元素分得的剩余空间将是其他元素的 2 倍
   */
  flex-grow: 0 | <number>;

  /* 当容器宽度不够用的时候，item 的缩小比例；
  默认为 1，即如果空间不够，item 将缩小；
  如果所有 items 的该属性都为 1，当空间不够时，全部都将等比例缩小；
  如果其中一个 item 的该属性为 0，其他 item 的该属性为 1，则当空间不够时，该属性为 0 的 item 将不会缩小，其他 item 会缩小；

   */
  flex-shrink: 1 | <integer>;

  /* 设置 item 在主轴上的初始尺寸，也就是在 flex-grow & flex-shrink 均没有生效前的尺寸；
  浏览器根据该实行计算主轴是否有多余空间；
  默认值是auto，即元素尺寸由其 width & height 决定，如果没有设置 w&h，则由元素内容决定，在元素伸缩时要考虑元素本身的尺寸；
  值为 0：根据元素内容撑开，表示在元素伸缩时，不需要考虑元素本身的尺寸；
  也可以设定跟 width / height 一样的值；
   */
  flex-basis: auto | <length>;

  /* 前三者的缩写属性 */
  flex: 0 1 auto | <int> <int> <len>;
  /* 一些常用情况 */
  flex: 1; /* flex:1 1 0% */
  flex: 2; /* flex:2 1 0% */
  flex: auto; /* flex:1 1 auto*/
  flex: none; /* flex:0 0 auto ,常用于固定尺寸不伸缩*/
}

grid 网格布局

  • 是一个二维的布局方式，由纵横相交的两组网格线形成的框架性布局结构，能够同时处理行与列

  • 擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系

  • 设置 display:grid/inline-grid 的元素就是网格布局容器

  • 应用场景：容易实现居中、多列布局等，但对手机端支持不太好；

    网格线，即划分网格的线

/* grid 容器属性 */
.container {
  display: grid; /* 容器是块级元素 */
  display: inline-grid; /* 容器是行内元素 */

  /*  声明了三列，宽度分别为 200px 200px 200px */
  grid-template-columns: 200px 200px 200px;
  grid-template-columns: repeat(3, 200px);

  /* 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素 */
  grid-template-columns: repeat(auto-fill, 200px);

  /* 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3 */
  grid-template-columns: 200px 1fr 2fr;

  /* minmax(100px, 1fr)表示列宽不小于100px，不大于1fr */

  /* 表示第一第三列为 100px，中间由浏览器决定长度 */
  grid-template-columns: 100px auto 100px;

  /*  声明了两行，行高分别为 50px 50px  */
  grid-template-rows: 50px 50px;
  grid-template-rows: repeat(2, 50px);

  /* grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。grid-gap 属性是两者的简写形式 */

  grid-row-gap: 10px; /* 表示行间距是 10px */
  grid-column-gap: 20px; /* 表示列间距是 20px */
  grid-gap: 10px 20px; /* 等同上述两个属性 */

  /* grid-template-areas 属性
  用于定义区域，一个区域由一个或者多个单元格组成 */
  /* 下面代码先划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格。 */
  /* 如果要将多个单元格合并为一个区域，则给同一个名字即可 */
  /* 如果某些区域不需要利用，则使用"点"（.）表示 */
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas:
    'a b c'
    'd e f'
    'g h i';

  /* justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下）
    stretch：拉伸，占满单元格的整个宽度（默认值）
    start：对齐单元格的起始边缘
    end：对齐单元格的结束边缘
    center：单元格内部居中
   */
  justify-items: stretch | start | end | center;
  align-items: stretch | start | end | center;

  /* justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）
    start - 对齐容器的起始边框
    end - 对齐容器的结束边框
    center - 容器内部居中
    space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍
    space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔
    space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔
    stretch - 项目大小没有指定时，拉伸占据整个网格容器
    */
  justify-content: start | end | center | stretch | space-around | space-between
    | space-evenly;
  align-content: start | end | center | stretch | space-around | space-between |
    space-evenly;
}

.item1 {
  /* grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性
    指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置
    grid-column-start 属性：左边框所在的垂直网格线
    grid-column-end 属性：右边框所在的垂直网格线
    grid-row-start 属性：上边框所在的水平网格线
    grid-row-end 属性：下边框所在的水平网格线
*/
  /* 指定1号项目的左边框是第二根垂直网格线，右边框是第四根垂直网格线 */
  grid-column-start: 2;
  grid-column-end: 4;

  /* grid-area 属性指定项目放在哪一个区域,与 grid-template-areas 搭配使用 */
  grid-area: e;

  /* justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
    align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目 */
  justify-self: stretch | start | end | center;
  align-self: stretch | start | end | center;
}

css 中隐藏页面元素的方式

1. display: none; 从 DOM 中移除

  • 元素不可见；
  • 不占据页面空间；
  • 无法响应点击事件；
  • 会触发重排重绘；
  • 不支持 transition；
  • 子元素不能复原；
  • 被遮挡元素可触发事件；

2. visibility: hidden;

  • 元素不可见；
  • 占据页面空间；
  • 无法响应点击事件；
  • 重绘不重排；
  • 支持 transition；
  • 子元素能复原；
  • 被遮挡元素可触发事件；

3. opacity: 0;

  • 占据页面空间；
  • 响应点击事件；
  • 重绘不重排；（因为只改变了透明度）
  • 支持 transition；
  • 子元素不能复原；
  • 被遮挡元素不能触发事件；

4. position: absolute; 将元素移出页面，从而达到隐藏的效果；

  • 不影响布局；
  • 无法响应点击事件；
div {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

5. 宽高都设为 0，如果有子元素，还要设置overflow: hidden;

div {
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
}
  • 不占据页面空间；
  • 无法响应点击事件；

6. clip-path

div {
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
  /* 多边形顶点全部设置为 0, 0；从而达到隐藏效果 */
}
  • 占据页面空间；
  • 无法响应点击事件；

说说 em/px/rem/vh/vw 区别?

相对长度单位: em、ex、ch、rem、vw、vh、vmin、vmax、%

绝对长度单位: cm、mm、in、px、pt、pc

px

px，表示像素，所谓像素就是呈现在我们显示器上的一个个小点，每个像素点都是大小等同的，所以像素为计量单位被分在了绝对长度单位中

有些人会把 px 认为是相对长度，原因在于在移动端中存在设备像素比，px 实际显示的大小是不确定的

这里之所以认为 px 为绝对单位，在于 px 的大小和元素的其他属性无关

em

在 fsz 中是相对于父的 fsz； 在其他属性中是相对于自己的 fsz；

rem

相对于根元素（<html></html>）的 fsz

vw、vh、vmin、vmax

vw 相对于视图宽度 1%； vh 相对于视图高度 1%； vmin 相对于 min(vw, vh) 的 1%； vmax 相对于 max(vw, vh) 的 1%；

%

  • 在 fsz 中，是相对于父 fsz 的 %；

  • 在 width/height 中是相对于父 width/height 的 %；

  • 在 position不同时，情况不同：

    div {
  position: relative;

  /* 以下是相对于 height 的 %；*/
  top: 1%;
  bottom: 1%;

  /* 以下是相对于 width 的 %；*/
  left: 1%;
  right: 1%;
}

div {
  position: absolute;

  /* 相对于已定位的父元素 */
  /* 以下是相对于包含当前元素的 1st 不是 static 的元素的 height 的 %；*/
  top: 1%;
  bottom: 1%;
  height: 1%;

  /* 以下是相对于包含当前元素的 1st 不是 static 的元素的 width 的 %；*/
  left: 1%;
  right: 1%;
  width: 1%;
}

div {
  position: fixed;

  /* 以下是相对于视口的 height 的 %；*/
  top: 1%;
  bottom: 1%;

  /* 以下是相对于视口的 width 的 %；*/
  left: 1%;
  right: 1%;
}

  • transform: translate(50%, 50%);根据自身的 width & height;

  • margin-top、m-l、p-t、p-l是相对于父的 width；

  • border-radius 相对于自身；

  • bg-size：

    • 单值，指定是的是 width ，相对于背景定位区；
    • 多值，指定的是 width, height；

position

媒体查询

选择器、优先级

选择器

id 选择器(#myid) 类选择器(.myclass) 属性选择器(a[rel="external"]) 伪类选择器(a:hover, li:nth-child) 标签选择器(div, h1,p) 相邻选择器（h1 + p） 子选择器(ul > li) 后代选择器(li a) 通配符选择器(*)

优先级

  1. !important
  2. 内联样式（1000）
  3. ID 选择器（0100）
  4. 类选择器/属性选择器/伪类选择器（0010）
  5. 元素选择器/伪元素选择器（0001）
  6. 关系选择器/通配符选择器（0000）

带!important 标记的样式属性优先级最高； 样式表的来源相同时：!important > 行内样式>ID 选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

盒子模型

当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒子（box）

一个盒子由四个部分组成：content、padding、border、margin

  • content，即实际内容，显示文本和图像
  • boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成
  • padding，即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的 background 属性影响
  • margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域

在 CSS 中，盒子模型可以分成：

W3C 标准盒子模型 IE 怪异盒子模型 默认情况下，盒子模型为 W3C 标准盒子模型

box-sizing: content-box | border-box | inherit;
/* inherit 指定 box-sizing 属性的值，应该从父元素继承 */

标准盒子模型 box-sizing: content-box

盒子总宽度 = width + padding + border + margin;

盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容高度，不包含 padding 和 border 值

IE 怪异盒子模型 box-sizing: border-box

盒子总宽度 = width + margin;

盒子总高度 = height + margin;

也就是，width/height 包含了 padding 和 border 值

max-width

当父容器足够大时，宽度为指定值； 当父容器不够大时，宽度占满父容器

水平垂直居中

实现元素水平垂直居中的方式：

  • 利用定位+margin:auto
  • 利用定位+margin:负值
  • 利用定位+transform
  • table 布局
  • flex 布局
  • grid 布局

居中元素（子元素）的宽高已知

利用定位+margin:负值

.father {
  position: relative; /* 父相对定位 */
  width: 200px;
  height: 200px;
}

.son {
  position: absolute; /* 子绝对定位 */

  top: 50%;
  left: 50%;
  margin-left: -50px; /* 自身宽度一半 */
  margin-top: -50px;
  width: 100px;
  height: 100px;
}

居中元素宽高未知

利用定位 + margin:auto

.father {
  width: 500px;
  height: 300px;

  position: relative; /* 父相对定位 */
}

.son {
  width: 100px;
  height: 40px;
  position: absolute; /* 子绝对定位 */
  /* 以下 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

利用定位 + transform

.father {
  position: relative; /* 父相对定位 */
  width: 200px;
  height: 200px;
}

.son {
  position: absolute; /* 子绝对定位 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
}

table 布局

.father {
  width: 200px;
  height: 200px;
  display: table-cell; /*  */
  /* 可以让所有的行内块级元素水平垂直居中 */
  vertical-align: middle;
  text-align: center;
}

.son {
  display: inline-block; /*  */
  width: 100px;
  height: 100px;
}

flex 布局

.father {
  width: 200px;
  height: 200px;

  /* 父 flex 布局 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.son {
  width: 100px;
  height: 100px;
}

grid 网格布局

.father {
  width: 200px;
  height: 200px;

  /* 父 grid 布局 */
  display: grid;
  align-items: center;
  justify-content: center;
}

.son {
  width: 10px;
  height: 10px;
}

内联元素居中布局

内联元素水平居中

行内元素可设置：text-align: center flex 布局设置父元素：display: flex; justify-content: center

内联元素垂直居中

单行文本父元素确认高度：height === line-height 多行文本父元素确认高度：display: table-cell; vertical-align: middle

块级元素居中布局

块级元素水平居中

定宽: margin: 0 auto 绝对定位+left:50%+margin:负自身一半

块级元素垂直居中

position: absolute 设置 left、top、margin-left、margin-top(定高) display: table-cell transform: translate(x, y) flex(不定高，不定宽) grid(不定高，不定宽)，兼容性相对比较差

CSS 如何画一个三角形？原理是什么？

css 三角形

avatar
文章
阅读
粉丝