2023年6月20日发(作者：)

在html中元素边框样式三个缺一不可

1.盒子模型：一个盒子由内容区、内边距、边框、外边距组成。

使用width来设置盒子内容区的宽度

使用height来设置盒子内容区的高度

要为一个元素设置边框必须指定三个样式,三个样式缺一不可。

大部分浏览器中，边框的宽度和颜色都是有默认值的，边框样式的默认值是none

border-width：边框的宽度

border-color：边框的颜色

border-style：边框的样式

❶border-width指定四个边框的宽度，分别设置为上、右、下、左方向，按照顺时针方向设置。

❷如果指定三个值，则这三个值分别设置给上、左右、下。

❸如果指定两个值，则这两个值分别设置给上下、左右。

❹如果指定一个值，上下左右全是该值。

除了border-width,CSS中还提供了四个border-xxx-width。

xxx的值可能是top、right、bottom、left。专门用来设置指定边的宽度。

其余两个样式同理。 .box1{

width:100px;

height:100px;

background-color:#bfa;

border-width:10px;

border-color:red;

border-style:solid;

}

设置边框的样式：

可选值：

❶none，默认值，没有边框

❷solid，实线

❸dotted，点状边框

❹dashed，虚线

❺double，双线

边框的简写样式，可以同时设置四个边框的宽度、颜色、样式。没有顺序要求。

但是一指定就是同时指定四个边，不能分别指定。 border-top、border-right、border-bottom、border-left：

单独设置四个边的样式，规则和border一样，只不过是对一个边生效。

3.内边距：指的是盒子的内容区与盒子边框之间的距离。

共有四个方向，可以通过：padding-top、

padding-right、padding-left、padding-bottom来设置四个方向的边距。

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距。

盒子可见框的大小由内容区、内边距和边框共同决定。

使用padding可以同时设置四个边框的样式，规则和border-width一致。

4.外边距：指的是盒子与其他盒子之间的距离。

不会影响可见框的大小，但是会影响到盒子的位置。

盒子有四个方向的外边距：

margin-top、margin-right、margin-bottom、margin-left。

当我们设置上和左外边距时，会导致盒子自身的位置发生改变；

如果设置右和下外边距，则会改变其他盒子的位置。

外边距可以指定为一个负值，如果设置成一个负值，则元素会向反方向移动。

margin还可以设置为auto，auto一般只设置给水平方向的margin。 如果只指定左外边距或右外边距的maigin为auto，则会将外边距设置为最大值。

垂直方向外边距如果设置auto。则外边距默认就是0.

如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，这样就可以使元素自动在父元素中居中，所以我们经常在左右边距设置为auto，以使子元素在父元素中水平居中显示。

外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距。规则和padding一致。

5.垂直外边距的重叠：在网页中垂直方向的相邻外边距会发生外边距的重叠。

外边距重叠是指兄弟元素之间的垂直方向相邻外边距会取最大值而不是取和。

而水平方向的相邻外边距不会重叠，而是求和

如果父子元素的垂直外边距相邻，则子元素的外边距会设置给父元素。

6.默认样式

浏览器为了在页面中没有样式时也能有一个好的显示效果，为很多元素都设置了一些默认的margin和padding。而这些默认样式正常情况下我们不需要使用。所以我们往往在编写样式之前将浏览器中的默认的margin和padding统统去掉。

全部清除浏览器的默认样式：通配选择器。

. {

margin:0;

padding:0;

}

7.内联元素的盒子

内联元素不能设置width和height。

内联元素可以设置水平方向的内边距。

内联元素可以设置垂直方向的内边距，但是不会影响布局。

内联元素可以设置边框，但是垂直的边框不会影响到页面的布局。

内联元素可以设置水平方向的外边距。

内联元素不支持垂直方向的外边距。

y：通过display样式可以修改元素的类型。

可选值：

❶inline，可以将一个元素作为内联元素显示。

❷block，可以将一个元素设置块元素显示。

❸inline-block，将一个元素转换为行内块元素。

可以使一个元素既有行内元素的特点，又有块元素的特点，既可以设置宽高，又不会独占一行。

❹none，不显示元素，并且元素不会在页面中继续占用位置。 lity：可以用来设置元素的隐藏和显示的状态。

可选值：

❶visible，默认值，元素默认会在页面中显示。

❷hidden，元素会隐藏不显示。

ow：通过overflow可以设置父元素溢出的内容

子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区的大小。如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示。超出父元素的内容，我们称之为溢出的内容。

可选值：

❶visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示。

❷hidden，溢出的内容会被修剪，不会显示。

❸scroll，会为父元素添加滚动条，通过拖动滚动条来查看完整内容。

该属性无论内容是否溢出，都会添加水平和垂直双方向的滚动条。

❹auto，会根据需求自动添加滚动条，需要水平(垂直)就添加水平(垂直)，都不需要就都不加。

11.文档流：处在网页的最底层，表示的是一个网页中的位置。

我们所创建的元素默认都处在文档流中。

元素在文档流中的特点： ①块元素：

❶块元素在文档流里会独占一行，块元素会自上向下排列。

❷块元素在文档流中默认宽度是父元素的100%，默认宽度值是auto。

当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距。

❸块元素在文档流中的默认高度被内容(子元素)撑开。

②内联元素

❶内联元素在文档流里只占自身的大小，会默认从左向右排列。

如果一行中不足以容纳所有的内联元素，则会换到下一行，继续自左向右排列。

❷内联元素在文档流里的宽度和高度默认都被内容撑开

12.浮动 float

块元素在文档流中默认垂直排列。如果希望其水平排列，可以使块元素脱离文档流。

使用float来使元素浮动，从而脱离文档流。

可选值：

❶none，默认值，元素默认在文档流中排列。

❷left，元素会立即脱离文档流，向页面的左侧浮动。

❸right，元素会立即脱离文档流，向页面的右侧浮动。 当为一个元素设置浮动以后(float属性是一个非none的值)，元素会立即脱离文档流，元素脱离文档流之后，下边的元素会立即向上移动。

元素浮动之后，会尽量向页面的左上或者是右上漂浮，直到遇到父元素的边框或者其他的浮动元素。

如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。

浮动的元素不会超过他上边的兄弟元素，最多一边齐。

13.浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围。所以可以通过浮动设置一个文字环绕图片的效果。

在文档流中，子元素的宽度默认占父元素的全部。

块元素脱离文档流以后，高度和宽度都会被内容撑开。

内联元素脱离文档流以后会变成块元素。

2023年6月20日发(作者：)

在html中元素边框样式三个缺一不可

1.盒子模型：一个盒子由内容区、内边距、边框、外边距组成。

使用width来设置盒子内容区的宽度

使用height来设置盒子内容区的高度

要为一个元素设置边框必须指定三个样式,三个样式缺一不可。

大部分浏览器中，边框的宽度和颜色都是有默认值的，边框样式的默认值是none

border-width：边框的宽度

border-color：边框的颜色

border-style：边框的样式

❶border-width指定四个边框的宽度，分别设置为上、右、下、左方向，按照顺时针方向设置。

❷如果指定三个值，则这三个值分别设置给上、左右、下。

❸如果指定两个值，则这两个值分别设置给上下、左右。

❹如果指定一个值，上下左右全是该值。

除了border-width,CSS中还提供了四个border-xxx-width。

xxx的值可能是top、right、bottom、left。专门用来设置指定边的宽度。

其余两个样式同理。 .box1{

width:100px;

height:100px;

background-color:#bfa;

border-width:10px;

border-color:red;

border-style:solid;

}

设置边框的样式：

可选值：

❶none，默认值，没有边框

❷solid，实线

❸dotted，点状边框

❹dashed，虚线

❺double，双线

边框的简写样式，可以同时设置四个边框的宽度、颜色、样式。没有顺序要求。

但是一指定就是同时指定四个边，不能分别指定。 border-top、border-right、border-bottom、border-left：

单独设置四个边的样式，规则和border一样，只不过是对一个边生效。

3.内边距：指的是盒子的内容区与盒子边框之间的距离。

共有四个方向，可以通过：padding-top、

padding-right、padding-left、padding-bottom来设置四个方向的边距。

内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距。

盒子可见框的大小由内容区、内边距和边框共同决定。

使用padding可以同时设置四个边框的样式，规则和border-width一致。

4.外边距：指的是盒子与其他盒子之间的距离。

不会影响可见框的大小，但是会影响到盒子的位置。

盒子有四个方向的外边距：

margin-top、margin-right、margin-bottom、margin-left。

当我们设置上和左外边距时，会导致盒子自身的位置发生改变；

如果设置右和下外边距，则会改变其他盒子的位置。

外边距可以指定为一个负值，如果设置成一个负值，则元素会向反方向移动。

margin还可以设置为auto，auto一般只设置给水平方向的margin。 如果只指定左外边距或右外边距的maigin为auto，则会将外边距设置为最大值。

垂直方向外边距如果设置auto。则外边距默认就是0.

如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，这样就可以使元素自动在父元素中居中，所以我们经常在左右边距设置为auto，以使子元素在父元素中水平居中显示。

外边距同样可以使用简写属性margin，可以同时设置四个方向的外边距。规则和padding一致。

5.垂直外边距的重叠：在网页中垂直方向的相邻外边距会发生外边距的重叠。

外边距重叠是指兄弟元素之间的垂直方向相邻外边距会取最大值而不是取和。

而水平方向的相邻外边距不会重叠，而是求和

如果父子元素的垂直外边距相邻，则子元素的外边距会设置给父元素。

6.默认样式

浏览器为了在页面中没有样式时也能有一个好的显示效果，为很多元素都设置了一些默认的margin和padding。而这些默认样式正常情况下我们不需要使用。所以我们往往在编写样式之前将浏览器中的默认的margin和padding统统去掉。

全部清除浏览器的默认样式：通配选择器。

. {

margin:0;

padding:0;

}

7.内联元素的盒子

内联元素不能设置width和height。

内联元素可以设置水平方向的内边距。

内联元素可以设置垂直方向的内边距，但是不会影响布局。

内联元素可以设置边框，但是垂直的边框不会影响到页面的布局。

内联元素可以设置水平方向的外边距。

内联元素不支持垂直方向的外边距。

y：通过display样式可以修改元素的类型。

可选值：

❶inline，可以将一个元素作为内联元素显示。

❷block，可以将一个元素设置块元素显示。

❸inline-block，将一个元素转换为行内块元素。

可以使一个元素既有行内元素的特点，又有块元素的特点，既可以设置宽高，又不会独占一行。

❹none，不显示元素，并且元素不会在页面中继续占用位置。 lity：可以用来设置元素的隐藏和显示的状态。

可选值：

❶visible，默认值，元素默认会在页面中显示。

❷hidden，元素会隐藏不显示。

ow：通过overflow可以设置父元素溢出的内容

子元素默认是存在于父元素的内容区中，理论上讲子元素的最大可以等于父元素内容区的大小。如果子元素的大小超过了父元素的内容区，则超过的大小会在父元素以外的位置显示。超出父元素的内容，我们称之为溢出的内容。

可选值：

❶visible，默认值，不会对溢出内容做处理，元素会在父元素以外的位置显示。

❷hidden，溢出的内容会被修剪，不会显示。

❸scroll，会为父元素添加滚动条，通过拖动滚动条来查看完整内容。

该属性无论内容是否溢出，都会添加水平和垂直双方向的滚动条。

❹auto，会根据需求自动添加滚动条，需要水平(垂直)就添加水平(垂直)，都不需要就都不加。

11.文档流：处在网页的最底层，表示的是一个网页中的位置。

我们所创建的元素默认都处在文档流中。

元素在文档流中的特点： ①块元素：

❶块元素在文档流里会独占一行，块元素会自上向下排列。

❷块元素在文档流中默认宽度是父元素的100%，默认宽度值是auto。

当元素的宽度的值为auto时，此时指定内边距不会影响可见框的大小，而是会自动修改宽度，以适应内边距。

❸块元素在文档流中的默认高度被内容(子元素)撑开。

②内联元素

❶内联元素在文档流里只占自身的大小，会默认从左向右排列。

如果一行中不足以容纳所有的内联元素，则会换到下一行，继续自左向右排列。

❷内联元素在文档流里的宽度和高度默认都被内容撑开

12.浮动 float

块元素在文档流中默认垂直排列。如果希望其水平排列，可以使块元素脱离文档流。

使用float来使元素浮动，从而脱离文档流。

可选值：

❶none，默认值，元素默认在文档流中排列。

❷left，元素会立即脱离文档流，向页面的左侧浮动。

❸right，元素会立即脱离文档流，向页面的右侧浮动。 当为一个元素设置浮动以后(float属性是一个非none的值)，元素会立即脱离文档流，元素脱离文档流之后，下边的元素会立即向上移动。

元素浮动之后，会尽量向页面的左上或者是右上漂浮，直到遇到父元素的边框或者其他的浮动元素。

如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。

浮动的元素不会超过他上边的兄弟元素，最多一边齐。

13.浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围。所以可以通过浮动设置一个文字环绕图片的效果。

在文档流中，子元素的宽度默认占父元素的全部。

块元素脱离文档流以后，高度和宽度都会被内容撑开。

内联元素脱离文档流以后会变成块元素。