精华内容
下载资源
问答
  • 行内元素的盒模型

    2020-06-02 17:31:52
    - 行内元素支持设置宽度和高度 - 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局 - 行内元素可以设置border,垂直方向的border不会影响页面的布局 - 行内元素可以设置margin,垂直方向的margin...

    行内元素的盒模型
    - 行内元素不支持设置宽度和高度
    - 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局
    - 行内元素可以设置border,垂直方向的border不会影响页面的布局
    - 行内元素可以设置margin,垂直方向的margin不会影响布局
    display 用来设置元素显示的类型
    可选值:
    inline 将元素设置为行内元素
    block 将元素设置为块元素
    inline-block 将元素设置为行内块元素
    行内块,既可以设置宽度和高度又不会独占一行
    table 将元素设置为一个表格
    none 元素不在页面中显示

                   visibility 用来设置元素的显示状态
                    可选值:
                        visible 默认值,元素在页面中正常显示
                        hidden 元素在页面中隐藏 不显示,但是依然占据页面的位置
    
    展开全文
  • 行内元素与块元素

    2018-09-05 20:29:00
    一、行内元素 a span strong em mark img time 特征: ①内容撑开宽高。宽高的值都是auto ②不支持设置宽高 ③不支持上下的margin与上下的padding。只支持左右的margin与padding ④行内元素在一行显示 ⑤代码...

    一、行内元素

    a span strong em mark img time

    特征:

    ①内容撑开宽高。宽高的值都是auto

    ②不支持设置宽高

    ③不支持上下的margin与上下的padding。只支持左右的margin与padding

    ④行内元素在一行显示

    ⑤代码换行会被解析成一个空格(解决空格:font-size=0)

    二、块元素

    div h1-h6 p ul li ol dl dt dd header nav footer section article aside

    特征:

    ①默认独占一行

    ②没有给宽度时,宽度是auto,有父级时,宽度就是父级的宽度。

    ③支持所有的CSS命令

     

    display:inline-block     行内块元素

    特征:

    ①行内元素支持宽高

    ②块元素可以在行中显示

    ③不给宽度的话,宽度由内容撑开

    ④代码换行会被解析成一个空格

    ⑤IE6/7不支持块元素的inline-block

    建议:能不用就不用

    转载于:https://www.cnblogs.com/lemonlee/p/9594326.html

    展开全文
  • P30-前端基础-CSS行内元素的盒模型 1.概述 行内元素和块模块的布局是不同的,下面介绍行内元素布局。...行内元素可以设置margin,垂直方向的margin不会影响布局 <!DOCTYPE html> <html>

    P30-前端基础-CSS行内元素的盒模型

    1.概述

    行内元素和块模块的布局是不同的,下面介绍行内元素布局。

    2.CSS行内元素的盒模型

    2.1.行内元素的盒模型

    行内元素的盒模型

    • 行内元素不支持设置宽度和高度
    • 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局
    • 行内元素可以设置border,垂直方向的border不会影响页面的布局
    • 行内元素可以设置margin,垂直方向的margin不会影响布局
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <title>行内元素的盒模型</title>
        <style>
          /* 
                    行内元素的盒模型
                        - 行内元素不支持设置宽度和高度
                        - 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局
                        - 行内元素可以设置border,垂直方向的border不会影响页面的布局
                        - 行内元素可以设置margin,垂直方向的margin不会影响布局
                 */
          .s1 {
            background-color: darkorange;
            /* 行内元素不支持设置宽度和高度 */
            width: 100px;
            height: 100px;
    
            /* 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局 */
            padding: 100px;
    
            /* 行内元素可以设置border,垂直方向的border不会影响页面的布局 */
            border: 100px solid red;
    
            /* 行内元素可以设置margin,垂直方向的margin不会影响布局 */
            margin: 10px;
          }
        </style>
      </head>
      <body>
         <a href="javascript:;">超链接</a>
        <a href="javascript:;">超链接</a>
    
    
        <span class="s1">我是span</span>
        <span class="s1">我是span</span>
        
        <div class="box1"></div>
      </body>
    </html>
    

    2.2.行内元素的盒模型效果

    在这里插入图片描述

    3.CSS设置行内元素显示的类型

    3.1.display 用来设置元素显示的类型案例

    <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="UTF-8">
      <title>行内元素的盒模型</title>
      <style>
        a {
          /* 
                    display 用来设置元素显示的类型
                        可选值:
                            inline 将元素设置为行内元素
                            block 将元素设置为块元素
                            inline-block 将元素设置为行内块元素 
                                    行内块,既可以设置宽度和高度又不会独占一行
                            table 将元素设置为一个表格
                            none 元素不在页面中显示
    
                    visibility 用来设置元素的显示状态
                        可选值:
                            visible 默认值,元素在页面中正常显示
                            hidden 元素在页面中隐藏 不显示,但是依然占据页面的位置
                 */
    
          display: block;
          visibility: hidden;
    
          width: 100px;
          height: 100px;
          background-color: orange;
        }
      </style>
    </head>
    
    <body>
      <a href="javascript:;">超链接</a>
      <a href="javascript:;">超链接</a>
    
    </body>
    
    </html>
    

    3.2.display 用来设置元素显示的类型效果

    在这里插入图片描述

    展开全文
  • 支持和其它行内元素在同一行显示. 3. 不支持设置宽度和高度. 4. 支持左右margin,不支持上下margin. 5. 上下padding只对自身有效果,会被其他元素无视. 6. 不能包含块级元素,可以包含行内元素. 注意: ***...

    行内/内联元素:
    1 . 由内容撑开宽度和高度.
    2 . 支持和其它行内元素在同一行显示.
    3. 不支持设置宽度和高度.
    4. 支持左右margin,不支持上下margin.
    5. 上下padding只对自身有效果,会被其他元素无视.
    6. 不能包含块级元素,可以包含行内元素.
    注意:
    ***a标签不能包含a标签.


    在这里说一下a标签的另一个特殊的用法
    

    锚点;
    可以应用A标签的name属性来设置锚点.

    <a href="#test">点击跳转到锚点</a>
    ......
    <a href="#" name="test">跳转到的内容</a>
    ......

    块级元素:
    1 . 宽度默认为父级的100%.
    2 . 没有宽度和高度时,内容撑开宽高.
    3 . 支持设置宽度和高度.
    4 . 支持margin.
    5. 支持padding.
    6. 块级元素可以包含块级元素.也可以包含行内元素.
    注意:
    * p标签不能包含块级元素.

    展开全文
  • - 行内元素支持设置宽度和高度 - 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局 - 行内元素可以设置border,垂直方向的border不会影响页面的布局 - 行内元素可以设置margin,垂直方向的...
  • 1&gt;块级元素:独占一行,支持...行内元素:可以在一行显示,不可以设置宽高,宽度有内容撑开,高度随字体大小而改变,上下margin,padding会出问题,换行符解析。 常见的行内元素:span,br,img,a,big,samll,...
  • CSS行内元素的盒模型

    2020-07-07 21:33:30
    行内元素支持设置宽度和高度。 行内元素可以设置padding(内边距),border(边框),margin(外边距),且垂直方向不影响页面的布局。 可以通过display来设置元素的类型。 visibilty可以用来设置元素的显示状态。...
  • 块元素 行内元素(内联元素) 与内联块元素区别 一直是模模糊糊的这里做个总结 块元素 常见的除了a都是块元素,块元素也叫行元素,顾名思义是独占一行 div h1~h6 p ul li ol table 有三个特点: 支持全部的css样式,...
  • 元素 特点: ...4,行元素支持margin的上下调动 行内元素 行内元素就是可以把行元素装换成块元素,同理块元素也可以装换成行元素。 转换方式: display:inline-block 把块元素变成行元素 d...
  • 块级、行内元素水平垂直居中方法 块级元素水平垂直居中 // 为目标元素设置外边距自动即可 margin : auto auto ; 行内元素水平垂直居中 ...以上三属性连写即可设置行内元素水平垂直居中,只支持IE8+及现代浏览器
  • 默认宽度为父级100%支持margin padding 支持css样式inline 行内元素span a em默认由内容撑开宽高排成一行不支持设置宽度 高度不支持垂直方向的margin 支...
  • 作为一名小前端,块级元素、行内元素用了几千几万次,除了“块级独占一行,行内不独占”之外,对细节属性的了解十分匮乏,今天做以部分属性的测试和阐述。 一、 对物理属性的支持 元素类别 width height ...
  • 行内元素可以设置padding、border、margin,但是垂直方向的padding、border、margin不会影响页面的布局 2.display 用来设置元素显示的类型 可选值: inline 将元素设置为行内元素 block 将元素设置为快元素 inline-...
  • 常见的行内元素有:a、span、strong  特点:(1)内容撑开宽度;  (2)不支持宽高;  (3)不支持上下的margin和padding;  (4)代码换行被解析成小小的空格(而且空格间隙是文字的一半大小);    3. 常...
  • 1、块级元素 独占一行可以设置宽度和高度支 持所有的margin和padding可以作为容器包含其他元素,但是p标签不能包含自身...行内元素可以在一行显示不可以设置宽度和高度支持部分的margin和padding(一般是不支持mar
  • 行内元素:input 一级目录 1、没有宽度时,默认宽度100% 2、支持宽高 3、独占一行 (列展示) 4、支持所有css命令 一级目录 1、 默认内容撑开宽高 2、不支持宽高 3、 可以继续跟同类标签(横排展示、 4、 不支持...
  • 什么是行内盒模型 什么是行内盒模型 行内盒模型指的是行内元素的盒模型,行内盒模型指的是如何排版行内元素的一套规则。 ...不支持上下margin、padding和border支持左右margin、padding和border
  • CSS--Margin

    2017-02-22 19:48:19
    行内元素支持上下margin 应用 一、左右居中margin:0 auto;兼容问题一、IE6下,块元素有浮动的时候,横向margin会出现双倍解决:既然是块元素,那就设置display:inline;二、IE6下,父级有边框,子元素margin值会...
  • 元素类型的转换

    2021-01-10 14:22:53
    支持margin和padding 常用的块级元素:div,h1-h6,ul/li,ol/li,p,table,form 行内元素 不自动换行,只占据自己应占的位置 不支持添加宽度和高度 行内元素不能套块级元素 margin上下无效,左右有效 padding...
  • 内联元素和块元素

    2018-08-30 23:16:17
    1 内联元素/行内元素   ① 内联元素并在一行 ② 宽高由内容决定 ③ 元素换行会产生间距 ④ 默认带上下内边距 ⑤ 不支持样式:width、height、margin-top、margin-bottom  包括:文本元素(a、span、em、stong、无...
  • 2.行内盒模型不支持 margin-top 块级盒模型是支持的 3.行内盒模型和块级盒模型都支持左右。 4.行内盒模型的上下padding不会对其他元素产生物理影响(推开其他块或改变自身位置)但会产生显示上的影响。 5.行内盒...
  • 块、行元素

    2019-03-31 12:11:11
    块元素:支持宽高,独占一行,内边距、外边距都能控制。...行元素:和相邻行内元素在一行上,不支持宽高,由内容撑开,但水平上的padding和margin可以控制,垂直无效。只能容纳文本和其他块行内元素。 ...
  • 2.内联元素(行内元素) 常见的内联元素:a、span、lable、button、textarea、b、strong、select、em 特点: 不支持宽、高、margin上下、padding上下; 宽、高由内容决定; 盒子并在一行; 代码换行,盒子之间
  • 元素和内嵌元素

    2016-02-22 23:19:00
    1,默认独占一行 2,没有宽度限定时,默认撑满一行 3,支持所有css命令内嵌(内联,行内元素的特征: 1,同排可以继续跟同类的标签 2,内容撑开宽度 3,不支持宽高 4,不支持上下的margin 5,代码换行被解析块...
  • 一、块元素(行元素):div、p、ul、li、h1~h6、dl、dt、dd 盒子占据一行、即使设置了宽度 支持全部的样式 如果没有设置宽度,默认的宽度为父级宽度100% 二、内联元素(行内元素):a、span、em、b、strong、i ...
  • 盒模型  盒模型是有两种标准的,一个是标准模型,一个是IE模型。... 行内元素支持margin-top与margin-bottom。块级元素及行内块没有这个问题。 行内元素对padding的支持  行内元素设置padding-top会向上延伸
  • 元素根据表现的特性分为:块级元素、行内元素、行内块元素 1、块级元素 div、p、ul、li、dl、dt、dd、h1~h6… 特点: 1)独占 一行; 2)设置宽高有效(padding、margin、line-height); 3)不设置宽度,默认是父亲的...
  • 参考: 所有浏览器都支持 margin 属性。 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。 定义和用法 ...块级元素的垂直相邻外边距会合并,而行内元素实际上不...
  • margin:auto 实现的条件

    2017-05-11 11:36:00
    网上搜索到margin:auto 实现的条件有三: 第一:给居中的元素一个固定的宽度(固定的宽度不是指一定要px) 第二:该元素没有设浮动 第三:父级使用<... 在满足1,2的条件下我将行内元素设置了dis...

空空如也

空空如也

1 2 3 4 5 6
收藏数 101
精华内容 40
热门标签
关键字:

行内元素支持margin