【问题贴】关于css布局的问题--main盒子问什么加上border属性就…_css吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：45,770贴子：
【问题贴】关于css布局的问题--main盒子问什么加上border属性就…收藏
1.main_1盒子为什么加上border属性就出问题了？2.是不是跟float属性有关？3.如果在main_1容器下面再加上个“一行两列”的容器该怎么加？
下面的这个办法为什么不对？
height:300
margin:5}#left_2{
height:300
border:#999 2
float:}#right_2{
height:300
border:#999 2
float:&body&
&div id="container"&
&div id="head"&head&/div&
&div id="nav"&nav&/div&
&div id="main_1"&
&div id="left_1"&left_1 &/div&
&div id="right_1"&right_1&/div&
&div id=main_2&
&div id="left_2"&left_2 &/div&
&div id="right_2"&right_2&/div&
&div id="bottom"& bottom&/div&
&/div& &/body&初学css，忘众前辈可以解惑
票牛教你如何买到热门、便宜、真实的演出门票！
源代码如下：&style type=text/css&#container{
margin:0}#head{
height:154
margin-bottom: 0;
border:#999 2}#nav{
margin-bottom:3
border:#999 2}#main_1{
height:250
&!--为什么不能在此项上加上border属性--&
border:#555 2
&!----&}#left_1{
height:250
border:#999 2
float:}#right_1{
height:250
border:#999 2
float:}#bottom{
border:#999 2
margin-top:5}body{
padding:0;}&/style&&/head& &body&
&div id="container"&
&div id="head"&head&/div&
&div id="nav"&nav&/div&
&div id="main_1"&
&div id="left_1"&left_1 &/div&
&div id="right_1"&right_1&/div&
&div id="bottom"& bottom&/div&
&/div& &/body&
楼上有答案我就不说了，看过。
楼上有答案我就不说了，看过。
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或(1)有边框的三角形
我们来写下带边框的三角形。
如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。
最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。
这里就涉及到一个绝对定位的问题，上、下、左、右四种方向的三角形相对于父级定位是不同的。首先我们来看下，当定位都为0（left:0 top:0）时，会发生什么。
&!-- 向上的三角形 --&
&div class="triangle_border_up"&
&span&&/span&
&!-- 向下的三角形 --&
&div class="triangle_border_down"&
&span&&/span&
&!-- 向左的三角形 --&
&div class="triangle_border_left"&
&span&&/span&
&!-- 向右的三角形 --&
&div class="triangle_border_right"&
&span&&/span&
.triangle_border_up{
border-width:0 30px 30
border-style:
border-color:transparent transparent #333;/*透明 透明
.triangle_border_up span{
border-width:0 28px 28
border-style:
border-color:transparent transparent #fc0;/*透明 透明
.triangle_border_down{
border-width:30px 30px 0;
border-style:
border-color:#333 tra/*灰 透明 透明 */
.triangle_border_down span{
border-width:28px 28px 0;
border-style:
border-color:#fc0 tra/*黄 透明 透明 */
.triangle_border_left{
border-width:30px 30px 30px 0;
border-style:
border-color:transparent #333 tra/*透明 灰 透明 透明 */
.triangle_border_left span{
border-width:28px 28px 28px 0;
border-style:
border-color:transparent #fc0 tra/*透明 黄 透明 透明 */
.triangle_border_right{
border-width:30px 0 30px 30
border-style:
border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
.triangle_border_right span{
border-width:28px 0 28px 28
border-style:
border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
　　效果如图：
为什么不是我们预想的如下图的样子呢
原因是，我们看到的三角形是边，而不是真的具有内容的区域，请回忆下CSS的盒子模型的内容。
绝对定位（position:absolute），是根据相对定位父层内容的边界计算的。
再结合上篇我们最开始写的宽高为0的空div:
这个空的div，content的位置在中心，所以内部三角形是根据中心这个点来定位的。
为了看清楚一些，我们使用上一次的方法，给span增加一个阴影：
box-shadow:0 0 2px rgba(0,0,0,1);
　　效果如图：
这回我们明确的知道了，内部的三角形都是根据外部三角形实际内容的点来定位的，而非我们肉眼看到的三角形的边界定位。
HTML不变，CSS：
.triangle_border_up{
border-width:0 30px 30
border-style:
border-color:transparent transparent #333;/*透明 透明
.triangle_border_up span{
border-width:0 28px 28
border-style:
border-color:transparent transparent #fc0;/*透明 透明
.triangle_border_down{
border-width:30px 30px 0;
border-style:
border-color:#333 tra/*灰 透明 透明 */
.triangle_border_down span{
border-width:28px 28px 0;
border-style:
border-color:#fc0 tra/*黄 透明 透明 */
.triangle_border_left{
border-width:30px 30px 30px 0;
border-style:
border-color:transparent #333 tra/*透明 灰 透明 透明 */
.triangle_border_left span{
border-width:28px 28px 28px 0;
border-style:
border-color:transparent #fc0 tra/*透明 黄 透明 透明 */
.triangle_border_right{
border-width:30px 0 30px 30
border-style:
border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
.triangle_border_right span{
border-width:28px 0 28px 28
border-style:
border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
　　效果如图：
进一步来写气泡框的三角形，如图所示：
&div class="test_triangle_border"&
&a href="#"&三角形&/a&
&div class="popup"&
&span&&em&&/em&&/span&纯CSS写带边框的三角形
.test_triangle_border{
margin:0 auto 20
.test_triangle_border a{
color:#333;
font-weight:
text-decoration:
.test_triangle_border .popup{
background:#fc0;
padding:10px 20
color:#333;
border-radius:4
border:1px solid #333;
.test_triangle_border .popup span{
border-width:0 10px 10
border-style:
border-color:transparent transparent #333;
left:50%;/* 三角形居中显示 */
margin-left:-10/* 三角形居中显示 */
.test_triangle_border .popup em{
border-width:0 10px 10
border-style:
border-color:transparent transparent #fc0;
(2)东北、东南、西北、西南三角形的写法
继续，来写西北方（↖），东北方（↗），西南方（↙），东南方（↘）的三角形。
原理如图：
根据颜色的划分，每个可以有两种CSS来写，分别利用不同的边来创造所需三角形。
写一个nw（↖）的例子：
&div class="triangle_border_nw"&&/div&
.triangle_border_nw{
border-width:30px 30px 0 0;
border-style:
border-color:#6c6 transparent tra
.triangle_border_nw{
border-width:0 0 30px 30
border-style:
border-color:transparent transparent transparent #6c6;
两种CSS效果均如图所示：
以上是利用CSS写三角形，晋级到
(1)有边框的三角形
(2)东北、东南、西北、西南三角形的写法
希望对大家有所帮助！(￣▽￣&)
题外话：发现CSS的许多知识点都可以挖掘出一些深层的东西，很有意思~也因为有许多值得推敲的地方，所以写出来没有能做到绝对精简&&
转自:&/css/border02
阅读(...) 评论()H5 web开发（20）
1 CSS盒子模型
首先来复习下CSS的box Model,box Model 是CSS+DIV布局的灵魂所在，下面这张图足以说明一切：
元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。在CSS3中增加了盒子阴影（box-shadow）。
1.1 box-shadow
盒子的阴影，在CSS2中要实现这效果得用图片，而且还不是很灵活。
语法：box-shadow:&h-shadow v-shadow blur spread color&
Description
必需的.水平方向的阴影偏移,可为正负值
必需的.垂直方向的阴影偏移,可为正负值
可选的. 模糊距离
可选的. 阴影大小
可选的. 阴影颜色，默认为黑色
可选的. 把阴影从外部阴影改变成内部阴影
&&&&background-color:#660066;width:200px;height:100px;margin-bottom:50px;
&&&&box-shadow:50px&50px&50px&20px&#9966FF;
2 CSS3 Borders
在CSS3中，我可以定义圆角边框（border-radius），图片边框（border-image），以前想要实现这些效果利用图片，而且相关HTML代码也很复杂，现在只定义相关CSS就能实现这些效果，很期待吧。
2.1 border-radius
在CSS2中定义圆角边框是很别扭的，我们需要为每个角定义个图片，
语法：border-radius:&1-4 length|%&/&1-4 length|%;
延伸：border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius , border-top-left-radius
&length&： 由浮点数字和单位标识符组成的长度值，可以是具体数值，也可以是百分比，但不可为负值。第一个值是水平半径，第二个值会默认等于第一个值，这样的话就是四分之一的圆角，第二个值通俗来说就是控制圆角的弧度的。
下面举个实例：
&&&&width:150px;
height:80px;
&&&&background-color:#6699FF;
&&&&border:2px&solid;
&&&&border-radius:20px&5px&20px&5px&/
10px&5px&10px&5px;
border-radius: 相关定义可等于
&&& border-top-left-radius: 20px 10
&&& border-top-right-radius: 5px 5
&&& border-bottom-right-radius: 20px 10
&&& border-bottom-left-radius: 5px 5
下面再给大家画个圆：
注意：可能一些老版本的浏览对此还得加浏览器前缀，如（-webkit-border-radius:20px 5px 20px 5px / 10px 5px 10px 5px）
2.2 border-image
指定一个图片作为元素的边框，可惜IE9还不支持。
语法：border-image:&source slice width outset repeat;
Description
border-image-source
边框图片的路径
border-image-slice
边框图片的内部定位
border-image-width
边框图片的宽度
border-image-outset
边框图处在box外的延伸,目前所有浏览器还不支持
border-image-repeat
边框图片的重复种类:平铺( rounded ) 拉伸( stretched)
下面是我边框所用到的图片，从网上找到的
相关CSS代码：
.borderimage1
border-width:15width:220padding:10px 20
border-image:url('Images/border.png') 30 30
-moz-border-image:url('Images/border.png') 30 30 /* Firefox */
-webkit-border-image:url('Images/border.png') 30 30 /* Safari and Chrome */
-o-border-image:url('Images/border.png') 30 30 /* Opera */
2.3 border-color
在Firefox中，对border-color进行了新的扩展，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6种颜色，那么最后一个颜色将被添加到剩下的宽度。
接下个写个火狐下的实例：
&.bordercolor{
width:200 height:60 border: 7px solid #000; padding: 3px 3px 3px 6
-moz-border-bottom-colors: #006 #33f #36f #69f #9cf #
-moz-border-top-colors: #606 #c0c #f0f #f6f #f9f #
-moz-border-left-colors: #030 #093 #3c3 #6f6 #9f9 #
-moz-border-right-colors: #630 #c90 #ff0 #ff6 #ff9 #
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：48607次
积分：1141
积分：1141
排名：千里之外
原创：64篇
转载：10篇
(5)(16)(1)(4)(2)(6)(5)(10)(21)(3)(1)css border属性的使用方法和技巧
作者：佚名
字体：[ ] 来源：互联网 时间：05-23 10:33:19
下面小编就为大家带来一篇css border属性的使用方法和技巧。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
CSS border用于设置HTML元素（如div）的边框，包括边框的宽度、颜色和样式。本文章向码农介绍CSS border边框属性详细内容，感兴趣的码农可以参考一下。
CSS 边框即CSS border-border边框样式颜色、边框样式、边框宽度的语法结构与应用案例教程篇
一、CSS边框基础知识
CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。同时大家可以进入码农教程提供CSS手册查看border。
二、Html原始边框与CSS边框对照
Html表格控制边框：
border=&1&&bordercolor=&#000000&& &&
说明：控制表格边框宽度为1px，css颜色为黑色，默认为实线样式边框。
三、border边框语法
1、四个边框
border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为css下划线效果应用。
2、四边相同边框border简写
#manong{border:1px&solid&#00F}& &&
设置了manong对象盒子1px像素蓝色实线边框
3、边框三个样式
通常我们可以对边框设置宽度（厚度）、边框样式、边框颜色这三个属性与参数。
1）、边框颜色：border-color:#000
2）、边框厚度（宽度）：border-width:1px
使用数字+单位设置边框厚度宽度，如1px(边框厚度宽度为1像素)，边框必须为正数字，大于0的数值。否则设置边框border样式无效。
3）、border边框样式：border-style:solid
边框样式值如下：
none : 　无边框。与任何指定的border-width值无关hidden : 　隐藏边框。IE不支持dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）solid : 　实线边框（常用）double : 　双线边框。两条单线与其间隔的和等于指定的border-width值groove : 　根据border-color的值画3D凹槽ridge : 　根据border-color的值画菱形边框inset : 　根据border-color的值画3D凹边outset : 　根据border-color的值画3D凸边
四、CSS单独设置左边框、右边框、上边框、下边框
以缩写方式写上、下、左、右边框单独CSS样式设置方法
1、1px黑色虚线上边框
border-top:1px dashed #000
2、1px黑色实线下边框
border-bottom:1px solid #000
3、1px黑色虚线左边框
border-left:1px dashed #000
4、1px黑色实线右边框
border-right:1px solid #000
五、常用推荐边框样式
我们通常使用主流浏览器兼容边框样式有：
1、实线边框：solid
Border:1px solid #000 设置对象1px（像素）宽厚的黑色实线边框。
2、虚线边框：dashed
Border:1px dashed #000 设置对象1px（像素）宽厚的黑色虚线边框。
六、css border边框用处
设置对象边框样式，设置单独上边框、下边框、左边框、右边框样式，实现美化美观。边框起到分割、规划布局作用。
七、css边框应用案例代码
描述：为了观察案例效果我们设置一个css宽度为200px，css高度1px,红色实线边框的DIV盒子
#manong{height:100px;width:200px;border:1px&solid&#F00}&&
HTML代码对应片段：
&div&id=&manong&&我的高度为100px,宽度为200px&/div&& &&
八、css边框border总结
我们使用CSS设置边框border样式，一般我们使用简写表达式进行设置对象边框border样式，这样节约代码简化代码作用。无论是单独设置一个边的边框还是四边边框，我们都尽量缩写方式简写CSS边框代码，CSS 边框优化简写，常见对对象设置CSS样式使用属性代码：border:1px solid #000;。
九、css边框border设置技巧
如左右下有边框并且样式为黑色1PX宽度实线边框，而上边没有边框。
CSS 代码：
border:1px&solid�&border-top:none;& &&
注意border:1px solid #000; 和border-top:前后顺序不能调换。因为CSS读取有从上到下、从左到右读取原理，而先设置了整个边框样式，后再加上声明顶部上边边框为&none&没有意思，即实现该实例要的样式。从而无需分别设置下、左、右，从而节约一定代码。
以上这篇css border属性的使用方法和技巧就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
原文地址：
大家感兴趣的内容
12345678910
最近更新的内容&CSS盒子模型-边框
CSS盒子模型-边框
视频太卡？试试切换线路
本课时对盒子模型进行简单讲解介绍
本课时讲解设置内边距padding，以及4个方向的内边距。
本课时讲解盒子边框及样式的设置。
本课时讲解外边距以及4个方向外边距的设置。
本课时讲解多个盒子的外边距合并。
本课时讲解盒子模型的简单设计。
只有成为VIP会员才能提问&回复，快吧！如果你还没有账号你可以一个账号。
添加新技术问题
课程 [CSS盒子模型-边框]
中已存在问题
添加新技术问题
问题描述越详细，被解答的速度越快
有新回答时请邮件提醒我
着急，拜托快点
不急，慢慢解决
关联课程 [CSS盒子模型-边框]
服务热线:400-678-8266