![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
Renaissance12138
这个作者很懒,什么都没留下…
展开
-
兼容性
常见bug+hackbug1:添加了超链接的img会带有蓝色边框hack1:img{border:0}bug2图片下方有间隙hack2:img{display:block}bug3浮动元素双倍边距hack3:给浮动元素添加display:inline;bug4部分元素默认高度hack4:给元素添加font-size:0;给元素添加overflow:hidden;(加height:0)常见的问题1.表单元素对齐不一致解决:添加float:left;2.按钮元素默认不原创 2020-12-23 08:28:20 · 114 阅读 · 0 评论 -
网格布局(grid)
网格布局(grid)容器属性启动网格布局:display:grid; display:inline-grid;划分列:grid-template-columns:列宽1 列宽2 列宽3...;划分行:grid-template-row:行高1 行高2 行高3...;属性值:px % fr auto repeat minmax功能函数(repeat): grid-template-columns:repeat(1,2) 1:重复次数 2:重复值 grid-template-colum原创 2020-12-23 08:28:11 · 349 阅读 · 0 评论 -
移动端准备
媒体查询@media screen and (max-width: 300px) {body {background-color:lightblue;}}使用 @media 查询,可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。all 用于所有设备screen 用于电脑屏幕,平板电脑,智能手机等。移动端准备项目重原创 2020-12-23 08:28:01 · 114 阅读 · 0 评论 -
flex布局
标准盒模型(box-sizing:content-box;)内容区域(width,height)内边距区域(padding)边框区域(border)外边距(margin)怪异盒模型(box-sizing:border-box;)内容区域width(padding+border) height(padding+border)外边距(margin)Flex布局弹性盒父容器属性设置为弹性盒子:display:flex;(inline-flex)【注】设置为弹性盒子之后,子项目的fl原创 2020-12-23 08:27:51 · 105 阅读 · 0 评论 -
css3选择选择器
css3属性选择器ele[属性]{}ele[属性="值"]{}ele[属性~="value"]{} ele中包含value的选中ele[属性^="value"]{} 以value开头的值ele[属性$="value"]{} 以value结尾的值ele[属性*="value"]{} 包含value的选中ele[属性|="value"]{} 只有一个指定的值或者指定的开头结构伪类选择器e:first-child{} 选中第一个元素e:last-child{} 选中最后一个元素e:nth-原创 2020-12-23 08:27:38 · 136 阅读 · 0 评论 -
H5基础
H5属性H5标签header 头部标签section 主题内容区域footer 底部标签article 内容区域aside 侧边栏区域nav 导航区域main 主体内容区域(ie不识别)figure > figaction 只有一个子集figactionhgroup 标题分组mark 高亮time 显示当前时间dialog 标记定义一个对话框多媒体标签视频标签videosrc="文件地址"controls="显示控件"autoplay="自动播放"loop="原创 2020-12-23 08:27:26 · 141 阅读 · 0 评论 -
css3 2D 3D
css3-2D/3D定义转换(transform)translate(x,y) 定义 2D 转换translate3d(x,y,z) 定义 3D 转换。translateX(x) 定义转换,只是用 X 轴的值translateY(y) 定义转换,只是用 Y 轴的值可以为负数缩放(scale)scale(x[,y]) 定义 2D 缩放转换scale3d(x,y,z) 定义 3D 缩放转换scaleX(x) 通过设置 X 轴的值来定义缩放转换scaleY(y) 通过设置 Y 轴的值来定义原创 2020-12-23 08:26:58 · 89 阅读 · 0 评论