HTML5 的段落首行缩进
text-indent:0em;表示当前行不需要缩进,文本顶头开始。这个属性可以用在 div p等元素下面
文本首行的缩进(在首行文字之前插入指定的长度)
p {
line-height: 2em; //行间距(应该是2倍行间距的意思)
text-indent: 2em; //首行缩进2个字
font-style: normal; // 默认字体
}
下面这个备用
margin-top:0.5em;
em指字体高,任意浏览器的默认字体高都是16px.所以未经调整的浏览器都符合:1em=16px.那么12px=0.75em,10px=0.625em.为了简化font-size的换算,需要在css中的body选择器中声明Font-size=62.5%,这就使em值变为 16px*62.5%=10px,这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了.em有如下特点:
1.em的值并不是固定的;
2.em会继承父级元素的字体大小.
重写步骤:
1.body选择器中声明Font-size=62.5%;
2.将你的原来的px数值除以10,然后换上em作为单位;
简 单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了.经过以上两步,你会发现你的网站字体大得出乎想象.因为em的值不固定,又会继承父级元 素的大小,你可能会在content这个div里把字体大小设为1.2em,也就是12px.然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是 1.2em=1.2 * 12px=14.4px.这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px,而p作为其子级,em则继承content的字体高,也就是12px.所以p的1.2em就不再是12px,而是14.4px.
3.重新计算那些被放大的字体的em数值.避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象.比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em,因为此em非彼em,它因继承#content的字体高而变为了1em=12px.
推荐大家个朋友开的淘宝小店店,
https://shop545764523.taobao.com/
HTML5 的段落首行缩进的更多相关文章
- 使 Word 段落第一行空出两个字符的位置(段落首行缩进)
描述 使 Word 段落第一行左突出两个字符的位置,即段落首行缩进的方式有两种. "视图"选项卡--"显示"组--标尺 "开始"选项卡--& ...
- div+CSS实现段落首行缩进两个字符
段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...
- Div+Css实现段落首行缩进两个字符(text-indent标签)
段落前面空两个字的距离,不要再使用空格了,用CSS实现段落首缩进两个字符.应该使用首行缩进text-indent.text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字 ...
- Markdown段落首行缩进的实现办法
添加:
- C#设置word段落首行缩进为0
PublicVar.m_WordApp.Selection.ParagraphFormat.CharacterUnitFirstLineIndent = ; PublicVar.m_WordApp.S ...
- 关于css的text-indent首行缩进两个字符和图片缩进的问题
段落前面空两个字的距离,不要再使用空格了.应该使用首行缩进text-indent. text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. <style typ ...
- ckeditor编辑时 回车 生成一个段落p、解决首行缩进问题
使用ckeditor编辑器时,会自己主动加入上的标签,按回车也会自己主动加入上同样的标签 查看ckeditor编辑器源代码时会看到,点击回车显示的<p> </p> static ...
- [整理][LaTex]小技巧之——首行缩进
0. 简介 在LaTex编辑时,有时会遇到这样一个有关于首行缩进的问题.在汉语环境的编辑下,习惯上每段会进行一个两个字的缩进.但是在默认编辑模式下,一个章节下的首段是没有首行缩进的,本文的目的主要是解 ...
- css —— 图片环绕+首行缩进
1.利用css实现图片环绕文字的效果: 只需要给img标签设置float:left/right即可: 2.实现上段文字首行缩进两个字的效果: 使用 text-indent: 2em;即可(em为相对单 ...
随机推荐
- 页面正在载入js
页面显示(pageshow)和页面隐藏(pagehide)事件 http://blog.163.com/jiang_tao_2010/blog/static/121126890200911403336 ...
- PYTHON线程知识再研习E---条件变量同步Condition
Python提供的Condition对象提供了对复杂线程同步问题的支持.Condition被称为条件变量,除了提供与Lock类似的 acquire和release方法外,还提供了wait和notify ...
- Linux Shell逻辑运算符和表达式详解
Shell 逻辑运算符涉及以下几种类型,只要适当选择,可以解决我们很多复杂的判断,达到事半功倍效果. 一.逻辑判断1.关于文件与目录的逻辑判断-f 常用.判断『文件』是否为普通文件,比如: if [ ...
- perl 登录某网站
<pre name="code" class="html">use Net::SMTP; use LWP::UserAgent; use HTTP: ...
- bzoj1188
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1188 一道非常好的SG函数题,加深了对博弈论的理解. 以前做的SG函数的题,都是每个瓶子看成一 ...
- java开发经验分享(三)
三. 项目开发 1. 需求: 1) 需求最终需要开发人员在产品中实现,开发不合理的设计会浪费时间,开发技术无法实现的设计带来最大的痛苦:失败.所以,开发人员要重视需求以及需求评审,提出自己能够想到的所 ...
- poj3254:基础状压dp
第二个状压dp 做过的第一个也是放牛问题,两头牛不能相邻 这个题多了一个限制,就是有些位置不能放牛 于是先与处理一下每一行所有不能放牛的状态,处理的过程直接对每一个不能放牛的状态或以下 ac代码: # ...
- Codeforces Round #327 (Div. 1) D. Top Secret Task
D. Top Secret Task time limit per test 3 seconds memory limit per test 256 megabytes input standard ...
- 关于bootstrap--表单(下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>)
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
- python标准库基础之mmap:内存映射文件
#作用:建立内存映射文件而不是直接读取内容文本信息内容:如下(名称是text.txt) Lorem ipsum dolor sit amet, consectetuer adipiscing elit ...