css里display属性

display属性 :盒子模型可通过display属性来改变默认的显示类型。
根据CSS可以把HTML标签分为三大元素类型(块状元素、内联元素、内联块元素):
1、块状元素:
a:块状元素是独占一行的,不能与其他元素并排显示。
在这里插入图片描述
b:块状元素可以直接定义自己的宽高。
在这里插入图片描述
c:块状元素严格遵循盒模型的显示规则的,即都可以应用padding、margin、border这些属性。
在这里插入图片描述
d:块状元素一般是可以当做容器来使用,里面可以放文本,也可以放其他的块状元素和内联元素。(但是:p标签和h1-h6,他们也属于块状元素,但是他们的标签里面不能容那其他的块状元素包括自己本身也不可以。)
在这里插入图片描述
注:
常见的块状元素:
div -最常用的块级元素
dl - 和dt-dd 搭配使用的块级元素
form - 交互表单
h1 -h6- 大标题
hr - 水平分隔线
ol – 有序列表
p - 段落
ul - 无序列表
li
fieldset - 表单字段集
colgroup-col - 表单列分组元素
table-tr 表格及行-单元格

2、内联元素
a、像文本一样,自左向右一次排列。知道边缘或者碰到br标签时,才会折行。
在这里插入图片描述

b、不能直接定义宽度和高度的。他们的宽高是以自身的内容的大小、多少来决定的。
在这里插入图片描述
c、内联元素也遵循盒模型的显示规则,也可以设置padding、margin、border这些属性,但是部分元素在显示的时候会有特殊情况,会显示的不正确;
在这里插入图片描述
d、补充:所有不是块状的可见元素,都可以称之为是内联元素。
注:
常见的内联元素:
a –超链接(锚点)
b - 粗体(不推荐)
br - 换行
i - 斜体
em - 强调
img - 图片
input - 输入框
label - 表单标签
span - 常用内联容器,定义文本内区块
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
u - ins下划线
select - 项目选择

3、display属性
a:block: 元素类型为块状元素,(大部分的块状元素类型的display值都是block。)
特点:他能让元素的类型转变成块状元素,从而拥有块状元素的特点。
在这里插入图片描述
b:inline: 元素的类型为内联元素,(大不部分的内联元素的display值都是inline。)
特点: 能让元素的类型转换成内联元素,从而拥有内联元素的特点。
在这里插入图片描述
c:list-item:此元素会作为列表显示。(他是的li的元素类型的值,加了display:list-item以后,会让元素转换成列表类型)
在这里插入图片描述
d:none: 隐藏元素(让元素不显示在浏览器里)
在这里插入图片描述
f:inline-block:行内块元素
特点:极具有块状元素的特点,又有内联元素的特点
特点:inline-block 支持 使用垂直对齐的属性/vertical-align: top/middle/bottom/baseline/
注:行内块元素,也是属于内联元素。
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值