CSS样式—— 字体、元素的垂直水平居中
1.CSS样式与HTML中标签属性的区别:
标签的属性是采用 属性名=“属性值” 表示的
CSS样式是采用名值对 属性名:属性值; 表示的
2.内联元素(行内元素)与块元素
(1)内联元素及其特点:
所谓的行内元素,指的是只占自身大小,不会独占一行
常见的内联元素:
a img iframe span
span没有任何语义,span标签专门用来选中文字,并对该文字设置样式
对内联元素设置宽高是无效的,也不可以设置行高,其宽度和高度都默认被元素撑开
将内联元素放在 li 标签中可以设置其宽高
可以对内联元素设置内边距,IE6以上浏览器支持
可以对内联元素设置外边距,但只对左右外边距起作用
(2)块元素:
所谓的块元素是会独占一行的元素,无论他的内容多少都会独占一行
p h1 h2 h3...都是块元素
div标签没有任何语义,就是一个纯粹的块元素,并不会对其里面的元素设置任何样式
可以对块元素设置高度和边距
如果不自己设置宽度,其宽度为其父元素宽度
块元素中可以容纳块元素和内联元素,但内联元素中不能包含块元素
3.几种居中方式
(1)设置块元素中文字水平居中
使用text-align 样式设置块中文本或图片居中。
该样式只能操作块元素或者被CSS 显示成块元素的内联元素
对一个块元素设置该样式后,其子块元素中的文本或者图片也会相对于其子块元素居中
(2)块元素自身水平居中
通过设置 magin:0 auto; 使该块元素在其父元素中水平居中显示
(3)内联元素的垂直居中
通过设置 vertical-algin 样式
该属性适用于:
内联元素(被转换成内联元素的块元素)
display 设置为 table-cell 的元素
在 table 也就是表格中的元素
(4)设置块元素中文字垂直居中
通过设置块元素的内边距
(5)块元素自身垂直居中
可以通过设置外边距实现
通过绝对定位设置其距离父元素的 left right top bottom 来实现
CSS样式—— 字体、元素的垂直水平居中的更多相关文章
- js实现未知宽高的元素在指定元素中垂直水平居中
js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...
- 关于用css实现文本和图片垂直水平居中
关于用css实现文本和图片垂直水平居中 一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...
- css样式控制元素固定在底部
回复固定在底部:css样式用到了 box-sizing属性 box-sizing:border-box; -moz-box-sizing:border-box; /* Firefox */ -webk ...
- css样式—字体垂直、水平居中
“来,老板娘,给个div瞅瞅”: “好的,宇哥,来了了了”: <div class="tt">啦啦啦</div> “给各样啊,我去”: “是”: .tt{ ...
- 【css基础修炼之路】— 谈谈元素的垂直水平居中
作为一个初级的前端工程师,在开发的过程中遇到了许多问题,其中使元素垂直居中这个问题难住了我,可能在大家看来这是一个非常小的问题,但是却困扰了我很长时间,于是决定做一个总结!!! 废话不多说,直接上代码 ...
- css的transform属性让子元素在父元素里面垂直水平居中
- python + selenium webdriver 复合型css样式的元素定位方法
<div class="header layout clearfix"></div> 当元素没有id,没有name,没有任何,只有一个class的时候,应该 ...
- 三、CSS样式——字体
概念: CSS字体属性定义文本的字体系列.大小.加粗.风格和变形. 属性 描述 font-family 设置字体系列 font-size 设置字体的大小 font-style 设置字体的风格 font ...
- css 不确定元素宽度的水平居中
对于一个不确定宽度的元素居中,我们想到使用的方法是 text-align:center; 或者 margin:0 auto; text-align只对行内元素有效,对于块元素我们要用margin,块元 ...
随机推荐
- StackExchange.Redis 模糊查询和删除
初始化连接对象 _connectionString = ConfigurationManager.ConnectionStrings["RedisConnectionString" ...
- Maven - 在Eclipse中创建Maven项目
本文的前提条件: windows7-64bit jdk1.8.0 Maven-3.5.0 1- 更新Eclipse中Maven配置 1.1- 修改Eclipse根目录下eclipse.ini文件 D: ...
- PHP验证码生成及图片处理(GD库)
GD库是php处理图形的扩展库,GD库提供了一系列用来处理图片的API,使用GD库可以处理图片,或者生成图片,也可以给图片加水印. 本章实现了生成图片并绘画各种形状.图片的压缩.中文字符水印及图片水印 ...
- 破解第二课 JMP法
首先,我用录屏大师自制了一个视频,给视频加上密码.任意输入,看到报错信息“密码不对,请重新输入” 第一步 反汇编窗口右键点击“中文搜索引擎”---“智能搜索”,搜索引擎界面再次搜索“不对”,结果如下: ...
- mysql 开发进阶篇系列 13 锁问题(关于表锁,死锁示例,锁等待设置)
一. 什么时候使用表锁 对于INNODB表,在绝大部分情况下都应该使用行锁.在个别特殊事务中,可以考虑使用表锁(建议). 1. 事务需要更新大部份或全部数据,表又比较大,默认的行锁不仅使这个事务执行效 ...
- Android中设置控件的背景颜色的方式整理
版权声明:本文为博主原创文章,未经博主允许不得转载. 前言 在Android开发中,经常需要设置控件的背景颜色或者图片的src颜色. 效果图 代码分析 根据使用的方法不同,划分为 setBackgro ...
- 【干货】利用MVC5+EF6搭建博客系统(四)(下)前后台布局实现、发布博客以及展示
二.博客系统后台布局实现 2.1.这里所用的是MVC的布局页来实现的,后台主要分为三部分:导航.菜单.主要内容 代码实现: 这里把后台单独放在一个区域里面,所以我这里建立一个admin的区域 在布局页 ...
- 简单快速的让你的json解析速度快上加快
背景 最近小编在做公司的一个需求.要求是把系统内的一些大型文本文件上传到第三方那里,而且第三方要求的交互数据的方式是采用post请求发送json串的形式进行的. 问题 做到中途才发现问题,由于单个文本 ...
- 使用Python开发chrome插件
本文由 伯乐在线 - xianhu 翻译,Daetalus 校稿.未经许可,禁止转载!英文出处:pythonspot.com.欢迎加入翻译小组. 谷歌Chrome插件是使用HTML.JavaScrip ...
- 【转】深入理解Android之View的绘制流程
概述 本篇文章会从源码(基于Android 6.0)角度分析Android中View的绘制流程,侧重于对整体流程的分析,对一些难以理解的点加以重点阐述,目的是把View绘制的整个流程把握好,而对于特定 ...