美文网首页
css盒模型元素分类

css盒模型元素分类

作者: 一刀一个小黄鱼 | 来源:发表于2016-12-06 17:44 被阅读9次

块级元素(block):常见的有:div  p ol h1-h6

1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(真霸道,一个块级元素独占一行)

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

内联元素行内元素(inline):常见的有:a span strong em

1、和其他元素都在一行上;

2、元素的高度、宽度及顶部和底部边距不可设置;

3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

内联块状元素(inline-block)常见的有:img  input(表单)

1、和其他元素都在一行上;

2、元素的高度、宽度、行高以及顶和底边距都可设置。

display:block inline  可以把块级元素和行内元素 互相转换

元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

相关文章

  • css盒模型元素分类

    块级元素(block):常见的有:div p ol h1-h6 1、每个块级元素都从新的一行开始,并且其后的元素也...

  • 慕课网HTML+CSS基础教程(11-15章)

    一、CSS盒模型 1、元素分类:html标签中元素分为块状元素、内联元素(行内元素)和内联块状元素。 常用块状元素...

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

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

  • 9-1.盒模型

    一、盒模型包括哪些属性 **1、盒模型是css中元素大小的呈现方式,每个元素都有盒模型。它包括元素内容(eleme...

  • 1.CSS盒模型

    css盒模型 css中,Box Model叫盒子模型;盒模型规定了 元素内容(content)、内边距(paddi...

  • day02-前端面试技巧-(盒模型)

    css盒模型: CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内...

  • 盒模型

    盒模型分类 标准盒模型 IE盒模型 标准盒模型 元素的 width、height 只包含内容 content,不包...

  • css盒模型

    一、css盒模型 概念:css盒模型是css的基石,主要用来设置元素如何显示以及元素间的相互关系,html中的每个...

  • CSS布局相关——盒模型和浮动

    盒模型 在CSS中,所有元素被“ 盒子 ”所包围,利用盒模型的基本原理来实现CSS准确布局,元素排列等处理 块级盒...

  • 盒子模型

    CSS中由一种基础设计模式叫盒模型,盒模型定义了Web页面中的元素如何来解析.CSS中每一个元素都是一个盒模型,包...

网友评论

      本文标题:css盒模型元素分类

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