背景半透明、margin塌陷的解决办法、内联元素、盒模型、溢出情况

背景半透明
rgba:里面的内容不会透明
opacity:里面的内容会透明 0-1之间
描边
块描边和图片描边
主动换行br
空格:&nbsp
超出部分显示效果
input其他标签
table标签
补充

margin塌陷的解决办法
**(1)为父盒子设置border,为外层添加border后父子盒子就不是真正意义上的贴合 (可以设置成透明:border:1px solid transparent)。(2)为父盒子添加overflow:hidden;
3)为父盒子设定padding值;(4)为父盒子添加position:fixed(5)为父盒子添加 display:table;(6)利用伪元素给子元素的前面添加一个空元素

内联元素
内联元素的margin-top和margin-bottom是不生效的。padding-top和padding-bottom也是无效的

盒模型
CSS css盒子模型 又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。如图:
背景半透明、margin塌陷的解决办法、内联元素、盒模型、溢出情况
box-sizing属性是用户界面属性里的一种,之所以介绍它,是因为这个属性跟盒子模型有关,而且在css reset中有可能会用到它。
box-sizing : content-box|border-box|inherit;
(1) content-box ,默认值,可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容。
  即总宽度=margin+border+padding+width
(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容
    即总宽度=margin+width
很多CSS框架,都会对盒子模型的计算方法进行简化。
(3) inherit , 规定应从父元素继承 box-sizing 属性的值

溢出情况
overflow:hidden 超出部分隐藏