CSS相关

::after ::before

rem

多个class属性的优先级

http://blog.csdn.net/u011320646/article/details/18152857

float

flex

  • display 制定为flex布局
display: -webkit-flex; /* Safari */
display: flex;
display: inline-flex;
  • flex-direction属性决定主轴的方向

  • flex-wrap属性定义,如果一条轴线排不下,如何换行

  • flex-flow

  • justify-content属性定义了项目在主轴上(横轴)的对齐方式

  • align-items在交叉轴(纵轴)上如何对齐

  • align-content

  • 项目的属性

    • flex:https://jingyan.baidu.com/article/c1465413e161700bfcfc4cf4.html
    • flex-basis

display

overflow:overflow 属性规定当内容溢出元素框时发生的事情。

position

  • fixed:元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动.
  • sticky:粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。
  • relative
  • absolute
  • static

max-height, 最大高度,如果设置了height则不起作用,height代表固定高度,

top margin-top 等的区别。

1、top、bottom、left、right是绝对定位,必须设置position为absolute。 margin一系列设置是相对定位。注意:如果用top等,而position未设置为absolute,那设置是不起作用的。
2、top这些在绝对定位的前提下,这个绝对定位,是相对body 或者 position:relative的父级元素的绝对定位。margin的相对定位,是指相对相邻元素的定位。

pading,会扩大控件的大小,但是如果是按钮,扩大的区域不在响应范围内


.hover-button {
    padding: 15px 32px;
}

后代选择器

后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的。后代选择器用一个或者多个空格。

h1 em {color:red;}
//important 会显示红色

This is a important heading

//important 不会变色

This is a important paragraph.

类选择器

  • 多类选择器
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
//同时具备font-weight font-style background三个样式

This paragraph is a very important warning.

相邻兄弟选择器

h1 + p {margin-top:50px;}

子元素选择器

如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器

h1 > strong {color:red;}
//两个very 均会变成红色

This is very very important.

//very不会变色

This is really very important.

你可能感兴趣的:(CSS相关)