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

<!DOCTYPE html>

<head>

<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>

</body>

</html>

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

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

yarwood 2020-08-09

源自：项目：CSS3实现汉克狗案例 2-13 编程练习

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2020-08-09 10:54:40

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

display:block;设置元素表现为块级元素，块级元素默认占据一行显示，所以不会并排显示。
float:left;设置元素为浮动元素，与display:inline-block;效果是一样的，让元素在一排显示。
可以简写。

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

收起回答

yarwood 提问者 #1

还有一个问题，div{margin:15px 50px;}然后再.left里面再设置margin-left，这个数值怎么不是基于上面div的上的，还要大出很多

2020-08-09 11:00:21

好帮手慕慕子 2020-08-09 13:36:17

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

祝学习愉快~

收起回答