Web基础之CSS（二）

CSS 单位
尺寸：

blob.png
[注意：em是根据font-size的值来确定；若font-size的单位也设置为em,则以该元素的父级元素的font-size为标准计算。]

颜色:

blob.png

尺寸属性：

• width/height:宽高
• overflow:当内容溢出元素框时如何处理，可取的值有：visible/hidden/scroll(总是显示滚动条)/auto(溢出时才会显示滚动条)*

边框样式：

• 简写方式：border:width style color
• 单边定义：border-left/right/top/bottom:width style color
• 单边宽度：border-left/right/top/bottom-style
• 单边样式：border-left/right/top/bottom-style+ 单边颜色：border-left/right/top/bottom如：

Input.btn{height:30px;color:black; background:#f0f0f0;}

—> 语法：margin/padding:30px

—> 单边设置： margin/padding-left/right/top/bottom:30px
—> 简写方式：

margin/padding:10px 20px； 上下 左右
margin/padding:10px 20px 30px 40px；顺时针，上右下左
++ 特殊写法：margin:0px auto; 对margin可取值为auto，使用某个框居中显示；屏幕宽度除以元素宽度，除以2，左右平分。

背景样式

• 背景色：background-color:颜色；
• 背景图像：background-image:url(a.jpg);//注意url()里没有双引号
• 背景平铺：background-repeat:repeat(默认)/no-repeat/repeat-x/repeat-y;
• 背景固定：background-attachment:scroll/fixed;
  //scroll:背景和内容一起滚动；
  // fixed:背景固定，类似于水印的效果；
• 背景定位：background-position:left top;//可用px % center等值；
• 组合设置(顺序为)：background:background-color || background-repeat || background-attachment || background-position;
  [注意：若使用组合属性定义其单个参数，则其他参数的默认值将会覆盖各自对应的单个属性。如：background:white;等价于 background:widht none repeat scroll 0% 0%；若之前设置了background-image属性，则其会被none覆盖。]

文本/字体样式

• 指定字体：
  —> 语法： font-family:name; //如：font-family:ncursive/fantasy/monospace/serif/sans-serif;
  —> 取值说明：name:字体名。按优先顺序排列。以逗号隔开。若字体名包含空格，则应使用引号括起第二种声明方式所列出的字体序列名称。若使用fantasy序列，将提供默认字体序列。
• 字体颜色：color:color;
  [注意：用颜色名指定color不被一些浏览器所接受。但使用RGB能被所有浏览器识别并正确显示]
• 字体大小：font-size:xx-small/x-small/smalll/medium/large/x-large/xx-large/larger/smaller/length;
  —> 取值说明:
  取值说明：
  ①xx-small：绝对字体尺寸。根据对象字体进行调整。最小
  ②x-small：绝对字体尺寸。根据对象字体进行调整。较小
  ③small：绝对字体尺寸。根据对象字体进行调整。小
  ④medium：默认值。绝对字体尺寸。根据对象字体进行调整。正常
  ⑤large：绝对字体尺寸。根据对象字体进行调整。大
  ⑥x-large：绝对字体尺寸。根据对象字体进行调整。较大
  ⑦xx-large：绝对字体尺寸。根据对象字体进行调整。最大
  ⑧larger：相对字体尺寸。相对于父对像中字体尺寸进行相对增大。使用成比例的 em 单位计算
  ⑨smaller：相对字体尺寸。相对于父对像中字体尺寸进行相对减小。使用成比例的 em 单位计算
  ⑩length：百分数/由浮点数字和单位标识符组成的长度值，不可为负值。 其百分比取值是基于父对象中字体的尺寸。
  [注意：字体一般为10-12磅]
• 字体加粗：font-weight:normal/bold/bolder/lighter/100/200/…/900
  —> 取值说明：
  ①normal：默认值，正常的字体，相当于 400 。声明此值将取消之前任何设置
  ②bold ：粗体。相当于 700 。也相当于 b 对象的作用
  ③bolder：比 normal 粗
  ④lighter：比 normal 细
  ⑤100：字体至少像 200 那样细
  ⑥200：字体至少像 100 那样粗，像 300 那样细
  ⑦300：字体至少像 200 那样粗，像 400 那样细
  ⑧400：相当于 normal
  ⑨500：字体至少像 400 那样粗，像 600 那样细
  ⑩600：字体至少像 500 那样粗，像 700 那样细
  ⑪700：相当于 bold
  ⑫800：字体至少像 700 那样粗，像 900 那样细
  ⑬900：字体至少像 800 那样粗
• 文本排列: text-align:left/right/center/justify;
  —> 取值说明：
  ①left：默认值。左对齐 ②right：右对齐
  ③center：居中对齐 ④justify：两端对齐
  [注意：此属性作用于所有块级元素，在一个div对象里所有块级元素会继承此属性值；只对块级元素生效，对行内元素无效！]
• 文本行高：line-height:normal/length;
  —> 取值说明：
  ①normal：默认值。默认行高
  ②length：百分比数字/由浮点数字和单位标识符组成的长度值，允许为负值。 其百分比取值是基于字体的高度尺寸。
  [注意：设置为和包含元素一样高，可实现垂直居中效果]
• 文字修饰：text-decoration:none || underline || blink || overline || line-through;
  —> 取值说明：
  ①none：默认值。无装饰 ②blink：闪烁
  ③underline：下划线 ④line-through：贯穿线
  ⑤overline：上划线
  [注意：假如none值在属性声明的最后，则所有先前的其他取值都会被清除；指定块对象的此属性将影响块内所有子对象]
• 文本缩进：text-indent:length; //常用于段落
  —> 取值说明：length:%/数字和单位标识符组成的长度，允许为负值，默认为0；
• 文字间距、字母间距：letter-spacing:20px;
  font-variant：

表格样式

• 垂直对齐: vertical-align:top/middle(默认)/bottom;单元格中垂直方向上的对齐
• 边框合并：border-collapse:separate(默认)/collapse;//对table有效，对td无效
• 边框边距：border-spacing:value;
  [注意：对table设置边框，仅仅是显示表格的外边框(不是单元格的)；margin:0px auto;//块级元素可用matgin居中；text-align:right;对行内无效。]

列表样式
特定于列表元素。

• 列表项前的标识符号图像
  —> 语法：list-style-image:none/url(url);
  [注意:若此属性为none或指定url地址的图片不能被显示时，list-style-type将会生效]
• 列表项前使用的预设标识符号
  —> 语法：list-style-type:disc/circle/square/decimal/none;
  —> 取值说明：
  ①disc：默认值，实心圆 ②circle：空心圆 ③square：实心方块
  ④decimal：阿拉伯数字 ⑤none：不使用项目符号

• 布局
  流动模型(Flow) 浮动模型(Float) 层模型(Layer)
  —>流动模型：①默认的网页布局模式。块状元素都会在所处的包含元素内自上而下垂直延伸分布，宽度都为100%。即以行的方式占据位置。②内联元素都会在所处的包含元素内从左到右水平显示分布。
  —>浮动模型：
  —>层模型：使用一组定位(position):
  1> 绝对定位(position:absolute)
  2> 相对定位(position:relative):通过left/right/top/bottom来确定元素在float在正常文档流中的偏移位置。先按static(float)方式生成一个元素并浮动起来，然后相对于以前的位置移动。偏移前的位置保留不动；
  3> 固定定位(position:fixed):与absolute类似，但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。即不随滚动条滚动而改变位置。(如固定位置的广告条)
  absolute与relative的组合使用：即box2相对于box1的位置而定。但参照定位的元素必须是相对定位元素的前辈元素。如：

<div id="box1"><!--参照定位的元素—>
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素—>
</div>

参照元素(#box1)必须加入position:relative;

定位元素(#box2)必须加入position:abolute;

• 浮动定位：
  —> 概念：
  —> 将元素排除要普通流之外；
  —> 将浮动元素放置在包含框的左边或右边；
  —> 浮动元素依旧位于包含框内；
  —> 浮动框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框为止；
  [注意：流模式：从上到下，从左到右]

• float属性：float:none/left/right;
  —> 取值说明：
  ①none：默认值。对象不飘浮 ②left：文本流向对象的右边
  ③right：文本流向对象的左边
  [注意：多元素浮动，建议高度都一样；多元素飘在同一行，要确认总长度不超过父元素的长度；某个元素浮动，可能会影响后续的元素，后续的元素会自动向上补齐。]

• clear属性：clear:none/left/right/both;//用于清除某侧浮动元素所=-来的影响；
  —> 取值说明：
  ①none：默认值。允许两边都可以有浮动对象 ②left：不允许左边有浮动对象
  ③right：不允许右边有浮动对象 ④both：不允许有浮动对象

• display属性：设置元素的显示方式
  1）HTML元素分为行内元素和块级元素
  —> 行内元素：位于一行中，高和宽自适应；
  —> 块级元素：独占一行，自定义高和宽；
  如：a的大小自适应，它是行内元素inline。
  div就可以用width/height属性，它是块级元素block。

2）语法： display:inline/block/none;

—> 取值说明：
①block：将元素转为块级元素。②inline：将元素转为行级元素。③none：不显示。
[注意：常会和js结合实现一些动态效果；li是属于块级元素；
无论什么元素类型，只要设置了position:absolute或float:left/right语句，元素的display显示类型都会自动变为display:inline-block(块状元素)方式显示，并都可设置元素的width和height了，且默认width不占满父元素。]

• 其他定位
  1）普通定位：页面中的块级元素框从上到下一个接一个地排列，每一个块级元素都会出现在一个新行中，内联元素将在一种中从左向右排列水平布置。
  2）浮动定位：
  3）相对/绝对定位。

• position属性：更改定位的模式为相对定位、绝对定位、固定定位
  —> 语法：position:static/absolute/fixed/relative;
  —> 取值说明：
  ①static：默认值。无特殊定位，元素遵循HTML定位规则（即默认的流布局模式）
  ②absolute：将元素从文档流中拖出，使用left、right、top、bottom等属性相对于最近的有position属性的祖先元素，如果没有，那么它的位置相对最初的包含块，比如按<body>进行绝对定位。而其层叠通过z-index属性定义
  ③relative：元素不可层叠，但将依据 left、right、top、bottom等属性在正常文档流中偏移位置
  ④fixed：元素定位遵从绝对定位，但是要遵守一些规范。低版本的IE中，这个属性无效

• 偏移属性：实现元素框的偏移
  —> 语法：top/botton/left/right:auto/length;
  —> 取值说明：
  ①auto：默认值，无特殊定位，根据HTML定位规则在文档流中分配。
  ②length：由浮点数字和单位标识符组成的长度值/百分数。必须定义position属性值为absolute或者relative此取值方可生效

• 堆叠属性：z-index:auto/number;
  —>取值说明：
  ①auto：默认值，为0，遵从其父元素的定位。
  ②number：无单位的整数值，可为负数。
  [注意：较大的number值的元素会覆盖在较小的number值的元素之上。若有两个绝对定位元素的此属性具有同样的number值，那么将依据它们在html文档中声明顺序层叠；此属性仅作用于position属性为relative或absolute的元素；默认布局使用堆叠无效。]

• 相对定位：relative
  1)元素保持其未定位前的形状；
  2）原本所占的空间仍保留；
  3）元素框会相对它原来的位置偏移某个距离；
  4）在相对定位元素之后的文本或元素占有他们自己的空间而不会覆盖被定位元素的自然空间；
  5）相对定位会保持元素在正常的HTML流中，但是它们的位置可以根据它的前一个元素进行偏移；
  6）在相对定位元素在可视区域外，滚动条不会出现；

• 绝对定位：absolute

1. 绝对定位会将元素拖离出正常的HTML流，而不考虑它周围内容的布局；
2. 要激活元素的绝对定位，必须指定left、right、top、bottom属性中的至少一个；
3. 绝对定位元素之后的文本或元素在被定位元素被拖离正常HTML流之前会占有它的自然空间；
4. 绝对定位元素在可视区域之外会导航滚动条出现。

内容水平居中：
—>行内元素: text-align:center;
—>块状元素：
—>定宽块状：margin-left:auto;margin-right:auto;
—>不定宽块状：
①加入table标签，利用table标签的长度自适应性，即不定义其长度也不默认父元素body长度，因此可看做一个定宽元素，再利用定宽块状的margin方法来使其居中； (使用：在需要居中的块外加一个<table>标签，包括<tr><td>；再为这个<table>设置margin:0 auto;)
②设置display:inline方法，即显示为行内元素；再使用text-align:center;（相对于①的方法优点是不用增加无主义标签，缺点是将块状元素变为inline,少了一些功能，如设定长度等。）
③给父元素设置position:relativa和left:50%，再给子元素设置position:relative和left:-50%;即达到居中的目的。

内容垂直居中：
—>父元素高度确定：
—> 单行文本：设置父元素的height和line-height调试一致来实现；(line-height与font-size的计算值之差，在CSS中称为行间距，分为两半，分别加到一个文本的顶部和底部)
[弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。]
—> 多行文本(图片)：
①使用table(包括tbody,tr,td)标签，同时设置vertical-align:middle;
②设置块级元素display为table-cell,激活vertical-align:middle;[但IE7并不支持table-cell属性，兼容性差。]

博客地址：Web基础之CSS（二）