写CSS_关于Border你可能需要注意的地方第1/2页

今天写了一段CSS,写时突然想到的,写出来和大家分享一下; 我们可能早已习惯了padding在不同浏览器中的不同之处, 但这个你不一定注意过; 

先说一个场景,例如: 
一个宽400px的黄盒子,左边放一个300px的小蓝盒子,右边放一个宽100px的红盒子.这样应该正好放下对吧? 因为300+100正好是400呀! 好了,先试一试! 
我开始写了(头部省略): 


代码如下:

<style> 
#yellow{ width:400px; border:1px solid #FF9900; background:#FFCC99; float:left;} 
#blue{ width:300px; height:100px; border:1px solid #0066FF; background:#00CCFF; float:left;} 
#red{ width:100px; height:100px; border:1px solid #FF3300; background:#FF9900; float:right;} 
</style>

400px 
<div id="yellow"> 
 <div id="blue">300px</div> 
 <div id="red">100px</div> 
</div>

看一下效果:

www.zishu.cn

*{ margin:0; padding:0;}
body{padding:50px; font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:1.8;}
#yellow{ width:400px; border:1px solid #FF9900; background:#FFCC99; float:left;}
#blue{ width:300px; height:100px; border:1px solid #0066FF; background:#00CCFF; float:left;}
#red{ width:100px; height:100px; border:1px solid #FF3300; background:#FF9900; float:right;}

400px

300px

100px

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

最后的效果是这样的:

没有放下,原因就是因为我写了一个border:1px; 那我们把他去掉看一下.

www.zishu.cn

*{ margin:0; padding:0;}
body{padding:50px; font-size:12px; font-family:Arial, Helvetica, sans-serif; line-height:1.8;}
#yellow{ width:400px; border:1px solid #FF9900; background:#FFCC99; float:left;}
#blue{ width:300px; height:100px; background:#00CCFF; float:left;}
#red{ width:100px; height:100px; background:#FF9900; float:right;}

400px

300px

100px

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

当前1/2页 12下一页阅读全文

赞 (0)

相关推荐

  • border:none与border:0使用区别

    一.border:noneborder-style的简写在chrome审查元素看到以下结果 复制代码 代码如下: element.style {border: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;border-width: initial;border-color: initial;} 在firefox中用firebug查看元素

  • css下margin、padding、border、background和font缩写示例

    下面用一些比较常用的属性来做示例. margin margin-top:1px;  margin-right:1px;  margin-bottom:1px;  margin-left:1px;  代码简化为:margin:1px margin-top:1px;  margin-right:2px;  margin-bottom:1px;  margin-left:2px;  代码简化为:margin:1px 2px margin-top:1px;  margin-right:2px;  mar

  • 写CSS_关于Border你可能需要注意的地方第1/2页

    写CSS_关于Border你可能需要注意的地方第1/2页

    今天写了一段CSS,写时突然想到的,写出来和大家分享一下; 我们可能早已习惯了padding在不同浏览器中的不同之处, 但这个你不一定注意过;  先说一个场景,例如:  一个宽400px的黄盒子,左边放一个300px的小蓝盒子,右边放一个宽100px的红盒子.这样应该正好放下对吧? 因为300+100正好是400呀! 好了,先试一试!  我开始写了(头部省略):  复制代码 代码如下: <style>  #yellow{ width:400px; border:1px solid #FF990

  • 使用hooks写React组件需要注意的5个地方

    Hook是React16.8开始新增的特性.虽然React官方文档已经作出了针对React hooks的相关概念的讲解,但是光看官方文档是很难将hooks使用好的,在编写hooks的过程中很容易跳进陷阱和错误.本文总结了5个不好的地方. 01.不需要render的场景下使用useState 在函数组件中我们可以使用useState来管理状态,这使得对状态的管理变得很简单,但是也容易被滥用,我们通过下面的代码样例看下容易忽略的地方. 不推荐× function ClickButton(props)

  • C# XML操作 代码大全(读XML,写XML,更新,删除节点,与dataset结合等)第1/2页

    已知有一个XML文件(bookstore.xml)如下: Corets, Eva 5.95 1.插入节点 往节点中插入一个节点: 复制代码 代码如下: XmlDocument xmlDoc=new XmlDocument(); xmlDoc.Load("bookstore.xml"); XmlNode root=xmlDoc.SelectSingleNode("bookstore");//查找 XmlElement xe1=xmlDoc.CreateElement(

  • InnoDB的关键特性-插入缓存,两次写,自适应hash索引详解

    InnoDB的关键特性-插入缓存,两次写,自适应hash索引详解

    InnoDB存储引擎的关键特性包括插入缓冲.两次写(double write).自适应哈希索引(adaptive hash index).这些特性为InnoDB存储引擎带来了更好的性能和更高的可靠性. 插入缓冲 插入缓冲是InnoDB存储引擎关键特性中最令人激动的.不过,这个名字可能会让人认为插入缓冲是缓冲池中的一个部分.其实不然,InnoDB缓冲池中有Insert Buffer信息固然不错,但是Insert Buffer和数据页一样,也是物理页的一个组成部分. 主键是行唯一的标识符,在应用程序

  • Ajax写分页查询（实现不刷新页面）

    Ajax写分页查询（实现不刷新页面）

    要求: 获取数据库中大量的信息显示在页面上,必然要使用到分页查询: 若不使用Ajax,而是用其他的方法,肯定是要刷新页面的,用户体检很不好, 所以最好使用Ajax的方法写分页查询: 1.先来找一张数据很多的表吧! 一张简单的表 代码,引入jquery包: <script src="jquery-1.11.2.min.js"></script> 写一张表格,显示我们的代号跟名称: <table class="table table-striped&

  • 详解如何写出一个利于扩展的vue路由配置

    前言 从历往经验来看,开发一个新项目,往往在刚开始部署项目,到项目的正式交付,以及交付后的后续维护,功能增强等过程,都需要对项目的一些已有结构和逻辑进行调整. 因此,如果有些内容刚建项目时不考虑好未来的可扩展性,后续调整会很麻烦. 这里先来说,在vue项目中,如何写路由配置,更利于未来可扩展. vue-router的基本配置 为了方便新学者的阅读与理解.先来看一下最基本的路由是如何配置的 // 0. 导入Vue和VueRouter脚本,如果使用模块化机制编程,要调用 Vue.use(VueRou

  • Mootools 1.2教程 函数

    今天开始MooTools系列教程的第4讲.如果你还没有看过上一讲,请先查看上一篇教程<Mootools 1.2教程(3)--数组使用简介>.今天我们先不讲MooTools,而是讲一讲JavaScript中的函数(function)的基本知识. 但是,为了符合MooTools这个主题,你需要知道在哪里该使用MooTools的函数.此前,我们已经在我们的所有示例代码中,把代码都放在domready方法中.当我们需要把它放在domready的外面时,我们使用了函数(function).在你在domr

  • mysql分页性能探索

    mysql分页性能探索

    常见的几种分页方式: 1.扶梯方式 扶梯方式在导航上通常只提供上一页/下一页这两种模式,部分产品甚至不提供上一页功能,只提供一种"更多/more"的方式,也有下拉自动加载更多的方式,在技术上都可以归纳成扶梯方式. 扶梯方式在技术实现上比较简单及高效,根据当前页最后一条的偏移往后获取一页即可.写成SQL可能类似 SELECT*FROMLIST_TABLEWHEREid> offset_id LIMIT n; 1.电梯方式 另外一种数据获取方式在产品上体现成精确的翻页方式,如1,2,

  • vue2.0 keep-alive最佳实践

    vue2.0 keep-alive的最佳实践,供大家参考,具体内容如下 1.基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 <keep-alive> <component> <!-- 组件将被缓存 --> </component> </keep-alive> 有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的 在使用keep-alive的情况下 <keep-al

  • nodejs模块学习之connect解析

    nodejs 发展很快,从 npm 上面的包托管数量就可以看出来.不过从另一方面来看,也是反映了 nodejs 的基础不稳固,需要开发者创造大量的轮子来解决现实的问题. 知其然,并知其所以然这是程序员的天性.所以把常用的模块拿出来看看,看看高手怎么写的,学习其想法,让自己的技术能更近一步. 引言 express 是 nodejs 中最流行的 web 框架.express 中对 http 中的 request 和 response 的处理,还有以中间件为核心的处理流程,非常灵活,足以应对任何业务的

随机推荐