css重点章节复习—布局-边框-边距-浮动 (部分)

css重点章节复习—布局-边框-边距-浮动

在第二个任务中,这一块的后面那条线真的弄了很久。起初也是在html里面写的代码。之后觉得这样不好,想到第一个页面中用到的border-bottom和border-top就觉得这里应该可以用border-left或者border-right 就使用了。但是出现一个问题就是不管我怎么调,整条线都是从上画到下,不能合顶部底部的两条线分开。还好记得书本里面有一处是将将垂直线和上下部分开的。查了一下,竟然是用paddding。就觉得很震惊。原来那些margin 、padding 、border,我还不是很会用,现在就专门来复习一下这一块的内容。

还有浮动之前一直都是用的display:inline-bloc;这个会有个问题,就是它会自动产生间距,目前我还不知道怎么消除这个自动产生的间距。

现在用float。不会产生间距,而且很多地方都可以用到。自己的基础知识还是很欠缺的,基础太薄弱。

border-margin-padding-float

border 用于线条:在第一个页面中,绿色的线一开始是用一个div来包住的,但是这样会增加html代码,代码量无故增多。只需在css样式里面对它添加一个border-bottom就ok了。有时候是top还是bottom还是要经过考虑的。虽然都是可以实现的,但是意义不一样。

.green-line{

padding: 4px 8px;

border-bottom: 1px solid #6bc30d;

display: inline-block;

}

margin用于隔开不同元素

.main-content{

height:267px;

min-width: 988px;

background-color:#f3f3f3;

margin: 0 auto;

margin-bottom: 42px;

}

padding   设置内边距

.header-links{

float: left;

padding:12px; }    该段代码解决了本文一开始提出来的问题,分开垂直线和水平线

float

.header-phone span{

float: left;

position: relative;

left: 25px;

}

用float默认该元素为块级元素。比设置display:block;/inline-block;好用,不会产生不必要的间距。

书本《html与css3基础教程》(第8版) 11章:用css进行布局

版权声明:未经作者同意,不得私自转载。http://www.cnblogs.com/lal-fighting/

上一篇:视频 - 在 VirtualBox 中部署 OpenStack


下一篇:刷题309. Best Time to Buy and Sell Stock with Cooldown