代码中有三个问题，麻烦老师解答一下，辛苦了

<!DOCTYPE html>

<html>

<head>

/*重置页面样式！*/

*{padding: 0;

margin: 0;}

ul{list-style-type: none;}

a{text-decoration: none;}

/*本页面样式*/

.container{width: 1200px;

margin: 0 auto;}

.header{

background-color: gray;

overflow: hidden;

zoom:1;}

.logo{width:200px;height:80px;float:left;padding-left: 20px;}/*为何此处宽高设置任何值都无效?*/

.nav{float: right;

overflow: hidden;

zoom:1;}

li{float: left;margin-right: 20px;}

li a{padding:0 20px;

line-height: 80px;/*这里直接设置行高(视为单行文本)等于元素高度不就行了吗？不必像视频中那样还要转化成block*/

font-family: '微软雅黑'; /*单引号和双引号有何区别？*/

font-size:16px;

color: #333;}

li a:hover{color: white;}

.main{width: 1200px;overflow: hidden;room:1;}

.con{width: 1000px;height: 500px;background-color: blue;float: left;}

.sidebar{width: 200px;height: 500px;background-color: orange;float: left;}

.footer{width: 1200px;height: 50px;background-color: red;}

</style>

</head>

<body>

</ul>

</div>

<div class="con">content</div>

<div class="sidebar">sidebar</div>

</div>

<div class="footer">footer</div>

</div>

</body>

</html>

情人节礼物 2019-03-16

源自：float浮动 3-3 Float案例演示（3）

收起

2回答

卡布琦诺 2019-03-17 11:56:18

第一，虽然logo的宽度和高度设置在了div上，但是在div内嵌套了a标签。a标签内嵌套的img标签。这样的话，div上设置的宽度和高度作用不到img上，你也可以直接设置：

第二，有的时候回给每个导航项设置固定的宽度的高度，所以这个时候就需要先设置display:block；但是如果你不想给导航项设置固定宽度，就不用设置display:block；

祝学习愉快！

收起回答

卡布琦诺 2019-03-17 11:18:10

1、因为img标签包裹在a标签内，a标签是行内标签，因此可参考设置如下：

2、导航的a标签如果不设置宽高度的情况下不需要设置display:block;直接设置line-height: 80px;即可

3、设置字体的时候，双引号和单引号都可以，实现的效果是一样的

希望可以帮到你！

收起回答

提问者情人节礼物 #1

针对回复追问：1. 是的，img与a标签均为行内标签。但是.logo{width:200px;height:80px;}设置的是div块标签的宽高呀，为何也无效？ 2.导航的a标签如果【不设置宽高度】的情况下...对这句话有疑问：a标签为行内标签，设置宽高不是无效吗？

2019-03-17 11:44:45
很多本正经的男人回复提问者情人节礼物 #2

你好！以下是我个人理解： 1、纠正下 img是替换元素是可以设置宽高以及内外边距等属性和块级元素一样。img是替换元素还有其他两个，这个你可以去复习一下盒子模型。在这里父元素div是a标签和img标签的容器，div的宽高是根据img图片大小来设置的，不给img设置宽高为了优化代码，a标签只是给logo设置超链接属性无需计较他的宽高。 2、 height是对于框架结构或者图片来设置的，line-height用于文字。在导航栏的a标签里装的是文本内容，line-height和height设置同样的高度是针对文本内容垂直居中对齐，在这个里直接设置line-height是可以实现同样的效果省去height也是优化代码。

2019-03-26 22:39:11