1.块级元素
属性:display:block
特点:1.一行只能显示一个元素
2.宽度默认是父元素的,高度是有内容撑开
3.可以设置宽、高
常见块元素:div,p,h系列,ul、li,dl、dt、dd、from、header、nav、footer......
2.行内元素
属性:display:inline
特点:1.一行可以放多个元素
2.宽、高是有内容撑开
3.不可以设置宽、高
常见元素:a、span、b、u、i、s、strong......
3.行内块元素
属性:display:inline-block
特点:1.一行可以显示多个
2.可以设置宽、高
常见元素:input、textarea、button、select......

各级元素相互转换:只需要将关键词词写入css样式中即可,例如

a{  //由于a是行内元素,不能设置宽和高,display:inline-block关键词将其转换为行内块元素;

display:inline-block;

}

注意:1.块元素有嵌套特点,单p不可以嵌套div、p、h等块级标签

            2.a标签内部可以嵌套除本身标签外的标签

CSS基础 常见的元素显示模式的更多相关文章

  1. 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记

    [CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...

  2. CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

    vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...

  3. CSS 基础:定位元素(3)<思维导图>

    这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...

  4. CSS基础:替换元素和非替换元素

    简介 根据 "外在盒子" 是内联还是块级我们可以把元素分为内联元素和块级元素,而根据是否具有可替换内容,我们也可以把元素分为替换元素和非替换元素.这种通过修改某个属性值,例如 &l ...

  5. CSS 基础 例子 伪元素和伪类 & 区别

    一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素     -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...

  6. css基础 行内元素 块级元素

    1.行内元素(内联元素 inlineElement) 特点:不占据一行,无法设置宽高及行高,其宽度随着内容增加,高度随字体大小而改变,margin只对左右起作用,上下无效. 常见有: a - 锚点,b ...

  7. HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法

    块级元素div分析 1.外边距  margin 2.内边距 padding 3.边框  border Div的真实宽度=width+margin-left+margin-right+border*2+ ...

  8. CSS复合选择器,元素的显示模式,CSS背景设置

    欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...

  9. CSS元素显示模式

    CSS的元素显示模式 什么是元素显示模式 作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页 元素的显示模式就是元素(标签)以什么样的方式进行显示,比如& ...

随机推荐

  1. js处理title超长问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. 使用Spring Data ElasticSearch框架来处理索引

    /**步骤:创建工程,导入相应的包--->配置文件---->创建实体类对象------>创建接口---->测试增删改查的方法 **/ //步骤:创建工程,导入相应的包 < ...

  3. Servlet+Jdbc+mysql实现登陆功能

    首先是新建一个servlet,servlet中有dopost和doget方法 一般的表格提交都是用post方法,故在dopost里面写入逻辑代码 下面是其逻辑代码Check.java protecte ...

  4. UIWindow介绍

    1.作为容器,包含app所要显示的所有视图 3.与UIViewController协同工作,方便完成设备方向旋转的支持 1.addSubview 2.rootViewController 三.Wind ...

  5. AtCoder Beginner Contest 172 题解

    AtCoder Beginner Contest 172 题解 目录 AtCoder Beginner Contest 172 题解 A - Calc B - Minor Change C - Tsu ...

  6. CF1065A Vasya and Chocolate 题解

    Content 小 V 有 \(s\) 块钱,商店里有巧克力卖,每块巧克力 \(c\) 块钱,现在商店给出优惠:购买 \(a\) 块巧克力可以免费获得 \(b\) 块巧克力,求小 V 最多能够买到的巧 ...

  7. RabbitMQ 消息队列 实现RPC 远程过程调用交互

    #!/usr/bin/env python # Author:Zhangmingda import pika,time import uuid class FibonacciRpcClient(obj ...

  8. ubuntu上kdump配置:

    ubuntu上kdump配置: 1, 安装kdump apt-get install linux-crashdump 2, 调整crashkernel内存大小为768M(默认192M内存太小) 修改 ...

  9. TURN协议初识及turnserver实践

    WebRTC协议栈 图一 WebRTC stack TURN的全称为Traversal Using Relays around NAT,是STUN/RFC5389的一个拓展,主要添加了Relay功能. ...

  10. Centos7使用Docker启动elasticsearch服务秒退

    首先查看docker启动日志 docker logs -f 容器id 查看报错信息 OpenJDK 64-Bit Server VM warning: Option UseConcMarkSweepG ...