css页面布局相关
样式
- border: 5px solid red;
- margin: top left-right bottom;
- display:inline-block;
- cursor: point;
- 设置边框阴影box-shadow: inset 0 0 2em blue;
- 图文并排
1 | .dom { |
- 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 | <parent> |
1 | .parent { |
对齐
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