2020年4月15日
移动端工作准备
摘要： 一、meta标签的设置：视口1：1比例、禁止用户缩放 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 二、dpr : 设备像素比例： 阅读全文
posted @ 2020-04-15 19:18 油画家的第一站 阅读(114) 评论(0) 推荐(0) 编辑
媒体查询
摘要： 一、媒体查询：由设备类型、监测设备特性表达式构成。 1）语法： @media 设备类型[all\screen] and (条件表达式){ css样式 } 注：and两侧必须有空格 not放在设备类型的前面（反向选择【排除某个范围】） 2）媒体查询的作用：做样式微小调整 例如：浮动、显示隐藏、文本大小 阅读全文
posted @ 2020-04-15 19:07 油画家的第一站 阅读(141) 评论(0) 推荐(0) 编辑
2020年4月14日
多列布局
摘要： 一、多列属性： 1：列数： column-count:; 2:列间距： column-gap:; 3:列分割线： column-rule: 4:控制每一列的列的高度是否统一： column-fill:; auto 列高度自适应内容 balance 有列的高度以其中最高的一列统一 5:跨列： colu 阅读全文
posted @ 2020-04-14 19:10 油画家的第一站 阅读(97) 评论(0) 推荐(0) 编辑
怪异盒模型
摘要： 一、怪异盒模型： 1）触发怪异盒模型： box-sizing:border-box; 2）怪异盒模型特点：padding和border都会在元素的宽高的内部，不会把盒子撑大。 3）box-sizing: 属性值： box-sizing:content-box; 常规盒模型 box-sizing:bo 阅读全文
posted @ 2020-04-14 19:08 油画家的第一站 阅读(177) 评论(0) 推荐(0) 编辑
弹性盒
摘要： 一、弹性盒子：布局方案。 ①作用：控制离它最近的一层子元素,布局方式。 ②特点： a：弹性盒子里面的离它最近的一层子元素都可以添加大小。 b: 如果想让弹性盒子里面的一个子元素左右上下居中，只需要给子元素添加margin:auto即可 c: 弹性盒子里面的子元素都是沿着“主轴”排列 ③注：a."主轴 阅读全文
posted @ 2020-04-14 14:49 油画家的第一站 阅读(172) 评论(0) 推荐(0) 编辑
2020年4月13日
圆角
摘要： border-radius: 值为半径 1）圆： 一个值：四周圆角 两个值：左上角及右下角 右上角及左下角 三个值：左上角 右上角及左下角 右下角 四个值：从左上角开始 顺时针设置。（左上 右上 右下 左下） 2）椭圆分垂直半径和水平半径： border-radius: 水平半径 / 垂直半径 二、 阅读全文
posted @ 2020-04-13 21:35 油画家的第一站 阅读(798) 评论(0) 推荐(0) 编辑
width的属性值
摘要： 一、width的属性值： ①fill-available 合理分配有效剩余空间 ② fit-content 找子元素内容的宽度。按照子元素的宽度进行设置 ③max-content 找子元素最大的宽度 ④min-content 找子元素最小的宽度 阅读全文
posted @ 2020-04-13 20:49 油画家的第一站 阅读(448) 评论(0) 推荐(0) 编辑
背景
摘要： 一、背景新增css属性： 1）background-origin:背景图的起始位置 ①padding-box; 默认值（padding区域开始） ②border-box; 边框后面开始 ③content-box; 从内容区域开始 2） background-clip:; 背景的裁切（只显示哪个区域的 阅读全文
posted @ 2020-04-13 20:29 油画家的第一站 阅读(173) 评论(0) 推荐(0) 编辑
文本换行
摘要： 一、英文或者数字默认显示：如果没有换行的情况下：尝试把下一个长单词放在下一行显示。 1）word-wrap: ①break-word: 功能：尝试把长单词换到下一行显示，如果在下一行仍然有超出的情况下，自动断句。 ②normal： 功能：只在允许的断字点换行（浏览器保持默认处理） 2）word-br 阅读全文
posted @ 2020-04-13 19:55 油画家的第一站 阅读(419) 评论(0) 推荐(0) 编辑
阴影
摘要： 一、文本阴影： ①text-shadow: x轴位置 Y轴位置 阴影大小（模糊程度） 阴影颜色； ②注：如果想添加多个阴影 每一组阴影以逗号分隔。 二、盒子阴影： ①box-shadow: x轴位置 y轴位置 阴影的模糊度 阴影扩散的大小 阴影颜色 内阴影(inset 可选)； ②添加多阴影：以逗号 阅读全文
posted @ 2020-04-13 19:27 油画家的第一站 阅读(256) 评论(0) 推荐(0) 编辑