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技术剖 ...
随机推荐
- 【AngularJS】解决ng-if中的ng-model值无效的问题(转)
from:http://blog.csdn.net/u013451157/article/details/60866210 与其他指令一样,ng-if指令也会创建一个子级作用域,因此,如果在ng-if ...
- oauth2.0学习笔记(摘抄简化)
大量摘抄白话简明教程. 附:可以参考<RFC6749协议中文版及oauth2.0>文档 一.OAuth 白话简明教程 1.简述 http://www.cnblogs.com/Ceri/p/ ...
- centos6.5安装无线网卡驱动并配置wifi
1.驱动下载地址: RTL8188无线网卡驱动下载 链接:https://pan.baidu.com/s/1ms-EbQCDxa76jPhYUPmr9Q 密码:r2vu 2.安装步骤: [root@c ...
- windows编程之Windows Shell 编程
参考书<VC++ Windows Shell Programming> 这里仅仅是记录下该资源,推荐到下文列出的连接进行查看 用VC++ 进行Windows Shell 扩展编成 ...
- 如何注销Sitecore CMS
登录Sitecore很容易,但是在旧版本的Sitecore中使用不同的界面,退出可能会给未经证实的人带来挑战. Sitecore 8 Sitecore 6和7 Sitecore 8 Sitecore ...
- Nginx技术研究系列1-通过应用场景看Nginx的反向代理
随着我们业务规模的不断增长,整个系统规模由两年前的几十台服务器,井喷到现在2个数据中心,接近400台服务器,上百个WebApi站点,上百个域名. 这么多的WebApi站点这么多的域名,管理和维护成本很 ...
- CS131&Cousera图像处理学习笔记 - L4&W2滤波和卷积
cs131: http://vision.stanford.edu/teaching/cs131_fall1617/ coursera: https://www.coursera.org/learn/ ...
- Unicode字符需要几个字节来存储?
0)学习笔记: 我们常说的这句话“Unicode字符是2个字节”这句话有毛病 Unicode目前规划的总空间有17个平面, 0x0000---0x10FFFF,每个平面有 65536 个码点. Uni ...
- linux下卸载mysql(rpm)
linux下卸载mysql 查看是否安装了mysql的组件 rpm –qa |grep –I mysql 卸载前关闭mysql服务 service mysql status service mysql ...
- codeSourcery交叉编译环境
arm-none-Linux-gnueabi-gcc是 Codesourcery 公司(目前已经被Mentor收购)基于GCC推出的的ARM交叉编译工具.可用于交叉编译ARM系统中所有环节的代码,包括 ...