CSS基础 常见的元素显示模式
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基础 常见的元素显示模式的更多相关文章
- 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...
- CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例
vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertic ...
- CSS 基础:定位元素(3)<思维导图>
这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...
- CSS基础:替换元素和非替换元素
简介 根据 "外在盒子" 是内联还是块级我们可以把元素分为内联元素和块级元素,而根据是否具有可替换内容,我们也可以把元素分为替换元素和非替换元素.这种通过修改某个属性值,例如 &l ...
- CSS 基础 例子 伪元素和伪类 & 区别
一.概念 CSS 伪类 -------向某些选择器添加特殊的效果,要达到同等效果,通过类来达到效果 CSS 伪元素 -------将特殊的效果添加到某些选择器,要达到同等效果,通过添加元素达到 ...
- css基础 行内元素 块级元素
1.行内元素(内联元素 inlineElement) 特点:不占据一行,无法设置宽高及行高,其宽度随着内容增加,高度随字体大小而改变,margin只对左右起作用,上下无效. 常见有: a - 锚点,b ...
- HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法
块级元素div分析 1.外边距 margin 2.内边距 padding 3.边框 border Div的真实宽度=width+margin-left+margin-right+border*2+ ...
- CSS复合选择器,元素的显示模式,CSS背景设置
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- CSS元素显示模式
CSS的元素显示模式 什么是元素显示模式 作用:网页的标签非常多,在不同的地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页 元素的显示模式就是元素(标签)以什么样的方式进行显示,比如& ...
随机推荐
- shell脚本实现网站日志分析统计
如何用shell脚本分析与统计每天的访问日志,并发送到电子邮箱,以方便每天了解网站情况.今天脚本小编为大家介绍一款不错的shell脚本,可以实现如上功能. 本脚本统计了:1.总访问量2.总带宽3.独立 ...
- Spring事务隔离级别和传播特性(转)
相信每个人都被问过无数次Spring声明式事务的隔离级别和传播机制吧!今天我也来说说这两个东西. 加入一个小插曲,一天电话里有人问我声明式事务隔离级别有哪几种,我就回答了7种,他问我Spring的版本 ...
- 2.ElasticSearch集群的搭建
1.创建elasticsearch-cluster文件夹,在内部复制三个elasticsearch服务 2.修改elasticsearch-cluster\node*\config\elasticse ...
- jdk1.7源码之-hashMap源码解析
背景: 笔者最近这几天在思考,为什么要学习设计模式,学些设计模式无非是提高自己的开发技能,但是通过这一段时间来看,其实我也学习了一些设计模式,但是都是一些demo,没有具体的例子,学习起来不深刻,所以 ...
- IM即时通讯设计 高并发聊天服务:服务器 + qt客户端(附源码)
来源:微信公众号「编程学习基地」 目录 IM即时通信程序设计 IM即时通讯 设计一款高并发聊天服务需要注意什么 如何设计可靠的消息处理服务 什么是粘包 什么是半包 解决粘包和半包 IM通信协议 应用层 ...
- shell脚本 比较mysql配置文件
一.简介 源码地址 日期:2019/12/19 介绍:较两个mysql实例的配置是否一致,支持比较配置文件,也支持比较系统变量的值 效果图: 二.使用 适用:centos6+ 语言:中文 注意:无 下 ...
- [BUUCTF]PWN21——ciscn_2019_s_3
[BUUCTF]PWN21--ciscn_2019_s_3 附件 步骤 例行检查,64位,开启了NX保护 试运行的时候回显是一些乱码,直接用ida打开,从main函数开始看 main函数调用了vuln ...
- 突破结构限制的“数据透视表”(Excel技巧集团)
出个题:根据A2:C16生成E2:G18的汇总结果.这里的汇总是求和. 遇到这种情况,首选肯定是函数公式,虽然数据源表是个很规范的一维表,可以用数据透视表,可是想建构到上图那么奇葩,数据透视表无此异能 ...
- CF1144A Diverse Strings 题解
Content 我们定义一个字符串是合法的,当且仅当这个字符串是"连续排列"(按照字母表顺序排序).现在给出 \(n\) 个字符串 \(s_1,s_2,s_3,...,s_n\), ...
- LuoguP7713 「EZEC-10」打分 题解
Content 某个人去参加比赛,\(n\) 个评委分别给他打分 \(a_1,a_2,\dots,a_n\).这个人可以最多执行 \(m\) 次操作,每次操作将一个评委的分数加 \(1\).定义他的最 ...