H5+css3 常用属性 2020-02-11 HTML,前端,CSS 暂无评论 560 次阅读 ##H5+css3 常用属性 height:100px; 高度 width:100px list-style:none 取消样式 一般给ul 因为性能优化 不建议给li设置 因为li是继承ul的属性 cursor: pointer;（wait 沙漏） 鼠标移动元素上改变指针样式 text-decoration:none 超链接无下划线（属性underline 鼠标悬浮显示下划线） ``` visibility:hidden; 隐藏元素 会留下占用位置 display:none; 隐藏元素 不会留下占用位置 opacity:0.1; 背景透明度 它的子元素也很透明度所影响 透明的颜色会和下一层所一样 background: rgba(0,0,0,0.4) 背景透明度且不影响子元素 box-sizing:border-box; (作用:设置边框或者边距内容增多都不会改变盒子的大小变化) placeholder="请输入用户名"; input的属性 作用表示不输入文本框会有默认提示的内容 readonly="readonly" input 属性 让给输入框的值设置只读状态 ``` ``` <center> 标签对其包围的文本进行水平居中处理。 height:auto 自适应 <meta charset="UTF-8"> 设置网页的编码格式 颜色属性; transparent 透明色 加权重：例如 这样.test就会有优先顺序 .test{ color:red !important; } ``` 有时候i行类元素出现底部有间距时候，可以尝试父元素加font-size:0; 因为行类都继承了父类... 图片文字等inline元素默许是和父级元素的baseline对齐的，而baseline又和父级底边有必定间隔（这个间隔和 font-size，font-family 相关）， 所以设置 vertical-align:top/bottom/text-top/text-bottom 都能够防止这种状况呈现。而且不光li，其他的block元素中包括img也会有这个景象。 ##字体 -------------------《字体》 ``` white-space: nowrap; overflow: hidden; 溢出裁剪 作用:1.可以清除浮动 2.可让超出标签的内容除掉 3.可以不让外盒子设置外边距不会顶下来 text-overflow: ellipsis;/* 超出内容显示为省略号 ......*/ white-space: nowrap;/*文本不进行换行*/ font-family:"微软雅黑"; 字体样式 font-weight:bold 字体粗细 font-size:10px; 字体大小 text-align:center; (上 下 左 右 中): 字体对齐那方(div中的图片也可当文本处理）是容器里的内容居中不是本身 (水平居中) vertical-align:top; line-height:10px 行高（一般div和文本的行高一样就可以实现垂直居中） （垂直居中） text-shadow:1px 1px 5px 字体阴影（参数：水平多少度 垂直多少度 阴影多少像素）最后面还可以加颜 vertical-align:middle; 图片文本居中对齐 ``` ##图片 ``` -------------------《图片》 1.在网页中单独设置图片高度或者宽度时 默认会等比拉伸 好处不会让图片变形 2.如何在网页图片超过了div的宽度 那么就不能用外边距和图片居中方式 得用父类div中加text-align: center; 图片中加入margin:0 -100%; filter: blur(6px); 过滤 应用场景 背景图片下显示头像。 背景过滤可以突出头像清晰度 一般配合hsla background: hsla(0,0%,80%,.45); 背景调色 background-image:url();背景图片 background-repeat:repeat;图片平铺（默认） background-repeat:no-repeat;图片不平铺 background-repeat:no-x; 水平方平铺 background-position:水平 高度...(参数还可以填像素PX默认第一位为>和上)-(<left 上top >right 下bottom 中center) background-size:cover; 背景图片的设置大小尺寸 background-attachment:fixed; 背景图片不会别滑动页面所覆盖 background-color:rgba(0,0,0,.5); 颜色透明度（参数越小越不透明） 黑色透明 background：red 于 background-color：red区别 前者会是浏览器多余的查询并渲染、 后者直接查找渲染。 ul>li 利于SEO ``` ##转行块级元素 -------------------《转行块级元素》 ``` display:inline-block; 转行内块级元素 display:block; 转行内元素 box-shadow:水平 垂直 模糊度; 盒子阴影 --伸缩布局 让div有间隔，唯一作用：节省代码 display:flex; justfy-content:space-between; ``` ##边框属性 -------------------《边框属性》 ``` border-radius:50%; 把边框边角度边50.就是圆圈了 border:宽度 样式 颜色 （清除边框样式可指定那边清除：border:none（清除全部）） 注意点:连写边框格式中颜色可省略，默认黑色 :连写边框格式中颜色不可省略， ;连写边框格式中k宽度可省略 border-top:10px solid red border-right:....(等等) （第二种连写方式） border-width:上 右 下 左 border-style:上 右 下 左 border-color:上 右 下 左 注意点:三个属性取值方式是按顺时针来的赋值 :如果又一边不填则按照对边方的属性取值 ``` ##内边距 -------------------《内边距》--边框也内容的距离 ``` padding-left:10px; 注意点:取值方式和边框属性类似 padding-(上 右 下 左):10px; padding:1px 1px 1px 1px;(上 右 下 左) -------------------《外边距》--标签与标签的距离 非连续方式：margin-top:1px;(上 右 下 左) 连续方式: margin:1px 1px 1px 1px;(上 右 下 左) 注意点:外边距在垂直方向上布局不会叠加。出现合并现象。谁的距离远就听谁的 margin:0 auto; 水平方向居中，垂直无效 属性为:display:inline 时无效 ``` ##浮动 -------------------《浮动》 ``` 1.浮动不区分大小写 2.设置浮动之后行内标签都可以设置宽高属性 3.浮动中不会有居中，只能自父容器的左边或者右边 注意点:浮动元素字那行，就在那好的左或者右边浮动，而不是最顶端浮动 float:left; float:right; clear:both 清除浮动 ``` ##定位 -------------------《定位》 ``` position:relative 相对定位（相对自己以前的位置进行调整） position:absolute 绝定定位（相对于祖先元素为定位流的元素最近的网页首屏来定位 脱离标准流） 会忽略祖先元素为定位流的元素的内边距 固定定位和绝对定位居中的方法:写上left:50%，在margin-left:父元素宽度的一半 position:fixed; 固定定位（脱离标准流。不过因为滑动条而改变位置） z-index:1; 显示级别（值越小越容易被覆盖） ``` ##CSS3新增属性 -------------------《CSS3新增属性》 ``` 标签名:hover{} 指针停浮子该标签上的属性设置 过渡属性 （三要素：1.必须有变化 2.变化的属性 3.变化得时间） transition-property:(要过渡的属性：宽 高 ....) 过渡的属性可以放多个用逗号隔开 transition-duration:5s; 过渡的时间 过渡的时间可以放多个用逗号隔开 连续方式:transtiton:(比如;width 5s linear 0s)过渡属性 过渡时间长度 运动速度 延迟时间;可省略后面2个参数 transform:rotate(45deg) 默认Z轴旋转45度 想为那个转就rotate加一个大写（Z Y X） transform:translate(100px 20px)/ranslateY/X(px)scale(倍数) 平移 参数:水平方 垂直方 transform:scale(2,2) 缩放 参数:水平方 垂直方（参数1倍不变 ） transform-origin:水平 垂直 指定发生改变的坐标 perspective:500px 透视属性 想透视谁就在谁的父元素加上这个属性 ``` ##伪类选择器 -------------------《伪类选择器》 ``` 标签名:nth-child(1){} 现在什么的第几个元素参数放元素的位置号(括号里可以放even 和 odd) -------------------《动画》 @keyframes 动画名 {动画属性 } 创建动画 ``` 标签: H5+CSS3 本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
评论已关闭