CSS 基础

css样式的类型

  • 内联样式(行内样式)
  • 内部样式(嵌套样式)
  • 外联样式

文本相关属性

  • font-size: 设置文本大小;
  • font-style: 文本样式;
    • italic: 斜体;
    • normal: 正常;
  • font-family: 字体格式;
  • font-weight: 文本粗细;
  • font: 字体属性连写:

      // 格式 :font: font-style font-weight font-size font-family;
    
      //其中`font-size `和`font-family` 必选并且必须处于属性最后;
    
      e.g:
      font: 20px "微软雅黑";
    
    
  • text-indent: 2em; 首行缩进2个字大小;
  • line-height: 23px; 文字行间距;
  • line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。
  • text-align: center;
    • left: 文本排列到左边;
    • right: 文本排列到右边;
    • center: 文本排列到中间;
    • justify: 两端对齐文本效果;

    justify 对齐.png

    • inherit: 继承父元素;

颜色相关

  • 没有font-color 属性
  • 1.0 具体颜色来赋值
  • 2.0 16进制表示法;
  • 3.0 rgb表示法;
  • 4.0 rgba表示法;

选择器

  • 标签选择器

    根据指定标签名给对应标签的元素设置样式

  • class(类)选择器

    根据类名来给对应标签设置样式

  • id选择器

    根据id 给对应标签设置样式

  • 通配符选择器

    给当前所有的标签设置属性; 使用时界面标签不能过多,性能就会比较差.

          *{
              属性:值;  
          }
    
  • 后代选择器

    选择一个标签中的所有后代标签里满足条件的标签

          .father .son p{
              属性:值;  
          }
    
  • 子元素选择器

    当前标签中的直接子元素, 与后代选择器区别在于仅选择直接后代

          .father > p{
              属性:值;  
          }
    
  • 交集选择器

    从两个集合中选中它们相同的部分

    
    
  • 并集选择器

    将两种类型的元素全部选择出来

          .father , p{
              属性:值;  
          }
    
  • 伪类选择器

    • :hover
    • :visited
    • :link
    • :activie

css的三大特性

继承
  • 子元素继承父元素的属性;
  • 凡是以line-, text-, font-开头的属性都是可以继承的;
层叠
  • 如果多个选择器为同一个元素设置了不同的属性它们会同时作用于这个元素。
  • 如果多个选择器为同一个元素调协了相同的属性它们会发生层叠。
  • 层叠的最终结果跟优先级有关系。
优先级
  • 优先级从大到小: !important >id> class> 通配符> 继承> 浏览器默认;
  • !important 属性不能继承;
  • 选择器混合使用的优先级比较:

    先数id,如果id相等再数类如果id不相等id多的选择器权重高,权重越高,优先级越高。如果id选择器数量相同,再数类选择器,最后数标签。

背景(background)属性

  • background-color: 背景颜色;
  • background-image: 背景图片;
  • background-repeat: 是否平铺;
  • 平铺属性取值: no-repeat, repeat-x, repeat-y;
  • background-position: 背景图片位置:
  • background 连写: background-color background-image background-repeat background-position;

元素的显示方式

块级元素
  • 单独占一行,可以给元素设置宽高;
  • dispaly: block;
  • div, p, h1, ul, li, ol, dl
行内元素
  • 可以多个标签放在同一行, 宽高不起作用;
  • display: inline;
  • span, b, u, i,s ins, del, strong, em;
行内块级元素
  • 多个标签放在同一行, 可以设置宽高;
  • display: inline-block;
  • img
label 标签

<label> 标签为 input 元素定义标注(标记)。label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<form>
<!--点击 Male 文本时 id="male" 的 radio将被选中-->
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" />
  <br />
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" />
</form>

边框属性

  • border: 设置4边属性: [width] [style] [color]
  • border-width: 宽度可用取值: thin, medium, thick, 100px, inherit
  • border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit;
  • broder-color: color_name, hex_number, rgb_number, transparent, inherit;
  • border-bottom: 设置底边;
  • border-radius: 设置边框圆角
  • border-top-left-radius:2em;
  • border-top-right-radius:2em;
  • border-bottom-right-radius:2em;
  • border-bottom-left-radius:2em;

外边距

  • margin合并;
  • margin塌陷;
  • 塌陷解决:
    • 给父盒子设置边框;
    • 设置父盒子 overflow:hidden
    • 给子盒子加浮动div
    • 把子盒子的显示方式修改为inline-block;

继承特殊性

  • a标签的颜色不会受父元素影响;
  • h标签的大小不会受父元素影响;
  • 块级元素的宽可以继承, 高不能继承;

盒子的宽高

  • 宽:border-left + padding-left + width + padding-right + border-right
  • 高:border-top + padding-top + height + padding-bottom + border-bottom
  • 在生活中的盒子中应该装多少内容是由盒子的大小来决定的,而在页面上,盒子中能装多少东西是由内容来装(页面上的盒子的大小是可以改变的)。
  • 在盒子的宽高是从父元素继承来时, padding时不会影响.
  • width: 有个默认值为auto

浮动

浮动用于解决一行中显示多个盒子并且控制位置的操作.

文档流
  • 标准流: 浏览器默认解析遵守的排列规则;
浮动的特性
  • 浮动后的元素在排序的时候回以上对齐;
  • 浮动后的元素会覆盖在标准流的上面;
  • 浮动排序规则: 浮动找浮动, 不浮动找不浮动;
  • 浮动以在没有脱离浮动之前的位置进行浮动;
  • 浮动后, 元素的显示方式将改为: inline-block;
  • left/right 只会影响当前浮动元素的排列位置;
  • clear: 清除left/right边浮动对象;
清除浮动
  • 使用额外标签, 再额外标签中使用clear:both;
  • 使用overflow: hidden: 再需要清除浮动的标签中加入overflow:hidden;
  • 使用伪元素

          .clearfix:after {
              content:””;
              height: 0;
              line-height: 0;
              display: block;
            	visibility:hidden;
              clear:both;
          }
          .clearfix {
              zoom: 1;/*用来兼容ie浏览器*/
          }
    
  • 双伪元素:

      .clearfix:after , .clearfix:before {
          content:””;
          display: table;
          clear:both;
      }
      .clearfix {
          zoom: 1;
      }
    
    

定位position

  • 静态定位 static: 标准流定位
  • 绝对定位 absolute: 可以将盒子移动到任意位置, 相对位置为最近有定位父元素.
  • 相对定位 relative: 相对于标准流位置
  • 固定定位 fixed
  • relative 的元素会占标准流的位置;
  • absolute 元素不占标准流;
  • z-index: 仅在定位元素上使用, 用来设置当前盒子所在层次, 值越大越靠前;
  • fixed: 绝对定位元素, 参照物为浏览器窗口;

内容的隐藏方式

  • overflow:hidden 超出部分隐藏
  • display:hidden 不展示
  • visibility: hidden 不显示,单占位置

嵌套关系

  • 行内元素嵌套行内元素;
  • 块元素可以嵌套块元素或者行内元素;
    • p/h标签不恶意嵌套div标签

居中

  • margin: 0 auto: 盒子居中
  • vertical-aline:middle :配合inline-block , 图片和文字居中
  • 子盒子left设置50%;

BFC

BFC(Block formatting context) 块级格式化上下文. 它是一个独立的渲染区域, 只有Block-level box参与, 它规定了内部的Block-level Box如何布局, 并且与这个区域外部毫不想干.

那些元素生成BFC?

  • html根元素;
  • 浮动框: float属性不为none的元素;
  • position 为absolute 或fixed;
  • display为inline-block, table-cell, table-caption, flex, inline-flex 非块框的块容器;
  • overflow 部位visible的块框.
  • 触发IE的 hasLayout特性;

BFC 作用

  • 解决清除浮动问题;
  • 解决margin合并问题;
  • 多栏布局;

一些重要文件

项目中css基本配置

Web开发规范

发现

float 元素对于 display: inline-block 的盒子来说, 影响标准流位置, 对于display:block 的元素不影响;