第四次网页前端笔记

1.背景

CSS的背景属性用于定义HTML元素的背景效果。

1.1. background-color

设置元素的背景颜色

1.2. background-image

设置元素的背景图像，默认情况下，背景图像进行平铺重复显示,以覆盖整个元素实体。

1.3. background-repeat

设置是否及如何重复背景图像

2.文本

2.1.color

2.2.text-align

设置文本对齐方式，center (居中)，left (左对齐)，right (右对齐)

2.3.text-decoration

规定添加到文本的修饰，属性值: none. underine. overline. line through
1) underline
对文本添加下划线，与HTML的u元素相同。
2) overline
对文本添加上划线。
3) line-through
对文本添加中划线，与HTML 中的s和strike元素相同。
4）none 

关闭原本应用到元素上的所有装饰。

2.4.text-indent

设置文本首行缩进 

em一个相对值，例如页面的文本大小为17px，则2em就为17px*2 

3.字体

3.1.font-family

文本字体，该属性设置文本的字体

4.对齐方式

text-align规定元素中的文本的水平对齐方式。

属性值如下:
left
把文本排列到左边。默认值:由浏览器决定。
right
把文本排列到右边。
center
把文本排列到中间。
justify
实现两端对齐文本效果。
inherit
规定应该从父元素继承tex-align属性的值。

注意:
值justily可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔，使各行的长度恰好相等。对最后一行不生效。

5.display属性

display属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。
none
此元素不会被显示。
block
此元素将显示为块级元素，此元素前后会带有换行符。
inline
默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block
行内块元素。(CSS2.1 新增的值)
list-item
此元素会作为列表显示

6浮动

float的属性值有none、left、 right

1.只有横向浮动，并没有纵向浮动。
2.会将元素的display属性变更为block.
3.浮动元素的后一个元素会围绕着浮动元素(典型运用是文字围绕图片)
4.浮动元素的前一个元素不会受到任何影响(如果你想让两个块状元素并排显示，必须让两个块状元素都应用float)。

7.盒子模型

border. padding. margin三个属性构成了盒子模型。

 7.1.border

设置所有的边框属性。
1)可同时设置边框的宽度、样式、颜色

 2)使用border-width、 border-style. border-color单独设置

3)border-style的属性

none：默认无边框
4）border-collapse
 设置是否将表格边框折叠为单一边框。
属性值: separate (默认，单元格边框独立)、collapse (单元格边框合并)
 7.2.padding

设置元素所有内边距的宽度，或者设置各边上内边距的宠度。
如果在表的内容中控制文本到边框的内边距，使用td和th元素的填充属性:

单独设置各边的内边距: padding-top. padding-left. padding-bottom. padding-ight
默认按照上右下左的顺序设定

注意:通过padding属性设置元素内边距时，会使元素变形。若不想影响格式效果，可以用margin属性设置元素外边距。

7.3.margin

单独设置各边的外边距: margin-top. margin-left. margin-bottom. margin-right

说明:
auto:自动，可以理解为居中的意思。浏览器自动计算外边距。
margin: auto auto:第一个auto表示 上下外边距自动计算,第二个auto表示左右外边距自动计算。
但是.上下外边距在自动计算时不会生效，而左右外边距会生效,表现为居中状态,