css3 一.浮动的特性 浮动之后,所有标签都可以设置宽高 Title Alex 二.让浮动的盒子居中 1.标准文档流下 (1)让内容居中 Title (2)让盒子居中 Title 2.浮动的情况下 (1)让内容居中(与标准文档流时做法相同) Title (2)让盒子居中(给浮动的盒子加一个父盒子,设置宽度跟浮动的盒子宽度相同,并且overflow:hidden; 水平居中用margin: 0 auto;垂直方向居中要调整最外侧盒子的padding) Title (3)css有三种方式让盒子脱标 浮动 绝对定位 相对定位 三.文本属性和字体属性 文本属性 文本对齐(text-align) text-align属性规定元素中的文本的水平对齐方式 属性值:center,left,right,justify(两端对齐) 设置水平对齐方式的前提是要让文本在块或行内快中,justifity只对英文起作用 颜色属性(color) color的属性值可以有以下三种情况 纯英文颜色(red) 三原色(rgb(0-255,0-255,0-255)) 透明度: rgba(x,x,x,x)前三个元素是三原色的三个元素,最后一个元素调整透明度 十六进制(#0-f 0-f 0-f 0-f 0-f 0-f)) 如果1 2 位3 4位5 6位数字相同,可以简写,如#112233==>#123 文本首行缩进(text-indent) text-indent的属性值可以以px为单位,也可以以em为单位(更好) 文本属性(text-decoration) 属性值:none,underline,overline,line-through,inherit(继承父元素的text-decoration属性的值) 行高(line-heigh) 就是一行文本所占的高度 单行文本垂直居中： line-height = height 多行文本居中： 第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px 第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px; 字体属性 字体大小(font-size) 字体属性的属性值除了可以是多少px之外,还可以是inherit,表示继承父元素的字体大小值 字体粗细(font-weight) 属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细) | 100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值） 字体系列(font-family) 属性值是各种字体,如 "Microsoft Yahei", "微软雅黑", "Arial", sans-serif 如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。如果都不支持则显示宋体。 四.background background-color属性表示背景颜色 background-image属性表示设置背景图片(默认水平方向和竖直方向都是平铺) background-image: url("链接地址"); background-repeat属性表示设置该元素的平铺方式 repeat 默认。背景图像将在垂直方向和水平方向重复。 repeat-x 背景图像将在水平方向重复。 repeat-y 背景图像将在垂直方向重复。 no-repeat 背景图像将仅显示一次。 inherit 规定应该从父元素继承 background-repeat 属性的设置。 background-position属性设置 top left top center top right center left center center center right bottom left bottom center bottom right 如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0 0； 这两个值必须挨在一起。 background-position-x(左右移动)单位是px background-position-y(上下移动) 如果是正的表示调整在页面中的位置 如果是负的,表示精灵图技术 background-attachment: fixed; 固定背景图 五.定位 默认：position:static; 静态定位 ralative: 如果仅仅设置标准文档流的盒子为相对定位，那么跟普通的盒子没有任何区别 不脱标 参考点： 相对于原来的位置 形影分离 作用： 1.层级提高，做压盖（不建议） Title absolute 1.脱标：不占位置(脱标之后都可以设置宽高) 2.层级提高 (z-index:数字)调整层级 Title 子绝父相是为了什么 参考点： 单个盒子 如果以top描述，是以页面的左上角为参考点（跟浏览器的左上角区分） 如果以bottom描述，是以浏览器的左上角为参考点 父子盒子之间 如果父辈盒子设置相对定位。子盒子设置绝对定位，以父辈盒子的0,0为参考点