老师看看对不喽~后附一个问题
来源:4-6 自由编程
慕仰5120631
2021-03-30 15:43:59
HTML部分
<div class="banner">
<!-- banner图片 -->
<div class="bannerImage">
<img src="./images/banner3.jpg" alt="">
</div>
<!-- banner遮罩层 -->
<div class="bannerzz">
</div>
<!-- banner表单 -->
<div class="bannerTable">
<form action="">
<div>
<input class="t1" type="text" placeholder="your Name">
</div>
<div>
<input class="t1" type="text" placeholder="your phone">
</div>
<div>
<input class="t1" type="email" placeholder="your Email">
</div>
<div>
<textarea class="t2" name="" id="" cols="40" rows="4">Write your comment here</textarea>
</div>
<div class="send">
<input class="send" type="submit" value="send message">
</div>
</form>
</div>
</div>
CSS部分
/* banner */
.banner{
position: relative;
height: 600px;
}
.banner .bannerImage img{
width: 100%;
height: 600px;
}
.banner .bannerzz{
position: absolute;
top: 0;
left: 0;
height: 600px;
width: 100%;
background: rgba(1,0, 0, 0.5);
}
.banner .bannerTable{
position: absolute;
height: 350px;
width: 504px;
/* background-color: red; */
top: 100px;
left: 50%;
margin-left: -252px;
}
.banner .bannerTable form{
width: 100%;
height: 100%;
text-align:center;
}
.banner .bannerTable form div .t1{
width: 504px;
height: 40px;
margin-bottom: 20px;
background: none;
border: 2px solid #808080;
color: #808080 ;
}
.banner .bannerTable form div .t2{
width: 504px;
height: 110px;
margin-bottom: 20px;
background:none;
border: 2px solid #808080;
color: #808080 ;
}
.banner .bannerTable form div .send{
width: 200px;
height: 40px;
background:none;
border: 2px solid #808080;
color: #808080;
font-size: 15px;
}
问题描述:
老师,为什么我在form里填写字font-size或者color属性,不会继承到后面的input里,但是text-align:center;属性却可以继承。
1回答
同学你好,对于你的问题解答如下:
1、由于input设置了边框,并且有默认的内边距,导致实际宽度超出了表单宽度,所以整体水平居中存在误差,如下图所示:

建议:使用通配符去除所有元素默认的内外边距

然后调整form表单的宽度,让其包裹里面的子元素。

2、建议优化:样式相同的代码,可以使用组合选择器书写在一起,简化代码书写,示例:

3、因为input标签比较特殊,无法继承先辈元素设置的font-size属性,作为一个知识点,特殊记忆下即可。
祝学习愉快~
相似问题
回答 1
回答 1
回答 1
回答 1
回答 1