day03-css入门

1、块元素，内联元素

h1-h6,div,p,li // 块元素，独立占一行，默认和父元素一样宽
a, span, em, i, b, strong // 内联元素，不支持宽高，margin不支持上下,padding上下支持的不好
font-size:0px; //内联元素如果代码换行，会造成间隙。解决方案：父元素font-size:0px,子元素重新设font-size。或者使元素浮动

2、display元素转换

display: inline-block; // 转换为内联元素，不独立占一行，但是支持宽高，margin，padding
display:block; // 转换为块元素
display:inline; // 转换为内联元素
display:none; // 隐藏元素

3、有序列表，无序列表，定义列表

ol>li // <ol><li>有序列表，列表前有数字，ol有start的属性，可以指定开始的数字
ul>li // <ul><li>无序列表，列表前有小圆点
dl>dt+dd // 定义列表，dt是标题，dd是内容，一个标题可以有多个内容
list-style:none; // 可以去除默认样式；小圆点，数字

4、元素居中

text-align: center; // 如果子元素是内联元素，父元素可以用text-align使子元素在父元素中居中
margin: 0 auto; // 元素是块元素，用margin使自己在父元素中居中

5、float浮动

float:left; //浮动，left right 浮动会把元素转为内联块，没有间隙。开发中，一行整体浮动，两侧左右分开。
clear: both; // 浮动但是不靠其他元素。left, right, both; 不靠左边元素，不靠右边元素，不靠两边元素

6、文字绕图

img元素浮动后，div元素会和img元素重叠，但是文字部分不会和img元素重叠，形成文字绕图。

7、margin外边距的合并

margin: 10px 10px; //普通的两个元素间上下的margin是会重叠的，左右margin是不会重叠的。
float: left; // 浮动之后可以去除这种特性，margin不会重叠

8、position定位

position: relative; // 相对定位，相对于自己原来的定位,不脱离文档流
position: absolute; // 绝对定位，相对于父级，脱离文档流。变成内联块，父级需要设置position:relative;，如果父亲没有定位属性，继续向上一层父级查找，如果一直没有，就相对于浏览器。
position: fixed; // 固定定位，相对于浏览器，配合left:50%, margin-left:-200px;可以在定位时做到左右居中。脱离文档流，变成内联块，不会随滚动条滑动
left:-50px; // left, top, right, bottom，都可以写，但是注意不要冲突