CSS text-indent段落首行文字缩进分享

　　DIV CSS text-indent段落首行文字缩进，CSS段首缩进，可控制缩进距离样式教程篇

　　让每个段落首行开头文字缩进，如缩进2个文字距离样式，我将用到text-indent属性样式。

　　。divcss5{text-indent:25px}

　　这里divcss5对象内段落首行开头文字缩进了25像素。

　　css text-indent文本缩进样式属性单词，text-indent的值跟数字+单位组成缩进样式。

　　通常text-indent缩进属性将对段落首行开头文本文字进行缩进显示。如果使用html br换行标签，第二个换行开始也不会出现缩进效果。如果使用了html P段落标签段落换行，将会出现每个p段落换行开头都将缩进，这里我们给大家通过案例演示给大家，希望通过DIVCSS5案例掌握CSS text-indent缩进样式。

　　1、CSS代码

　　。divcss5{ text-indent:35px}

　　2、HTML代码片段

　　3、段首缩进案例截图

　　div+css text-indent文本段落缩进应用案例截图

　　我们要让每段文字开头缩进，并且可以控制缩进距离我使用text-indent缩进单词。如果不想使用text-indent样式进行缩进，我可以使用空格来实现，但需要多打几个html空格字符“ ”实现空格字符占位缩进，你可以详细了解html多空格字符应用。

　　如需转载，请注明文章出处和来源网址：

　　DIV CSS white-space norma nowrap强制同一行内显示所有文本文字，让所有文字内容中一排显示不换行。

　　让文字不自动换行，无论CSS宽度设置多少，所有文字都在一行内显示。特别是标题列表，我们想一行只显示一条标题内容，而有时宽度有限标题文字多了width（宽度）又有限，这样会造成文字自动换行，这个时候我们可以使用white-space样式让他一排显示不换行，当然我们为了隐藏超出的文字内容我们可以再加一个css overflow:hidden样式。

　　扩展了解知识：

　　1、html br换行：

　　2、html p段落：

　　3、CSS隐藏超出溢出宽度高度内容方法：

　　1、white-space语法：

　　white-space : normal nowrap

　　2、white-space参数：

　　normal : 　默认处理方式

　　nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。DIVCSS5推荐使用white-space:nowrap强制不换行。

　　3、white-space说明：

　　white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容

　　通常我们使用white-space:nowrap强制文本文字内容不换行，在对象内一行显示完所有文字内容。

　　我设置2个对象盒子，一个设置强制同行显示文本内容。第二个设置强制同行显示，但使用html br标签观察效果。为了white-space案例应用效果，我设置css宽度一定120px，css高度为60px,css行高 line-height为20px 。

　　1、css代码

　　2、html代码片段

　　3、white-space实例截图

　　white-space强制不换行与强制br标签换行

　　日常我们为了让文字内容在一行内显示完，哪怕宽度不够也不能换行，我们可以使用white-space样式，但如果遇到了html br强制换行标签，无论是设置white-space与否都会被<br>强制换行。

　　如需转载，请注明文章出处和来源网址：

　　div css z-index层重叠顺序

　　DIV层、span层等html标签层重叠顺序样式z-index，平时我们使用较少，但也会难免会碰到CSS z-index使用。接下来divcss5介绍z-index从基本属性到设置对象的层叠顺序、重叠顺序，从基础语法到应用案例教程讲解学习z-index。

　　z-index 跟具体数字

　　如：

　　div{z-index:100}

　　注意：z-index的数值不跟单位。

　　z-index的数字越高越靠前，并且值必须为整数和正数（正数的整数）。

　　Z-index在使用绝对定位 position:absolute属性条件下使用才能使用。通常我们让不同的对象盒子以不同顺序重叠排列，我们就是要z-index样式属性。

　　为了方便观察z-index样式属性，我们设置3个DIV盒子，分别设置不同css背景颜色，设置相同CSS高度、CSS宽度。分别设置背景颜色为黑色、红色、蓝色。CSS width为100px，css height为50px

　　1、案例css代码

　　2、html代码片段

　　3、z-index案例截图

　　Z-index样式实践实例案例

　　案例说明：

　　三个盒子均都使用了绝对定位属性position:absolute样式，并且设置相同的高度和宽度样式。为了便于观察我们使用left、right属性并赋予不同值，让其错落有致。

　　Divcss5-1盒子背景为黑色，z-index:10

　　Divcss5-2盒子背景为红色，z-index:20

　　Divcss5-3盒子背景为蓝色，z-index:15

　　为可以看见第一个盒子z-index:10，所以重叠在最下层，而第二个盒子z-index:20，值最大所以最上层重叠，第三个盒子设置z-index:15，居中。

　　我们使用z-index重叠顺序样式，在实际DIV+CSS布局时候我们需要绝对定位样式，并且可以使用left、right进行定位，通过不同z-index值实现层重叠顺序排列。

　　更多CSS实例：div叠加顺序、div覆盖div

　　如需转载，请注明文章出处和来源网址：

　　DIV CSS position绝对定位absolute relative教程篇

　　常常使用position用于层的绝对定位，比如我们让一个层位于一个层内具体什么位置，为即可使用position:absolute和position:relative实现。

　　position语法：

　　position : static absolute relative

　　position参数：

　　static : 　无特殊定位，对象遵循HTML定位规则

　　absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框

　　relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

　　position说明：

　　设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。

　　绝对定位position用于定位盒子对象，有时一个布局中几个小对象，不易用css padding、css margin进行相对定位，这个时候我们就可以使用绝对定位来轻松搞定。特别是一个盒子里几个小盒子不规律的布局，这个时候我们使用position绝对定位非常方便布局对象。

　　绝对定位position示范适用图、不规律布局，为即可利用position:absolute；position:relative进行绝对定位

　　绝对定位与float浮动不能同时使用，比如一个大盒子里有的是绝对定位，有的是使用css float浮动定位，这样IE6浏览器将不会显示改大对象里的这些绝对定位与相对定位，这也算是IE6 CSS HACK吧，注意不要混用即可。

　　position:absolute；position:relative绝对定位使用通常是父级定义position:relative定位，子级定义position:absolute绝对定位属性，并且子级使用left或right和top或bottom进行绝对定位。

　　。divcss5{position:relative} 定义，通常最好再定义CSS宽度和CSS高度

　　。divcss5-a{position:absolute;left:10px;top:10px} 这里定义了距离父级左侧距离间距为10px，距离父级上边距离为10px

　　或

　　。divcss5-a{position:absolute;right:10px;bottom:10px} 这里定义了距离父级靠右距离10px,距离父级靠下边距离为10px

　　对应HTML结构

　　</div>

　　这样就绝对定位了“divcss5-a”在父级“divcss5”盒子内。

　　注意的是，left（左）和right（右）在一个对象只能选一种定义，bottom（下）和top（上）也是在一个对象只能选一种定义。

　　这里DIVCSS5为大家实例应用position绝对定位，我们设置一个最外层盒子css边框为红色，css width为400px,css height为200px,内部包含了2个盒子，为就用绝对定位这2个盒子，第一个盒子CSS命名为“divcss5-a”，其宽度为100px,背景颜色为黑色，高度为100px,定位距离父级上为10px，距离左为10px;第二个盒子CSS类命名为“divcss5-b”，其宽度和高度分别为50px,css背景颜色为蓝色，距离父级下距离为13px,距离父级右边为15px。

　　1、css代码如下

　　2、html代码片段

　　3、DIV+CSS绝对定位案例截图

　　DIV+CSS position绝对定位布局应用案例

　　通常我们使用position:absolute；position:relative进行绝对定位布局，通过CSS进行定义定位，DIV布局HTML，注意什么地方使用position:relative，什么地方使用position:absolute进行定位，同时不要忘记使用left、right、top、bottom的配合定位具体位置。绝对定位如果父级不使用position:relative，而直接使用position:absolute绝对定位，这个时候将会以body标签为父级，使用position:absolute定义对象无论位于DIV多少层结构，都将会被拖出以<body>为父级（参考级）进行绝对定位。绝对定位非常好用，但切记不要滥用，什么地方都用，这样有时会懒得计算距离上、下、左、右间距，同时可能会造成CSS代码臃肿，更加经验适当使用，用于该使用地方。

　　在绝对定位时候我们可以使用css z-index定义css层重叠顺序。

　　同时left、right、bottom、top的数值，可以使用（Photoshop）PS切片工具获取准确的数值。

　　div重叠

　　div css绝对定位布局实例

　　div css绝对定位position实例案例

　　如需转载，请注明文章出处和来源网址：

　　DIV CSS left right top bottom定位

　　这四个CSS属性样式用于定位对象盒子，必须定义position属性值为absolute或者relative此取值方可生效。

　　Left、right、top、bottom后跟数字+html单位。

　　示范结构

　　div{left:20px}

　　div{right:20px}