part3 ：页面布局

CSS连接

链接样式

• a:link - 正常，未访问过的链接
• a:visited - 用户已访问过的链接
• a:hover - 当用户鼠标放在链接上时
• a:active - 链接被点击的那一刻

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

文本修饰

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

背景颜色

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

CSS列表

• 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
• 有序列表 ol - 列表项的标记有数字或字母

ul.a {list-style-type: circle;}    圈
ul.b {list-style-type: square;}    方框
 
ol.c {list-style-type: upper-roman;} 
ol.d {list-style-type: lower-alpha;}

ul
{
    list-style-image: url('sqpurple.gif');某张图
}

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

CSS表格

1. 表格边框

table, th, td
{
    border: 1px solid black;
}

2. 折叠边框 border-collapse:collapse;
3. 表格宽高 width:100%; height:50px;
4. 文字对齐 text-align:right;
5. 表格填充 padding:15px;
6. 表格颜色 background-color:green; color:white;

盒子模型

• Margin(外边距) - 清除边框外的区域，外边距是透明的。
• Border(边框) - 围绕在内边距和内容外的边框。
• Padding(内边距) - 清除内容周围的区域，内边距是透明的。
• Content(内容) - 盒子的内容，显示文本和图像。

CSS边框

• 边框宽度： border-style:solid; border-width:5px;
• 边框颜色：border-style:solid; border-color:red;（hex rgb name）

边框名称

border-style属性可以有1-4个值：

• border-style:dotted solid double dashed;
  • 上边框是 dotted
  • 右边框是 solid
  • 底边框是 double
  • 左边框是 dashed
• border-style:dotted solid double;
  • 上边框是 dotted
  • 左、右边框是 solid
  • 底边框是 double
• border-style:dotted solid;
  • 上、底边框是 dotted
  • 右、左边框是 solid
• border-style:dotted;
  • 四面边框是 dotted

属性	描述
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-left-color	设置元素的左边框的颜色。
border-left-style	设置元素的左边框的样式。
border-left-width	设置元素的左边框的宽度。
border-right	简写属性，用于把右边框的所有属性设置到一个声明中。
border-right-color	设置元素的右边框的颜色。
border-right-style	设置元素的右边框的样式。
border-right-width	设置元素的右边框的宽度。
border-top	简写属性，用于把上边框的所有属性设置到一个声明中。
border-top-color	设置元素的上边框的颜色。
border-top-style	设置元素的上边框的样式。
border-top-width	设置元素的上边框的宽度。

CSS轮廓（outline）

属性	说明	值
outline	在一个声明中设置所有的轮廓属性	*outline-color outline-style outline-width *inherit
outline-color	设置轮廓的颜色	*color-name hex-number rgb-number *invert inherit
outline-style	设置轮廓的样式	none dotted dashed solid double groove ridge inset outset inherit
outline-width	设置轮廓的宽度	thin medium thick *length *inherit

CSS margin、paddding(外边距、内聚)

• margin/padding:25px 50px 75px 100px;
  • 上边距为25px
  • 右边距为50px
  • 下边距为75px
  • 左边距为100px
• margin/padding:25px 50px 75px;
  • 上边距为25px
  • 左右边距为50px
  • 下边距为75px
• margin/padding:25px 50px;
  • 上下边距为25px
  • 左右边距为50px
• margin/padding:25px;
  • 所有的4个边距都是25px

属性	描述
margin/padding:	简写属性。在一个声明中设置所有外边距属性。
margin/padding:-bottom	设置元素的下外边距。
margin/padding:-left	设置元素的左外边距。
margin/padding:-right	设置元素的右外边距。
margin/padding:-top	设置元素的上外边距。

CSS display visibility

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间

CSS position（定位）

• static

  • 默认值 没有定位 正常的文档流对象
  • 不受 top bottom left right 影响

• fixed

  • 位置相对于浏览器床就是固定的位置
  • 窗口滚动但是他不动
  • 位置与文档流无关，不占据空间
  • 与其他元素重叠

• absolute

  • 绝对定位是相对与父元素，没有则相对于html
  • 与文档流无关，不占据空间
  • 和其他元素重叠

• sticky定位

  sticky 英文字面意思是粘，粘贴，所以可以把它称之为粘性定位。

  position: sticky; 基于用户的滚动位置来定位。

  粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

  它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

  元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

  这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

  注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。

<div class="sticky">我是粘性定位!</div>

• 重叠元素

CSS布局-overflow

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

float

CSS 布局 – 水平 & 垂直对齐 | 菜鸟教程 (runoob.com)