CSS进阶(一)width & height

禁用默认行为可以使拖动行为更加流畅,如a标签

块级元素不是指拥有display:block声明的元素

块级元素具有的换行特性,它们都可以使用clear来清除浮动带来的效果

display:inline-block实际上是两个容器,外在容器负责布局,内在容器负责大小

width深入

inline-block 浮动元素 绝对定位元素都有智能的包裹性

首选最小宽度

width设置为0时,图片和文字的权重大于布局

(1)东亚文字显示为单个最小文字的宽度

(2)西方文字特定的最小宽度由英文字符单元决定。一般终止于空格,短横线(-),问号及其他非英文字符

(3)图片的最小宽度就是该元素本身的宽度

width设置了具体的宽度后就丧失了流动性

height

 width和height作用在content-box上

margin的背景永远是透明的

ie8box-sizing属性需要带前缀

对于普通文档流中的元素,百分比高度要想起作用,其父级必须有一个可以生效的高度值

css渲染的方式是先渲染父元素,后渲染子元素

元素支持height:100%的方法

(1)设置父级元素的宽度,高度为父元素的content-box的高度

html,body{
  height:100%;
}

(2)设置元素的绝对定位,高度为父元素的padding-box的高度

div{
  position:absolute;
  height:100%;
}

 max-width会覆盖width属性,超越!important的权重

min-width和max-width冲突时,min-width会覆盖max-width

min/max-width/height是为流体而生的

展开收起的动画可以由max-height/width来实现

猜你喜欢

转载自www.cnblogs.com/goOtter/p/9697411.html