• html5中的一些小知识点(CSS)


    1、点击a标签周围区域就可以进入超链接: a标签 的css样式中的 display属性设置为block 就可以了

    2、文字左右居中: text-align 属性值为 center

    3、文字上下居中: line-height 为父元素的高度值

    4、(1)导航栏的 li 如果设置 display 属性为 inline,所有条目在一行;如果设置 display 属性为 block,每个条目占据一行;inline-block 属性会使对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。例如,对 li 属性设置block属性为inline-block,可以使 li 显示为一行inline,li 中的内容就是一个单独的block(li 内的内容block显示),li中如果有 a 标签,可以设置 a 标签的 display 属性为 block, 以使点击 a 标签的周围就可以出发 a 的超链接。

    (2)使条目显示在一行还可以设置 li 标签的 css 如下

    1 li{
    2     box-sizing: border-box;
    3     float:left;
    4     list-style-type: none;
    5     inline-height:    // 父标签的高度
    6 }

     5、整个页面居中:对body设置如下css

    1 body{
    2     width:80%;
    3     margin:0 auto
    4 }

    其中的width一定要设置为小于100%的宽度,否则默认整个页面的宽度(100%)展示,居中效果显示不出来

    6、消除 li 标签前面的小圆点的方法:list-style-type:none;

    7、以下css可以设置选中文字为白色,选中文字背景为粉红色

    1 ::selection{
    2     color:white;
    3     background: pink;
    4 }

    8、css多个属性选择器 a[href][class="good"]  含有href属性且类名为good的的a标签

    9、div中img会比实际高度多出一部分,是因为img是一种类似与text的的元素,在img的结尾会加一个空白符。要去除高出的一部分,将img的display属性设置为block就可以解决

    10、outline:0; 用来设置元素边框为0,在选中一个链接或使用tab键切换选中某一个链接之后会有边框出现,当设置了outline:0; 之后边框不再显示。

      outline-width 用来指定边框宽度

      outline-style 用来指定边框样式

      outline-color 用来指定边框颜色  

    11、设置下标 position:relative; font-size:0.75em; top:0.5em;

      设置上标 position:relative; font-size:0.75em; bottom:0.5em;

    12、奇偶行设置样式 :nth-clild() 伪选择器

      :nth-child(odd)  奇数行

      :nth-child(even)   偶数行

      :nth-clild(2n+1)  用一个表达式选择要渲染的行元素

  • 相关阅读:
    社会影响力入门:打造有所作为的公司
    JSP中的include有哪些?有什么差别?
    关于程序猿怎样降低程序Bug的若干建议
    linux文件打开模式
    IntelliJ IDEA 问题总结之中的一个 —— jar包、assets、maven、git
    linux下改动内核參数进行Tcp性能调优 -- 高并发
    思科模拟器配置三层交换机局域网
    MFC调试小技巧
    JAVA基础编程50题(10-12题)具体解释
    加速度传感器的原理和应用-手机翻转、失重检测、运动检测、位置识别
  • 原文地址:https://www.cnblogs.com/iGel/p/4669726.html
Copyright © 2020-2023  润新知