老师请看下是否正确以及后面几个问题

来源:2-13 编程练习

yarwood

2020-08-09 08:27:05

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title></title>

<style>

body {

background: #f3f3f3;

}

/*此处补充代码*/

div{

width: 100px;

height: 200px;

border: 5px solid red;

float: left;

/* display: block; */

margin: 15px 50px;

}

.left{

border-radius: 40px 60px 40px 0/40px 30px 40px 0;

transform: rotate(90deg);

margin-left: 100px;

}

.middle{

border-radius: 10px 60px 100px 10px/10px 40px 100px 10px;

}

.right{

border-radius: 15px 40px 10px 40px;/*这里可以省略一个40,15px 40px 10px*/

}

</style>

</head>


<body>

<!--此处补充代码-->

<div class="left"></div>

<div class="middle"></div>

<div class="right"></div>

</body>

</html>


在div选择下面设置display:block变块之后没有成一排,但浮动就可以了,这两个不应该一样的效果吗?

order-radius: 15px 40px 10px 40px;这里有两个40可以简写15px 40px 10px这样写吗?


写回答

2回答

好帮手慕慕子

2020-08-09

同学你好,代码实现正确,针对同学的问题解答如下:

  1. display:block;设置元素表现为块级元素,块级元素默认占据一行显示,所以不会并排显示。

    float:left;设置元素为浮动元素,与display:inline-block;效果是一样的,让元素在一排显示。

  2. 可以简写。

如果我的回答帮助到了你,欢迎采纳,祝学习愉快~

0
harwood
h 还有一个问题,div{margin:15px 50px;}然后再.left里面再设置margin-left,这个数值怎么不是基于上面div的上的,还要大出很多
h020-08-09
共1条回复

好帮手慕慕子

2020-08-09

同学你好,因为div{nargmin:15px 50px}相当于给所有的div设置了左间距50px, 而.lef{margin-left:100px;}相当于单独给类名为left的div元素设置了做间距为100px, 由于.lef{margin-left:100px;}这句代码写在div{nargmin:15px 50px}后面,会覆盖前面设置的50px,所以left元素左侧的间距最终为100px;

祝学习愉快~

0

0 学习 · 40143 问题

查看课程