css怎么定义边框(border),使边框只显示外边框,而不显示内边框?

html-css027

css怎么定义边框(border),使边框只显示外边框,而不显示内边框?,第1张

border: 1px solid #ffffff这个是定义一个边框,它本身不存在内外边框之分,是有内外边距;padding: 1px设定内容到内边距的距离为一个像素,相反的margin:1px设定的是外边距;如果想让这个方框外面加一个框,那就重新加一个div;

语法: position : static | absolute | fixed | relative 取值: static : 默认值。无特殊定位,对象遵循HTML定位规则absolute : 将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义fixed : 未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范relative : 对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置说明:检索对象的定位方式。

设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border )。

要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递。

设置此属性值为 relative 会保持对象在正常的HTML流中,但是它的位置可以根据它的前一个对象进行偏移。在相对(relative)定位对象之后的文本或对象占有他们自己的空间而不会覆盖被定位对象的自然空间。与此不同的,在绝对(absolute)定位对象之后的文本或对象在被定位对象被拖离正常文档流之前会占有它的自然空间。放置绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外,滚动条不会出现。

内容的尺寸会根据布局确定对象的尺寸。例如,设置一个 div 对象的 height 和 position 属性,则 div 对象的内容将决定它的宽度( width )。

此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。

对应的脚本特性为 position 。

我不清楚你看的是什么书……

你所说的方框,是指div吧

几乎XHTML中的任何标签都可以用于浮动和定位,而div首当其冲。对于其它标签来说,都有它自身存在的目的,比如ul用于显示列表,而div元素存在的目的就是为了浮动和定位。

div是专门用于布局设计的容器对象

我想你的英语应该不太好,不然很容易理解的东西。

CSS盒模型的概念你看了会更不懂!

我们可以这样理解,把你说的方框换成单词box ,即是盒子的意思。你想象力别那么丰富,没有什么椭圆形啦,心形的盒子,就是方方正正的盒子。在css2中不支持九宫图,也就是说没有椭圆,圆什么的,只有矩形。

你看我们讨论问题的这个页面,右侧有个排行榜,那就是一个方框,一个盒子,一个box啊。而它怎么就在那儿,而不是下面,左面呢,就是因为:浮动。浮动是定位的一种的方式,布局的一种方法,你慢慢的就会接触到,也就是float。

你举例中提到的对象,是指html中的标签。任何一个标签都可以被设置高和宽,现在和你简单的讲,有的需要设置一下。

如果你有足够的耐心看到了这里,我想我知道你的问题出在哪儿了!div没有设置背景色,所以你感受不到它的宽和高!

你试试

<div style="width:500pxheight:300pxbackground:#ff0000"></div>

怎么样,我相信聪明的你知道宽和高是谁的了吧?

关于DW和浏览器的差别,用经验来谈的话是你写的不够标准,用白话来讲的话,别看啦,看浏览器就够了。那个东西就是那样的。

关于clear属性

clear是你以后布局排版中常用到的样式代码,我想纠正你的书或者你的表达:clear属性说是设置不允许有浮动对象的边。

正确的说法是:顾名思义,clear,清除,打扫。清除左右两侧的浮动对象。

浮动对象不是哪些,而是哪些具有浮动属性。只要在代码中添加float,谁都可以成为浮动对象。

说白点,一排站三个孩儿,我给左边那个孩子一块float,中间和右侧都走了!

按照从上到下的顺序,那俩都上左边那孩子下面去了。

你可以自己尝试一下,记得给每个div或者其它标签添加背景颜色,这样你测试时很直观!

回答的最后,实现你的实现:

<img src="图片地址" alt="图片说明" width="200px" height=""100px/>

<p>一段文字</p>

<table width-"250px" height="150px">

<tr>

<td>列1</td>

<td>列2</td>

</tr>

</table>

上面是没有添加css的

其实你很好奇,如何让它们实现一排。其实很简单

CSS部分

.left{float:left}

把上面这个加进去就可以实现了。下面是完整的

<img src="图片地址" alt="图片说明" width="200px" height=""100pxclass="left" />

<p class="left">一段文字</p>

<table width-"250px" height="150px" class="left">

<tr>

<td>列1</td>

<td>列2</td>

</tr>

</table>

说明:分别在img, p, table中加入了class="left" 也就是我们写好的CSS样式

说在最后,上面的方法对你可能早了点,但你看到效果后我相信你更加喜欢CSS的便捷。

为什么我花了半个小时在这里回答这种东西?

忽然回想起4年前初学CSS的青涩……

呵呵,你要加油哦!