CSS进阶

1.行级元素/内联元素    display:inline;

feature：内容决定元素所占位置；不可以通过css改变宽高

如：span  strong  em  a  del

 

2.块级元素  display:block;

feature：独占一行；可以通过css改变宽高

如：div  p  ul   li  ol  form   address

 

3.行级块元素   display:inline-block;

feature：内容决定大小；可以通过css改变宽高

如：img

 

！！凡是带有inline的元素，都有文字属性，例如img多个元素换行编写，显示会有空格，解决方法：写成一行

 

盒模型：

外边距： margin

盒子壁：border

内边距：padding

盒子内容：content+width+height

padding四个值=上/右/下/左   三个值=上/左右/下   两个值=上下/左右   一个值=上下左右

body的默认初始margin=8px

 

层模型：

• position:absolute

  脱离原来位置进行定位，每一个absolute都是一个新的层

  相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位

• position:relative

  保留原来的位置进行定位，每一个relative也是一个新的层

  相对于自己原来的位置进行定位

• position:fixed

  固定定位

浮动模型：

• float:left/right;

• 浮动元素产生了浮动流 

  所有产生了浮动流的元素，块级元素看不到他们

  产生了bfc的元素和文本类属性(带有inline属性的)的元素以及文本都能看到浮动元素

• 使用伪元素清除浮动(伪元素天生是行级元素；能清除浮动的必须是块级元素)

  div::after{content:"";clear:"both";display:"block";}

！！设置了position:absolute;float:left/right;会在内部把元素转换成inline-block;

BFC:block format context（可解决margin塌陷&margin合并问题）

如何触发：

  position:absolute;

  display:inline-block;

  float:left/right;

  overflow:hidden;

 

行级元素只能嵌套行级元素

块级元素可以嵌套任何元素

规定：1、p标签内不能套块级元素

           2、a标签里不能套a标签