如何用css控制表格间距为1px的样式

html-css030

如何用css控制表格间距为1px的样式,第1张

用css控制表格间距为1px的样式方法:

css样式

.table{margin:0 0 15px 0border-collapse:collapse}

.table td{ background:#ffefedpadding:0 border-spacing:1pxborder:1px #fbaaa0 solid}

border-collapse:collapse

加在table的样式中

border-spacing:1px

border:1px #fbaaa0 solid

这两句加在td的样式中

CSS中如何控制段落间的距离方法:

1、line-height为20px案例,DIV+CSS代码:

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html charset=utf-8" /> 

<title>段落案例</title> 

<style> 

p{ line-height:20px} 

/* css 注释: 设置行高为20px */ 

</style> 

</head> 

<body> 

<p>第一段,第一行<br /> 

第二行</p> 

<p>第二段</p> 

<p>第三段</p> 

</body> 

</html>

行高line-height实现段落间距

分别设置20px和50px行高样式案例,对比发现不同行高值,段落上下间距也产生不同距离,所以使用line-height可以设置段落间距距离,但这里不推荐使用line-height设置段落之间间距。

二、css padding内补白(内边距)

可以推荐使用padding设置段落上下间距。通过设置上下内补白,内距离即可实现p段落上下间距设置。

关键字:p{padding:10px 0}

接下来DIVCSS5以案例演示CSS段落上下距离设置。

1、设置上下内补白为10px(padding:10px 0)

完整css+div代码:

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html charset=utf-8" /> 

<title>段落案例</title> 

<style> 

p{ padding:10px 0} 

/* css注释: 设置padding为上下10px */ 

</style> 

</head> 

<body> 

<p>第一段,第一行<br /> 

第二行</p> 

<p>第二段</p> 

<p>第三段</p> 

</body> 

</html>

padding段落间距

2、设置上下内补白为30px(padding:30px 0)

div css代码如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html charset=utf-8" /> 

<title>段落案例</title> 

<style> 

p{ padding:30px 0} 

/* css注释: 设置padding为上下30px */ 

</style> 

</head> 

<body> 

<p>第一段,第一行<br /> 

第二行</p> 

<p>第二段</p> 

<p>第三段</p> 

</body> 

</html>

上下padding间距为30px效果

通过对p标签设置padding上下补白即可实现段落之间间距,同时推荐使用padding样式实现段落间距距离设置。

三、css margin外边距

CSS段落间距调整之margin实现上下段落之间间距距离样式设置,我们知道margin是设置上下左右对象与对象之间距离设置,这里段落也可以使用此css样式实现间距。这里DIVCSS5依然以设置两组margin样式进行对比观察。

关键样式单词:p{margin:10px 0}

1、css设置margin上下间距为10px,html+css代码:

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html charset=utf-8" /> 

<title>段落案例</title> 

<style> 

p{margin:10px 0} 

/* css注释: 设置margin为对象上下间距10px */ 

</style> 

</head> 

<body> 

<p>第一段,第一行<br /> 

第二行</p> 

<p>第二段</p> 

<p>第三段</p> 

</body> 

</html>

设置margin段落上下间距为10px

2、css设置margin上下间距为30px,完整代码如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html charset=utf-8" /> 

<title>段落案例</title> 

<style> 

p{margin:30px 0} 

/* css注释: 设置margin为对象上下间距30px */ 

</style> 

</head> 

<body> 

<p>第一段,第一行<br /> 

第二行</p> 

<p>第二段</p> 

<p>第三段</p> 

</body> 

</html>

设置p标签上下margin间距为30px

观察margin上下间距设置为10px和30px实现了间距调整目的,这里也推荐使用margin对段落上下间距设置。

关键词:隐式轨道 / 隐式网格 / 自动布局算法

隐式网格是指当网格项目确认在显式网格之外时所创建的网格,简单来说,当没有足够空间或显式网格轨道来分配网格项目时,此时剩下网格会自动创建隐式网格。

当设置网格容器的网格模板 grid-template 属性并指定固定数量轨道时创建出来的就是典型的显式网格,而在实际的HTML中存在网格项目多余既定数量,此时这些多余的网格是之前未声明定义的,因此网格容器会通过添加隐式网格线来生成网格轨道,在将这些多余的网格分配到其中,这些多余的就是所谓“隐式网格”。

隐式网格轨道的尺寸由 grid-auto-rows 和 grid-auto-columns 属性来确定,使用 grid-auto-flow 属性来控制隐式网格自身主动定位(auto-placement),这三个属性都需要在网格容器上设置。

如何产生隐式网格呢?

例如:定义一个网格容器,网格间距为1px,默认存放两列等宽网格项目,创建具有隐式网格的布局。

问题是虽然在网格容器中设置了2列等宽的位置用来容器网格项目,也就是说只定义了1行轨道,但实际上网格容器中具有4个网格项目,问题来了,第3和第4个网格容器是如何处理的呢?

第3和第4会自动创建下一个轨道,即隐藏网格。创建出来的隐式网格的方向若没有设置则默认为 row 即 grid-auto-flow:row 。

这里我们首先将这4个网格分成两种类型显式网格和隐式网格,其中可以发现第1和第2个为显式网格,第3和第4网格为隐式网格。换句话说第1行为显式行轨道,第2行为隐式行轨道。

grid-auto-flow 属性用来设置自动布局算法,用于精确指定在网格中被自动布局的网格项是如何排列的,也就是说指定自动放置的网格项是如何流入网格中的,因此也被称之为“网格自动流”。

稠密堆积算法 VS 稀疏算法

dense 使用稠密堆积算法,若【后面】出现小元素则算法会尝试填充网格中【前面】留下的空白,如此这样会填补上稍大元素所留下的空白,但同时可能导致原有出现次序被打乱。

若省略 dense 则会使用稀疏算法,即在网格中布局元素时,布局算法只会向前移动,永远不会倒回来去填补空白,这样做以保证所有自动布局元素是[按照次序]出现的,即使可能会留下被后面元素填充的空白。

例如:改变隐式网格默认方向 row 为 column ,此时隐式网格行高 grid-auto-rows 将会失效。

网格容器的 grid-auto-rows 属性可以用来定义隐式网格中行轨道的大小

这里 grid-template-rows:70px 设置的是显式轨道的行高, grid-auto-rows:140px 则设置的是隐式轨道的行高。

设置隐式网格列宽,首先需使用 grid-auto-flow:column 自动创建隐式网格流方向为列,然后在使用 grid-auto-columns:1fr 设置隐式网格的列宽,这里使用 1fr 做等分处理。

例如:排序与布局

第1个网格项横跨左2格,后4格按 grid-auto-flow:column 的流向排列。