css深入学习点点

css深入学习

• 背景

  background	简写属性，作用是将背景属性设置在一个声明中。
  background-attachment]	背景图像是否固定或者随着页面的其余部分滚动。
  background-color	设置元素的背景颜色。
  background-image	把图像设置为背景。
  background-position	设置背景图像的起始位置。
  background-repeat	设置背景图像是否及如何重复

• 链接

  • a:link - 正常，未访问过的链接

  • a:visited - 用户已访问过的链接

  • a:hover - 当用户鼠标放在链接上时

  • a:active - 链接被点击的那一刻

• 盒子模型

  CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

  盒模型允许我们在其它元素和周围元素边框之间的空间放置元素

  • 

    就像这个图一样

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。

  • Border(边框) - 围绕在内边距和内容外的边框。

    • border-style

    • 值	描述
      none	定义无边框。
      hidden	与 “none” 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
      dotted	定义点状边框。在大多数浏览器中呈现为实线。
      dashed	定义虚线。在大多数浏览器中呈现为实线。
      solid	定义实线。
      double	定义双线。双线的宽度等于 border-width 的值。
      groove	定义 3D 凹槽边框。其效果取决于 border-color 的值。
      ridge	定义 3D 垄状边框。其效果取决于 border-color 的值。
      inset	定义 3D inset 边框。其效果取决于 border-color 的值。
      outset	定义 3D outset 边框。其效果取决于 border-color 的值。
      inherit	规定应该从父元素继承边框样式。

  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。

  • Content(内容) - 盒子的内容，显示文本和图像。

  • 总元素的宽度=margin+border+padding+content

• 轮廓（outline）

  

  • 主要有outline、outline-color、outline-style、outline-width四个属性

• margin

  

  • 主要只有设置宽度没有其他的属性

• padding

  • 与margin相似只有宽度属性

• display与visibility

  • 隐藏元素：把display属性设置为"none"，或把visibility属性设置为"hidden"

• position

  • static

    • 默认情况，遵循文档流对象

  • relative

    • 相对定位元素的定位是相对其正常位置，但是正常的位置还是会被占有

  • fixed

    • 元素的位置相对于浏览器窗口是固定位置。

      即使窗口是滚动的它也不会移动（固定死的位置）

  • absolute

    • 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:

    • absolute 定位使元素的位置与文档流无关，因此不占据空间。

    • absolute 定位的元素和其他元素重叠。

  • sticky

    • 与fixed相似但是页面不滚动改变，没有滚动类似relative滚动类似fixed

    • 元素的定位与文档流无关，所以它们可以覆盖页面上的其它元素

• overflow

  • 控制内容溢出元素框时在对应的元素区间内添加滚动条

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

• float

  • 使元素向左或向右移动，其周围的元素也会重新排列。

    Float（浮动），往往是用于图像

    元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

    一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

    浮动元素之后的元素将围绕它。

    浮动元素之前的元素将不会受到影响。

    如果图像是右浮动，下面的文本流将环绕在它左边：

  • 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

    clear 属性指定元素两侧不能出现浮动元素。

  clear 属性指定元素两侧不能出现浮动元素。