zoukankan      html  css  js  c++  java
  • 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 行内块

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

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

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    PythonのTkinter基本原理
    使用 Word (VBA) 分割长图到多页
    如何使用 Shebang Line (Python 虚拟环境)
    将常用的 VBScript 脚本放到任务栏 (Pin VBScript to Taskbar)
    关于 VBScript 中的 CreateObject
    Windows Scripting Host (WSH) 是什么?
    Component Object Model (COM) 是什么?
    IOS 打开中文 html 文件,显示乱码的问题
    科技发展时间线(Technology Timeline)
    列置换密码
  • 原文地址:https://www.cnblogs.com/ht955/p/13773627.html
Copyright © 2011-2022 走看看