web随堂笔记

60 阅读1分钟

今天学习了

1.link中使用媒体查询

image.png

image.png

2.水平居中和垂直居中

行内元素实现水平剧中的方式

1.使用弹性盒布局实现居中 image.png

2.采用绝对定位配合margin来实现居中

这种方式需要知道宽高

image.png

3.css3变形属性transform来实现

对于不知道宽高的图片设置时使用50%,知道固定宽高时,直接设置一半。

image.png

4在不使用css和flex布局下实现居中 盒子必须有宽高 但不需要去计算偏移盒子的宽高

image.png

5.多行文本实现垂直居中

不固定高度垂直居中使用padding去实现

固定高度垂直居中使用 display:tabel-cell 配合样式vertical-align:middle;来实现 image.png