CSS学习笔记1

FENG
86 阅读2分钟

一、基本情况

  • CSS首次提出者：赖先生
  • CSS极度灵活：可以样式层叠；选择器层叠；文件层叠
  • 目前使用最广泛的CSS版本：CSS2.1
  • 开始分模块的CSS版本：CSS3
  • 如何查询哪些浏览器支持哪些特性：通过caniuse.com

二、语法

CSS语法1

属性名:属性值;
/*注释*/
}

注意：所有符号都是英文，区分大小写；没有//注释，

CSS语法2 at语法

@charset "UTF-8";
@import url(2.css);
media (min-width: 100px) and (max-width: 200px){
语法一
}

注意：@charset必须放在第一行；前两个at语法必须以 ；结尾

border调试法

border: 1px solid red; 如果border没出现，说明选择器或语法错了

三、文档流

  1. 流动方向
  • inline 元素从左到右，到达最右边才会换行(span)
  • block 元素从上到下，每一个都另起一行(div)
  • inline-block 也是从左到右
  1. 宽度
  • inline 宽度为内部 inline 元素的和，不能用 width 指定
  • block 默认自动计算宽度，可用 width 指定(不一定是100%，一般不要写宽度100%）
  • inline-block 结合前两者特点，可用 width
  1. 高度
  • inline 高度由line-height间接确定，跟 height 无关
  • block 高度由内部文档流元素决定，可以设 height
  • inline-block 跟 block 类似，可以设置 height

overflow 溢出

  • 当内容大于容器,等内容的宽度或高度大于容器的，会溢出
  • 可用 overflow 来设置是否显示滚动条
  • auto 是灵活设置;scroll 是永远显示;hidden 是直接隐藏溢出部分;visible 是直接显示溢出部分
  1. 脱离文档流 哪些元素脱离文档流 ;
  • float
  • position: absolute / fixed

四、盒模型

  1. 两种盒模型 分别是：
  • content-box 内容盒 - 内容就是盒子的边界
  • border-box 边框盒 - 边框才是盒子的边界

公式：

  • content-box width = 内容宽度

  • border-box width = 内容宽度 + padding + border

  • 哪个好用：border-box 好用

  1. margin 合并 哪些情况会合并：

  • 父子 margin 合并

  • 兄弟 margin 合并（只有上下次合并，左右不会合并） 如何阻止合并：

  • 父子合并用 padding / border

  • 父子合并用 overflow: hidden

  • 父子合并用 display: flex

  • 兄弟合并可以用 inline-block 消除

avatar
文章
阅读
粉丝