标签:css

以下是与标签 “css” 相关联的文章

flex 布局

浏览器版本支持

  • chrome 21, opera 12.1, firefox 22, safari 6.1, ie 10

指定 flex 布局

  • 块元素 display: flex;
  • 行内元素 display: inline-flex;
  • webkit 内核 display: -webkit-flex display: -webkit-inline-flex
  • 影响设置 flex 而已后, float , clear , vertcal-align 都失效

窗口属性

  • flex-direction row | row-reverse | column | column-reverse
  • flex-wrap nowrap | wrap | wrap-reverse
  • flex-flow <flex-direction> || <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>
  • flex-grow <number> /*default 0*/
  • flex-shrink <number> /*default 0*/
  • flex-basis <number | auto /*default auto*/
  • flex none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
  • align-self auto | flex-start | flex-end | center | baseline | stretch

CSS 学习笔记

css 样式

背景

字体

文本

链接

列表

表格

其它属性

CSS 选择器

元素选择器

类选择器

ID 选择器

组合选择器

后代选择器

子选择器

兄弟选择器

伪类和伪元素

CSS 框模型

边框

outline

内边距

外边距

外边距合并

CSS 定位

相对定位

绝对定位

浮动

CSS 布局

display 属性

block

  • block 元素会独占一行,多个 block 元素会各自新起一行。
  • 默认情况下,block 元素宽度自动填满其父元素宽度。块级元素即使设置了宽度, 仍然是独占一行。
  • block 元素可以设置 width,height 属性。
  • block 元素可以设置 margin 和 padding 属性。

inline

  • inline 元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行,其宽度随元素的内容而变化。
  • inline 元素设置 width,height 属性无效。
  • inline 元素的 margin 和 padding 属性,水平方向的 padding-left, padding-right, margin-left, margin-right 都产生边距效果。但竖直方向的 padding-top, padding-bottom, margin-top, margin-bottom 不会产生边距效果。

inline-block

  • 简单来说就是将对象呈现为 inline 对象,但是对象的内容作为 block 对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个 link(a 元素)inline-block 属性值,使其既具有 block 的宽度高度特性又具有 inline 的同行特性。

vertial-align: middle

作用于不同元素

  • 作用于 table-cell,可以垂直居中显示
  • 作用于 inline, 类似于<img>标签的 align 属性,控制 baseline
  • 作用于其它元素,不起作用

方法

  • 使用定位
<style type="text/css">
  #myoutercontainer { position:relative }
  #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
  <div id="myinnercontainer">
    <p>Hey look! I'm vertically centered!</p>
    <p>How sweet is this?!</p>
  </div>
</div>
  • 单行文字,固定高度
<style type="text/css">
  #myoutercontainer2 { line-height:4em }
</style>
<p id="myoutercontainer2">
  Hey, this is vertically centered. Yay!
</p>

参考书籍

  • W3C School (CSS)
  • CSS 权威指南(第 3 版)
  • CSS 揭秘
  • 精通 CSS:高级 Web 标准解决方案(第 2 版)