CSS关于行内/块模式转换的小小小例子
本帖最后由 肖-肖 于 2021-4-26 17:42 编辑实现效果
简单分析
知识点清单
<!-- 3.26
a标签的模式转换,将它原本的行内模式转换为行内块模式，即可设置宽高和在同一行上
连接伪类选择器实现鼠标放上去更换背景图片的效果。注意的是不要设置a的:hover,因为那样的话
会将所有的都改为1个图片不是吗？
-->
源代码
我还是觉得这么个小案例太小了,再加一个小案例-》padding应用的小案例{:10_324:}
效果图如下:
知识点清单
<!--
因为鼠标放上去是一片区域变化且可点击超链接，所以要设置a的宽高，设置宽高就要
改变原有的模式。但是因为文字长度不一样所以不方便给a宽度。所以高度可以给，但是宽度不要给
而是用padding值挤开就可以了。
padding不好的地方如下:
padding-left等等的使用会影响父盒子的宽度或高度。比如你原先的父盒子为230px,但是你设置它内部子盒子的属性为padding-left
那么父盒子的宽度会为260px.
-->
源代码
现边在说下怎么克服padding带来的不好滴影响!{:10_324:}
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>padding不影响盒子大小的情况</title>
<style>
h1{
/* 再来假设加了width属性 padding会不会影响宽度 会出现水平滚动条*/
/* width: 100%; *//*所以不写了呗*/
/* 只知定高度而不指定宽度，如果你给一个盒子不指定宽度则默认是根它的父亲是一样宽的 h1的父亲是body
body就是浏览器的宽度 所以h1适合浏览器一样宽的 */
height: 200px;
background-color: pink;
/* 下边给padding值来测试 */
padding:30px;/*发现宽度没有变化 高度变大了变成了260px 因为你上边和下边各有30px嘛*/
}
div{
width: 300px;
height: 100px;
background-color: purple;
}
div p{
/* 加上宽度则会超出60px 超出父亲的宽度 */
/* width: 100%; */
padding:30px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 第一种情况 -->
<h1>
</h1>
<!-- 第二种情况 -->
<div>
<p>
<!-- 按道理来说p是块级元素和父亲是一样宽的 现在没有指定宽度在使用padding值同样道理不会撑大盒子
它的父亲是300px如果在指定p的padding:30px会不会影响宽度变为360px? -->
</p>
</div>
</body>
</html>
效果图/结论图如下:
完
页:
[1]