zoukankan      html  css  js  c++  java
  • css随笔属性

    anchor伪类,用于阅读文章。
    a:link(没有接触过的链接),用于链接常规状态 (末访问的链接)
    a:hover(鼠标放在链接上的状态) 用于产生视觉效果(已访问的链接)
    a:visited(访问过的链接)能清楚判断已经访问的链接(鼠标移动的链接)
    a:active(在连接上按下鼠标是的状态),用于表现鼠标按下是的链接状态(选定的链接)

    before after伪类
    :before p:before 在每个<p>元素之前插入的内容
    :after p:after 在每个<p>元素之后插入的内容


    css的优先级
    1、style="-----------1000"; 内敛样式表的权值最高
    2、#id---------------100; 统计选择符中ID的属性个数
    3、.class------------10; 统计选择符中的class属性个数
    4、p------------------1; 统计选择附中的HTML标签个数

    水平对齐方式
    text-align属性规定元素中的文本的水平对齐方式

    left 把文本排列左边

    right 把文本排列右边

    center 把文本排列中间

    justify 实现两端对齐文本的效果

     


    line-height:200px; 文本行高

    vertical-align :-4px; 元素内容垂直对齐方式,只对行内的元素有效,对块级元素无效

    text-decoration:none 去掉拆链接的下划线

    text-decoration:underline 设置超链接下划线

    letter-spacing:10px; 字母间距

    word-spacing:20px; 单词间距

     

    外边距和内边距

    margin:控制元素与元素之间的间距


    padding: 用于控制内容与边框之间的距离

    border: 围绕在内边距和内容外的边框

    content: 盒子内容,显示文本和图像

    margin:外边距属性
    margin-top: 上边距
    margin-bottom: 下边距
    margin-right: 右边距
    margin-left: 左边距

    居中应用:
    margin:0 auto:

     


    常见的块级元素有:div,form,table,p,pre,h1--h5,dl,ol,ul
    常见的内敛元有:span,a,strong,em,label,input,select,img,br

     

     

    list-style:none; 去掉列表默认样式
    no-repeat 0px,4px; 不重复
    transition-duration:0.5s; 设置过渡时间
    border-radius: 50%; 设置边框圆角
    overflow:hidden 超出的部分要裁剪隐藏
    opacity: 设置透明


    背景属性
    属性介绍:
    backgroud-color 背景颜色
    backgroud-image:url(图片位置) 背景图片
    backgroud-position 背景定位

    background-repeat: no-repeat; 背景不重复

    边框属性
    border-20px;
    border-style(required):solid;
    border-color:chartreuse;
    简写:border:30px red solid;
    边框-单独设置各边
    border-top-style:dotted;
    border-right-style:solid;
    border-bottom-style:dotted;
    border-left-style:none;


    列表属性
    list-style-type 设置列表项标志的类型
    list-style-image 将图像设置为列表项的标志
    list-style-position 设置列表中列表项标志的位置

     

    diaplay属性
    diaplay:inline; 转换内敛标签
    diaplay:block; 转换块级标签
    diaplay:inline-block;
    diaplay:none;

    边距的塌陷问题


    float浮动


    清除浮动
    clear: 清除浮动只对自身起作用

    clear:none 默认值,允许两边可以有浮动现象

    clear:left 不允许左边有浮动(对自身起作用)

    clear:right 不允许右边有浮动

    clear:both 两边都没有浮动


    float; 半脱离文档流
    position:fixed; 固定定位完全脱离文档流
    position:relative; 以自己原位置作为参照物,可以使用top,left ,相对定位,没有脱离文档流
    position:absolute 完全脱离文档流,已经定位的父级作为参照物

  • 相关阅读:
    转载~基于比较的排序算法的最优下界为什么是O(nlogn)
    关于 cgdb & gdbtui 的输入scanf()问题
    制定ip池内随机生成ip地址
    C 随机不重复元素~转
    随机选取算法 (有权重的记录中选取)~转
    全局变量的教训
    Python字符串的encode与decode研究心得——解决乱码问题
    Python 求最大公因式~辗转相除法
    Python格式化字符串~转
    Python 中的枚举类型~转
  • 原文地址:https://www.cnblogs.com/wxp5257/p/7592248.html
Copyright © 2011-2022 走看看