前面讲解了CSS的各种规定，具体能应用到哪些方面呢？

（一）文字排版

1.字体

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。

body{font-family:"宋体";}     选择器{font-family：“字体名称”}

这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
现在一般网页喜欢设置“微软雅黑”，如下代码：

body{font-family:"Microsoft Yahei";}

或

body{font-family:"微软雅黑";}

注意：第一种方法比第二种方法兼容性更好一些。

font-family:"microsoft yahei",simhei; 这句到底设置为微软雅黑还是黑体，为什么写2个字体？

解释：

字体设置都是设置集合。意思是：优先使用微软雅黑，如果客户端未安装雅黑则使用黑体，如果两者都找不到，则使用系统默认字体。像中文环境，只能指定：雅黑，黑体，宋体，楷体。其中宋体多为默认。雅黑只有VISTA及以上才预装。一般对中文最好不指定字体，非使用艺术字体的话可以使用图片形式。

2.字号、颜色

字号:  选择器{font-size：x px;}            颜色:选择器{color：red;}

可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：

body{font-size:12px;color:#666;}

3.粗体

我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，可以使用下面代码实现设置文字以粗体样式显示出来。

p span{font-weight:bold;}

在这里大家可以看到，如果想为文字设置粗体是有单独的css样式来实现的，再不用为了实现粗体样式而使用h1-h6或strong标签了。

3.1

字符转换

text-transform 属性处理文本的大小写。这个属性有 4 个值：

  • none
  • uppercase
  • lowercase
  • capitalize

默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。

作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改：

h1 {text-transform: uppercase}

使用 text-transform 有两方面的好处。首先，只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本身。其次，如果您以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。

4.

斜体

以下代码可以实现文字以斜体样式在浏览器中显示：

  a{font-style:italic;}

文本装饰

text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为

text-decoration 有 5 个值：

  • none
  • underline
  • overline
  • line-through
  • blink

5.下划线

有些情况下想为文字设置为下划线样式，这样可以在视觉上强调文字，可以使用下面代码来实现：

p a{text-decoration:underline;}

 6.

删除线

如果想在网页上设置删除线怎么办，这个样式在电商网站上常会见到：

上图中的原价上的删除线使用下面代码就可以实现：

.oldPrice{text-decoration:line-through;}  7.blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

none       值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：

a {text-decoration: none;}

注意：如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。

例如：

设置链接的样式

能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。

链接的特殊性在于能够根据它们所处的状态来设置它们的样式。

链接的四种状态：

  • a:link - 普通的、未被访问的链接
  • a:visited - 用户已访问的链接
  • a:hover - 鼠标指针位于链接的上方
  • a:active - 链接被点击的时刻

实例

a:link {color:#FF0000;}        /* 未被访问的链接 */
a:visited {color:#00FF00;}  /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */

亲自试一试

当为链接的不同状态设置样式时，请按照以下次序规则：

  • a:hover 必须位于 a:link 和 a:visited 之后
  • a:active 必须位于 a:hover 之后

常见的链接样式

在上面的例子中，链接根据其状态改变颜色。

让我们看看其他几种常见的设置链接样式的方法：

文本修饰

text-decoration 属性大多用于去掉链接中的下划线：

实例

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

亲自试一试

white-space（空白处理）

属性设置如何处理元素内的空白

通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：

可以用以下声明显式地设置这种默认行为：

p {white-space: normal;}

上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。

值 pre

不过，如果将 white-space 设置为 pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像 XHTML 的 pre 元素一样；空白符不会被忽略。

如果 white-space 属性的值为 pre，浏览器将会注意额外的空格，甚至回车。在这个方面，而且仅在这个方面，任何元素都可以相当于一个 pre 元素。

值 nowrap（不能换行，除非遇到<br/>）

与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。

值 pre-wrap 和 pre-line

当 white-space 属性设置为 pre-wrap 时，浏览器不仅会保留空白符并保留换行符，还允许自动换行

缩进

中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：

p{text-indent:2em;}    2em的意思就是文字的2倍大小

注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。

提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

8.行间距（行高line-height和vertical-height  参考网址： https://www.cnblogs.com/keyi/p/5841222.html）

line-height行高是指文本行基线之间的距离。行高line-height实际上只影响行内元素和其他行内内容，内联元素的高度由行高决定，如果设置font-size为36，但是line-height：0，该内联盒子的高度为0。如果设置font-size：0，line-height：36，该内联盒子的高度仍为，36而不会直接影响块级元素，也可以为一个块级元素设置line-height，但这个值只是应用到块级元素的内联内容时才会有影响

这一小节我们来学习一下另一个在段落排版中起重要作用的行间距（行高）属性（line-height），如下代码实现设置段落行间距为1.5倍。

p{line-height:1.5em;}

行高只是两行文字之间的基线距离。line-height-内容区域=行间距；内容区+两个  半行间距=行内框。行内框的最顶端与行内框最低端的距离为行框。

宋体font-size和内容区域大小一样，一般的都有些偏差、

这也明说行内框=line-height的高度值

总说基线基线，那么基线的位置在哪呢？

 

normal：行高和浏览器有关，不同的浏览器下，行高不一样。在同一浏览器下，字体大小不同或者不同的字体的行高也不一致，例如同样大小的24号字体的宋体和微软雅黑的行高也不一样。

因此，我们在实际开发中，为了避免这种不确定性，在body及其元素里面进行reset初始化

  相当于重置

  第二个  子元素的行高直接继承了父元素的行高

替换元素

　　行内替换元素需要使用line-height值，从而在垂直对齐时能正确地定位元素。因为vertical-align的百分数值是相对于元素的line-height来计算的。对于垂直对齐来说，图像本身的高度无关紧要，关键是line-height的值

　　默认地，行内替换元素位于基线上。如果向替换元素增加下内边距、外边距或边框，内容区会上移。替换元素的基线是正常流中最后一个行框的基线。除非，该替换元素内容为空或者本身的overflow属性值不是visible，这种情况下基线是margin底边缘

line-height

1.垂直居中-父元素高度确定的单行文本（父元素设定height的单行文本）

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 父类元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。

line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。由于上一半行间距+font-size+下一半行间距=line-height。因此，设置line-height，相当于设置了

上一半行间距+font-size+下一半行间距  的值，而该元素包含于父类元素中，因此，该元素垂直居中了。

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

2.垂直居中-父元素高度确定的多行文本

（方法一）

  

垂直居中-父元素高度确定的多行文本（方法二）

vertical-align

　 vertical-align用来设置垂直对齐方式，所有垂直对齐的元素都会影响行高，vertical-align是用来对齐内联级元素的.

值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit

　　初始值: baseline

　　应用于: 行内元素、替换元素、表单元格

　　百分数: 相对于元素的行高line-height

  这样可以引申出，vertical-align不能用于float  position等元素，因为float等已将元素块状化。

9.

中文字间距、字母间距

中文字间隔、字母间隔设置：

如果想在网页排版中设置文字间隔或者字母间隔就可以使用    letter-spacing 来实现，如下面代码：

h1{letter-spacing:50px;
}
...
<h1>了不起的盖茨比</h1>

注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。

单词间距设置：

如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。如下代码：

h1{word-spacing:50px;
}
...
<h1>welcome to imooc!</h1> 10.

段落排版--对齐

想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。(那么什么是块状元素呢？在后面的11-1、11-2小节中会讲到。)

h1{text-align:center;
}
<h1>了不起的盖茨比</h1>

同样可以设置居左：

h1{text-align:left;
}
<h1>了不起的盖茨比</h1>

还可以设置居右：

h1{text-align:right;
}
<h1>了不起的盖茨比</h1>提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现.text-align仅仅针对文本。。。

CSS 背景

背景色

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

这条规则把元素的背景设置为灰色：

p {background-color: gray;}

可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。

background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

背景图像

要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：

body {background-image: url(/i/eg_bg_04.gif);}

背景图片background-position 属性

定义和用法

background-position属性设置背景图像的起始位置。

注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）"。

默认值: 0% 0%
继承: no
版本: CSS1
JavaScript 语法: object object.style.backgroundPosition="center"

语法

background-position: horizontal vertical                    //horizontal(水平) vertical（垂直）

水平是

percentage（百分比） | length | left | center | right
垂直是 
percentage（百分比） | length | top | center | bottom

属性值

值 描述
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom 		如果仅指定一个关键字，其他值将会是"center"
x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit 指定background-position属性设置应该从父元素继承

1.backround-position （xpos ypos）    容器的左上角为（0,0）。

当我们设置为（xpos ypos）时，意思为图片左上角距离容器左上角的距离。如下图所示：

当我们设置为两个负数：（-70px，-40px）

当为（0px,0px）

比如：left top，

背景图片的左上角和容器(container)的左上角对齐，超出的部分隐藏。
等同于 background-position:0,0;
也等同于background-position:0%,0%;

right bottom
背景图片的右下角和容器(container)的右下角对齐，超出的部分隐藏。
等同于background-positon:100%,100%;
也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器(container)的高度-背景图片的高度

实例

背景重复

如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。

默认地，背景图像将从一个元素的左上角开始。请看下面的例子：

body{ background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-y;}

我们能够以不同的方法为链接设置样式。

背景色

background-color 属性规定链接的背景色：

实例

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

vertical-align 属性

定义和用法

vertical-align 属性设置元素的垂直对齐方式。

我们知道display也有很多属性值，其中以inline/inline-block/block三个最常见，这代表了页面上三种不同水平的元素。我常常会以液态/固液混合态/固态加以形象化思考，对应于现实中的事物就是：牛奶/果冻/坚果。

我们都知道，每个人都有不同的嗜好，有的人喜欢吃甜食，有的人喜欢吃辣的东西，有的人不喜欢吃芹菜，有的人不喜欢吃羊肉等等。CSS中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。而vertical-align呢，是个比较挑食的家伙，它只喜欢吃果冻，从小吃果冻长大，没有了果冻，它就会闹脾气，对你不理不睬。我称之为“果冻依赖型元素”，又称之为“inline-block依赖型元素”，也就是说，只有一个元素属于inline-block（table-cell也可以理解为inline-block水平）水平，，其身上的vertical-align属性才会起作用。所以，类似下面的代码就不会起作用：

span{vertical-align:middle;}
div{vertical-align:middle;}

所谓inline-block水平的元素，就是既可以“吸”又可以“咬”的元素，既可以与inline水平元素混排，又能设置高宽属性的元素。哪些元素呢，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。

虽然vertical-align属性只会在inline-block水平的元素上期作用，但是其影响到的元素涉及到inline属性的元素，这里千万记住，inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用，而是受制于整个line box的变化而不得不变化的，这个后面会较为深入的分析。

 display属性

显示或隐藏

我们可以通过使用visibility属性或display属性来显示或隐藏元素。

要隐藏元素，请将display属性设置为“none”或将visibility属性设置为“hidden”。

visibility：hidden隐藏元素，但是元素仍然占据空间并影响布局。

h1.hidden {visibility: hidden;
}

display：none隐藏元素，并从布局中删除元素。

h1.hidden {display: none;
}

block（块）和 inline（内联）元素

块元素尝试获取整个宽度，并在布局中开始新行。一些HTML元素是块元素或块级元素。

<h1>, <p>, <li>, <div> 
都是块元素的示例。

内联元素与其他内联元素保持在同一行中，并且不会开始新行。

<a>, <span> 是内联元素的示例。

我们可以使用display属性来更改块或内联函数。

以下代码使li元素显示为内联元素。不是开始一个新行作为正常li元素，它显示li元素在同一行。

li {display: inline;
}

以下代码使span元素显示为块元素。现在每个span元素将像div元素，默认情况下它是一个块元素。

span {display: block;
}

Inline-Block（内联块）

inline-block值混合块和内联特性。

盒子的外部被视为内联元素。因此，不会为元素创建新行。

框的内部被视为块元素，并应用诸如宽度，高度和边距的属性。

以下代码显示如何使用inline-block值。

<!DOCTYPE HTML> <html> <head> <style type="text/css"> p { display: inline; } span { display: inline-block; border: medium double black; margin: 2em; width: 10em; height: 2em; } </style> </head> <body> <p>This is a test.</p> <p>This is a test. <span>This is a test.</span> </p> </body> </html>

性定义及使用说明

display 属性规定元素应该生成的框的类型。

默认值： inline
继承： no
版本： CSS1
JavaScript 语法： object.style.display="inline"

属性值

值 描述
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。（CSS2.1 新增的值）
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column 此元素会作为一个单元格列显示（类似 <col>）
table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption 此元素会作为一个表格标题显示（类似 <caption>）
inherit 规定应该从父元素继承 display 属性的值。

1. display:no

让该元素隐藏，不显示。

2. display:block

既是让不是块状元素的元素称为块状元素，又表示该元素显示。

举例：

我们要实现一个效果：

    点击红色区域，显示一个下拉框，   

当离开红色区域或者离开该下拉框时，该下拉框隐藏

1.在下拉框的父类中用overflow：hidden。当hover的时候，overflow：visible

<style type="text/css">.box{width: 100px;height: 30px;background-color: #6a6666;position: relative;overflow: hidden;}.box_1{width: 100%;height: 100%;background-color: red;text-align: center;line-height: 30px;}.box_2{border: 1px solid;width: 30px;height: 30px;}.box:hover {overflow: visible;}</style>
</head>
<body>
<div class="box"><div class="box_1">我的购物车</div><div class="box_2"></div>
</div>

2.下拉框中用display：none  父类：hover .下拉框类{  display：block}

 <style type="text/css">.box{width: 100px;height: 30px;background-color: #6a6666;position: relative;/*overflow: hidden;*/}.box_1{width: 100%;height: 100%;background-color: red;text-align: center;line-height: 30px;}.box_2{border: 1px solid;width: 30px;height: 30px;display: none;}.box:hover .box_2{/*overflow: visible;*/display: block;}</style>
</head>
<body>
<div class="box"><div class="box_1">我的购物车</div><div class="box_2"></div>
</div>

 z-index

特性：

z-index动画

将z-index=-1的元素，修改为z-index=51

z-index的生效

z-index的规则：

1.对于同级定位元素：

哪个z-index的值大，哪个在最上面。

2.对于不同级，则根据其具有定位属性的父类决定：

举例：

 

clear清除浮动

在开发中，从美工MM给你Html代码中，肯定能经常看”<div style="clear:both;"></div>”这样的代码，但是你真的能明白它是做什么用的吗？

如：

<div style="border:2px solid red;">

<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

<div style="clear:both;"></div>

</div>

你可以将此部分代码放到一个HTML页面看看效果，然后在去掉”<div style="clear:both;"></div>”看一下效果,就知道这句话的作用了。

没有clear：both

添加clear：both

 这样看，应该就一目了然了：原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。

另一方法：

<style>

.dd:after{

    content:"";

    clear:both;

    display:block

}

</style>

<div style="border:2px solid red;" class="dd">

<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>

<div></div>

</div>

可以实现同样的效果

 

CSS 列表

CSS 列表

从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。

列表类型

要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。

例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。

要修改用于列表项的标志类型，可以使用属性 list-style-type：

ul {list-style-type : square}

上面的声明把无序列表中的列表项标志设置为方块。

 list-style-type的可能值

列表项图像

有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用 list-style-image 属性做到：

ul li {list-style-image : url(xxx.gif)}

只需要简单地使用一个 url() 值，就可以使用图像作为标志。

 

list-style 属性

list-style 简写属性在一个声明中设置所有的列表属性

说明

该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。

可以按顺序设置如下属性：

  • list-style-type
  • list-style-position
  • list-style-image

可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。

list-style-position 属性

CSS 表格

CSS 表格属性可以帮助您极大地改善表格的外观

表格边框

如需在 CSS 中设置表格边框，请使用 border 属性。

下面的例子为 table、th 以及 td 设置了蓝色边框：

table, th, td{border: 1px solid blue;}

请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。

如果需要把表格显示为单线条边框，请使用 border-collapse 属性。

表格宽度和高度

通过 width 和 height 属性定义表格的宽度和高度。

下面的例子将表格宽度设置为 100%，同时将 th 元素的高度设置为 50px：

表格文本对齐

text-align 和 vertical-align 属性设置表格中文本的对齐方式。

表格内边距

如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：

td{padding:15px;}

表格颜色

下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：

table, td, th{border:1px solid green;}th{background-color:green;color:white;}

overflow属性规定当内容溢出元素框时发生的事情这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

1.默认值visible：里面的内容超出父类元素边框，如实展示
2.hidden：当内容超出父类元素边框，超出的部分会被隐藏，看不到
3.scroll,出现滚动条

4.auto，自动适应，根据需要是否出现滚动条，没有一开始就限制要滚动条还是不要滚动条。

由于滚动条的出现

 overflow给布局带来的影响

1.尺寸对不上

 2.水平居中跳动。由于滚动栏占据了一定的尺寸，所以auto的值发生了变化，所以会水平跳动。

 

转载于:https://www.cnblogs.com/yyn120804/p/6286565.html

CSS属性以及属性值（样式）相关推荐

  1. HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

  2. js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性 修改属性值、js 获取子元素、js 改变css样式

    参考书籍:<JavaScript DOM编程艺术 第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点 一份document ...

  3. 【温故知新】CSS学习笔记（字体样式属性）附加篇

    CSS字体样式属性 目录 CSS字体样式属性 一.font属性 二.color属性 三.line-height 行间距(行高) 四.text-align 水平对齐方式 五.text-indent 首行 ...

  4. CSS中属性个属性值怎么区分,[CSS] 详细解释 @media 属性与 (max

    前言 现在 HTML5/CSS3 很流行罢,也是未来时代的趋势.在 HTML5 带来的许多实用功能之后,CSS3也同带来了一些牛逼哄哄的功能呢. 动画 animation 转化 transform 过 ...

  5. CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表

    前言:本篇文章为 CSS 基础系列笔记第一篇,参考 黑马程序员pink老师前端入门教程 如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...

  6. css样式lighter的意思,css常用的属性

    CSS------属性值篇 display: none | block | inline(默认值) | inline-block(css2新增) | inherit none :此元素不会再显示 {注 ...

  7. css文本外观属性中设置字体,css 文本外观属性(text) 和 字体样式属性(font)

    css文本 text外观属性 color: 颜色值(red,blue)十六进制 ,rgb letter-spacing: 字间距 px,em word-spacing: 单词间距 对中文无效 line ...

  8. css属性和属性值，溢出属性，css盒子

    1.css属性和属性值 1.css文本属性 1. font-size 字体大小 单位是px,浏览器默认的是16px,设计图常用的是12px 2. font-family 字体 当字体是中文字体,英文字 ...

  9. html font设置字号,CSS font-size字体文字大小样式属性

    CSS font-size字体文字大小样式属性-字体大小样式篇: 本节DIVCSS5为大家介绍通过CSS样式设置文字字体大小知识,涉及CSS样式单词font-size. 一.设置字体大小CSS单词与语 ...

最新文章

  1. Java Lambda表达式forEach无法跳出循环的解决思路
  2. Centos7 释放内存
  3. SQL基础【十六、Union】
  4. 产品经理如何量化关键需求指标
  5. zeroclipboard浏览器复制插件使用记录
  6. 华北电力大学计算机科学与技术考研,华北电力大学吴克河教授谈计算机科学与技术专业...
  7. 显示学生各科成绩和总成绩-面试被问到
  8. 【实习生笔试面试题】2013年搜狐SOHU实习生技术笔试题
  9. es6 循环加载ES6模块
  10. 红黑树与平衡二叉树_大佬用这近百张图来给我解释红黑树，看完直接跪了！
  11. linux 安装软件仓库,linux 软件仓库
  12. IDEA、MySQL、SQLyog安装教程
  13. 维修涉及行业2021-11-15
  14. roseha for linux,ROSEHA for linux安装与操作文档
  15. 微信分享网页时自定义标题描述和图片
  16. OSG学习：OSG组成（二）——渲染状态和纹理映射
  17. 毕业设计 基于JSP动漫论坛的设计与实现
  18. Mongdb重启后dirty很高，cache打满
  19. ECharts(三)
  20. 有关日期的一些工具类收集

热门文章

  1. 林伟 刘念《曾经爱过我》
  2. fprintf()函数的运用
  3. Spring Boot 2.3.5.RELEASE正式升级，SpringBoot新版本发布
  4. 《指数基金投资指南》读书笔记---指数基金的分类
  5. syslog和rsyslog有什么不同？
  6. 程序员口中常说的API是什么意思？什么是API？
  7. vue模板语法是什么？
  8. 【论文阅读｜深读】DRNE:Deep Recursive Network Embedding with Regular Equivalence
  9. vim只读模式修改文件
  10. python中模型训练不收敛问题