下载文档原格式
网页布局常用的样式属性一、PositionPosition有以下几个值:static，relative，absolute，fixed。
Static：静态定位。
如果你没有设置position属性，那么缺省就是static.top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性,必须把position设置为其他三个值之一。
Relative：相对定位。
元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走.Absolute：绝对定位。
元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位.Fixed：固定定位。
元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动.形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。
需要注意的是IE6并不支持此属性。
注意：很多网页都是居中的，这样，当对元素进行绝对定位的时候，在不同的分辨率下显示会有偏差，这时，我们可以通过类似下面的方法来处理：〈div style="position： relative;"><div style="position： absolute; top： 10px；left: 10px;”></div></div><div style=”position： Fixed； top： 10px；left: 10px;”〉</div〉</div> //元素位置固定浏览器位置不变二、Floatfloat 是css 的定位属性, fload属性有四个可用的值：Left 和Right 分别浮动元素到各自的方向，None （默认的）使元素不浮动，Inherit 将会从父级元素获取float值。
前端学习--Css--⾏间距在CSS并没有为我们提供⼀个直接设置⾏间距的⽅式，我们只能通过设置⾏⾼来间接的设置⾏间距，⾏⾼越⼤⾏间距越⼤。
使⽤line-height来设置⾏⾼。
⾏⾼类似于我们上学单线本，单线本是⼀⾏⼀⾏，线与线之间的距离就是⾏⾼，⽹页中的⽂字实际上也是写在⼀个看不见的线中的，⽽⽂字会默认在⾏⾼中垂直居中显⽰。
⾏间距 = ⾏⾼ - 字体⼤⼩。
通过设置line-height可以间接的设置⾏⾼，可以接收的值：1.直接就收⼀个⼤⼩；2.可以指定⼀个百分数，则会相对于字体去计算⾏⾼；3.可以直接传⼀个数值，则⾏⾼会设置字体⼤⼩相应的倍数。
对于单⾏⽂本来说，可以将⾏⾼设置为和⽗元素的⾼度⼀致，这样可以是单⾏⽂本在⽗元素中垂直居中。
在font中也可以指定⾏⾼在字体⼤⼩后可以添加/⾏⾼，来指定⾏⾼，该值是可选的，如果不指定则会使⽤默认值。
⽰例demo:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">/*** line-height如果是证书,值越⼤,间距越⼤*/.p1 {font-size: 35px;line-height: 2;}.box {width: 200px;height: 200px;background-color: #bfa;/** 设置“我是⼀个超链”接居中对齐*/line-height: 200px;}.p2 {/*font: 30px "微软雅⿊";line-height: 50px;*/font:30px/50px "微软雅⿊";}</style></head><body><p class="p2">⼈⽣若只如初见，何事秋风悲画扇。
line-height的⽤法（⼀）⾏⾼”顾名思意指⼀⾏⽂字的⾼度。
具体来说是指两⾏⽂字间基线之间的距离。
从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。
尤其记得基线不是最下⾯的线，最下⾯的是底线。
⾏⾼是指上下⽂本⾏的基线间的垂直距离，即图中两条红线间垂直距离。
⾏距是指⼀⾏底线到下⼀⾏顶线的垂直距离，即第⼀⾏粉线和第⼆⾏绿线间的垂直距离。
半⾏距是⾏距的⼀半，即区域3垂直距离/2，区域1，2，3，4的距离之和为⾏⾼，⽽区域1，2，4距离之和为字体size，所以半⾏距也可以这么算：（⾏⾼-字体size）/2。
默认状态，浏览器使⽤1.0-1.2 line-height, 这是⼀个初始值。
你可以定义line-height属性来覆盖初始值：p｛line-height:140%｝你可以有5种⽅式来定义line-height。
1.line-height可以被定义为：body{line-height:normal;}2.line-height可以被定义为：body{line-height:inherit;}3.line-height可以使⽤⼀个百分⽐的值body{line-height:120%;}4.line-height可以被定义为⼀个长度值(px,em等) body{line-height:25px;}5.line-height也可以被定义为纯数字， body{line-height:1.2}在实践中，碰到⼀个题型，可以拿来参考学习下：1<style type="text/css">2 *{margin:0;padding:0;font-size: 12px;}3 .lh1{line-height: 2em;font-size: 20px;background: red;}4 .lh2{font-size: 20px;line-height: 2;background: green;}5 .lh3{font-size: 20px;line-height: 200%;background: blue;}6</style>7</head>8<body>9<div class="lh1"><p>⾏⾼1</p></div>10<div class="lh2"><p>⾏⾼2</p></div>11<div class="lh3"><p>⾏⾼3</p></div>显⽰效果如下图：可以知道：<!--⾏⾼1、⾏⾼3都是带单位的em和%，他们继承是先计算好⾼度，再让⼦元素继承，所以20*2=40⾏⾼2没带单位，它会先把⾏⾼继承下来，再根据⼦元素当前字体的⼤⼩来计算，所以12*2=241.font-size虽然lh1 和 lh2的font-size都设置了20px。
html调整行间距的代码
在HTML中，可以使用CSS样式来调整行间距。
以下是一些常用的代码：
1. 使用line-height属性设置行间距：
```css
p {
line-height: 1.5; /* 设置行高为文本大小的1.5倍 */
}
```
2. 使用margin属性设置段落的上下边距：
```css
p {
margin-top: 10px; /* 设置段落顶部边距为10像素 */
margin-bottom: 10px; /* 设置段落底部边距为10像素 */ }
```
3. 使用padding属性设置段落内部的上下边距：
```css
p {
padding-top: 10px; /* 设置段落上内边距为10像素 */
padding-bottom: 10px; /* 设置段落下内边距为10像素 */ }
```
4. 使用border属性设置段落的边框和边距：
```css
p {
border: 1px solid black; /* 设置段落边框为1像素黑色实线*/
padding: 10px; /* 设置段落内部边距为10像素 */
}
```
以上是一些常见的调整行间距的方法。
需要根据具体情况选择合适的方法来设置行间距。
CSS中的line-height行高属性的教程CSS中的line-height行高属性的教程基本概念1.行高、行距行高是指文本行基线间的垂直距离。
那什么是基线呢？记不记得vertical-align属性有个baseline值，这个baseline就是基线。
看张“盗图”（选自下面的参考文章），其实我也修改了一下啦~ 注意：倒数第二根是基线哦，最下面那根是底线，不是基线。
图中两条红线之间的距离就是行高（line-height），上一行的底线和下一行的顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之间的关系看图片的右下角就一目了然了~半行距 = （line-height - font-size）/2当然，半行距也可能为负值（当line-height < font-size），这时候两行之间就会重叠，如下图所示：2.四种box要说的4种盒子分别是inline box、line box、content area、containing box ~1.inline box (行内框)：每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，行内框的高度等于font-size，设定line-height时，行内框的高度不变，改变的是行距。
2.line box （行框）：行框是指本行的一个虚拟的矩形框，由该行中行内框组成。
行框也是浏览器渲染模式中的一个概念，无法显示出来。
行框高度等于本行中所有行内框高度的最大值。
当有多行内容时，每一行都有自己的行框。
3.content area （内容区）：内容区是围绕着文字的一种box，无法显示出来，其高度取决于font-size和padding。
个人觉得：内容区的高度 = font-size + padding-top + padding-bottom，有待查证.4.containing box containing box：是包裹着上述三种box的box，原谅我画图水平有限，不过仔细辨认还是能看出来的~ ^_^二、取值一般情况下，浏览器默认的line-height为1.2。
CSS文本属性的知识点CSS文本属性是用来控制和美化网页文本内容的一系列样式属性。
掌握这些知识点可以帮助我们在网页设计中更加灵活地处理文本的排版、字体样式、对齐方式以及文字效果等。
下面将介绍一些常用的CSS文本属性的知识点。
1. 字体属性（font-family）字体属性可以设置网页中的文本所使用的字体样式。
我们可以通过指定具体的字体名称或字体族名称来呈现不同的字体风格。
例如，使用"微软雅黑"字体可以使用以下代码来设置：```cssfont-family: "微软雅黑", sans-serif;```这里的`sans-serif`是一个通用字体族，如果用户计算机中没有安装"微软雅黑"字体，就会使用默认的sans-serif字体显示文本。
2. 字号属性（font-size）字号属性用来设置网页文本的大小。
我们可以使用绝对或相对单位来定义字号大小。
以下是一些常见的使用方式：```cssfont-size: 16px; /* 使用像素为单位 */font-size: 1.2em; /* 使用相对单位em */font-size: small; /* 使用相对关键词 */```3. 字体样式属性（font-style）字体样式属性用来设置文本的样式，如斜体、正常等。
可以使用以下代码给文本设置斜体样式：```cssfont-style: italic;```4. 字体粗细属性（font-weight）字体粗细属性可以设置文本的字重。
常用的值有`normal`（正常）、`bold`（粗体）等。
例如：```cssfont-weight: bold;```5. 行高属性（line-height）行高属性用于控制文本行与行之间的距离。
可以使用具体数值或相对单位来定义行高。
以下是一些使用方式：```cssline-height: 1.5; /* 使用数值 */line-height: 150%; /* 使用百分比 */```6. 文本颜色属性（color）文本颜色属性可以设置文本的颜色。
文本垂直对齐行高line-height属性是制定文本行基线之间的距离，而不是字体的大小，它确定了将各个元素框的高度增加或减少多少。
line-height控制了行间距，这是文本行之间超出字体大小的额外空间。
换句话说，line-height值和字体大小之差就是行间距。
在应用到块级元素时，line-height定义了元素中文本基线之间的最小距离。
注意它定义的是最小距离，而不是一个绝对数值，文本基线拉开的距离可能比line-height值更大。
line-height并不影响替换元素布局，不过确实可以应用到替换元素。
构造文本行行内框文本行中的每个元素都会生成一个内容区，这由字体的大小确定。
这个内容则会生成一个行内框(inline box),如果不存在其他因素，这个行内框就完全等于该元素的内容区。
由line-height产生的行间距就是增加或减少各行内框高度的因素之一。
要确定一个给定元素的行间距，只需要将line-height的计算值减去font-size的计算值。
这个值就是总的行间距。
行间距可能为负。
行间距再除以2，将间距的一半分别应用到内容区的顶部和底部。
其结果就是该元素的行内框。
行框一旦给定内容行已经生成了所有行内框，接下来在行框的构造中就会考虑这些行内框。
行框的高度恰好足以包含最高行内框的顶端和最低行内框的底端。
指定line-height值line-height如果取默认值normal，用户代理必须计算行间的垂直空间。
不同的用户代理计算出的值可能不同，不过通常都是字体大小的 1.2倍，这使得行框要高于给定元素的font-size值。
行高和继承当一个块级元素从另一个元素继承line-height时，问题会变得更为复杂。
line-height值从父元素继承时，要从父元素计算而不是在子元素计算。
body {font-size:10px;}div {line-height:1em;}p {font-size : 18px}<div><p>这段文字从div继承了line-height，div的字体大小时10，所以计算出来的大小是10px。
css文字基准线的定义-回复CSS文字基准线的定义可以简单理解为所谓文字在一个行高（line-height）区域内所占据的相对位置。
在CSS中，我们可以通过一系列属性和值来控制和调整文字的基准线。
首先，我们需要了解一些基本的概念。
在CSS中，文本的基准线是指文本字符（glyph）底端的水平线，用于对齐字符上下方向的排列。
基准线可以视为字符的“底部”，而文本字符的显示比例和排列方式通常基于这个基准线。
然而，由于不同字体和字号的字符形状差异，不同的字符底部并不总是对齐在同一水平线上。
为了解决这个问题，文本字符的基准线被定义为字符底部和字符顶部之间的一条虚拟线，该线通常与字符的底部部分基本对齐，并作为参考给其他字符提供对齐依据。
在CSS中，基准线调整可以通过以下几个属性来实现：1. vertical-align（垂直对齐）：该属性可以设置元素或者内联元素中文本的垂直对齐方式。
它可以接受多种对齐方式的值，包括基准线相对于包含块顶端或者底端的偏移值、与父元素基线对齐等。
通过合理地使用vertical-align属性，我们可以轻松控制内联文本或者图片等元素与基准线之间的对齐关系。
2. line-height（行高）：行高是指一行文本占据的垂直空间，包括文字的实际大小、上下间距和行间距。
行高可以通过设置line-height属性值来调整。
相对于基准线而言，line-height的值可以影响字符的上下间距。
例如，当line-height的值大于文字大小时，字符的顶部和底部将会相对于基准线向上和向下进行偏移，从而增大字符的行间距。
3. font-size（字号）：字号属性用于定义字体的大小。
字号的设置也会影响字符的基准线位置。
通常，字号的值代表字符底端到基准线的距离。
较大的字号会使基准线向上移动，而较小的字号会使基准线向下移动。
通过综合使用这些属性，我们可以对文字基准线进行精确的调整。
例如，我们可以通过设置line-height属性将行高调大，这样即使在同一字号下，字符的基准线也会距离文字底端更远。
CSS样式----CSS属性：字体属性和⽂本属性（图⽂详解）本⽂最初于2015-10-04发表于，并在上持续更新前端的系列⽂章。
欢迎在GitHub上关注我，⼀起⼊门和进阶前端。
以下是正⽂。
CSS的单位字体属性⽂本属性定位属性：position、float、overflow等html中的单位只有⼀种，那就是像素px，所以单位是可以省略的，但是在CSS中不⼀样。
CSS中的单位是必须要写的，因为它没有默认单位。
绝对单位：1 in=2.54cm=25.4mm=72pt=6pc。
各种单位的含义：in：英⼨Inches (1 英⼨ = 2.54 厘⽶)cm：厘⽶Centimetersmm：毫⽶Millimeterspt：点Points，或者叫英镑 (1点 = 1/72英⼨)pc：⽪卡Picas (1 ⽪卡 = 12 点)相对单位：px：像素em：印刷单位相当于12个点%：百分⽐，相对周围的⽂字的⼤⼩为什么说像素px是⼀个相对单位呢，这也很好理解。
⽐如说，电脑屏幕的的尺⼨是不变的，但是我们可以让其显⽰不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不⼀样的啦。
百分⽐%这个相对单位要怎么⽤呢？这⾥也举个例⼦：⾏⾼CSS中，所有的⾏，都有⾏⾼。
盒⼦模型的padding，绝对不是直接作⽤在⽂字上的，⽽是作⽤在“⾏”上的。
如下图所⽰：上图中，我们设置⾏⾼为30px，30px * 5 = 150px，通过查看审查元素，这个p标签的⾼度果然为150px。
⽽且我们发现，我们并没有给这个p标签设置⾼度，显然是内容将其撑⾼的。
垂直⽅向来看，⽂字在⾃⼰的⾏⾥是居中的。
⽐如，⽂字是14px，⾏⾼是24px，那么padding就是5px：为了严格保证字在⾏⾥⾯居中，我们的⼯程师有⼀个约定：⾏⾼、字号，⼀般都是偶数。
这样可以保证，它们的差⼀定偶数，就能够被2整除。
如何让单⾏⽂本垂直居中⼩技巧：如果⼀段⽂本只有⼀⾏，如果此时设置⾏⾼ = 盒⼦⾼，就可以保证单⾏⽂本垂直居中。
