盒子模型

最新推荐文章于 2024-04-28 16:04:57 发布

LINGYIM

最新推荐文章于 2024-04-28 16:04:57 发布

阅读量856

点赞数

本文链接：https://blog.csdn.net/LINGCaes/article/details/103563879

版权

盒子模型相关属性

一、边框属性：包括边框样式属性、边框宽度属性、边框颜色属性、单侧边框属性、边框的综合属性
1、边框样式：border-style
常用属性值：none：默认值没有边框，solid：边框为单实线，dashed：边框为虚线，dotted：边框为点线，double：边框为双实线
设置边框样式时，既可以对盒子的单边进行设置，也可以综合设置4条边的样式，按上右下左的顺时针排序，一个值为四边，两个值为上下/左右，三个值为上/左右/下
2、边框宽度：border-width
设置边框宽度时，既可以对盒子的单边进行设置，也可以综合设置4条边的宽度，按上右下左的顺时针排序，一个值为四边，两个值为上下/左右，三个值为上/左右/下，设置边框宽度的同时必须设置边框样式，否则无效
3、边框颜色：border-color
设置边框颜色时，既可以对盒子的单边进行设置，也可以综合设置4条边的颜色，按上右下左的顺时针排序，一个值为四边，两个值为上下/左右，三个值为上/左右/下，设置边框颜色的同时必须设置边框样式，否则无效
4、综合设置边框属性：border:四边宽度样式颜色
宽度、样式、颜色顺序任意，不分先后，但样式不能省略

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>边框属性</title>
  <style type="text/css">
   p{
    border-style: solid dashed dotted double;/*边框样式 上右下左*/
    border-width: 5px 10px 15px;/*边框宽度  上/左右/下*/
    border-color: red blue; /*边框颜色  上下/左右*/
   }
   .q1{border: 5px solid blue;}
  </style>
 </head>
 <body>
  <p>边框属性值</p>
  <p class="q1">综合设置边框</p>
 </body>
</html>

在这里插入图片描述二、内边距属性：padding
设置内边距属性时，既可以对盒子的单边进行设置，也可以综合设置4条边的边距，按上右下左的顺时针排序，一个值为四边，两个值为上下/左右，三个值为上/左右/下
padding相关属性的取值可为auto自动(默认值)、不同单位的数值、相对于父元素宽度的百分比%，实际工作中最常使用的是px，不允许使用负值
三、外边距属性：margin
设置外边距属性时，既可以对盒子的单边进行设置，也可以综合设置4条边的的边距，按上右下左的顺时针排序，一个值为四边，两个值为上下/左右，三个值为上/左右/下
margin属性可以使用负值，使相邻元素重叠。当对块级元素应用宽度属性width，并将左右的外边距都设置为auto时，可使块级元素水平居中，使用margin定义块元素的垂直外边距时，可能会出现外边距的合并

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>边距属性</title>
  <style type="text/css">
   .q1{border: 5px solid blue;/*设置边框*/
       padding: 20px;/*设置内边距*/
   }
   .q2{
    border: 5px solid blue;/*设置边框*/
    margin: 5px;/*设置外边距*/
   }
  </style>
 </head>
 <body>
  <p class="q1">设置内边距</p>
  <p class="q2">设置外边距</p>
 </body>
</html>

在这里插入图片描述
四、背景属性：background
1、背景颜色：background-color
属性值：可使用预定义的颜色值、十六进制#RRGGBB或RGB代码 rgb(r,g,b)，默认值为transparent，即背景透明
2、背景图像：background-image
可以作为网页元素的背景，
3、背景图像平铺：background-repeat
默认情况下，背景图像会自动向水平和竖直两个方向平铺
repeat：沿水平和竖直两个方向平铺(默认值)，no-repeat：不平铺(图像位于元素的左上角，只显示一次)，repeat-x：只沿水平方向平铺，repeat-y：只沿竖直方向平铺。当背景图像和背景颜色同时存在时，背景图像优先显示
4、背景图像的位置：background-position
在CSS中，background-position属性的值通常设置两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标
(1)使用不同单位(最常用的是px)的数值，直接设置图像左上角在元素中的坐标(2)使用预定义的关键字，指定背景图像在元素中的对齐方式(3)使用百分比:按背景图像和元素的指定点对齐
5、背景图像的固定：background-attachment
属性值：scroll：图像随页面元素一起滚动(默认值)，fixed：图像固定在屏幕上，不随页面元素滚动
6、综合设置元素的背景：background：背景色 url(“图像”) 平铺定位固定
在方面的语法格式中，各个样式顺序任意，中间用空格隔开

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>背景属性</title>
  <style type="text/css">
   body{background-color: blue;/*设置背景颜色*/
   background-image: url(hzw3.jpg);/*设置背景图片*/
   background-repeat: no-repeat;/*设置背景图像平铺*/
   background-position: top center;/*设置背景图像的位置*/
   background-size: 700px;
   }
  </style>
 </head>
 <body>
 </body>
</html>

在这里插入图片描述
五、盒子的宽与高
width:宽度属性，heigh：高度属性
盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和
盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和
width和height仅适用于块级元素，对行内元素无效(标记和除外)
计算盒子模型的总高度时，还应考虑上下两个盒子垂直外边距合并的情况

元素的类型和转换

一、元素的类型
1、块元素：特点：每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建
常见的块元素有<h1>~<h2>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标记是最典型的块元素
2、行内元素：特点：不必在新的一行开始，同时，也不强迫其他的元素在新的一行显示，它们不占有独立的区域，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文字的样式
常见的行内元素有<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<a>、<span>等，其中<span>标记是最典型的行内元素
在行内元素中有几个特殊的标记<img/>、<input/>、<td>，可以对它们设置宽高和对齐属性，有些资料称其为行内元素
在行内元素中有几个特殊的标记<img/>、<input/>、<td>，可以对它们设置宽高和对齐属性，有些资料称其为行内块元素
二、<div>与<span>标记
1、<div>标记：一个区块容器，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局，div标记之间相当于一个容器，可以容纳段落、标题、表格、图像等各种网页元素

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>div标记</title>
  <style type="text/css">
   .a1{line-height: 30px;
    width: 1000px;
    height: 100px;
    background-color: #0000FF;
    text-align: center;}
   .a2{width: 1000px;
    height: 200px;
    background-color: red;}
  </style>
 </head>
 <body>
  <div class="a1">
   <h2>div标记</h2>
   </div>
  <div class="a2">
   <p>盒子模型</p>
  </div>
 </body>
</html>

在这里插入图片描述
2、<span>标记
行内元素，span标记之间只能包含文本和各种行内标记，可以嵌套，常用于定义网页中某些特殊显示的文本，配合class属性使用
三、元素的转换，display属性
inline：显示为行内元素，block：显示为块元素，inline-block：显示为行内块元素，可以对其设置宽高和对齐等属性，但不会独占一行，none：元素将被隐藏，不显示，也不占用页面空间，相当于元素不存在

块元素垂直外边距的合并

1、相邻块元素垂直外边距的合并
当相邻的两个块元素相遇时，上面的元素有下外边距，下面的元素有上外边距，则它们之间的垂直间距不是两个之和，而是两者中的较大者
2、嵌套块元素垂直外边距的合并
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会于子元素的上边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并

LINGYIM

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
盒子模型

盒子模型相关属性一、边框属性：包括边框样式属性、边框宽度属性、边框颜色属性、单侧边框属性、边框的综合属性1、边框样式：border-style常用属性值：none：默认值没有边框，solid：边框为单实线，dashed：边框为虚线，dotted：边框为点线，double：边框为双实线设置边框样式时，既可以对盒子的单边进行设置，也可以综合设置4条边的样式，按上右下左的顺时针排序，一个值为四...
复制链接

扫一扫