图示:
基础概要归纳
width
和height
设置了内容框的宽/高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
样式包括:
|
|
|
|
|
|
|
|
设置边框不可见:none
或 hidden
来明确地移除边框,或者设置边框颜色为 transparent
来让边框不可见,后者不会改变布局。
margin
单个属性分别为 margin-top
、margin-right
、margin-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;
}