Renaissance12138-CSDN博客

原创兼容性

常见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

原创网格布局(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

原创移动端准备

媒体查询@media screen and (max-width: 300px) {body {background-color:lightblue;}}使用 @media 查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。all 用于所有设备screen 用于电脑屏幕，平板电脑，智能手机等。移动端准备项目重

2020-12-23 08:28:01 114

原创 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

原创 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

原创 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

原创 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

原创 10css3属性

浏览器前缀-wenkit--moz--o--ms-线性渐变background-image:background-gradient(方位,颜色 px,颜色 px);重复渐变：background-image:repeating-liner-gradient();径向渐变background-image：radial-gradient(圆心点坐标,方位,形状,颜色 px,颜色 px)重复渐变：background-image:repeating-linear-gradient()过

2020-12-17 16:23:16 78

原创 9表格补充

表格补充数据行分组theadtbody：即使在代码中未写，浏览器依旧解析出tfooter数据列分组(colgroup)<colgroup span="2"></colgroup>sapn="几列为一组"列标题(th)文本上下居中，文本加粗表格属性(CSS)border-spacing(边距之间的间距) 不能为负。必须为table添加border-collapse(是否添加单边框) separate:默认值 collapse:合并为单边框必须给t

2020-12-17 16:22:42 107

原创 8伪元素+清除浮动

伪元素选择器选择器:after{content:""}在内容后面添加选择器:before{content:""}在内容前面添加选择器:{first-letter:xx;}设置第一个字的样式选择器:{first-line:xx;}设置第一行的样式【注】只针对块级元素浮动元素父元素高度自适应(高度塌陷)高度塌陷：父元素未设置高度，子元素浮动，将造成高度消失，布局混乱清除浮动：清除浮动带来的影响解决办法1.给父元素添加高度缺点:不灵活,太死板2.给父元素添加overflow:h

2020-12-17 16:22:12 107

原创 7宽高自适应+显示隐藏

宽高自适应宽度自适应1.块级元素默认跟浏览器宽度一致(不设置)2.元素宽度设置width:100%;高度自适应1.元素默认高度由内容撑起来，2.高度不写。或者height:auto;3.元素的高度heihgt:100%;(父级元素有高度或者所有父元素添加height:100%;)最小高度一：min-height:100px; ie低版本不识别 height:auto !important; 高版本浏览器识别 height:100px; ie低版本识别【注】有顺序要求

2020-12-17 16:21:42 125

原创 6定位

文档流普通流：从上至下，从左至右排列浮动流：float:left,right定位流：position定位(position)默认定位(static)【注】添加坐标无效相对定位(relative)1.占据文档流2.相对自身初始加到页面中的位置改变位置绝对定位(absolute)1.脱离文档流2.默认参考根乐元素(html)改变位置3.参考最近的有定位的父元素固定定位(fixed)1.脱离文档流2.参考浏览器3.在页面中固定不动粘性定位(sticky)1.结合了固

2020-12-17 16:20:56 101

原创 5文本溢出

文本溢出(overflow)visible:默认值hidden:超出隐藏scroll:显示滚动条auto:自适应查看inherit:继承父元素overflow值文本换行(white-space)normal:默认值pre:原格式输出，空白会被浏览器保留pre-wrap:文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止pre-line;合并空白符序列，但是保留换行符nowrap: 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为

2020-12-17 16:20:09 90

原创 4css属性

css属性文本属性1.文本大小( font-size:xx;(px,em.rem,pt) ) px(固定大小)：默认16px，最小大小16px，没有最大 em：跟随父元素文本大小呈倍数关系 rem：跟随**根元素(html)**文本大小呈倍数关系2.文本颜色(color) 颜色单词：red，green，blue… 十六进制：#ff0000 <==> #f00 三原色：rgb(0,0,0) 取值：[0-255] 三原色+透明度：rgba(0,0,0,

2020-12-17 16:19:07 112

原创 3表单+css基础

表单(form)作用：收集用户信息action=“提交地址”method=“提交方式” get:在地址栏明文提交，不安全，有长度限制，可能会造成数据丢失，一般提交数据短，提交时速度快。 post:不在地址栏提交，安全，没有长度限制，不会造成数据丢失，一般提交数据较大，提交数据慢。input：表单元素 type=“text” 单行文本输入框 type=“password” 密码框 value=“值” placeholder=“用户提示信息” name=“名字”css基础

2020-12-17 16:18:00 194

原创 2浮动+盒子模型

浮动(float)让竖着排列的元素横着排列float:none(不浮动)，left(左浮动)，right(右浮动)影响：1.让元素横着排列2.脱离文档流3.左浮动找左边，右浮动找右边4.贴靠现象，父元素宽度不够，子元素换行5.图文混排【注】子元素添加浮动，父元素要清除浮动 float脱离文档流，但是它在其他盒子内的文本依然会为这个元素让出位置，环绕在该元素四周盒模型标准盒模型组成内容区域：width ， height 内边距区域：padding 边框区域：bor

2020-12-17 16:17:30 96

原创 1常用标签

常用标签h1 – h6 : 标题标签，文本加粗变大，依次变小，独占一行。在一个页面中，h1只允许出现一次b / strong : 加粗标签，在一行显示。 b 是视觉效果，string是粗体字。i / em : 加粗标签，在一行显示。 i 是视觉效果，em是粗体字。u : 下划线标签。在一行显示。br ：换行标签。hr ：水平线。sub：下标。sup：上标。p：段落标签，独占一行。不能嵌套单独占一行的标签，能嵌套只占自己内容大小位置的标签。span：文本节点标签，在一行显示。html特殊

2020-12-17 16:15:56 232

00的博客