css页面布局相关

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

样式

  • 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