标签：水平居中 模型 top 访问 commons 显示 就会 mil 比较
/*选择器选择h1标签*/
h1{
/*一条颜色的声明*/
color:red; /*属性：color 值：red*/
font-size:14px;
}
1、外联式：在head中通过link标签，链接带外部样式表到页面中
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="../css/home_page.css" type="text/css">
</head>
2、嵌入式：通过style标签，在网页上创建嵌入的样式表
<head>
<meta charset="UTF-8">
<title>嵌入式</title>
<style type="text/css">
div{
width: 100px;
height: 10px;
background: #154FB5;
}
</style>
</head>
3、内联式：通过标签的style属性，直接给标签设置样式
<body>
<div style="background: #154FB5; width: 100px">........</div>
</body>
颜色对照地址：http://tool.oschina.net/commons?type=3
background-color： 设置背景颜色，这个属性接收任何合法的颜色值
四种种颜色表达：
body, html {
background-color: red;
background-color: #E9F1F9;
background-color: rgb(177,222,333);
background-color: rgba(177,222,333,0.4);
}
background-image： 要把图像放入背景，属性默认值为none，表示背景没有放置任何图像，如果需要设置一个背景图像，必须为这个属性设置一个URL值：
| 属性值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
background-image:url("img/bd_logo1.png");
background-repeat: no-repeat;
可以利用background-position改变图像的位置
| 属性 | 描述 |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。 |
| x% y% | 第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。 |
| xpos ypos | 第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值 |
background-position: 50% 25%;
background-position: 100px 100px;
background-position: top center;
如果文档比较长，那么当文档向下滚动时，背景图形就会消失，此时设置background-attachment 就可以声明图像对于可视区固定，不受滚带影响
-可能的值
| 值 | 描述 |
|---|---|
| scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
| fixed | 当页面的其余部分滚动时，背景图像不会移动。 |
| inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
background-color: #154FB5; /* 颜色*/
background-image:url("img/bd_logo1.png");/* 图像*/
background-repeat: no-repeat; /* 图像不平铺*/
background-position: top center; /* 图像定位*/
background-attachment: fixed; /* 图像不移动*/
/*任意顺序都可，单独设置颜色和图片也可以*/
body,html{
background: #154FB5 url("img/bd_logo1.png") no-repeat top center fixed;
}
color: 设置字体颜色
font-size：设置文字的大小
font-family：设置文字的字体
font-style：设置字体是否斜体
font-weight：设置字体是否加粗
line-height：设置字体的行高
font: 字体的样式属性一起设置
text-indent：设置首行缩进
text-align：设置文字水平对齐方式
CSS 框模型 (Box Model)规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
| 属性 | 描述 |
|---|---|
| border | 简写属性，四个边框属性一起设置 |
| border-style | 简写属性，用于设置元素所有边框的样式，或者单独为各边设置样式 |
| border-width | 简写属性，用于为元素的所有边框设置宽度，或者单独为各边设置款第 |
| border-color | 简写属性，设置元素所有边框中可见部分的颜色，或者单独为各边设置颜色 |
border的样式类型
div{
border: solid 2px #154FB5;
}
padding 属性定义元素边框与元素内容之间的空白区域
CSS内边距属性
| 属性 | 描述 |
|---|---|
| padding | 简写属性，作用在一个声明中，设置元素的所有内边距 |
| padding-top | 设置元素上边距 |
| padding-right | 设置元素右边距 |
| padding-bottom | 设置元素下边距 |
| padding-left | 设置元素左边距 |
一般通过padding四边内边距一起设置
| 值 | 描述 |
|---|---|
| auto | 浏览器计算内边距。 |
| length | 规定以具体单位计的内边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的内边距。 |
| inherit | 规定应该从父元素继承内边距。 |
1、margin(外边距)属性：定义元素周围的空间
2、margin属性接受任何长度单位、百分数值甚至负值
css有三种基本的定位机制：普通流、浮动、绝对定位
除非专门指定，否则所有框都在普通流中定位，也就是说，普通刘中的元素的位置由元素在HTML中的位置决定
块级框从上到下一个接一个地排列，乱搞之间的垂直距离由框的垂直外边距计算出来
通常使用position 属性,我们可以选择不同的定位方式
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，因此，移动元素会导致它覆盖其他框。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
#box_relative {
position: relative; //相对定位模式
left: 30px;
top: 20px;
}
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
因为绝对定位的框与文档流无关，所以它可以覆盖页面上的其他元素，可以通过设置z-index属性来控制这些框的堆放次序
注意: 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块(也就body)。
<html>
<head>
<style type="text/css">
img{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="/i/eg_smile.gif" />
<p>由于图像的 z-index 是 -1，因此它在文本的后面出现。</p>
</body>
</html>
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
| 可能的值 | 描述 |
|---|---|
| left | 元素向左浮动。 |
| right | 元素向右浮动。 |
| none | 默认值。元素不浮动，并会显示在其在文本中出现的位置 |
| inherit | 规定应该从父元素继承 float 属性的值。 |
标签：水平居中 模型 top 访问 commons 显示 就会 mil 比较
原文地址：https://www.cnblogs.com/jiangmingbai/p/12969811.html
