css知识回顾

background:背景

  • background-color:背景颜色 white/#ffffff
  • background-image:背景图片 url(“img/xxx.png”)
  • background-repeat:背景平铺
    • no-repeat 不平铺
    • repeat-x 沿x轴平铺
    • repeat-y 沿y轴平铺
  • background-position:位置 x(px) y(px)
    • x轴对应位置 left center right
    • y轴对应位置 top center bottom
background:red url(" ") px px no-repeat;

border:边框

  • border-width:边框宽度（默认值是3px，数值不能为负数）
  • border-style:边框样式（没有默认值）
    • solid 实线
    • dotted 点状线
    • dashed 虚线
    • double 双线
  • border-color:边框颜色（默认颜色是字体颜色，默认字体颜色是黑色）
  • border-radius:边框圆角

padding:内边距

  • TRBL法则:top right bottom left
  • padding:0px(上) 0px(右) 0px(下) 0px(左)
  • padding:0px(上右下左)
  • padding:0px(上下) 0px(左右)
  • padding:0px(上) 0px(左右) 0px(下)

margin:外边距

  • margin:0px; 上右下左
  • margin:0px 0px; 上下 左右
  • margin:0px 0px 0px; 上 左右 下
  • margin:0px 0px 0px 0px; 上 右 下 左
  • line-height 居中
  • text-decoration:none 取消下划线
  • display:none 不显示
  • list-style-type:none 列表样式类型
  • a:link{} 当前锚点没有访问过的样式，初始样式
  • a:visited{} 访问过后的样式
  • a:hover{} 鼠标放在(悬浮)上面的样式
  • a:active{} 鼠标点击没有松开时的样式

float:浮动

  • left 向左浮动
  • right 向右浮动
  • none 默认值
  • 清除浮动方法:给父级设置固定宽高或overflow:hidden;

position:定位

  • relative:相对自身当前位置上下左右定位，值可以为负数，可以对块、行标签使用，不会改变标签属性
  • absolute:绝对定位，如果没有父级标签设置relative，当前标签元素以body可视区域为起点，如果有父级标签设置relative,则以父级标签位置为起点
  • fixed:固定定位

font:字体

  • font-weight:bold 加粗
  • font-style:字体样式 italic斜体 normal恢复正常
  • font-family:设置字体
  • font-size:字体大小
  • line-height:行高 居中(背景高度)
  • color:颜色
  • 注释方式 /**/

单位

  • px 具体单位 具体到像素
  • 100% 百分比 根据父级
  • em 单位被定义为当前字体大小 根据body 例如：body{font-size:14px}
  • rem root em 基于根元素html进行设置
  • vh和vw 视窗单位 vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px

css引入方式

  • 内联式：优点：优先级高，不会被其他样式覆盖影响。缺点：不利于代码的维护，没有样式的内容分离，影响阅读体验
  • 内部引用：不利于复用，适用于单一页面
  • 外部引用：优点：内容样式分离，利于复用。缺点：增加一次请求

选择器及优先级

  • id选择器 #id
  • 类选择器 .class
  • 通配选择器 *
  • 层级选择器 tag tag
  • 分组选择器 tag,tag
  • 伪类选择器 a的4个伪类
    • link hover active visited
  • 伪元素选择器 ::
  • id>类>标签

BFC

  • FC: Formatting Content 格式化上下文
  • BFC: Block Formatting Content 块级格式化上下文
  • IFC: Inline Formatting Content 行级格式化上下文

BFC的生成条件

  • float值不为none
  • overflow的值不为visible
  • display的值为inline-block、table-cell、table-caption
  • position的值为absolute或fixed

BFC的约束规则

  • 生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
  • 生成BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。