zoukankan      html  css  js  c++  java
  • 前端CSS部分知识整理

    1、如何清除图片下方出现几像素的空白间隙?

    /*方法1:*/
    img{display:block;} 
    方法2:
    /*img{vertical-align:top;}*/
    

    2、如何让文本垂直对齐文本输入框?

    input{vertical-align:middle;}
    

    3、如何让单行文本在容器内垂直居中?

    #test{height:25px;line-height:25px;}
    /* 只需设置文本的行高等于容器的高度即可 */
    

    4、如何让超链接访问后和访问前的颜色不同且访问后仍保留hover和active效果?

    a:link{color:#03c;}
    a:visited{color:#666;}
    a:hover{color:#f30;}
    a:active{color:#c30;}
    /* 按L-V-H-A的顺序设置超链接样式即可,可速记为LoVe(喜欢)HAte(讨厌)*/
    

    5、如何使文本溢出边界不换行强制在一行内显示?

    #test{150px;white-space:nowrap;}
    /* 设置容器的宽度和white-space为nowrap即可,其效果类似标签 */
    

    6、如何使文本溢出边界显示为省略号?

    #test{150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    /* 首先需设置将文本强制在一行内显示,然后将溢出的文本通过overflow:hidden截断,并以text-overflow:ellipsis方式将截断的文本显示为省略号。 */
    

    7、如何使连续的长字符串自动换行?

    #test{150px;word-wrap:break-word;}
    /* word-wrap的break-word值允许单词内换行 */
    

    8、如何清除浮动?

    /*方法1:*/
    #test{clear:both;}
    /* #test为浮动元素的下一个兄弟元素 */
    
    /*方法2:*/
    #test{display:block;zoom:1;overflow:hidden;}
    /* #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height */
    
    /*方法3:*/
    #test{zoom:1;}
    #test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}
    /* #test为浮动元素的父元素 */
    

    9、如何让未知尺寸的图片在已知宽高的容器内水平垂直居中?

    #test{display:table-cell;*display:block;*position:relative;200px;height:200px;text-align:center;vertical-align:middle;}
    #test p{*position:absolute;*top:50%;*left:50%;margin:0;}
    #test p img{*position:relative;*top:-50%;*left:-50%;vertical-align:middle;}
    /* #test是img的祖父节点,p是img的父节点。Know More:未知尺寸的图片如何水平垂直居中 */
    

    10、如何设置span的宽度和高度(即如何设置内联元素的宽高)?

    span{display:block;200px;height:100px;}
    /* 要使内联元素可以设置宽高,只需将其定义为块级或者内联块级元素即可。所以方法非常多样,既可以设置display属性,也可以设置float属性,或者position属性等等。 */
    

    11、如何去掉超链接的虚线框?

    a{outline:none;}
    

    12、如何容器透明,内容不透明?

    .outer{200px;height:200px;background:rgba(0,0,0,.2);background:#0009;filter:alpha(opacity=20)9;}
    .outer .inner{position:relative9;}
    /*我是不透明的内容*/
    /* 高级浏览器直接使用rgba颜色值实现;IE浏览器在定义容器透明的同时,让子节点相对定位,也可达到效果 */

    13、如何做1像素细边框的table?

    /*方法1:*/
    #test{border-collapse:collapse;border:1px solid #ddd;}
    #test th,#test td{border:1px solid #ddd;}
    
    姓名 Joy Du
    年龄 26
    
    /*方法2:*/
    #test{border-spacing:1px;background:#ddd;}
    #test tr{background:#fff;}
    
    姓名 Joy Du
    年龄 26
    /* IE7及更早浏览器不支持border-spacing属性,但是可以通过table的标签属性cellspacing来替代。*/
    
  • 相关阅读:
    Comet学习资料
    vue 组件使用中的细节点
    js基本数据类型 BigInt 和 Number 的区别
    vue v-model 简单使用
    promise总结
    axio post 请求后端接收不到参数的解决办法
    快速配置webpack多入口脚手架
    BETA 版冲刺前准备
    Alpha 事后诸葛亮(团队)
    Alpha 答辩总结
  • 原文地址:https://www.cnblogs.com/wuhairui/p/6143193.html
Copyright © 2011-2022 走看看