首先了解css的块级元素及行内元素
-
块级元素：block-level，可以包含块级和行内元素，其数据占据整行空间，并可进行宽高及内外边距的设置
常见的块级元素有：div，h1，h2，h3，h4，h5，h6，p，hr，form，ul，li，dl，dd，dt，ol，tr，td，th，table，pre等 -
行内元素：inline-level，只包含文本和行内元素，数据只占据自身宽度空间，不可对其进行宽高设置，且其上下margin与padding的设置无效（可以撑开但本身高度未变，所以有可能会与其他元素的数据发生重叠）
常见的行内元素有：em，strong，span，a，br，img，botton，label，select，textarea，input，code，script等
边框及边距
- 边框
border-width:
border-color:
border-style: 常用的有solid/dashed/dotted
border:2px blue dashed
border-bottom:none 若不想要下边框
border-radius: 设置圆角，可通过该属性绘圆
-
边距
- padding：代表内边距，距离content的宽度，有四个值（为上下右左的顺序），可合写也可分写，值可为数值，也可为百分比（相对于父容器）
- border：上面已经介绍过，这里不再重复
- margin：代表外边距，代表内边距，距离content的宽度，有四个值，可合写也可分写，值可为数值，也可为百分比（相对于父容器）。还可为负值，但是它存在外边距合并问题。
display属性
-
外部值
外部值即指这些值只会直接影响一个元素的外部表现，而不会影响其子元素的呈现
- display：block；
设置元素为块状元素，对于行内元素由于无法设置宽高，可以将其设置为行内元素，再设置其宽高，或者设置inline-height定义其行高 - display：inline；
一般浏览器若未设置display值都是将其默认为inline样式 - display：flow；
目前使用不多 - display：flow-root；
它可以撑起被float掉的块级元素（子元素覆盖在该块级元素上）的高度 - display：flex
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 Flex 布局，行内元素也可以用flex布局，display：inline-display；。采用flex布局的元素其子元素也成为flex容器成员
转自阮一峰博客
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
转自阮一峰博客
容器属性
flex-direction:row/row-reverse/column/column-reverse （该属性决定主轴的方向，即项目排列的方向）
flex-wrap:nowrap/wrap/wrap-reverse换行，第一行在下方 （默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。）
justify-content：flex-start/flex-end/center/space-between/space-around （该属性定义了项目在主轴上的对齐方式）
align-items：flex-start/flex-end/center/baseline/stretch默认值 （该属性定义项目在交叉轴上如何对齐）
align-content：flex-start/flex-end/center/space-between/space-around/stretch （该属性定义了多根轴线的对齐方式，若项目只有一根轴线，该属性不起作用）
项目属性
order：<integer>；（该属性定义项目的排列顺序，数值越小排列越靠前，默认为0）
flex-grow：<number>; （该属性定义项目的放大比例，默认为0）
flex-shrink：<number>; （该属性定义项目的缩小比例，默认为1，即如果空间不足，该项目将缩小）
flex-basis：<length>； （该属性定义在分配多余空间之前，项目占据的主轴空间，浏览器根据该属性，计算是否有多余空间，默认值为auto，即项目的本来大小）
flex：none/<"flex-grow"><"flex-shrink"><"flex-basis">； （该属性是flex-grow，flex-shrink，flex-basis三个属性的简写，默认值为0 1 auto）该属性推荐优先使用
align-self属性允许当个项目有与其他项目不一样的对齐方式，可覆盖align-items属性值，默认为auto
- display：none；
none 是 CSS 1 就提出来的属性，将元素设置为none的时候既不会占据空间，也无法显示，相当于该元素不存在。 - display：inline-block；
inline-block为 CSS 2.1 新增的属性。 inline-block既具有block的宽高特性又具有inline的同行元素特性。给元素设置该属性后，一般还需用vertical-align属性来对齐元素。使用inline-block的元素间会有缝隙问题，因为两个元素之前有回车或换行或空格等操作会产生空白字符。解决方法是：
- 可以去掉回车换行操作
- 可以将元素放在一个父元素中，设置父元素字体大小为0，然后在元素内再设置其应有的字体大小
图片来源于码迷网
注意：
display属性不可继承，所有元素都可以用display属性（继承：子元素也得到同样的设定）
。。。更多内容后面再做补充
font属性
- font-size 字体大小（一般浏览器为12-16px）
- font-family 字体类型 （黑体，宋体等）
- font-weight 文字粗度 （标准状况下为regular或者bold）
- line-height 行高 （可用百分比，倍数或固定尺寸）
注意：以上属性均可继承
font还有另外的写法
font：14px/1.5 字体；（分别对应字体大小，行高和字体）
font-family的写法：在CSS设置字体时，直接写中文或应为名称一般浏览器均可识别，当是若未外国人使用，他们的系统或浏览器中没有该字体文件，则识别不出，另外直接写中文的情况下编码（GB2312，UTF-8）不匹配时会产生乱码，保险的方式还是将字体名称用Unicode来表示。常见的如宋体，对应的为\5B8B\4F53，黑体为\9ED1\4F53等，也可以在js中打开escape（'宋体'）来查询其Unicode码
<chrome的默认字体大小为16px，最小为12px，若要更小，可用一下语句>
chrome-adjust{
font-size:12px
-webkit-transform:scale（0.75）；
}
文本样式
text-align: 文本对齐方式，left，right，center，justify两端对齐
text-indent: 文本第一行的缩进距离
text-decoration: none，underline，line-trough，overline
color: 文字颜色
text-transform: 改变文字大小写，none，uppercase，lowercase，capitalize
word-spacing: 改变字（单词）间的间距
letter-spacing: 改变字母或字符间的间距
颜色
- 单词：red，blue...
- 十六进制：#000000（黑色），#ffffff（白色），#eee，#666，#f00（红色）
- rgb：rgb（255,255,255）白色，rgb（0,255,0）绿色
- rgba：rgba（0,0,0,0.5）最后一个数字代表透明度，数值越小透明度越大
单行文本溢出的解决办法
white-space:nowrap; 不折行
overflow:hidden; 超出部分内容隐藏在框下，不在框外显示
text-overflow:ellipsis; 使超出的文本以“...”显示
单位
- px：固定单位
- 百分比：（宽高，文字大小，line-height，position）
- em：相对单位，相对于当前元素字体的大小，若当前元素字体未设置则相对于浏览器设定的字体的大小
- rem：root em，相对单位，相对于<html>字体的大小
- vw、vh：相对单位，1vw为屏幕宽度的1%，兼容性很差，基本不用
a 链接设置颜色
浏览器对a链接有默认的样式的设计，浏览器的权重大于继承的权重，会覆盖继承的样式，可专门对a标签的样式进行设置
列表去掉圆点
ul{
list-style：none
}
或li{
list-style：none；
}
隐藏或透明
- opacity：0；透明度为0，元素及其子元素都透明
- visibility：hidden；和opacity为0类似
- display：none；元素消失，不占用位置
- background-color：rgba（0,0,0,0.2）只有背景色透明，子元素不会
CSS中可继承与不可继承的属性
- 不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。
- 所有元素可继承：visibility和cursor。
- 内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
- 终端块状元素可继承：text-indent和text-align。
- 列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
- 表格元素可继承：border-collapse。
box-shadow属性
box-shadow:2px 2px 2px 2px #888;
- 参数1：水平方向偏移量，即相对于border后的偏移量，当数为正时阴影在右侧
- 参数2：垂直方向偏移量，当数为正时阴影在下方
- 参数3：blur模糊半径，值为 0 意味着该阴影是固态而锋利的，完全没有模糊效果。blur 值越大，阴影则更朦胧 / 模糊。负值是不合法的，会被修正成 0。
- 参数4：扩展半径，其中扩展半径是从边界开始计算的
- 参数5：颜色
box-shadow 属性在一个元素上能接受多个阴影值。添加至 box-shadow 的阴影以逗号分离，分别为内部和外部阴影
居中设置
- 对inline元素，设置其父元素text-align：center；
- 对block元素，设置宽度，然后margin：0 auto；
- 对inline-block元素，与inine元素的设置方式一致
参考文献：
[1] http://www.mamicode.com/info-detail-2170701.html
[2] https://segmentfault.com/a/1190000006047872
[3] http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[4] http://blog.163.com/yhwwen@126/blog/static/170468853201326421822/
网友评论