美文网首页
CSS(层叠样式表)之标签类型(块级与行内)

CSS(层叠样式表)之标签类型(块级与行内)

作者: 左右_5536 | 来源:发表于2019-03-20 16:09 被阅读0次

样式表

内部样式表,写在style中的

行内样式表(内联样式表),写在标签内

外部样式表(外联样式表),写在css文件里面,在html中<link>引用

标签类型(显示模式)

display:  block  |  inline  |  inline-block

块级元素(block-level)

每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度高度对齐等属性

常见的块元素有h1~h6、p、div、ul、ol、li等,其中div最典型

行内元素(inline-level)

不占独立的区域,不可以设置高宽、对齐等属性,常用于控制页面中文本的样式

常见的有a、strong、b、em、i、del、s、ins、u、span等,其中span最典型

只能设置水平方向的padding和margin,垂直方向无效;

只能容纳文本或者其他行内元素(a特殊,a里面不能再放a标签);

注意:

只有文字才能组成段落,因此p里面不饿能放块级元素,同理还有h1~h6、dt,他们都是文字类块级标签,里面不能放其他块级元素

块级元素和行内元素的区别

块级元素的特点:

1、总是从新行开始

2、高度、行高、外边距以及内边距都可以控制

3、宽度默认是容器的100%

4、可以容纳内联元素和其他块元素

行内元素的特点:

1、和相邻行内元素在一行上

2、高、宽无效,但水平方向的padding和margin可以设置,垂直方向的无效

3、默认宽度就是它本身内容的宽度

4、行内元素只能容纳文本或者其他行内元素

行内块标签inline-block

可以设置宽高和对齐属性,img、input、td等

行内块元素的特点:

1、和相邻行内元素(行内块)在一行上,但是之间会有空白缝隙

2、默认宽度就是它本身内容的宽度

3、宽高、行高、外边距以及内边距都可以控制

相关文章

  • CSS(层叠样式表)之标签类型(块级与行内)

    样式表 内部样式表,写在style中的行内样式表(内联样式表),写在标签内外部样式表(外联样式表),写在css文件...

  • H5笔记——CSS常见的标签类型

    CSS中,有以下几种标签类型:块级标签、行内标签、行内-块级标签。 块级标签 特点:1.独占一行的标签;2.能随时...

  • CSS知识点(二)

    css是层叠样式表,它是网页之皮 本文主要内容 1. 块级元素和行内元素 2. 常见css属性 宽高 边框 边距 ...

  • WEB前端丨css — 选择器、盒子模型

    css: 层叠样式表 css引入方式行内样式 内嵌式 在head标签内部书写style 三种引入方式的优先级: 1...

  • HTML+CSSday02

    CSS层叠样式表 CSS(Cascading Style Sheets) ,通常称为CSS样式表或层叠样式表(级...

  • 前端基础-CSS

    CSS层叠样式表 CSS(Cascading Style Sheets) ,通常称为CSS样式表或层叠样式表(级...

  • CSS布局(inline和block)

    CSS内联元素和块级元素, 内联块级元素 HTML语言标签元素被分为三种类型: 内联元素(行内元素), 块级元素,...

  • HTML中块级元素和行内元素

    HTML标签CSS盒模型块级元素和行内元素的定义块级元素和行内元素的分类 1、 HTML标签 html标签定义: ...

  • CSS总结

    css总结 css(cascading style sheets)层叠样式表 引入方式 行内样式————写在htm...

  • 关于CSS

    CSS的全称是Cascading Style Sheets,中文意思是层叠样式表 CSS的引入方式 1、行内样式表...

网友评论

      本文标题:CSS(层叠样式表)之标签类型(块级与行内)

      本文链接:https://www.haomeiwen.com/subject/lgttvqtx.html