• margin的用法 清除默认样式 display属性值 块状元素 内联元素 行内块元素


    margin的用法:

    1,margin是在元素的宽高以外的

    2,作用:控制元素之间的位置关系

    3,margin不能改变盒子本身大小的

    4,单一一个方向设置margin值:

    margin-left    margin-right   margin-top    margin-bottom

    5,margin设置技巧和padding一样可以看我上一篇随笔

    6,margin是可以接受负数的

    7,让当前元素在父元素里面左右居中:margin0 auto

    8,margin经常出现的bug

    A,上下二个元素之间的margin会重叠,按照最大的来显示

    B,默认情况下(父子元素都没有浮动等属性)给第一个子元素添加margin-top的值会解析到父元素上面

    控制子元素在父元素的位置关系用padding 控制同级元素之间位置关系用margin

    Div在不去设置宽度的时候或者设置width100%;跟随父元素的宽度  内部元素大小,该怎么设置就怎么设置

    清除标签默认样式,重置样式

    bodyfont-size16px

    清除字体font-family”Microsoft”;

    清除前面点的样式 ulolli{

    list-stylenone

    }

    清除下划线 ua{

    text-decorationnone

    }

    清除倾斜 iem{

    font-stylenormal

    }

    清除加粗bstrong{

    font-weightnormal

    }

    清除默认大小h1~h6{

    font-size16px

    font-weightnormal

    }

    边框清零img{

    bordernone

    }

    清除input聚焦时候的蓝色边框input{

    outlinenone

    }

    1,input默认情况如果对不起 添加浮动即可

    2,Input按钮边框会长在input的宽高内部(兼容问题)

    3,如何给input按钮添加边框 在input按钮的外围套一个盒子 把边框架子啊盒子上面

    1,如果新闻列表有时间

    <li>

    <a href=”#”>内容<a/>

    <span>时间</span>

    </li>

    2,li设置宽高  高度的获取量行高即可

    3,如果新闻列表有时间 a加浮动 给时间标签也加浮动

    控制文本换行:white-spacenowrap

    空白空间的处理:

    white-space

    属性值:

      pre 会保留空格,并且文本不会换行

      pre-line

      pre-wrap  保留空白换行

      nowrap 让文本不换行

    溢出(超出)容器之后的显示状态

    overflow:;

    属性值:

     scroll  让容器产生滚动条,可以让用户拖动滚动条来查看

     auto  自动(当内容超出的时候有滚动条,没有的时候没有滚动条)

     hidden 超出隐藏

     overflow-x|y 控制纵向或者横向的溢出状态

    2,让文本超出隐藏

    overflowhidden

    3,让超出的文本省略号显示

    4,text-overflowclip/ellipsis

    clip:不产生省略号

    ellipsis:产生省略号

    根据css的显示状态把html标签分类:

    块状元素     内联元素(行内元素)    行内块元素

    块状元素特点:(默认情况)

    A,在页面张红以矩形区域显示

    B,能直接设置宽度和高度

    C,独占一行 自上而下排列

    D,块状元素一般作为其他内容或者元素的容器

    内联元素的特点:

    A,在页面中最小单位为矩形

    B,不能直接给元素设置宽度和高度

    C,在一行内排列,不会产生换行

    D,也符合盒模型的规则,但是个别属性(padding-t/p  margin-t/p 不能正确显示)

    行内块元素:

    可以设置宽高

    根据整体上下文 最终元素 所形成的是块状还是内联

    button典型的可变元素

    元素类型的转换:

    display:;

    作用:检索或者设置元素所生成的类型

    displayblock

    作用:将原故事转化为块状元素 拥有块状元素的特点

    displayinline

    作用:将原属转成内联元素 拥有内联元素的特点

    displaynone

    将元素完全隐藏,并且不占据空间

    知识点补充:

    当元素有浮动的时候,可以添加宽高

    1,块状元素的display的默认值大部分是block 但是里面有特殊的 例如lidisplaylist-item

    list-item的元素,有列表符号的

    2,内联元素的display的默认值,大部分为inline但是这一类里面有特殊的:

    inputdisplay的默认值,大部分为inline-block 行内块元素

    inline-block元素的特点:

    1, 一行内显示排列 不会换行

    2,可以直接设置大小

    img默认的特点和inline-block的特点完全吻合的  但是浏览器默认解析displayinline

    如果让内联元素在父元素里面左右居中:只需要给父元素添加text-alinecenter

    vertical-align

    属性值

      top 顶线对齐

      bottom 底线对齐

      middle  中线对齐

      baseline  基线对齐

    让子元素在父元素里面上下居中

    上下居中需要找一个元素当做参照物确定当前容器里面的中心线

    参照物怎么确定?

    在资源的后面(不要回车换行)添加一个空的span并且设置样式

    span{

    0; 不能显示

    height100%;  容器高度

    }

    span居中左右排列 displayinline-block

    确定中心线:vertical-alignmiddle

    这样的居中显示你们应该没有见过 现在用的几乎没有大家看个乐呵就行

    display 属性值:

    block 转块

    inline 转内联

    none 隐藏

    list-item 列表元素

    inline-block 行内块

    块:块状元素在设置宽度的时候跟随父元素的变化

    内联元素:不去设置宽高,大小被内容撑开的

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    Netty检查连接断开的几种方法
    docker部署RabbitMQ集群
    docker部署elk日志采集系统(kafka方式)
    docker部署elk日志采集系统(tcp方式)
    Chrome浏览器RCE 0Day漏洞PoC公开--漏洞复现
    LLMNR和NetBIOS欺骗--获取win7 ntlm-hash
    利用php配置文件构成后门
    zabbix 用sendEmail发邮件
    Exchange 2013 ecp中启用重置用户密码功能
    CentOS7下使用yum安装MariaDB
  • 原文地址:https://www.cnblogs.com/ht955/p/13773627.html
Copyright © 2020-2023  润新知