CSS—块与内联

傷城~ 2022-06-17 09:22 186阅读 0赞

# CSS——块与内联 #

### 1.块元素 ###

块级元素：方块可以装东西，盒子拥有大小  p不能装块
    内联元素：不占据一行，不能装块级元素   升级为块可以装块，但不规范
    
    可设置行高：
    line-height:100px;    内部项目会自动居中

![块元素][SouthEast]

![块元素][SouthEast 1]

### 2.内联元素display ###

![内联元素][SouthEast 2]

升级块级元素：
    内联元素只能装inline元素，不能装块级元素，通过display改变元素类型为块级元素方便布局
    
    display属性：
    block 定义为块对象
    inline 定义为内联对象（默认值）
    inline-block 升级为在一行的块级元素，前后元素不会被换行
    none 隐藏元素，同时此元素所占有的空间也将被清除

#### 控制元素显示visibility ####

visibility: 决定页面的某元素是否显示；不可继承
    
    hidden：定义元素不可见，所占用的空间依旧存在。
    visible:定义元素可见
    collapse：隐藏表格中的行和列

#### 控制内容溢出、滚动条overflow ####

overflow:
        visible：设置不会剪切内容也不会产生滚动条
        hidden： 设置隐藏溢出内容的部分
        scroll： 设置总是显示滚动条
        auto：   设置当需要时自动添加滚动条

![内联元素][SouthEast 3]

### 3.可变元素 ###

![可变元素][SouthEast 4]

[SouthEast]: /images/20220617/c3e4c1ae49fb433cbf5525ec7c8aef57.png
[SouthEast 1]: /images/20220617/ae846d29a117417eb807798fce02b745.png
[SouthEast 2]: /images/20220617/3d70e7538c2841bea893944a6a011ce5.png
[SouthEast 3]: /images/20220617/3a6e469c46f244d1bd736b69756565a0.png
[SouthEast 4]: /images/20220617/59d77c6be15d4458a960507a5b446b6f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS块级元素、内联元素

在css盒子模型中，我们提到了html元素中的块元素（block element）和内联元素（inline element）。那么它们究竟是什么呢？其实，这两种

逃离我推掉我的手/ 2022年08月20日 04:23/ 0 赞/ 247 阅读

相关【WEB前端】3.CSS内联元素和块元素

HTML中内联元素和块元素分别有块元素(block element) 　　\ address - 地址　　\ blockquote - 块引用

比眉伴天荒/ 2022年08月19日 11:03/ 0 赞/ 144 阅读

相关 HTML块元素与内联元素

HTML块元素和内联元素【1】块元素在浏览器显示的时候，通常是会以新行来开始和结束。这样子的块级元素，会自动占据一定的行空间，因此它是可以控制来设置高度，宽度，内外边距

╰半橙微兮°/ 2022年07月14日 13:06/ 0 赞/ 230 阅读

相关 CSS开发基础——块级元素和内联元素

CSS开发基础——块级元素和内联元素 HTML 的元素可以分为两种：块级元素（block level element）内联元素（inline ele

迷南。/ 2022年07月13日 15:11/ 0 赞/ 213 阅读

相关 CSS—块与内联

CSS——块与内联 1.块元素块级元素：方块可以装东西，盒子拥有大小 p不能装块内联元素：不占据一行，不能装块级元素升级为块可以装块，但

傷城~/ 2022年06月17日 09:22/ 0 赞/ 187 阅读

相关 CSS-display、块级元素与内联元素

定义和用法： display属性规定元素应生成的框的类型。比较常用的值：完整详情：[http://www.w3school.com.cn/cssref/pr\_c

水深无声/ 2022年06月16日 14:54/ 0 赞/ 232 阅读

相关 CSS: 块级元素与内联元素（行内元素）

对于每一个CSS网页元素，都有一个默认的display属性，用于确定其元素类型。默认为display: block 块级元素，它的内容自动开始一个新行

布满荆棘的人生/ 2022年06月04日 04:44/ 0 赞/ 260 阅读

相关块级元素、行级（内联）元素、内联块元素的区别

块级元素(block)特性：总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示; 宽度(width)、高度(height)、内边距(paddin

阳光穿透心脏的1/2处/ 2022年05月30日 08:16/ 0 赞/ 255 阅读

相关玩转CSS中块元素、内联元素、内联块元素

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。 1.块元素块元素，也可以称为行元素，布局

﹏ヽ暗。殇╰゛Y/ 2021年11月29日 14:18/ 0 赞/ 347 阅读

相关 HTML块元素与内联元素嵌套规则

HTML存在许多种类型的标签，有的标签下面只允许特定的标签存在，这就叫HTML嵌套规则。不按HTML嵌套规则写，浏览器就不会正确解析，会将不符合嵌套规则的节点放到目标节点

今天药忘吃喽~/ 2021年11月09日 18:52/ 0 赞/ 303 阅读