CSS学习笔记

前言

这篇博客是我的CSS学习笔记

1. float布局

知识点：
1. 设置浮动：float：none/left/right
2. 设置float布局将脱离文档流，不会占据页面的空间
3. 浮动元素的外边缘不会超过父元素的内边缘
3. 浮动元素不会相互重叠
4. 浮动元素只能左右浮动
5. 浮动元素的display属性将完全失效并可以设置宽高，不会独占一行
6. 清除浮动：clear:both/left/right（用于抵消其他浮动元素对本元素产生的影响）或父元素定义overflow:hidden

<!--div知识点-->
1. div元素独占一行
2. div元素若不设置宽高，则会根据子元素的高度来自适应高度
3. 若子元素都为float时，父元素需要设置overflow:hidden或float:left/right来感知子元素的宽高

<!--span知识点-->
1. span元素为行内元素，不具备宽高，不独占一行
2. span元素设置float属性后，将变成块级元素，可以设置宽高

2. position定位

2.1 static

知识点：
1. position默认属性为static，意为没有定位
2. static将忽略top/bottom/left/right/z-index的声明

2.2 relative

知识点：
1. 设置relative属性后元素将保持占据页面的位置
2. 通过设置top/bottom/left/right来进行relative元素位置的偏移

2.3 absolute

知识点：
1. 设置absolute属性后元素将不占据页面的位置，但还保持元素原来的位置
2. 通过设置top/bottom/left/right来进行absolute元素位置的偏移
3. 元素的参考点为最近的position为非static的父级元素，若无，则默认参考点为body的（0px 0px）点

2.4 fixed

知识点：
设置了fixed后元素将会固定在页面的某个地方，位置不会随着滚动条的变化而变化，可以通过top/bottom/left/right来设置fixed元素的位置

2.5 z-index

知识点：
1. z-index只支持定位元素
2. 若z-index设置为同一层级，则后定义的元素将会覆盖在先前定义元素的上方

3. display属性

知识点：
1. 每个元素都有一个默认的display属性，用于确定元素的类型。如div元素为block（块元素），span元素为inline（行内元素）
2. display常见属性值：
	none：隐藏对象（隐藏元素，不占据空间）	//使用visibility:visible/hidden和opacity:0隐藏，空间还占据
	inline：内联/行内元素（没有宽高属性，不会独占一行）
	block：块元素（具有宽高属性，并独占一行）
	inline-block：内联块元素（具有宽高属性，不会独占一行）
	table-cell：表格单元格
	flex：弹性盒

4. 盒子模型

4.1 简介

知识点：
基本属性：margin（外边距）、padding（内边距）、border（边框）

4.2 margin

知识点：
1. margin参数取值：四个（上、右、下、左）、三个（上、左右、下）、两个（上下、左右）、一个（上下左右）
2. 相邻兄弟块级元素margin外边距合并只有上下边距有效，左右两边不会合并，浮动元素不会外边距合并
3. 父子元素的包含式外边距合并，比如子元素设置了margin-top为10px，效果是父子元素相对位置不变，整体加了一个10px的margin-top。解决方法为在父元素加上border

4.3 border

知识点：
1. border:border-width border-style border-color;
2. border-style:dotted（点状）/solid/double/dashed（虚线）/none
3. border-radius:左上 右上 右下 左下

4.4 box-sizing

知识点：
1. 标准盒content-box：padding和border的宽高要算入盒子模型的宽高之内
2. 怪异盒border-box：padding和border的宽高不算入盒子模型的宽高之内

5. calc()

知识点：
1. 元素脱离了文档流，将不能使用margin:0px auto来进行居中定位，此时可以使用calc()来进行css位置的计算
2. 用法：calc(50% - 120px);	//50%为元素自身的px的一半，'-'两边的空格不能省略