基本概念
CSS(层叠样式表)
1.层叠的含义?
- 样式层叠
可以多次对同一选择器进行样式声明 - 选择器层叠
可以用不同选择器对同一个元素进行样式声明 - 文件层叠
可以用多个文件进行层叠
2.语法
- 语法一
选择器{
属性名:属性值;
/**/;
} - 语法二
@charset "UTF-8" //申明字符编码
@import url(2.css); //导入额外的css文件
@media (min-width:100px) and (max-width:200px){
语法一
}
3.CSS查资料相关
- MDN
- CSS ticks
- 张鑫栋
4.文档流
流动方向:
- inline元素从左到右,达到最右边才会换行 e.g span
- block元素从上到下,每一个都另起一行 e.g div
- inline-block元素也是从左到右
内联元素:
- inline宽度为内部inline元素的和,不能用width指定
- inline高度由line-heigth间接确定,跟height无关
块级元素:
- block默认自动计算宽度,可用width指定
- block高度由内部文档流元素确定,可以设height
- block默认自动计算宽度,可用width指定 备注:width默认值是auto,注意永远不要自行设置width:100%;
inline-block:
- inline-block结合前两者特点,可用width 备注:宽度默认和inline一样,但是可以自行设置
高度; - inline-block跟block类似,可以设置height
注意:
1.不存在内联元素和块级元素,可以说目前这个元素是内联的,或者是块级的。因为这些元素都可以通过display:inline 或者display:block 来修改默认样式
2.不要在inline元素里面加上display为block的元素,不然会出问题
overflow溢出:
- 当内容的高度或高度大于容器的。会发生溢出 备注:当内容的高度或者宽度大于你自己设置的高度或者宽度,内容会发生溢出。
- 可以overflow来设置是否显示滚动条,相关值:scroll(永远显示)、auto(灵活设置)、hidden(隐藏溢出内容)、visible(直接显示溢出内容)
脱离文档流:
block的高度可以由内部文档流元素决定,换句话说如果这个块里面所在的元素不在这个容器里面,也就是脱离了文档流,那么该容器在计算高度时,就不会计算脱离了文档流的元素
设置脱离文档流元素的样式:
float:left;
position:absolute/fixed
额外:纠错方式:border调试法(给元素加border)、开发者检查、开发者工具
5.盒模型
- content-box(内容盒):宽度只包含内容-内容就是盒子的边界
- border-box(边框盒):宽度包含了border-框架才是盒子的边界
content-box width=内容宽度 备注:同理高度也是一样
border-box width=内容宽度+padding+border - 边距重叠:只发生在上下边距 左右边距不会发生重叠
- magin合并:前提是里面的值相同,即padding、border。若要改变边距重叠情况,只需要使里面的值不一样就行。
基本单位:
- px-像素
- em-相对于自身font-size的倍数 即font-size*em
- 百分数
- 整数
- 十六进制:e.g #FF6600
rgb(0,0,0)/ RGBA颜色 rgba(0,0,0,1)
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。