html边框代码
-
2023年3月17日发(作者：中国食物英语)html的边框设置
⽬录
理论知识：
边框的写法：
border:边框的宽度样式颜⾊;
边框的四种样式：soliddasheddotteddouble
solid表⽰细线dashed表⽰线段组成的虚线dotted表⽰圆点组成的虚线double表⽰双线
边框的每⼀条边也可以单独设置，若要单独设置⼀条边不⼀样，在整体设置后，另外再设置那条边即可。
border-top，border-bottom，border-left，border-right就是边框的四条边
border-width：上下左右对边框的四条边的宽度进⾏设置
border-style：上下左右对边框的四条边的风格进⾏设置，就是上⾯的样式
border-color：上下左右对边框的四条边的颜⾊进⾏设置
上⾯的上下左右，若只写两个，则表⽰上下、左右各是⼀种；只写⼀个，就是四条边全部应⽤。
如果width:0px;height:0px;会出现三⾓形
设置边框与内容的距离，我们⽤padding，表⽰内边距，和border⼀样，有上下左右
设置边框与边框的距离，我们⽤margin，表⽰外边距，和border⼀样，有上下左右
如果想⽂字和标题都被边框包裹，则要设3层div，每个div都要设边框
span之间有空格或换⾏会在⽹页上出现空格
元素的宽/⾼：border+padding+width
元素空间的宽/⾼：border+padding+margin+width
内容的宽/⾼：width/height
在设置宽⾼的时候⼀定要把上⾯的这些都算进去，别设错了
⽰例⼀：简单边框
背景图⽚的定位练习
div{
width:100px;
height:100px;
}
.pp1{
border:5pxsolidblack;
}
.pp2{
border-width:5px;
border-style:solid;
border-color:redgreenbluepurple;
}
.pp3{
border:5pxsolidred;
border-right:5pxdashedred;
}
.pp4{
border-width:5px;
border-style:soliddashed;
border-color:red;
}
.pp5{
border:5pxsolidblack;
border-bottom-color:white;
}
.pp6{
width:0px;
height:0px;
border-width:50px;
border-style:solid;
border-color:redgreenbluepurple;
}
.pp7{
width:0px;
height:0px;
border-width:50px;
border-style:solid;
border-color:white;
border-top-color:red;
}
⽰例⼆：边框和表格
背景图⽚的定位练习
table{
border:5pxdottedblue;
}
表格基础练习
111
222
333
444
⽰例三：边框和图⽚
边框综合练习3
.aa{
width:1200px;
height:620px;
border:20pxdottedpink;
padding:10px;
}
.aa1{
width:600px;
height:620px;
float:left;
padding-bottom:
}
.aa2{
width:600px;
height:620px;
float:right;
}
⽰例四：边框和⽂章
边框综合练习4
*{
padding:0px;
margin:0px;
}
.aa1{
width:1200px;
height:550px;
border:5pxdottedred;
margin:5px;
}
.bb1{
width:317px;
height:442px;
float:left;
padding-left:30px;
padding-top:108px;
}
.cc1{
width:600px;
height:442px;
float:right;
padding-right:180px;
padding-top:30px;
}
荷塘⽉⾊
这⼏天⼼⾥颇不宁静。今晚在院⼦⾥坐着乘凉，忽然想起⽇⽇⾛过的荷塘，在这满⽉的光⾥，总该另有⼀番样⼦吧。⽉亮渐渐地升⾼了，墙外马路上孩⼦们的欢笑
沿着荷塘，是⼀条曲折的⼩煤屑路。这是⼀条幽僻的路；⽩天也少⼈⾛，夜晚更加寂寞。荷塘四⾯，长着许多树，蓊蓊郁郁的。路的⼀旁，是些杨柳，和⼀些
路上只我⼀个⼈，背着⼿踱着。这⼀⽚天地好像是我的；我也像超出了平常的⾃⼰，到了另⼀世界⾥。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，
曲曲折折的荷塘上⾯，弥望的是⽥⽥的叶⼦。叶⼦出⽔很⾼，像亭亭的舞⼥的裙。层层的叶⼦中间，零星地点缀着些⽩花，有袅娜地开着的，有羞涩地打着朵