css页面布局相关

样式

  • border: 5px solid red;
  • margin: top left-right bottom;
  • display:inline-block;
  • cursor: point;
  • 设置边框阴影box-shadow: inset 0 0 2em blue;
  • 图文并排
1
2
3
4
5
.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显示新元素
1
2
3
4
<parent>
<child1/>
<child2/>
</parent>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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