- 博客(15)
- 收藏
- 关注
RSS订阅
原创 弹性盒
calc(x-y)方法：运算符号前后一定要空格 pointer-events:none;穿透到当前元素 标准盒模型：box-sizing:content-box 宽高是独立的 内边距是独立的，会把元素撑大 边框是独立的 注意：宽高不包含边距和边框 怪异盒模型：box-sizing:border-box 宽高包含内边距和边框 怪异盒模型触发方式：1、丢失<!doctype html>在i...
2020-03-22 22:02:27
129
原创 视口
br>视口：就是浏览器显示页面内容的屏幕区域 视口分为：布局视口 视觉视口 理想视口 布局视口：一般移动端设备的浏览器都默认设置了一个布局视口 为了解决早期pc端页面 在移动端上的现实问题 苹果 安卓 基本上设置这个视口的分辨率980px 视口视觉：你看到的网页区域，指的是网址的区域 通过缩放去操作视觉视口不会影响布局视口 理想视口：1、是网站在移动端设备的浏览器中最理想的状...
2020-03-24 23:17:24
328
原创 响应式布局
flex-grow:;定义项目进行扩张（放大） flex-shrink:;项目总宽度超出容器时的缩小设置 0本身无变化 1平均分配 flex-basis:;项目的长度 综合写法：flex:放大 缩小 长度；（后两者一般不写） 多列布局：column-count:;分列 column-gap:;列间隔 column-rule:大小 形态 颜色；分割线 column-fill:;列的高度是否统...
2020-03-23 22:35:53
160
原创 过渡
过渡：让元素的动画发生平滑的效果，而不是生硬直接的效果 1、属性在做动画transtion-property:属性1，属性2… 2、过渡时间transtion-duration:时间 3、等待时间（可以选择）transtion-delay:时间（延迟时间） 4、动画类型（可以不写）transtion-timing-funtion:; 简写：transtion:属性 过渡时间 延迟 ...
2020-03-21 22:34:52
106
原创 前端
文本阴影： text-shadow:水平阴影 垂直阴影 模糊度 颜色； text-shadow:第一层，第二层，第三层； 在单词内部换行： word-wrap:;normal默认值，不允许在单词内部换行 break-word 允许单词在内部换行 word-break:; break-all允许在单词内部换行 keep-all 允许在换行点换行，单词内部不换行 box-shadow:水平阴影...
2020-03-19 22:51:01
69
原创 前端
渐进增强：（从小到大）先保证最基本的功能~>用户体验的提升 优雅降级：（从大到小）现针对版本较高的设备进行项目构建， 保证用户体验的完美~>牺牲一些效果，保证基本的功能 属性选择器：e[attr]{}选中e元素，且e元素有attr属性 e[attr=“value”]{}选中e元素，且e元素有attr属性,包含值为value e[attr~=“value”]{}选中e元素，且e元素有at...
2020-03-18 22:50:44
136
原创 前端
语义化标签：（指定内容的仓库） section:类似于div，偏向画结构 article:偏向于内容展示 aside:偏向于旁边的内容，在一侧的 header:内容的头部，网页的头部区域 footer:尾部的内容，网页的尾部区域 nav:做导航 链接区域 figure>figcaption:类似dl>dt+dd的结构 注意：figcaption是figure的标题， 一般在第1个位...
2020-03-17 22:00:34
61
转载 前端
网页制作是web1.0时代的产物，那个时候的网页主要是静态网页，所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页，我们当时称为“牛皮癣”网页。 例如一篇QQ日志、一篇博文等展示性文章。在web1.0时代，用户能做的唯一事情就是浏览这个网站的文字图片内容，这时用户也不能像现在在大多数网站都可以评论交流（缺乏交互性）。 相信可能大多数人都听过“网页三剑客 Dreamweaver+Firewo...
2020-03-16 23:13:32
188
原创 前端
表格：thead 表头 tbody 表体 tfoot 表尾 th 列标题，默认文本加粗，上下居中左右居中 colgrop 划分多少列为一组 span=“多少列” caption 表格标题，默认左右居中 表格属性：border-spacing:单元格间距；必须给table添加 border-collapse:;合并边框线，必须给table添加 sep...
2020-03-15 22:57:44
121
原创 前端
外边距：改变元素外边的间距 内边距：改变元素与内容的间距 padding:一个值；改变四个方向 padding:两个值（上下 左右）三个值（上 左右 下）四个值（上 右 下 左）顺时针变化 padding-top:顶部内边距 padding-right: 右内边距 padding-bottom:底部内边距 padding-left:左内边距 注意：内边距没有负值 margin:（一个值）四个方向...
2020-03-15 22:53:57
82
原创 前端
文本溢出设置:overflow hidden 超出隐藏 scroll 超出时，滚动查（未超出也会有滚动机制） auto 超出时，滚动查看（未超出不会有滚动机制） inherit 继承父级的overflow设置 white-space 文本空白 normal 默认值 per 保留原格式，...
2020-03-15 22:51:14
68
原创 前端
文档流： 普通流：从上至下；从左至右 浮动流：元素添加了float:； 定位流：添加了定位属性 定位：position static 默认值；设置坐标无效 absolute 绝对定位 特征：1、脱离文档流；不占位置 2、默认参考html的00点（浏览器零点） 3、如果有父级；且父级有定位；那就参考父级（默认定位除外） relative 相对定位 特征：1、占据文档流 2、参考自身在页面中加...
2020-03-15 22:48:09
61
原创 前端
br> 最小高度：min-height; 最小宽度：min-width; 最大高度：max-height; 最大宽度;max-width; 宽度自适应：默认宽度100%的元素 width：；单位为% 高度自适应：不写height：；（让内容撑起来） height::单位为%（前提条件html,body{width:100%;height:100%;} ) 浮动元素的高度塌陷：问题： 父...
2020-03-15 22:46:17
57
原创 前端
css属性：预览版，还没有一个正式版的最终版，多以有很多的兼容性问题浏览器不识别，浏览器为了使这些属性兼容 每一个浏览器厂商都提供了一个属于自己浏览器的语法规则，浏览器兼容前缀。 主流览器：谷歌 火狐 苹果 欧朋 ie 浏览器前缀：-webkit- -moz- -o- -ms- box-shadow:水平偏移量 垂直偏移量 模糊度 模糊大...
2020-03-15 22:40:32
72
原创 前端笔记
03-13笔记# 1级标题# <br>目标伪类选择器：target{}当元素被点击的指向；发生样式的改变 <br>css样式 圆角：border-radius:; <br>元素是正方形 宽度一半的px 50% 正圆 <br>元素是长方形 较小值的一半px ...
2020-03-15 13:26:55
206
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人