HTML 学习笔记

作者: Faith_K | 来源:发表于2019-07-04 14:23 被阅读0次

    1 常用的属性

    width  宽度
    height 高度
    color 设置文颜色
    font-size 字体大小
    border-bottom
    background-color 背景颜色
    display inline 让块级标签->行内元素 block 让行内元素->块级标签 inline-block行内块级标签
    margin 外边距
    padding 内边距  padding-left padding-right...
    border-radius 圆角 border-top-left-radius  border-top-right-radius...
    float 浮动 left 左浮动 right右边浮动
     text-align 文本对齐 
    position 是否开启位置改变  relative相对 absolute绝对 fixed 固定
    line-height 设置行高
    text-decoration  none去除下划线 如果去除不掉  text-decoration: none !important
    list-style 设置列表风控
    cursor 鼠标移动需要显示的类型
    background: url("../images/desktop.png") 设置背景图片 background-repeat  no-repeat关闭平铺
    background-size 背景大小
    background-attachment 背景滚动 fixed
    z-index 视图层级  1 2 3...
    transform: scale(1.5) 图片放大一点五呗
    transform-origin: bottom center 方向
    box-sizing: border-box; 设置盒子伸缩 向内还是向外
    vertical-align: middle 设置两个元素中间对齐
    border: 1px solid #e0e0e0 设置边框宽度颜色
    overflow: hidden  clear: both /*解决高度塌陷问题*/ .clearfix:before .clearfix:after
    

    2 序号选择器

      不区分类型
                :first-child
                    选中同级别中第一个标签
                :last-child
                    选中同级别中最后一个标签
                :nth-last-child(n)
                    选中同级别中倒数第n个标签
                :nth-child(n)
                    选中同级别中第n个标签
                :only-child
                    选中同级别中唯一子元素标签
     区分类型
                :first-of-type
                    选中同级别中同类型第一个标签
                :last-of-type
                    选中同级别中同类型最后一个标签
                :nth-of-type(n)
                    选中同级别中同类型第n个标签
                :nth-last-of-type(n)
                    选中同级别中同类型倒数第n个标签
                :only-of-type
                    选中同级别中唯一同类型子元素标签
    奇偶选择
                :nth-child(odd)
                    选中级别中所有奇数
                :nth-child(even)
                    选中同级别中所有的偶数
                :nth-child(xn+y)
                    x,y是用户自定义的 n为计数器,从0开始递增选择,  到元素的总个数停止
    

    相关文章

      网友评论

        本文标题:HTML 学习笔记

        本文链接:https://www.haomeiwen.com/subject/wmnlhctx.html