• 前端_day04_行,块,RGB,行高,overflow


    一,行,块,行内块

      行元素特点:

        1,在一行显示,会和其他标签共享一行,如果当前行满了,换行显示

        2,宽高为内容撑开的大小,无法设置宽高

        3,居中使用text-align,加给它的父级容器

        4,padding和margin只有左右生效,上下不生效

        5,哪些元素是行元素:a,span

      块元素特点:

        1,独占一行

        2,默认与父元素等宽,高度为内容撑开的高度

        3,padding和margin都好用

        4,居中使用margin:0 auto;

        5,哪些元素是块元素:div,p,h1-h6,ul,ol

      行内块元素特点:

        1,右宽高和别人共享一行

        2,宽高:默认内容撑开,可以设置宽高.input=button设置宽高前,要先改背景颜色

        3,居中:在父容器上添加text-align:center

        4,margin和padding:都好用

        5,哪些是行内块元素:img,input

      行块元素的转换

        1,display的三个参数:block(将标签转为块元素),inline(将标签转为行元素),inline-block(将标签转为行内块)

    二,背景background

      1,background-image:url(path);图片网址或图片路径

      2,background-repeat:背景图片是否重复

        no-repeat:不重复

        repeat:默认重复

        repeat-x,y:x或y轴重复

      4,background-position:背景图片定位位置

        left,right,center

        坐标值:10px,20px(x,y轴进行偏移

      5,补充css的属性 list-style

        list-style:none 去掉列表前方的小点

        list-style-image:替换小点的图片

    三,颜色值(十进制+透明度)

      1,十进制三原色颜色值 0-255 rgb(122 224 16)

      2,颜色值搭配透明度,透明度的值0-1的小数,rgba(216 76 51 0.5)

    四,line-height

      1,想要通过线高调整垂直距中,线高要等于父容器的高度

      2,如果上下2个行元素要设置距离,线高设置为字体大小的2倍及以上

      3,字体大小=font-size+2*padding(上下内边距)

      4,设置图片与文字的对齐方式vertical-align,参数为top,bottom,middle

    五,overflow

      1,当内容超出父容器的范围时(溢出)用overflow处理

      参数:auto(自动),hidden(隐藏),scroll(滑动)

        

        

      

  • 相关阅读:
    nginx能访问html静态文件但无法访问php文件
    LeetCode "498. Diagonal Traverse"
    LeetCode "Teemo Attacking"
    LeetCode "501. Find Mode in Binary Search Tree"
    LeetCode "483. Smallest Good Base" !!
    LeetCode "467. Unique Substrings in Wraparound String" !!
    LeetCode "437. Path Sum III"
    LeetCode "454. 4Sum II"
    LeetCode "445. Add Two Numbers II"
    LeetCode "486. Predict the Winner" !!
  • 原文地址:https://www.cnblogs.com/memo-song/p/8584125.html
Copyright © 2020-2023  润新知