随笔分类 -  1_HTML_CSS

10_CSS实现垂直水平居中的方式
摘要：垂直水平，自然垂直和水平两个方向上 1、行内元素 水平对齐+行高 text-align 父元素中设置为center line-height　设置为和父元素一样的高度 2、块 2.1 绝对定位+margin：auto 父元素开启相对定位，并且有宽高 子元素开启绝对定位 + 偏移量均为0 + margi 阅读全文
posted @ 2022-03-06 17:13 踏燕白梅 阅读(45) 评论(0) 推荐(0)
0_9 移动端、媒体查询、响应式布局
摘要：1、像素和视口 1.1 像素： 物理像素：分辨率数 css像素：编写网页时，所用都是css像素 浏览器在显示网页时，需要将CSS像素转换为物理像素然后再呈现 ， 一个css像素最终由几个 物理像素显示，由浏览器决定： 默认情况下在pc端，一个css像素 = 一个物理像素 1.2 视口 屏幕中用来显示 阅读全文
posted @ 2022-03-04 02:21 踏燕白梅 阅读(78) 评论(0) 推荐(0)
0_8 Flex弹性盒
摘要：1、弹性盒 是css的又一种布局手段，主要用来代替浮动来完成页面的布局，使元素具有弹性，可以跟随页面大小的改变而改变。 弹性容器： 要使用弹性盒，必须先把一个元素设置为弹性容器，通过 display 来设置弹性容器 display:flex 设置为块级弹性容器 display:inline-flex 阅读全文
posted @ 2022-03-04 01:32 踏燕白梅 阅读(51) 评论(0) 推荐(0)
0_7 Less的用法
摘要：先留白 阅读全文
posted @ 2022-03-04 00:52 踏燕白梅 阅读(22) 评论(0) 推荐(0)
0_6 CSS的animation
摘要：1、过渡transition 过渡：指定一个属性（需要具体值）发生变化时的切换方式 transition-property: 指定要执行过渡的属性 transition-duration: 指定过渡效果的持续时间 transition-delay: 过渡效果的延迟，等待一段时间后在执行过渡 tran 阅读全文
posted @ 2022-03-04 00:47 踏燕白梅 阅读(34) 评论(0) 推荐(0)
0_5 CSS字体、文本和背景
摘要：1、字体样式 color 颜色 font-size 大小（三个单位） font-family 字体族 2、文本样式 水平text-align left（左对齐） right（右对齐） center（居中） justify（两端） 垂直vertical-align baseline（基线对齐） top 阅读全文
posted @ 2022-03-03 23:52 踏燕白梅 阅读(49) 评论(0) 推荐(0)
0_4 CSS定位、层级
摘要：1.定位， 一种更高级的布局手段，可以通过定位把元素摆放在页面的任意位置 使用position属性设置定位 1.1 position可选值： static 默认值 relative 相对定位，参考元素在文档流中的位置，提升层级，不脱离文档流，不改变元素性质（块、行内） absolute 绝对定位，参 阅读全文
posted @ 2022-03-03 22:48 踏燕白梅 阅读(98) 评论(0) 推荐(0)
0_3 CSS文档流、盒模型、浮动、高度塌陷、外边距折叠、BFC
摘要：恢复内容开始 1、盒模型： CSS将页面中的元素都设置为了一个矩形的盒子，布局变为把不同的盒子放在不同的位置 组成：内容区content，内边距padding，边框border，外边距margin box-sizing用来设置盒子尺寸的计算方式（width，height）， 默认值为content- 阅读全文
posted @ 2022-03-03 20:08 踏燕白梅 阅读(74) 评论(0) 推荐(0)
0_2 CSS的长度单位和颜色
摘要：长度单位： px像素：构成屏幕（显示器）的小点，不同屏幕像素大小不同，像素越小越清晰 百分比：相对于父元素属性的百分比，可以使子元素跟随父元素的改变而改变 em：em是相对于所在元素的字体大小来计算，1em = 1font-size，会根据字体大小改变而改变 rem：rem相对于根元素html的字体 阅读全文
posted @ 2022-03-03 16:36 踏燕白梅 阅读(45) 评论(0) 推荐(0)
0_1 CSS的样式、选择器及其权重、伪类伪元素
摘要：恢复内容开始 一、样式修改+vue 有三种途径： （1）第一种（内联样式/行内样式），直接在标签内部通过style属性来设置元素样式 问题：样式只能对一个标签生效，变化时必须要一个一个修改 （2）第二种（内部样式表）将样式写到style标签里面，通过选择器来选中元素并设置 问题：内部样式表只能对一个 阅读全文
posted @ 2022-03-03 16:19 踏燕白梅 阅读(64) 评论(0) 推荐(0)