zoukankan      html  css  js  c++  java
  • 常用CSS备忘

    1 怎样让div中的img居中

    水平居中:div设置:text-align:center;
    img设置:图片宽度; margin:0 auto;
    
    垂直居中:div设置:position:relative;
    img设置:position:absolute; top:50%; height:图片高度; margin-top:图片高度的一半;

    2 display显示块圆角特效

    border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius: 2px;-o-border-radius: 2px;

    3 div没有高度

    子元素 div2 本身具有高度和宽度,但由于其具有float:left;属性后。其父元素 div1 不具有高度,解决方法:
    1) 直接给 div1 设置固定高度来解决
    2) 给父元素 div1 设置 overflow:hidden 属性

    4 css改变光标的位置

    <input style="padding-left:0 8px;"/>

    5 css实现如下效果:

    <div style='background-color:#0A9EE5;100%;height:52px;position:fixed;z-index:99'>
        <div style='padding:10px;height:32px;line-height:32px;'>
        <div style='float:left;10%;'>
            <div style='text-align:center'><img style='margin:auto' src='../img/Back-32.png'></div>
        </div>
        <div style='float:left;padding-left:1%;79%;'>
            <input id='assSearchId0000' type='text' style='92%;height:28px;border:0px;padding:0 8px;' placeholder='关键字..'>
        </div>
        <div style='float:left;10%;'>
            <div style='text-align:center'><img style='margin:auto' src='../img/Search-32.png'></div>
        </div>
        </div>
    </div> 

     6 css实现以下简单布局:要求title左右居中

    <div style="position:absolute;left:0px;right:0px;text-align:center;">XXX</div>
    <div style="position:absolute;right:0px;">XXX</div>

     7 去除button,input点击后出现的蓝色(或红色等等)覆盖层或边框

    {outline:none;}
  • 相关阅读:
    如何在Element 使用正则表达式校验
    Vs Code 微信小程序 神兵利器合集
    分享CSS公共类库(能在项目快捷使用CSS类)
    Element+Axios上传图片 OR 文件
    两种简洁的数组对象去重姿势
    VScode 格式化代码保存时使用ESlint修复代码
    如何在linux上部署vue项目
    Vue 2.x 3.x 配置项目开发环境跟线上环境
    在Vue文件中引入外部URL链接
    博客目录
  • 原文地址:https://www.cnblogs.com/jager/p/4777608.html
Copyright © 2011-2022 走看看