随笔分类 -  html基础

网格布局
摘要：网格布局 移动端布局方法总结 1.媒体查询+rem 媒体查询改变不同设备下的字体大小 rem根据字体大小进行计算 缺点计算麻烦 有误差 2.vm+rem vm，视口单位 html{font-size：0.3125/0.2267vm} 缺点：设置盒子的时候 盒子里面的子级元素会往下掉 3.移动端布局的 阅读全文
posted @ 2021-08-28 11:42 离空半夏 阅读(154) 评论(0) 推荐(0)
移动端布局
摘要：*网页中常用的单位有哪些* - px 像素 - em 相对单位 - pt 磅 硬件设备 - % 宽高自适应 - deg 移动端重要的单位: rem 相对于根元素html的font-size的大小进行计算的 移动端布局的思路 - 每一个移动端的尺寸大小都是不一样的 html的宽高大小也是不一样的 - 阅读全文
posted @ 2021-08-28 11:41 离空半夏 阅读(66) 评论(0) 推荐(0)
媒体查询&响应式布局
摘要：媒体查询：只是一个工具，检测不同设备的特性从而设置不同的css样式。 媒体查询的写法：@media 设备类型 关键字 （媒体特性）{css声明} @media是固定写法 表示声明/定义媒体查询 设备类型：电脑 手机 pad等设备的特性 检测屏幕 关键字：常用的是and 还有only，not （媒体特 阅读全文
posted @ 2021-08-28 11:41 离空半夏 阅读(231) 评论(0) 推荐(0)
flex&多行布局
摘要：**flex&多行布局** 盒模型 组成部分：content+padding+border+margin 1.标准的盒模型 常见的问题 margin值会错误解析 padding值会撑大盒子大小 计算方式：padding和border都是算在盒子的外部的 2.IE盒模型（怪异盒模型）：当文档丢失了文档 阅读全文
posted @ 2021-08-28 11:40 离空半夏 阅读(650) 评论(0) 推荐(0)
3d&动画
摘要：**3d&动画** 景深的概念 实现2d中的旋转的时候 沿着x/y轴进行翻转 用户并不能观察是向哪个方向进行翻转的 景深：远小近大 100px~1200px 两种用法 在父级元素上添加 perspective：1200px 在子级元素上添加 transfrom：perspective（1200px） 阅读全文
posted @ 2021-08-23 22:13 离空半夏 阅读(79) 评论(0) 推荐(0)
渐变&2d
摘要：**渐变&2d** 渐变的概念 渐变是由浏览器生成解析的 背景图片 属性：background 线性渐变 径向渐变 重复渐变 线性渐变 属性：background 属性值：linear-gradient（参数） 第一个参数表示方向值（可选参数） 第二个参数表示颜色1 第二个参数表示颜色2 .。。。 阅读全文
posted @ 2021-08-23 22:12 离空半夏 阅读(99) 评论(0) 推荐(0)
CSS3基础
摘要：CSS3的基础 属性选择器 -E 表示标签名称 -[ ] 选择属性 -attr 属性 E[attr] 指定了属性 没有选择属性名 E[attr="value"] 指定了属性 并且选择属性名 E[attr~="value"] 指定了属性 属性值存在或者包含都会被选择到 E[attr^="value"] 阅读全文
posted @ 2021-08-23 22:12 离空半夏 阅读(45) 评论(0) 推荐(0)
HTML5基础
摘要：HTML5 基础 html5的推出时间2014年 为什么要推出html5版本 开发角度：代码严格，规范 用户角度：用户体验 html更新了哪些好用的东西 新增了语义化标签和属性 新增了一些好用的api（接口）定位，存储 强大之处 面试的时候 html5常见的语义化标签 单页面 spa 替代部分开发 阅读全文
posted @ 2021-08-23 22:11 离空半夏 阅读(46) 评论(0) 推荐(0)
元素分类
摘要：元素的类型分类 在css2中元素类型分类有三种： 块级/块元素 ，行内/内联元素 ，可变元素 1.块级元素 常用的块级元素有div，p，h1~h6，ul>li 块级元素通常都是以一个盒子的样式在浏览器中显示的 块级元素是可以直接设置宽高大小的 块级元素默认独占一行的（显示只有当前设置的宽高大小） 块 阅读全文
posted @ 2021-08-20 21:48 离空半夏 阅读(860) 评论(0) 推荐(0)
定位
摘要：定位 定位属性和属性值 属性：position 属性值： static （默认值）静态定位，设置和不设置效果一样 relative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘性定位 -css新增的属性 相对定位 属性：position 属性值：relative 定位 阅读全文
posted @ 2021-08-20 21:48 离空半夏 阅读(141) 评论(0) 推荐(0)
宽高自适应
摘要：宽度自适应 width（宽度自适应应用于块级元素） 在网页布局中，给块级元素设置宽度为100%的时候，会自适应到浏览器全屏宽度（通栏效果） 块级元素不设置宽度的情况下，默认宽度为100% 块级不去设置宽度的时候，会和父级等宽 重要：如果当前元素脱离了文档流，元素的宽高大小由自身的内容决定 用到了定位 阅读全文
posted @ 2021-08-20 21:48 离空半夏 阅读(133) 评论(0) 推荐(0)
overflow属性
摘要：溢出文本 属性：overflow visible（默认值）内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。 auto 如果内容会被修剪，则浏览器会显示滚动条以便查看其他内容。 white- 阅读全文
posted @ 2021-08-20 21:47 离空半夏 阅读(298) 评论(0) 推荐(0)
文本属性&背景
摘要：常用的css属性-字体 字体大小（font-size） 属性值，常用的是数值+单位。常用font-size:0 来处理兼容问题 网页中默认的字体大小为16px，浏览器建议的最小字体为12px 浏览器之间存在差异，所以建议设置字体大小为偶数 一般在设计图中量出的字体高度就是字体的大小 除了px单位，e 阅读全文
posted @ 2021-08-16 21:54 离空半夏 阅读(221) 评论(0) 推荐(0)
HTML基础-浮动&盒模型
摘要：浮动属性的使用 属性值：left，right，none 浮动只能控制元素在水平方向上移动 浮动属性会使元素脱离文档流（正常的页面布局）初始页面不存在，会破坏正常的网页布局 （即，假如你的第一个<div>float:left,第二个<div>可以占据原来第一个<div>的位置） 浮动属性停止浮动的条件 阅读全文
posted @ 2021-08-16 08:40 离空半夏 阅读(194) 评论(0) 推荐(0)