本文目录一览：
- 1、CSS border（边框）样式写法总结
- 2、边框相关的三个样式
- 3、border-style属性有几种（分别是）？可否编一小段？
- 4、【css】边框border的属性和使用方法
- 5、css设置div只显示某一边的边框
CSS border（边框）样式写法总结
border属性 ：在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。
语法：border： border-width | border-style | border-color;
border-width ：边框宽度。可以指定长度值。如1px，1em（单位为px，pt，em等）。或者使用关键字medium（默认），thick，thin。
border-top-width：设置元素上边框宽度
border-right-width：设置元素右边框宽度
border-bottom-width：设置元素下边框宽度
border-left-width：设置元素左边框宽度
border-style ：边框样式。
border-top-style：设置元素上边框样式
border-right-style：设置元素右边框样式
border-bottom-style：设置元素下边框样式
border-left-style：设置元素左边框样式
属性值有：
none：无边框。
hidden：隐藏边框。对于表，hidden 用于解决边框冲突。
dotted：点状边框。
dashed：虚线边框。
solid：实线边框。
double：双线边框。两条单线与其间隔的和等于指定的border-width值。
groove：3D凹槽边框。
ridge：3D垄状边框。
inset：凹边框。
outset：凸边框。
border-color ：边框颜色。
1.1 边框各样式效果图
1.2 四条边颜色样式相同
1.3 四条边颜色不同，样式相同
1.4 四条边颜色相同，样式不同
1.5 设置上边框宽度、样式、颜色
1.6 设置右边框宽度、样式、颜色
1.7 设置下边框宽度、样式、颜色
1.8 设置左边框宽度、样式、颜色
以上对border边框属性进行了基础操作，大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解，那就在回复区畅所欲言吧，我定会吸取精华~如有写错欢迎大家回复，我以后定会更加细心 _-border-style
边框相关的三个样式
边框（border）
边框相关的三个样式
border-color 边框的颜色 border-color：#00ffcc;
border-style 边框的样式 border-style：dashed;
border-width 边框的宽度 border-width：30px;
边框会影响到盒子的可见框大小
border-width表示边框的宽度
- 可以通过该属性分别制定边框四个方向的宽度
border-width: 10px 20px 30px 40px;
如果指定了四个宽度，则会分别设置上右下左四个方向的边框的宽度
border-width: 10px 20px 30px;
三个值：上 左右 下
border-width: 10px 20px;
两个值：上下 左右
border-width: 10px;
一个值：上下左右
border-color边框的颜色，可以分别指定四个边的颜色，规则和border-width一样。
border-color: red orange blue aqua; 上右下左----顺时针旋转
border-color: silver;
border-style 指定边框的样式
solid 实线
dotted 点状虚线
dashed 虚线
double 双线
border-style: solid dotted dashed double;------顺时针旋转
border-style: solid dotted dashed ;--------------上左右下
border-style: solid dotted;------------------------上下左右
border-right: yellow solid ;
边框（border）
不指定宽度，默认宽度 一般3px
不指定颜色，默认使用字体颜色-随字体颜色变
边框可同时设置四个方向边框的宽度、颜色、样式，并且没有顺序要求
border:red 10px solid
除了border还有四个
border-top 上 border-right 右 border-bottom 下 border-left 左
内边距（padding）边框和内容区之间的距离叫做内边距
盒子的可见框大小由内容区，内边距和边框共同决定
四个方向的内边距
padding-top 上 padding-right 右 padding-bottom下 padding-left 左
通过padding来同时设置四个方向的内边距，规则和border-width一样
padding: 10px 20px 30px 40px;
padding: 10px 20px 30px ;
padding: 10px 20px ;
padding: 10px ;
外边框（margin）
当前盒子和其他盒子之间的距离，外边距不会影响盒子的可见框的大小，但是外边距会影响到盒子实际占地的大小，影响盒子的位置。
四个方向的外边距：
margin-top margin-right margin-bottom margin-left
由于在浏览器中默认情况下，元素是靠左靠上排列的，所以设置上左外边距时，会移动元素自身，而设置下和右外边距时，会移动其他元素
外边距可以是负值，如果是负值则元素会向相反方向移动 margin-top: -50px;
同时设置四个方向的外边距margin: 10px 20px 30px 40px;
水平方向布局
子元素在父元素的位置是父元素的内容区
子元素在父元素中的水平方向的布局，必须满足如下等式
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素的width（7个值和[自动补全]=父元素的宽度）-border-style
在水平方向，有三个值可以设置auto
分别是 margin-left width margin-right
设置为auto以后，浏览器会自动计算该属性的值
- 若七个值和相加不等于父元素宽度，则属于过度约束，则浏览器会自动调整右外边距的值
- 如果将margin-left 或 margin-right 的一侧设置为auto，则另一侧会设置尽量大的值
- 若left和right都设置auto，则会将两侧外边距设置相等的值，导致子元素在父元素中水平居中
垂直方向布局：（简单）
margin-top+border-top+padding-top+height+margin-bottom+border-bottom+padding-bottom=父元素高度
box1box2:
width设置auto时，子元素会占满父元素
height设置auto时，父元素的高度由子元素内容决定
1. 当父元素写死时，子元素的高度高于父元素时，会溢出，溢出的子元素不会影响页面布局。
使用 overflow 来设置溢出内容的处理方式：
可选值：
visible，默认值 溢出内容不会被裁剪直接在父元素外部显示
hidden，溢出的内容会被裁剪，超过父元素的不会显示
scroll，生成滚动条，可以通过滚动条查看完整内容，滚动条一直在
auto，根据需要生成滚动条
2. 兄弟元素的外边距的折叠（margin）
.box1{
height:100px;
Width:100px;
Margin-bottom:100px;
}
.box2{
height:100px;
Width:100px;
Margin-top:100px;
}
外边距的折叠，垂直方向相邻的外边距，会发生外边距折叠现象。
兄弟元素间的相邻外边距，会去两个外边距间的最大值（正值）；如果是负值，取绝对值较大的。
两个外边距：相邻的外边距，谁大用谁的距离
一正一负：取两个值的和
3. 父子元素的外边距折叠
父子元素的相邻垂直外边距，子元素的外边距会传递给父元素
.box1{
width:200px;
heigth:300px;
background-color:#bfa;
border-top:1px red solid;
}
.box2{
width:200px;
heigth:300px;
background-color:orange;
margin-top:100px;
}
4. 文档流（常规流、标准流）
-文档流是网页中的一个位置，默认情况下页面中的所有元素都在文档流中排列
-块元素在文档流中的特点
自上向下进行排列（独占一行）
默认宽度和元素一样
默认高度被内容撑开
div /div
-行内元素在文档流中的特点
自左向右水平排列，如果一行中不足以容纳所有元素则切换到下一行继续自左向右水平排列
默认高度和宽度都会被内容撑开
span /span
5. 行内元素的盒模型
内联元素不支持设置宽度和高度span /span
内联元素可以设置padding（border），但垂直方向padding（border）不会影响页面的布局
内联元素支持水平方向的外边距，不支持垂直方向的
6. display
-指定元素所产生的框的类型
-可选值：
inline行内元素
block块元素
inline-block行内块元素
-既有行内元素的特点，不会独占一行；又有块元素的特点，可设置宽高
none元素不在页面中显示
内联元素无法改变宽度和高度，将超链接变成块元素，就可以改变大小
display:block;
a{
width:200px;
height:200px;
background:#ofd;
dispaly:none;
}
.box1:hover a { ////鼠标碰到连接时出现
display:block;///////////inline
}
7. visibility设置元素的显示状态
可选值：visible:默认值，元素正常显示
hidden不显示元素，但元素依旧占据位置
display:none :不显示元素，而且不占据位置
8. 二级菜单
当鼠标移动到xxx时，显示二级菜单
.outerxxx:hover .inner{祖先与后代关系
display:block;}
9. 默认样式
为了确保网页在没有样式的情况下，也可以浏览，所以浏览器都会为网页设置一些默认样式，对开发者来说没有任何作用，并且不同的浏览器所设置的默认样式不同，开发中第一件事就是去除浏览器的默认样式。
*{margin:0;
padding:0; 去掉所有边框，外边界}
重点：CSS权威指南---利用reset.css直接引入，可以去除所有默认样式，推荐
normalize.css--统一
10. 块元素和行内元素一般情况下，只会在块中放内联元素，不会向内联元素放块元素
块元素：用于页面的布局 p：不能放任何块元素
行内元素：主要用于页面中选中文字 a：什么都能放，除了自己
11. .img-list
{height:190px;
width:470px;
background-color:#33ffss;
margin:auto; //居中
list-style:none; //去掉列表前面的样式}
.img-list img{
height:100%;
width:100%;}
ul class=’img-list’
lia href=”#”img src=”img/1.jpg”/a/li
lia href=”#”img src=”img/2.jpg”/a/li
lia href=”#”img src=”img/3.jpg”/a/li
/ul
12. 文本修饰text-decoration:none: 去除下划线
style
.nav {width:190px;
height:450px;
padding:10px 0;
margin:0 auto;
list-style:none;
background-color:white;}
.nav li {height:25px;
padding-left:18px;}
.nav li:hover{
background-color:gray;}
.nav li a{
font-size:18px;
text-decoration:none;
color:#333;}
.nav li a:hover{
color:red;}
/style
ul class=’nav’
lia href=”#”xxx/a/li
lia href=”#”xxx/aa href=”#”xxx/aa href=”#”xxx/a/li
lia href=”#”xxx/aa href=”#”xxx/aa href=”#”xxx/a/li
/ul
龙华大道1号
border-style属性有几种（分别是）？可否编一小段？
border-style 属性可设置四边的样式，可以有1到4种样式
举例
table {border-style: dotted}
all four borders will be dotted
四条边都为打点型
table {border-style: dotted dashed}
top and bottom border will be dotted, left an right border will be dashed
上下边为打点型的，左右为粉碎型
table {border-style: dotted dashed solid}
top border will be dotted, left and right border will be dashed, bottom border will be solid
上边为打点型，左右为粉碎型边框，下边框为线型
table {border-style: dotted dashed solid double}
top border will be dotted, right border will be dashed, bottom border will be solid, left border will be double-border-style
上边为打点型，右边为粉碎型，下边为线型，左边为双线型
可用值
值 描述
none Defines no border
无边框
hidden The same as "none", except in border conflict resolution for table elements
除了在table元素的边框解析上有冲突外基本和"none"一样
dotted Defines a dotted border. Renders as solid in most browsers
打点边框，在大多数浏览器中会变为线条
dashed Defines a dashed border. Renders as solid in most browsers
断裂边框，在大多数浏览器下也会变为线条(在IE里dotted和dashed基本无区别，FF浏览器有所不同)
solid Defines a solid border
线条边框
double Defines two borders. The width of the two borders are the same as the border-width value
双线边框。两线的宽度和border-width值一样
groove Defines a 3D grooved border. The effect depends on the border-color value
3D沟槽边框。效果依赖于border-color的值
ridge Defines a 3D ridged border. The effect depends on the border-color value
3D脊状边框。效果依赖于border-color的值
inset Defines a 3D inset border. The effect depends on the border-color value
3D嵌入边框。效果依赖于border-color的值
outset Defines a 3D outset border. The effect depends on the border-color value
3D突出边框。效果依赖于border-color的值
【css】边框border的属性和使用方法
顾名思义，就是元素外面的一圈边框，下图中虚线圈起的部分是内容，外面橙色的一圈是它的边框，可以理解成在照片外面加一个相框，使用border属性。
边框样式border-style必须写！否则其它属性全部失效。
边框的样式：
border后面可跟多个值，中间用空格分离，含义如下：
注意顺序， 边框样式不可省略 ，颜色和宽度可以省略，会显示默认的效果。
——以上规律在padding和margin一样适用。
边框样式border-style必须设置
如果我们的四条边框属性都是一样的，那么统一设置就可以啦，注意边框类型不可省略。
首先我们放置一个宽高为200px的粉色盒子。
接下来我们为它加上一条宽度为10px，样式为实线，颜色为红色的边框。
我们可以看到，添加边框的时候，是在盒子外面套一圈边框，而不是加在里面，在Chrome浏览器中点击右键检查，可以看到div的大小变成了220x220。
套在外面的边框的宽度是会加进盒子尺寸的（上下左右各增加了10px），如果我们想盒子保持大小不变，要对div本身的width和height进行减小，在这个样例中，通过计算可得，减少到180px即可保持大小不变。-border-style
当我们使用点状、虚线等边框样式时，多出来的缝隙，会使用元素本身的 背景颜色 填充。
点和虚线的具体样式，不同浏览器中可能会不一样。
我们为刚刚的盒子设置上边框为红色，左边框为绿色，效果如下图所示：
我们会发现在两条边框交界处的小方块，通过一条对角线分隔，上边框和左边框各占一半。当边框不一样宽时，同样也是用对角线把交界处的小长方形一分为二，如下图所示：
当被添加边框的元素宽度为0，不设置高度（高度默认是0）的情况下，我们可以巧妙利用 边框组合 和 transparent（透明） 绘制三角形，可以体验下哦。
三角形1-css：
三角形2-css：
多彩三角形-css：
绘制梯形只要对应添加宽度或者高度就可以啦
梯形1-css：
梯形2-css：
css设置div只显示某一边的边框
在网页设计中经常用到css来设计各种边框样式以及颜色等，有时候需要一个p只显示一个边框，那么你可能会用到下面的一些方法。
一、CSS border-width 属性
border-width是实现显示边框的重要属性。用法如下：
border-width:top right bottom left
参数说明：
top：上边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。
right：右边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。
bottom：下边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。
left：左边框属性，可以设置像素，也可以设置样式，意思为上边框的宽度。
其中像素如：10px 20px等
内置样式有：
thin：定义细的边框；
medium:默认值，定义中等边框；
thick：定义粗的边框；
inherit：继承父元素的边框宽度。
二、CSS border-style 属性
border-style是用来设置边框线样式的，语法如下：
border-style:样式;
其中可设置的样式有：
none 定义无边框。
hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted 定义点状边框。在大多数浏览器中呈现为实线。
dashed 定义虚线。在大多数浏览器中呈现为实线。
solid 定义实线。
double 定义双线。双线的宽度等于 border-width 的值。
groove 定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge 定义 3D 垄状边框。其效果取决于 border-color 的值。
inset 定义 3D inset 边框。其效果取决于 border-color 的值。
outset 定义 3D outset 边框。其效果取决于 border-color 的值。
inherit 规定应该从父元素继承边框样式。
三、实例应用
只要定义边框不为0，即可显示边框（但是需要定义边框线样式），如果想要只显示下边框就相当于把top、right、left设置为0px；下边框不为0即可。
实例如下：
只显示下边框
显示如下：
如果想要只显示右边框只需要改border-width属性为 0 1px 0 0即可。
