PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > 盒子模型及属性-***线上九期

盒子模型及属性-***线上九期

邯郸易住宋至刚
邯郸易住宋至刚 原创
2019年11月09日 22:12:58 1542浏览

一、默写盒子的全部属性及应用场景

  1. 盒子的属性有widthheightbackgroundmarginpaddingborder
  2. marginpaddingborder三个属性具有方向性:按照顺时针方向依次排列,如:margin-topmargin-rightmargin-bottommargin-left

二、box-sizing解决了什么问题,不用它应该怎么处理?

  1. 在内容大小一定的情况下,如果添加内边距和边框,那么整个盒子的大小就会增大,如果还想保持盒子原来的大小,那就必须重新定义内容的大小,这样每调整一次内边距和边框,都要重新设置内容的大小 ,是很麻烦的一件事,如果使用了box-sizing属性,那么不论怎么改变边框和内边距,盒子的大小都不会再改变了,都会保持原来的大小。

三、盒子外边距之间的合并是怎么回事,并实例演示。

  1. 当两个同级盒子按照默认顺序时行上下排列的时候,在不设置外边距的情况下,两只盒子是紧紧贴在一起的,中间没有距离的。
  2. 代码如下:

实例
……

<div class="box1"></div>

<div class="box2"></div>
……

样式规则:

div {
box-sizing: border-box;
}

.box1 {
width: 100px;
height: 100px;
background-color: lightblue;
}

.box2 {
width: 150px;
height: 150px;
background-color: lightgreen;
}

运行实例结果如下图:

1.png

  1. 当给上边的盒子设置外边距为20px时,两只盒子之间的距离就会有20px
  2. 样式代码如下:

实例
.box1 {
margin-bottom: 20px;
}

运行实例如下图:

2.png

  1. 当下边的盒子也设置上边外边距为30px时,此时两个盒子之间的距离不是20+30,实际上只有30px,这种现象就叫做外边距的合并。
  2. 样式代码如下:

实例
.box1 {
margin-bottom: 20px;
}

.box2 {
margin-top: 30px;
}

运行实例结果如下图:

3.png

  1. 手抄代码如下:

4.jpg

总结:两只盒子之间的距离,就是两个盒子相邻边距中的较大的值。

四、嵌套盒子之间内边距与外边距的表现有何不同,如何处理?

  1. 如果是两只嵌套的盒子,那么子盒子会默认贴在父盒子的左上角。如果想让子盒子离开父盒子的上边线,依靠设置子盒子margin-top属性值是做不到的,如果设置,子盒子的外边距会传导给父盒子,成为父盒子的外边距。因此要想让子盒子离开父盒子的上边线,可以通过设置父盒子的上内边距来实现。
  2. 代码如下:

实例
……

<div class="box3">
<div class="box4"></div>
</div>
……
样式规则:
.box4 {
margin-top: 30px;
}

运行实例结果如下图:

5.png

  1. 设置父盒子的上边内边距,让子盒子离开父盒子的上边线,代码如下:

实例
.box3 {
padding-top: 30px;
}

运行实例结果如下图:

7.png

  1. 手抄代码:

8.jpg

五、背景色的线性渐变

HTML代码如下:
`<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>背景控制</title>
<link rel="stylesheet" href="static/css/style3.css">
</head>

<body>

<div class="box"></div>
</body>
</html>`

基本CSS样式代码:
`.box {
width: 450px;
height: 500px;
box-sizing: border-box;
}

/背景色/
.box {
background-color: lightgreen;
}
/通过边框间隙,可以看到背景色会自动延伸到内边距, 边框/

/背景裁切: 设置背景的覆盖范围, 也适用于背景图片/
.box {
/默认: 包括内边距与边框/
background-clip: border-box;

  1. /*只到内边距,不包括边框*/
  2. /*background-clip: padding-box;*/
  3. /*内容区*/
  4. /*background-clip: content-box;*/

}

/背景色渐变/

/为了更好的演示效果, 将边框设置为实线样式/
.box {
border: 1px solid gray;
}

线性渐变

1、从绿到白, 默认从上到下方向渐变

CSS代码如下:
.box {
background: linear-gradient(green, white);

运行实例结果如下图:

2、向右渐变

CSS代码如下:
`.box {
background: linear-gradient(to right,green, white);
}
运行结果如下图:

3、向左渐变

CSS代码如下:
.box {
background: linear-gradient(to left,green, white);

运行结果如下图:

4、向右下渐变

CSS代码如下:
.box {
background: linear-gradient(to right bottom,green, white);

运行结果如下图:

5、角度渐变

CSS代码如下:
.box {
background: linear-gradient(30deg,green, white);

运行结果如下图:

六、实例演示背景图片大小与位置的设定

(一)背景图片大小的设定

1、设置背景图片

CSS代码如下:
.box {
background-image: url(“../images/dog.jpg”);
background-repeat: no-repeat;

2、设置背景图片的大小

(1)图片等比例填充,完全覆盖盒子

CSS代码如下:
.box {
background-size: cover;

运行结果如下图:

(2)图片完全填充

CSS代码如下:
.box {
background-size: contain;

运行结果如下图:

3、设置背景图片的位置

1、水平、垂直居中

CSS代码如下:
.box {
background-position: center center;

运行结果如下图:

2、水平居左、垂直居中

CSS代码如下:
.box {
background-position: left center;

运行结果如下图:

2、水平居右、垂直居下

CSS代码如下:
.box {
background-position: right bottom;

运行结果如下图:

手抄代码如下:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议