front-blog

CSS-DuYi笔记

分类

  1. 内部样式表

    html的 style元素标签中

    样式200行内，可使用此方式

  2. 内联样式表，元素样式 [不推荐]

    直接书写在该元素的 style属性中

    该方式常被 js 替代

  3. 外部样式表[推荐]

    样式书写到独立的css文件中

    1). 外部样式可以解决多页面样式 重复的问题 2). 有利于浏览器缓存，从而提高页面响应速度 3). 有利于代码分离(html与css)，更容易阅读和维护

常见样式声明(属性)

选择器 {
  声明（属性）
}

font-size 字体大小

  1. px: 像素 绝对单位。简解为文字高度所占多少个像素
  2. em: 相对单位。相对于父元素的字体大小，1em = 100%

    每个元素都有字体大小，若为直接声明，则直接使用父元素的字体大小。若无父元素（html）则使用（浏览器）基准字号

font-weight 字体粗细

font-family 字体类型

font-style 字体样式

text-decoration 文本修饰（文本加线）

  1. none
  2. under-line

    a元素

  3. line-through

    del元素 表示错误的内容 s元素 表示过期的内容

text-indent 文本缩进

text-align 水平对齐方式

line-height 行高

letter-spacing 文字间隙

  1. px
  2. em

opacity 透明度

cursor 鼠标指针

  div{
    /* auto 使用浏览器类型  写法类似font-family*/
    cursor: url("鼠标图片地址(兼容性须使用.ico 或 .cur图片格式)"), auto;
  }

盒子隐藏

  1. display: none 不生成盒子
  2. visibility: hidden 生成盒子， 视觉上移除盒子

背景图

速写 background：url('图片地址') repeat position/size attachment color

选择器

通配符选择器

[href=“www.baidu.com”]{ color:#ff4400; text-decoration: none; }

#### 伪类选择器
* 选中某些元素的某种状态
1. :link: 超链接未访问的状态
2. :visited: 超链接访问后的状态
3. :hover: 鼠标悬停状态
4. :active: 激活状态，鼠标按下状态
> love hate 爱恨法则: 改写 a元素超链接的四种伪类必须依据此法则顺序，否则会出错 （权重问题）
5. first-child 选择**第一个子**元素
> first-of-type: 选中子元素中**第一个指定类型**的元素
```css
  /* 选中a元素并且位于父元素下的第一个子元素（长子） */
  a:first-child{ /* 侧重第一个子元素 */
    color; red
  }
  /* 选中第一个子元素类型为 a的元素 */
  a:first-of-type{ /* 侧重类型 */
    color: red
  }
  1. last-child 选择最后一个子元素

    last-of-type: 选中子元素中最后一个指定类型的元素

      /* 选中a元素并且位于父元素下的最后一个子元素（长子） */
  a:last-child{ /* 侧重最后一个子元素 */
 color; red
  }
  /* 选中最后一个子元素类型为 a的元素 */
  a:last-of-type{ /* 侧重 类型 */
 color: red
  }
  2. nth-child 选中指定的第几个子元素

    nth-of-type 选中指定的子元素中第几个某类型的元素

    偶数关键字 even 等同于 2n 基数关键字 odd: 等同于 2n + 1

    /* 选中a元素且位于父元素中的第五的子元素上 */
a:nth-child(5){ /* 侧重子元素位置 */
  color: red
}
/* 选中子元素中奇数位的a类型元素 */
a:nth-of-type(odd){ /* 侧重类型  */
  color: red
}

伪元素选择器

  1. ::before
  2. ::after
  3. ::first-letter 选中元素第一个字符
  4. ::first-line 选中元素中第一行的文字
  5. ::selection 选中被用户框选的文字 
      p::first-letter{
 color: red
  }
  p::first-line{
 color: green
  }
  p::selection{
 color: white;
 background: black
  }

    元素选择器

    class选择器

    ID选择器

选择器组合

  1. 并且 => 空 
      div.red{
 color: red;
  }
  2. 后代元素 => 空格 
      div .red{
 color: red;
  }
  3. 子（一代）元素 => > 
      div>.red{
 color: red;
  }
  4. 相邻兄弟元素 => + 
      div+.red{
 color: red;
  }
  5. 后面所有的兄弟元素 => ~ 
      div~.red{
 color: red;
  }

    选择器并列

    • ”, “逗号 语法糖, 渲染时依旧拆分独立 
      html,
body{
 padding: 0;
 margin: 0
}

层叠

比较源次序

继承

属性值的计算过程

CSS特殊取值

  1. inherit： 手动（强制）继承，将父元素的值取出应用到该元素
  2. initial： 初始值，将该属性设置为默认值

常规流（文档流）

1，水平方向

  1. 垂直方向
    • 块盒 height 默认值为 auto, 则会取决于/适应内部内容(内部子元素)的高度
    • 块盒 margin 默认值为 0 ， 若 margin: auto ,则垂直方向表示为0 => margin: 0 auto;
  2. %百分比取值
    • 块盒的 width, padding(四个方向), margin（四个方向）可设置百分比，均相对于包含块的宽度（须确定包含块（父元素）的宽度，否则无参考）
    • 包含块（父元素 height; auto）的高度取决于(子元素)块盒的高度，则（子元素）块盒的height高度设置百分比无效，因块盒无绝对包含块height参考。反之百分比相对于父元素高度
  3. 相邻 margin（上下外边距）合并
    • 两个(父子元素间 或 兄弟元素间)常规流块盒margin外边距相邻，则会取最大margin值

浮动 float

定位 position

【css扩展知识】

@规则

  1. @import 【CSS导入资源】 
      @import '导入css文件地址或路径'
  2. @charset “utf-8” 【CSS编码规则】

    当css文件中出现中文字符时，告知浏览器css字符编码。并且放到css根文件首行

  3. @font-face 【定义字体】 
      @font-face {
 font-family: ’自定义字体名称';
 src: url('字体资源路径')
  }
    • 字体图标 就有所有字体CSS属性 (www.iconfont.cn)

块级格式化上下文 BFC( Block Formatting Context )

line-height 行高

html 和 body 背景

z-index 堆叠上下文

居中总结

水平居中

  1. inline行盒 和 inline-block行块盒

    text-align: center； // 设置 行盒和行块盒的包含块（父元素）

    .parent{
	text-align: center;
}

  2. 常规流 block块盒

    margin: 0 auto;// 自身定宽(因width的auto高于margin的auto)， 左右margin设置为 auto

    .blcok-box{
    width: 100px;
    marign: 0 auto
}

  3. absolute 绝对定位元素 和 fixed固定定位

自身定宽，设置绝对定位左右坐标为0 （left: 0; right: 0）,左右margin设置为 auto(marign: 0 auto)

.parent{
    position: relative;
}
.child{
	width: 100px
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

垂直居中

  1. 单行文本的垂直居中

设置单行文本所在元素的行高， 为整个区域的高度

.black, 
.inline-block{
	height: 100px;
    linke-height: 100px;
}

  1. inline-block行块盒和 black块盒内多行文本垂直居中

    方法1：设置盒子上下填充padding， 达到类似效果【不推荐】

    方法2（绝对定位）：定高， 设置上下的坐标为0（top: 0, bottom: 0）, 将上下margin设置为 auto