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/

css重点章节复习—布局-边框-边距-浮动 (部分)的更多相关文章

  1. 0019 盒子模型(CSS重点):边框、内外边距、布局稳定性、PS

    typora-copy-images-to: media 第01阶段.前端基础.盒子模型 盒子模型(CSS重点) css学习三大重点: css 盒子模型 . 浮动 . 定位 主题思路: 目标: 理解: ...

  2. .使用 HTML+CSS 实现如图布局,border-widht 5px,一个格子大小是 50*50,hover时候边框变为红色(兼容IE6+,考虑语义化的结构)

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  4. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  5. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  6. 前端总结·基础篇·CSS(一)布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  7. 【转载】CSS + DIV 实现整理布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  8. HTML CSS + DIV实现整体布局 part1

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  9. Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

随机推荐

  1. jQuery问题集锦

    [1]阻止提交表单 方法1: $(function () { $("input[type=submit]").click(function (event) { //如果不满足表单提 ...

  2. 东大oj-1591 Circle of friends

    题目描述 Nowadays, "Circle of Friends" is a very popular social networking platform in WeChat. ...

  3. Linux服务器配置git服务

    前言 Git是一个非常著名的分布式版本控制系统,而广大开发者更是习惯在最大的远程仓库GitHub上提交自己的代码.但是有时候,一些小项目不值得放到GitHub上去,或是由于隐私问题不好在GitHub的 ...

  4. noip复习模板

    我只会这么多 tarjan:codevs 1332 void tarjan(int u) { dfn[u]=low[u]=Time++; s.push(u); for(int i=head[u];~i ...

  5. js-延迟处理函数

    <script type="text/javascript"> var i = setTimeout('check()',5000); function check() ...

  6. bzoj4305: 数列的GCD

    要求k个与原序列中的数不同,就是要求(n-k)个相同,令K=n-k 然后cnt[i]表示序列a中i的倍数的个数 f[i]表示gcd为i的倍数的方案数 f[i]=C(cnt[i],K)*(m/i-1)^ ...

  7. 2.Android 自定义通用的Item布局

    转载:http://www.jianshu.com/p/e7ba4884dcdd BaseItemLayout 简介 在工作中经常会遇到下面的一些布局,如图标红处: 05.png 07.png 08. ...

  8. 78. Android之 RxJava 详解

    转载:http://gank.io/post/560e15be2dca930e00da1083 前言 我从去年开始使用 RxJava ,到现在一年多了.今年加入了 Flipboard 后,看到 Fli ...

  9. BZOJ 1124: [POI2008]枪战Maf

    1124: [POI2008]枪战Maf Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 617  Solved: 236[Submit][Status ...

  10. 【BZOJ-1941】Hide and Seek KD-Tree

    1941: [Sdoi2010]Hide and Seek Time Limit: 16 Sec  Memory Limit: 162 MBSubmit: 830  Solved: 455[Submi ...