font-size: 设置字体的大小
medium：默认值
"可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
百分比指定文字大小。
用长度值指定文字大小，不允许负值。
font-family：字体名称
使用逗号隔开多种字体(优先级从前向后，如果系统中没有找到当前字体，则往后面寻找)
font：简写属性
语法：font：字体大小/行高 字体;(字体要在最后)
字体属性.p1 {
font-weight: bold; /*文字粗细：粗体*/
font-style: italic; /*文字风格：倾斜(默认正常)*/
font-size:20px; /*文字大小：大小值*/
font-family: "宋体"; /*文字字体：宋体*/
/*一次性设置缩写格式：字体属性简写*/
font: bolder italic 20px "宋体";
}
哈哈哈哈哈哈
哈哈哈哈哈2
哈哈哈哈哈3
4. 文本属性
white-space: 设置元素中空白的处理方式
normal：默认处理方式。
pre：保留空格，当文字超出边界时不换行
nowrap：不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
pre-wrap：保留空格，当文字碰到边界时换行
pre-line：不保留空格，保留文字的换行，当文字碰到边界时换行
direction: 规定文本的方向
ltr：默认，文本方向从左到右。
rtl：文本方向从右到左。
text-align:文本的水平对齐方式
left：默认，向左对齐
center：居中显示
right：向右对齐
line-height:文本行高
normal：默认
vertical-align: 文本所在行高的垂直对齐方式
baseline：默认
sub：垂直对齐文本的下标，和标签一样的效果
super：垂直对齐文本的上标，和标签一样的效果
top：对象的顶端与所在容器的顶端对齐
text-top：对象的顶端与所在行文字顶端对齐
middle：元素对象基于基线垂直对齐
bottom：对象的底端与所在行的文字底部对齐
text-bottom：对象的底端与所在行文字的底端对齐
text-indent:文本首行缩进
letter-spacing: 添加字母之间的空白
word-spacing: 添加每个单词之间的空白
text-transform: 属性控制文本的大小写
capitalize：文本中的每个单词以大写字母开头。
uppercase：定义仅有大写字母。
lowercase：定义仅有小写字母。
text-overflow: 文本溢出样式
clip：修剪文本。
ellipsis：显示省略符号...来代表被修剪的文本。
string：使用给定的字符串来代表被修剪的文本。
text-decoration:文本的装饰
none：默认。
underline：下划线。
overline：上划线。
line-through：中线。
text-shadow：文本阴影
text-shadow: 5px 5px 5px #888;
第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
word-wrap：自动换行
word-wrap: break-word;
div套文本div {
width: 200px; /*设置div宽度*/
height: 200px; /*设置div高度*/
background-color: green; /*设置div背景颜色*/
text-align: center; /*文本居中显示*/
direction: rtl; /*文本方向从右到左*/
text-decoration: line-through; /*内容中间加中线*/
text-indent: 10px; /*首行缩进10px*/
line-height: 300px; /*设置文本行高*/
text-shadow:2px 2px 3px #00FF99; /*设置文本阴影*/
}
哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈
5. 背景属性
background-color 背景颜色
background-image 设置图像为背景
background-image:linear-gradient(green,blue,yellow,red,black); 颜色渐变效果
background-position 设置背景图像的位置坐标
background-position: center top; 图片中上显示
background-position: center center; 图片置中，x轴center，y轴center
1px -195px 截取图片某部分，分别代表坐标x，y轴
background-repeat 设置背景图像不重复平铺
no-repeat：设置图像不重复，常用
round：自动缩放直到适应并填充满整个容器
space：以相同的间距平铺且填充满整个容器
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
scroll：默认属性
fixed：图片随着页面滚轮移动，容器视觉消失图片消失
background 简写
background: url("o_ns.png") no-repeat 0 -196px;
background: url("o_ns.png") no-repeat center bottom 15px;
background: url("o_ns.png") no-repeat left 30px bottom 15px;
背景属性演示
6. 列表属性
list-style-type: 列表项标志的类型
none：去除标志
decimal-leading-zero：有序列表01
square;：实心方块
circle;：空心圆
upper-alph： 大写字母
disc;：实心圆
list-style-position：列表项标志的位置
inside：靠里面显示
outside：靠外面显示
list-style-image：将图象设置为列表项标志
list-style-image: url("img/1.jpg")
需在 list-style-position:inside ;配合下使用
list-style：缩写
list-style: square inside; 方块靠里显示
列表属性演示
7. 边框属性
border-style：边框样式
solid：实线
double：双线
dotted：点状线条
dashed：虚线
border-color：边框颜色
border-width：边框宽度
border-radius：圆角
1个参数：四个角都应用
2个参数：第一个参数应用于 左上、右下；第二个参数应用于 左下、右上
3个参数：第一个参数应用于 左上；第二个参数应用于 左下、右上；第三个参数应用于右下
4个参数：左上、右上、右下、左下(顺时针)
border: 简写
border:2px yellow solid;
box-shadow：边框阴影
第一个参数是左右位置
第二个参数是上下位置
第三个参数是虚化效果
第四个参数是颜色
box-shadow: 10px 10px 5px #888;
边框div{
width: 800px;
height: 500px;
border-style: solid; 边框为实线
border-style: dotted; /*设置边框为点状*/
border-style: dashed; /*设置边框为虚线*/
border-style: double; /*设置边框为双线*/
border-color: #00FF99; /*设置边框颜色*/
border-width: thin; /*边框更细*/
border-width: thick; /*加粗*/
border-width: 5px; /*自定义粗细*/
border-radius: 50px; /*边框弧度(四角都应用)*/
border: 5px #00FF99 solid;/*简写：宽度，颜色，实线*/
box-shadow: 10px 50px 20px #888; /*边框阴影*/;
}
头像实现边框：
实现代码
CSS显示模式：块级别、行内、行内块级
在HTML中HTML将所有标签分为两类，分别是容器级和文本级
在CSS中CSS也将所有标签分为两类，分别是容器级是块级元素和行内元素
#1、HTML中容器级与文本级
容器级标签：可以嵌套其他的所有标签
div、h、ul>li、ol>li、dl>dt+dd
文本级标签：只能嵌套文字、图片、超链接
span、p、buis、strong、em、ins、del
#2、CSS中块级与行内
块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级
div、h、ul、ol、dl、li、dt、dd 还有标签p
行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内
span、buis、strong、em、ins、del
行内块级 img
#3、块级元素与行内元素的区别
1、块级元素block
特点：独占一行
可以设置宽高
若没有设置宽度，那么默认和父元素一样宽
(比如下例中的div的父元素是body，默认div的宽就是body的宽)
若没有设置宽高，那么就按照设置的来显示
2、行内元素inline
不会独占一行
不可以设置宽高
盒子宽高默认和内容一样
3、行内块级元素inline-block
不会独占一行
可以设置宽高
转换
display：可以控制HTML元素的显示效果
none：不显示。 HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用
block：显示为块级元素。
inline：显示为内联元素。
inline-block：行内块级元素(会保持块元素的高宽)。
list-item：显示为列表元素。
visibility
visible：元素可见
hidden：元素不可见(可以隐藏某个元素，但仍需占用与未隐藏之前一样的空间。虽然该元素被隐藏了，但仍然会影响布局)
collapse：当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。
display属性
“无意义”的HTML元素div和span
HTML只是赋予内容的手段，大部分HTML标签都有其意义(例如，标签p创建段落，h1标签创建标题等等)的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用
它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的，用在一小块的内联HTML中。而div(division)元素是块级的(简单地说，它等同于其前后有断行)，用于组合一大块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。
div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制
盒子模型
盒子模型，英文即box model。无论是div、span、还是a都是盒子。
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
盒子属性
一个盒子中主要的属性：width、height、padding、border、margin、content。如下：
width和height：内容的宽度、高度(不是盒子的宽度、高度)。
padding：内边距(用于控制内容与边框之间的距离)
border：边框( 围绕在内边距和内容外的边框，边框有三个要素：像素(粗细)、线型、颜色)
margin：外边距(用于控制元素与元素之间的距离，从视觉角度达到相互隔开的目的)
content: 内容，盒子的内容，显示文本和图像
盒子模型的示意图：
以上属性又分为上、右、下、左四个方向
问题：页面元素的宽度width、高度height如何计算？
答案：元素的实际占位尺寸 = 元素尺寸 + padding + 边框宽度 比如：元素实际占位高度 = height属性 + 上下padding + 上下边框宽度
盒模型的层次关系
我们通过一个经典的盒模型3D立体结构图来理解，如图：
内边距(padding)
padding属性用于设置内边距。 是指 边框与内容之间的距离。
padding-top:上内边距
padding-right:右内边距
padding-bottom:下内边距
padding-left:左内边距
注意： 后面跟几个数值表示的意思是不一样的。
值的个数
表达意思
1个值
padding：上下左右边距 比如padding: 3px; 表示上下左右都是3像素
2个值
padding: 上下边距 左右边距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3个值
padding：上边距 左右边距 下边距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4个值
padding:上内边距 右内边距 下内边距 左内边距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 顺时针
box-sizing 属性
content-box； 是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box；告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding，内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高
内边距
1904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
