zoukankan      html  css  js  c++  java
  • 第六节课-块级 行内 行内块

    1.样式初始化 :1.*{margin:0; padding:0;}

            2. ol ul   list-style:none

                             3.a 标签取消下划线 text-decoration:none(默认值为underline)

                             4.img{border:0}

    以上写进模板

    2.块级元素:独占一行,可自行设置宽高。不写宽默认为父级宽,不写高度由内容撑开,一旦写宽高就固定了,可能会被溢出但不会被撑开。

     子级如果设置宽高超出父级会溢出,不会仅在父级内。,内容过多也会溢出盒子。

        display:block ,支持margin 以及margin:auto 和 padding 

     常见的块级元素:div

                                    p

                                    ul ol li

                                    dl dt dd

                                    form

                                    h1~h6

    块级标签可以嵌套其它元素:p h1-h6 不能嵌套 ul ol li dl dt dd 之间不能插其它元素。

    行内元素不能嵌套块级元素,a标签可以套块级,但不会应用于布局。

    行内块不能套块级

    3.行内元素(内联元素) .1.可以与其它行内元素友好的横排显示,不独占一行

      display:inline                2.不支持设置宽高,宽高由内容撑开,支持设置border.

                                          3.margin 只支持左右的margin,但不支持上下的margin与margin:auto

                                          4.支持padding

                                          5.与块级元素重叠部分,以块级为主。

                                          6.如果行内标签之间没连在一起,网页显示会解析出一个空格且受body里的字体大小影响。eg <span></span>            <span></span>

                                            解决方法一(不适用。会使代码臃肿):放在一起 <span></span>

                                            解决方法二:body{font-size:0}(0的时候可以省略px)

                                  7.存在基线对齐问题

                        8.常见的行内元素:span img a  b strong

    块级元素与行内元素可以通过display 来进行类型转换,来实现需要的功能,比如给a标签display:block就可以给他设置宽高。

    display:block 块级

    display:inline 行内元素

    display:inline-block 行内块元素(不独占一行,但支持设置宽高,不写高度由内容撑开,不写宽度默认父级宽度支持具有块级元素范围的margin padding,如果行内块标签之间没连着写,也会像行内元素一样,会解析出一个空格,会存在一个基线对齐的问题。,基线指的是其内部文字的底部上面一点点,一般用来解决行内元素的宽高设置 margin问题。

    网页中基本用浮动来做横排显示

    img input 行内块元素 <input type="text"></input>

                                          

        

        

  • 相关阅读:
    [Vue] #常见开发场景 #条件渲染#手动挂载 #组件方法的值驱动执行
    [JS高程] Typed Array 定型数组
    [JS高程]JavaScript中的RegExp对象
    [JS高程] Map 和 Set
    [JS高程] JavsScript 常用数组方法总结
    [JS高程] 字符串模式匹配方法
    自动化集成:Pipeline整合Docker容器
    自动化集成:Docker容器入门简介
    自动化集成:Jenkins管理工具详解
    分布式系统中,权限设计实践
  • 原文地址:https://www.cnblogs.com/yzdwd/p/12084854.html
Copyright © 2011-2022 走看看