css页面布局相关

发表于 更新于 阅读次数： 本文字数： 1.3k 阅读时长 ≈ 1 分钟

样式

  • border: 5px solid red;

  • margin: top left-right bottom;

  • display：inline-block;

  • cursor: point;

  • 设置边框阴影box-shadow: inset 0 0 2em blue;

  • 图文并排

    .dom {
    background:url(‘/images.jpg’) no-repeat;
    padding-left:
    width:
    }

  • inline元素设置高度： {display: inline-block;}再设置 width height

  • a {color: #000;} * 未被访问的链接 *

  • a:visited {color: #3ac1bd;} * 已被访问的链接 *

  • a:hover {color: #3ac1bd;} * 鼠标指针移动到链接上 *

  • a:active {color: #3ac1bd;}

  • a{ text-decoration: none; } 去掉链接的下划线

排版

  • position: relative - absolute;

  • 填满整个元素：父元素设置高度，子元素height: 100%

  • css度量运算calc(100% - 36px)

  • hover显示新元素

    .parent { position: relative; .child1, .child2 { height: 100px; width: 100px; } .child2 { display: none; background: rgba(230, 230, 230, 0.9); } } .parent:hover .child2 { display: block; position: absolute; top: 0; cursor: pointer; }

对齐

  • margin: auto;

  • 水平对齐

    父元素中设置text-align: left | right | center | justify | inherit;

  • 垂直对齐：

    子元素为inline，table-cell或者inline-block时vertical-align: top | text-top | middle | bottom | text-bottom;table-cell与inline-block中middle显示不同

    block元素中的文字line-height设置为该元素height

Flex

  • 子元素的float、clear和vertical-align属性将失效。
  • flex-direction: row | row-reverse | column | column-reverse;
  • flex-flow: flex-direction | flex-wrap;
  • justify-content: flex-start | flex-end | center 水平对齐方式
  • align-items: flex-start | flex-end | center 垂直对齐方式
  • 多根轴线align-content: flex-start | flex-end | center | space-between | space-around | stretch;
  • 保留空白符white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;

Css单位

  • vh：屏幕比例。px:像素。rem根元素的字体大小

Css选择器

  • .class #id element
  • 直接子元素：>
  • 选择器之间,表示and