奔跑的akuan05:盒模型

图示:

基础概要归纳

  • widthheight 设置了内容框的宽/高
  • padding 家族属性设置内边距的宽度(别忘了普通属性比如 padding-bottom ,一次设置一个边).
  • border 家族属性设置边界的宽度、样式和颜色(许多可用的普通边界属性还有很多)。
  • margin 家族属性设置包围CSS盒子外部区域的宽度,这个属性推开布局中其他的CSS盒子(也有许多可用的普通属性比如 margin-bottom )。
  • 其它一些值得记住的点:

  • 如果盒子的高度被设置为百分比长度,那么盒子高度不会遵循这个设置了的百分比长度,而是总会采用盒子内容的高度,除非给它设置了一个绝对高度(例如,像素或者 em)。这比把页面上每个盒子的高度默认设置为视口高度的 100% 更方便。
  • 边界(border)也会忽略百分比宽度设置。
  • 外边距(margin)有一个特殊的行为,称为 外边距塌陷: 当两个盒子挨在一起时,二者之间的距离为两个挨着的外边距中最大的那个值,而不是二者的和。

padding

一次性写四个属性。也可以分开写:padding-top、padding-right、padding-bottom、padding-left

border

简写属性——  border:1px solid black;

分开写:

border-top, border-right, border-bottom, border-left

其他样式属性:

border-width, border-style, border-color:分别仅设置边界的厚度/风格/颜色,并应用到全部四边边界。

单独设置某一个边的三个不同属性,如 border-top-width, border-top-style, border-top-color,等。 

border-style样式包括:

solid

dotted

dashed

double

inset

outset

ridge

groove

设置边框不可见nonehidden 来明确地移除边框,或者设置边框颜色为 transparent 来让边框不可见,后者不会改变布局。

margin

单个属性分别为 margin-topmargin-rightmargin-bottom 和 margin-left

注意: 外边距有一个特别的行为被称作外边距塌陷(margin collapsing):当两个框彼此接触时,它们的间距将取两个相邻外边界的最大值,而非两者的总和。 

 

溢流(Overflow)

最常用的是:

  • auto:如果内容太多,那么超出盒子大小的内容会被隐藏,滚动条显示出来,从而可以让用户滚动看到所有内容。
  • hidden:如果内容太多,那么超出盒子大小的内容被隐藏了。
  • visible:如果内容太多,超出盒子大小的内容显示在盒子之外(这通常是默认的行为)。
默认值。内容不会被修剪,会呈现在元素框之外 */
overflow: visible;

/* 内容会被修剪,并且其余内容不可见 */
overflow: hidden;

/* 内容会被修剪,浏览器会显示滚动条以便查看其余内容 */
overflow: scroll;

/* 由浏览器定夺,如果内容被修剪,就会显示滚动条 */
overflow: auto;

/* 规定从父元素继承overflow属性的值 */
overflow: inherit;

背景剪裁(Background clip)

浮动

 

 

[额外]

CSS3 :nth-of-type() Selector

指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色:

p:nth-of-type(2)
{
background:#ff0000;
}

三列布局css样式

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}
div:nth-of-type(1) {
  width: 33%;
  float: left;
}
div:nth-of-type(2) {
  width: 33%;
  float: left;
}
div:nth-of-type(3) {
  width: 33%;
  float:right;
}

清除浮动

因为有了浮动,下面本来不浮动的元素也会跟着浮动,所以需要额外设置清除浮动。

footer {
  clear: both;
}

clear 可以取三个值:

  • left:停止任何活动的左浮动
  • right:停止任何活动的右浮动
  • both:停止任何活动的左右浮动

闭合浮动和清除浮动

https://www.zhihu.com/question/19915431

解决受影响的不浮动模块:清除浮动和闭合浮动的区分

1)清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:left | right | both | none;
2)闭合浮动:更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。
两者的区别 请看优雅的 Demohttp://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html
通过以上实例发现,其实我们想要达到的效果更确切地说是闭合浮动,而不是单纯的清除浮动,在footer上设置clear:both清除浮动并不能解决warp高度塌陷的问题。

结论:用闭合浮动比清除浮动更加严谨,所以后文中统一称之为:闭合浮动。

 

 

闭合的几个方法

(.......略)

闭合的几个方法-小结
通过对比,我们不难发现,其实以上列举的方法,无非有两类:
其一,通过在浮动元素的末尾添加一个空元素,设置 clear:both属性,after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素;
其二,通过设置父元素 overflow 或者display:table 属性来闭合浮动,我们来探讨一下这里面的原理。



作者:一丝
链接:https://www.zhihu.com/question/19915431/answer/14840690
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

 

 清除浮动的简单方法:http://zh.learnlayout.com/clearfix.html

.clearfix {
  overflow: auto;
}
原文链接:加载失败,请重新获取