CSS的再深入(更新中···)
在上一章我们提到了一个新的概念,叫做块级样式,讲到这里就要科普一下:
标签又分为两种:
(1)块级标签
元素特征:会独占一行,无论内容多少,可以设置宽高···
(2)内敛标签(又叫做行内标签)
元素特征:根据内容的多少占用空间大小,它的上下margin不起作用
(块级:P h1- h6 div ul ol dl li···)
(内敛:span img i b a em icon···)
有时,我们会使用块级标签,有时会使用内敛标签,但老是改标签是不是太麻烦了呢?有没有其它的方法呢?
答案是:有。
块级和行级(也就是内敛)可以相互转换
块级转行级
给块级添加属性:display:inline;
行级转块级
给行级添加属性:display:block;
行级块元素
给需要的元素添加属性
display:linline-block;
行级块元素好处:可以设置宽高,可以在一行,margin可使用
知识添加:
line-height 行高,可设置字体的垂直位置
line-height的值和height的值相同,文本就可以上下居中,(水平居中为text-align:center)(text-align 文本居中方式 center居中 left居左 right居右)
line-height:50px/2
当属性值中有不带单位的2时,line-height的值为2 x font-size(字体大小)的大小
CSS的再深入(更新中···)的更多相关文章
- html2canvas - 项目中遇到的那些坑点汇总(更新中...)
截图模糊 原理就是讲canvas画布的width和height放大两倍. 后来学习canvas的时候,才了解到这种写法不同于css的宽高设置, 因为css里的只是展示画布显示的大小,不像这样是c ...
- fastadmin 后台管理框架使用技巧(持续更新中)
fastadmin 后台管理框架使用技巧(持续更新中) FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架,具体介绍,请查看文档,文档地址为:https://doc. ...
- 前端面试题总结——HTML(持续更新中)
前端面试题总结--HTML(持续更新中) 1.什么是HTML? HTML:HyperText Markup Language超文本标记语言 2.XHTML和HTML有什么区别 HTML是一种基本的WE ...
- HTML+CSS基础课程-imooc-【更新完毕】
6-1 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等 ...
- 【前端面试】Vue面试题总结(持续更新中)
Vue面试题总结(持续更新中) 题目参考链接 https://blog.csdn.net/weixin_45257157/article/details/106215158 由于已经有很多前辈深造VU ...
- CSS系列:在HTML中引入CSS的方法
HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...
- java视频教程 Java自学视频整理(持续更新中...)
视频教程,马士兵java视频教程,java视频 1.Java基础视频 <张孝祥JAVA视频教程>完整版[RMVB](东西网) 历经5年锤炼(史上最适合初学者入门的Java基础视频)(传智播 ...
- Android开发面试经——4.常见Android进阶笔试题(更新中...)
Android开发(29) 版权声明:本文为寻梦-finddreams原创文章,请关注:http://blog.csdn.net/finddreams 关注finddreams博客:http:/ ...
- Cocos2d-x 3.0final手机游戏开发视频教程2014 - 自学编程 -(陆续更新中)
内容: 非常多人问我:沈老师,要不要更新引擎版本号到3.0,更新这么快,以后会不会每一个月都有一次,好怕呀. 我说:无论你曾经是哪个版本号,3.0final是一个架构级别的升级,能够在新项目中果断升级 ...
- 《WCF技术剖析》博文系列汇总[持续更新中]
原文:<WCF技术剖析>博文系列汇总[持续更新中] 近半年以来,一直忙于我的第一本WCF专著<WCF技术剖析(卷1)>的写作,一直无暇管理自己的Blog.在<WCF技术剖 ...
随机推荐
- webpack打包二进制文件报错
错误示例,如下图所示: 修改webpack的module部分的rules,在其中添加一下代码: { test: /\.woff[0-9]{0,}$/, loader: "url-loader ...
- webpack打包jQuery,jQuery未定义
怎么来兼容老式jQuery插件 ProvidePlugin + expose-loader / externals 1.ProvidePlugin + expose-loader webpack.co ...
- Python 模型定义 :通过pymysql和数据模型(models.py)创建mysql表及表结构
一.model的配置 1.创建数据库 2.安装pymysql 3.修改配置文件 数据库连接配置 DATABASES = { 'default': { 'ENGINE': 'django.db.back ...
- oracle查询数据字典的sql
使用的sql语句如下: select t1.username 用户, t2.TABLE_NAME 表名称, t3.comments 表业务含义, t2.COLUMN_NAME 字段名称, t4.com ...
- CSS选择符-----属性选择符
Element[att] 选择具有att属性的E元素 <!DOCTYPE html> <html> <head> <meta charset=" ...
- uvalive 5731 Qin Shi Huang’s National Road System
题意: 秦始皇要修路使得所有的城市连起来,并且花费最少:有一个人,叫徐福,他可以修一条魔法路,不花费任何的钱与劳动力. 秦始皇想让修路的费用最少,但是徐福想要受益的人最多,所以他们经过协商,决定让 A ...
- 泛型List、HashTable
从最开始接触的数组,到非泛型集合类(ArrayList.HashTable.Queue.Stack).泛型集合类(List<T>.Dictionary<T>.Queue< ...
- Tomcat JAR包冲突报错
查看Tomcat下有两个PDF加密的jar包如图: 删除这个bcprov-jdk14-138.jar包,然后重启Tomcat就好了. 这个jar包和Tomcat中的一个包冲突,反复调用导致的. 参考: ...
- js定时器优化
在js中如果打算使用setInterval进行倒数,计时等功能,往往是不准确的,因为setInterval的回调函数并不是到时后立即执行,而是等系统计算资源空闲下来后才会执行.而下一次触发时间则是在s ...
- DB2的空间数据库管理复杂配置
计算机条件: a机器:linux系统 安装arcgis server b机器:windows系统 安装catalog c机器:linux系统 安装DB2 ...