css元素的分类以及盒子模型
2018-11-25 08:59
120 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41621267/article/details/84472018
css元素的分类以及盒子模型
html标签元素的分类
- 块状元素
常见的块状元素有:<div> <p> <h1>...<h6> <ol> <ul> <table> <form>
等 - 内联元素(行内元素)
常见的内联元素有:<a> <span> <br> <i> <strong> <label>
- 内联块状元素
常见的内联块状元素有:<img> <input>
各种元素分类的特点
块状元素特点:
- 每个块级元素都是霸占一行的,块状元素的下一个元素是从下一行开始
- 元素的高度、宽度、行高以及顶和底边距都是可设置的
- 元素宽度在不设置的情况下,是它本身父容器的100%
内联元素特点:
- 和其他元素都在一行上
- 元素的高度,宽度以及顶部和底部边距不可设置
- 元素的宽度就是它包含的文字或图片的宽度,不可设置
内联块状元素特点:
- 和其他元素都在一行上
- 元素的高度、宽度、行高以及底边距都可设置
改变标签元素类型的方法
display:block 可以将元素设置为块状元素
display:inline 可以将元素设置为内联元素
display:inline-block可以将元素设置为内联块状元素
盒子模型
每个HTML元素都会有盒子模型,如下图
可以看到,盒子模型中,一个标签是由内容,内填充(padding)、边框(border)、外边距(margin)组成的
一个元素的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距
一个元素的高度=上边距+上边框+上填充+内容高度+下填充+下边框+下边距
我的简书博客:https://www.jianshu.com/p/601c217b33e1
相关文章推荐
- [html+css]HTML+CSS基础课程:元素分类 和 盒子模型 笔记
- CSS背景、尺寸、显示、盒子模型以及元素的定位
- [HTML/CSS]盒子模型,块级元素和行内元素
- HTML/CSS]盒子模型,块级元素和行内元素
- css基础 内联元素 块元素 盒子模型
- CSS元素分类与布局模型
- CSS之选择符、链接、盒子模型、显示隐藏元素
- CSS的盒模型及元素分类(块级元素、内联元素、内联块状元素)
- CSS 块级元素 行级元素 盒子模型
- CSS属性,盒子模型以及浮动和定位技术相关
- CSS文本,锚伪类选择器以及盒子模型
- CSS--两种盒子模型以及border属性
- CSS 元素分类 / 盒模型基础 / 深入理解
- [HTML/CSS]盒子模型,块级元素和行内元素
- css中的行高,盒子模型(边框,内边距,外边距),以及firework的基本使用
- 行内元素竖直方向margin和padding以及盒子模型问题
- 盒子模型、块元素、内联元素、内联块元素以及水平垂直居中问题
- CSS(2)伪元素、盒子模型
- CSS--两种盒子模型以及border属性
- CSS盒模型,元素分类,