作为一个例子,我想在深色背景的背景上放置白色文字。
第二步:将图像和字母放在一个div元素中
将图像和字母放在一个div标签中。在示例中,将文字“万里长城”放在p标记中。当然您可以使用标题标签而不是p标签,也可以使用span标签。
1
2
3
4
<div class = "example" >
<img src="image/greatwall.jpg">
<p>万里长城</p>
</div>
第三步:指定position属性
为每个元素设置css的position属性。
对作为父元素的div指定为position:relative,以及对包含该字符串的p标签设置为absolute。img标签不动。
把p标签的位置设置为top:0left:0。
为了把图像放在横向上,请指定为img标签的宽度为width : 100%。
1
2
3
4
5
6
7
8
9
10
11
12
.example{/*父元素div*/
position: relative/*相対定位*/
}
.example p {
position: absolute/*绝対定位*/
color: white/*文字设为白色*/
top: 0
left: 0
}
.example img {
width: 100%
}
所有HTML元素都可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model):
盒子模型组成以及对应区域
盒子模型的组成:
Margin(外边距) - 清除边框外的区域,外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域,内边距是透明的。
Content(内容) - 盒子的内容,显示文本和图像
以上是html中盒子模型的结构,每个元素都可以用这个盒子模型来解析。在开发中,一个元素的样式表现形式,也是由这个盒子模型的每个部分来表现的。对应到css中样式的属性有一下几个纬度——
width, height, padding, border, margin。由于在不同的浏览器中,这几个属性所表示的盒子模型中的部分有所差异,所以又分为了标准盒子模型和怪异盒子模型。
一,标准盒子模型
解释:在标准盒子模型下
(1)css中的width, height属性,分别表示的是盒子模型中content的宽度和高度。
(2)css中的padding,表示的是盒子模型的的padding部分。
(3)css中的border,表示的是盒子模型中的border部分。
(4)css中的margin,表示的是盒子模型中的margin。
二,怪异盒子模型(ie盒子模型)
解释:在怪异盒子模型下
(1)css中的width, height属性,分别表示的是盒子模型中content的宽度和高度加上盒子模型中padding和border的宽度。
(2)css中的padding,表示的是盒子模型的的padding部分。
(3)css中的border,表示的是盒子模型中的border部分。
(4)css中的margin,表示的是盒子模型中的margin。
**段落性总结 —— 标准盒子模型和怪异盒子模型的区别**
从上述的内容可以看出,标准盒子模型和怪异盒子模型的区别,完全体现在css中width和height这两个属性对盒子模型的表现上。
标准盒子模型:css中width/height=content的width/height
怪异盒子模型:css中width/height=content的width/height+padding+border
导致的结果:
由于标准盒子模型和怪异盒子模型的存在,这就导致当同一段css代码作用在同一个元素上时,在不同盒子模型下的浏览器中,元素所占的宽度和高度却不同。
三,css3中box-sizing下的盒子模型
语法:(属性)box-sizing: (属性值)content-box/border-box/inherit;
box-sizing对盒子模型的影响:
(1)当“box-sizing“的值为”content-box“时,css中的width所包含的部分是盒子模型中content的宽度。此时和标准盒子模型表现一致。
(2)当“box-sizing“的值为”border-box“时,css中的width所包含的是盒子模型中的content的宽度+padding+border的宽度。此时和怪异盒子模型的表现一致。
总结:box-sizing属性,让开发人员可以控制浏览器的是以标准盒子模型表现,还是以怪异盒子模型表现。
box-sizing的兼容性:
到此盒子模型的所有内容全部阐述完毕。
最佳方案:由于box-sizing的兼容性在ie8及以上,那在不要求兼容ie8一下的项目中,可以使用box-sizing给所有元素统一设置盒子模型的表现形式。个人推荐:
*{box-sizing:'border-box'}这样只要设置的width的宽度,就是这个元素在页面中真实的宽度了。不用再去计算padding和border对width的影响。
对于需要兼容ie8的项目,就需要针对不同的浏览器,添加特定的代码。或者避免指定宽度的元素border和padding的设置。
相关内容:
1.行内元素之间的水平margin,即两个元素margin之和。
2.块级元素之间的竖直margin, 即取最大的。
3.嵌套盒子之间的margin,即父元素的padding+子元素的margin
4.margin可以设置为负值
不同浏览器的css前缀:Element {
-moz-box-sizing: content-box
-webkit-box-sizing: content-box
-o-box-sizing: content-box
-ms-box-sizing: content-box
box-sizing: content-box
}
参考:
w3c标准:https://www.runoob.com/cssref/css3-pr-box-sizing.html
使用定位来写的,首先一个大盒子装着图片,
然后一个盒子装着头像和文字,把装着头像和文字
的盒子根据装着图片的盒子进行定位就可以了,
像这样的其实很简单的,要多思考和分析
代码,要注意图片你要自己放图片,和修改图片路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>图片上放文字</title>
<style type="text/css">
html,body{
margin:0
}
.auto-img{
display: block
width:100%
}
.box{
width:100%
margin-top: 50px
}
.box-cent{
width:50%
margin:0 auto
position: relative
}
.texbox{
position: absolute
width:50%
line-height: 80px
background-color: #0f0
text-align: center
top:50%
left:50%
transform: translate(-50%, -50%)
}
</style>
</head>
<body>
<div class="box">
<div class="box-cent">
<img class="auto-img" src="images/000.jpg"/>
<div class="texbox">我是用来装头像和文字的盒子</div>
</div>
</div>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)