CSS入门七
2020-12-11 本文已影响0人
码农修行之路
图片样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>图片样式</title>
<style type="text/css">
img {
/*设置图片宽高*/
width: 200px;
height: 200px;
/*设置图片边框*/
border: 2px solid #00f;
/*设置图片与边框的内边距*/
/*padding: 10px 10px;*/
/*设置图片的外边距*/
margin: 10px 10px;
}
/*鼠标悬浮上面的图片样式*/
img:hover {
border: 2px solid #f00;
}
/*图片在盒子里面水平对齐方式*/
.d_img {
/*盒子大小*/
width: 500px;
height: 300px;
/*盒子样式 添加边框 方便看图片在盒子中的位置*/
border: 1px solid #000;
/*text-align: right;*//*水平居右*/
/*text-align: center;*//*水平居中*/
text-align: left;/*水平居左*/
}
/*vertical-align 定义行内元素相对于该元素的垂直对齐方式*/
.img_child {
/*图片在盒子垂直位置*/
/*vertical-align: top;*//*上*/
/*vertical-align: middle;*//*中
/*vertical-align: bottom;*//*下*/
/*vertical-align: baseline;*//*基线对齐*/
/*文字环绕*/
/*float: left;*//*图片在左边 文字右环绕*/
float: right;/*图片在右边 文字左环绕*/
}
</style>
</head>
<body>
<div class="d_img">
<img class="img_child" src="../../img/android.png" alt="格式不对" />
<p>文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</p>
</div>
</body>
</html>
- 图片边框样式：悬浮、水平、宽高、内外边距、环绕
- vertical-align 定义行内元素相对于该元素的垂直对齐方式
盒子
- 盒子模型理论 所有的元素都可以看成一个盒子
- 盒子模型是由内容、内边距、外边距、边框四个属性部分组成 此外还有宽高属性
- 内容区：就是盒子中心位置区域 主要呈现盒子的内容（文本 图片等）内容区是盒子必要组成部分 其它3个属性都是可选
内容区属性：width（宽）height（高 ）overflow（溢出）:内容多出内容区所占范围时，可以使用溢出属性来指定处理方法 - 内外边距：内边距（padding）是指内容区域边框和内容之间的间距 外边距（margin）是指内容区两个盒子之间的间距（两个盒子边界相邻的间距）
- 边框（border）：盒子的修饰框 有多重属性可操作
