border上下左右顺序(设置border四个边属性的顺序)

请问HTML语言中bordor属性怎么用?

1.border就是边框的意思，它定义的是块级元素（有这个属性display:block），元素的边框 (border) 是围绕元素内容和内边距的一条或多条线；

2.边框的属性：有宽度（width),样式(style),颜色(color)，如果一起定义可以这样；在css中，img{ border:5px solid red };定义所有图片的样式。

3.边框还可以单独定义，按上右下左 （top-right-bottom-left ）的顺序；如，p.aside {border-style: solid dotted dashed double;}这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。

1）如果，只有3个规则，如p.aside {border-style: solid dotted double;}表示，上、左右、下；2）如果，只有2个规则，如p.aside {border-style: solid double;}表示，上下、左右。

3）1个规则，就不用说了，表示四个方向都遵守这个规则。

另外，还可以这样：p {

border-style: solid;

border-top-width: 15px;

border-right-width: 5px;

border-bottom-width: 15px;

border-left-width: 5px;

}

4.在css文件(以.css后缀)中，如a.css。一，定义全部元素用通配符"*"号：如，*{padding:0px;margin:0px} 二，定义标签元素(tagname)直接写，如p{规则；}、div{规则；}等；三，定义类元素(class)用"."，如html中有p class="aside"abc/p,css文件中用.aside{规则}定义样式；四，定义id用"#",如html中有p id="aside"abc/p,css文件中用#aside{规则}定义样式；至于id与class的区别，就不说了。

5.border的详解，在这：

对了，引用css用link。

常用border的四个属性设置的顺序是什么?

border的属性好像只有三个，顺序没有严格要求，不过一般都是width、style、color。

比如: border: 1px solid red;

谢谢采纳！

padding、border的赋值规则是什么？

padding

有一个值的情况下：上下左右都使用该值；

有两个值的情况下：第一个值是上下，第二个值是左右；

有三个值的情况下：第一个值是上，第二个值是左右，第三个是下；

有四个值的情况下：依次是 上右下左；

border一般形式是

border: 1px solid #F00; // 宽度 样式 颜色

其中 宽度 和 颜色可以不指定；会呈现默认形态；

样式不指定 会没有边框，因为默认值是none

边框相关的三个样式

边框（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个值和[自动补全]=父元素的宽度）

在水平方向，有三个值可以设置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号?