六、弹性盒 发表于 2020-06-30 | 更新于: 2020-06-30 | 分类于 web前端 ， 视口布局 | | 字数: 148 | 时长 ≈ 1 分钟六、弹性盒父盒子设置：display：-前缀-flex; 表示父盒子是弹性盒容器，自动可以将盒子并排显示子盒子设置：只设置宽度，不设置浮动，就可以达到并排显示。123456789101112131415161718192021222324252627.box { width: 600 ...阅读全文 »
五、内减盒模型 发表于 2020-06-30 | 更新于: 2020-06-30 | 分类于 web前端 ， 视口布局 | | 字数: 167 | 时长 ≈ 1 分钟五、内减盒模型之前我们的盒模型：书写width height 再写padding border margin ，是外扩盒模型css3新增加的内减盒模型5.1 box-sizing:border-box书写了width height 再设置padding border ，盒子占有不会变大，paddin ...阅读全文 »
四、圣杯模型 发表于 2020-06-30 | 更新于: 2020-06-30 | 分类于 web前端 ， 视口布局 | | 字数: 337 | 时长 ≈ 1 分钟四、圣杯模型盒子高矮不同，最终效果所有的盒子高度相同，并且是最高盒子的高度4.1 原理margin-bottom：负数 可以改变盒子的浏览器读取高度overflow：hidden； 盒子溢出隐藏，可以读取子盒子的高度并且以子盒子的高度撑开父盒子高度12345678910111213.box{ ...阅读全文 »
三、双飞翼模型 发表于 2020-06-30 | 更新于: 2020-06-30 | 分类于 web前端 ， 视口布局 | | 字数: 283 | 时长 ≈ 1 分钟三、双飞翼模型3.1 原理浮动元素margin-left：负数，表示相对于上一个元素位置偏移。1234567891011121314151617181920.box { width: 700px; height: 100px; border: 1p ...阅读全文 »
二、百分比布局 发表于 2020-06-30 | 更新于: 2020-06-30 | 分类于 web前端 ， 视口布局 | | 字数: 420 | 时长 ≈ 1 分钟二、百分比布局PC端有版心效果，移动端没有版心。因为移动端约束后的视口宽度是300~400之间，不设置版心，显示更多内容。为了移动端效果和APP效果也是没有版心，移动端布局宽度一般使用百分比布局。2.1 标准文档流（浮动效果和标准文档流一样）width：表示相对于父盒子内容宽度的比值height：表 ...阅读全文 »
一、视口 发表于 2020-06-30 | 更新于: 2020-06-30 | 分类于 web前端 ， 视口布局 | | 字数: 709 | 时长 ≈ 2 分钟一、视口像素点：物理元件最小的发光单位。分辨率：就是屏幕像素的数量，比如1600*900，指的是横向有1600的像素点，纵向有900的像素点。视口：PC端视口宽度在没有缩放时就相当于分辨率宽度。手机分辨率很大，但为了更好的显示网页效果，将手机宽度设置为980px，而不是像素宽度，这个宽度就是视口。也 ...阅读全文 »
九、动画 发表于 2020-06-30 | 更新于: 2020-06-30 | 分类于 web前端 ， CSS3 | | 字数: 468 | 时长 ≈ 1 分钟九、动画9.1 定义动画@- keyframes定义动画：需要添加前缀1234@-浏览器前缀-keyframes 动画名称{from{ } 开始帧to{ } 结束帧}key：关键frame：帧每一帧书写的属性必须一一对应。12345678 ...阅读全文 »
八、变形 发表于 2020-06-30 | 更新于: 2020-06-30 | 分类于 web前端 ， CSS3 | | 字数: 792 | 时长 ≈ 4 分钟八、变形8.1 2D变形transform: 变形8.1.1 旋转：rotate()旋转：rotate()单位是deg正方向：顺时针1234567.box { width: 200px; border: 1px solid #000; ...阅读全文 »
七、过渡 发表于 2020-06-30 | 更新于: 2020-06-30 | 分类于 web前端 ， CSS3 | | 字数: 368 | 时长 ≈ 1 分钟七、过渡7.1 过渡的基本形式元素——>元素:hover之前都是干嘣的效果，瞬间从开始完成到结束状态，中间过程看不到，可以认为几乎不花时间。过渡效果：将开始状态到结束状态，可以将中间过程也可以看到。过渡一般写在原样式中，而不是 元素:hover中。12345transition:all第一个参 ...阅读全文 »
六、背景 发表于 2020-06-30 | 更新于: 2020-06-30 | 分类于 web前端 ， CSS3 | | 字数: 1.3k | 时长 ≈ 5 分钟六、背景12345background-color： 背景色background-image： 背景图background-repeat： 背景图是否重复background-position： 背景位置background-attachment： 背景是否滚动6.1 背景起源originbackg ...阅读全文 »
