只有块级标签才可以设置长长宽。
行内标签的样式仅仅取决于内部文本值，所以不能设置长宽。
设置方式：{color:颜色数据}
颜色数据设定方式：
## 3. CSS字体属性
body {font-family: "Microsoft Yahei", "微软雅黑","Arial", sans-serif}p {font-size: 14px;}默认为normal，bold为粗体，lighter为细体。
p{font-weight: lighter;}text-align用来定义文本的水平对齐方式。
text-align:left 左边对齐 默认值
text-align:right 右对齐
text-align:center 居中对齐
text-align:justify 两端对齐,最后一行不参与对齐text-decoration 用来给文字添加特殊效果。
text-decoration:none 啥也没有，默认格式
text-decoration:underline 定义文本下有一条线。
text-decoration:overline 定义文本上有一条线。
text-decoration:line-through 定义穿过文本中间的一条线a标签默认自带一条下划线，常用text-decoration: none将a标签的下划线删除
text-indent 用来将文本首行缩进，后面接像素值。
将段落的第一行缩进 32像素：
text-indent: 32px;背景属性支持简写
background:#336699 url('1.png') no-repeat left top;background-color:颜色值
background-color: red; 设置背景色为红色background-image: url(‘图片地址’);
background-repeat 用来设置背景图片是否可以重复平铺
background-repeat:repeat 背景图片平铺排满整个网页(默认)
background-repeat: repeat-x 背景图片只在水平方向上平铺
background-repeat: repeat-y 背景图片只在垂直方向上平铺
background-repeat: no-repeat 背景图片不平铺background-position 用来设置图片位置
background-position: center center; 图片从中间开始显示，向外扩展（center，left，top）
background-position: 10px 50px; 左、上离边框的距离如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
可以通过background-attachment属性来防止图片滚动，它的默认值为scroll，即默认滚动。
background-attachment:fixed 即可防止图片滚动了CSS框模型定义了元素边框的范围：margin(外边框),border(边框),padding(内边框)这三种边框以及Content(元素本身)。
每一种边框都含有三种属性：width(宽度)、style(样式)、color(颜色)。
style有none(无边框),dotted(点状虚线边框),dashed(矩形虚线边框),solid(实线边框)四种。
边框可以统一设置，也可以分开来设置，单独设置某一边的边框。
border: solid 10px red;
border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;用border-radius可以将边框倒圆角，属性值为倒圆角的半径。
div {
border: 1px solid black;
background-color: red;
height: 200px;
width: 200px;
border-radius: 50%; 设置半径为方形边框的一半，可以得到一个圆
}.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
等价于：
.margin-test {margin: 5px 10px 15px 20px;} 上右下左
.mycenter {margin: 0 auto;} 一般margin居中
margin: 15px; /*只写一个参数 上下左右全是*/
margin: 10px 20px; /*第一个控制的上下 第二个是左右*/
margin: 10px 20px 30px; /*第一个控制的上 第二个是左右 第三个是下*/
.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
.padding-test {padding: 5px 10px 15px 20px;}上右下左
display属性用来控制HTML元素的显示效果。
| 值 | 意义 |
|---|---|
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
有三种：
浮动的元素，是脱离正常文档流的(原来的位置会让出来)。可以使用clear来清除浮动带来的影响。
.clearfix:after {
content: '';
clear: both; /*左右两边都不能有浮动的元素*/
display: block;
}哪个父标签塌陷了,就给谁加clearfix这个类属性值.
有时候元素框的范围很小，元素的内容又很多，这时候元素的数据就会溢出元素框。这个时候可以使用overflow来解决这个问题。
| 值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
所有的标签默认都是静态的，无法改变位置。此时可以用position属性来改变标签的位置。
默认定位 position: static;
必须将静态的状态修改成定位之后
相对定位(了解) position: relative
相对于标签原来的位置 移动
绝对定位(小米的购物车) position: absolute
相对于已经定位过(只要不是static都可以 relative)的父标签 再做定位(******)
固定定位(回到顶部) position: fixed
相对于浏览器窗口 固定在某个位置不动
z-index: 数字; 用来控制层面的高度，越高越显示在前面
opacity: 数字（0~1）
原文：https://www.cnblogs.com/bowendown/p/11862885.html