万奢网-名品奢网名表回收网 › 首页 ›手表回收云资讯› 手表导购 › 查看内容

前端基础知识04 CSS外边距塌陷和样式初始化

2023-4-15 15:39| 发布者: 挖安琥| 查看: 120| 评论: 0

摘要: 外边距塌陷嵌套的两个块元素，给子元素(第一个)设置向上的外边距，此时父元素会跟着掉下来，形成了外边距塌陷。示例代码：!DOCTYPEhtml html head metacharset="utf-8" title/title styletype="te ...

外边距塌陷

嵌套的两个块元素，给子元素(第一个)设置向上的外边距，此时父元素会跟着掉下来，形成了外边距塌陷。

示例代码：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
*{
margin:0;
padding:0;
}

.box{
width:200px;
height:200px;
background:pink;
}

.box.phone{
width:50px;
height:100px;
background:blue;
margin-left:50px;
margin-top:20px;
}
</style>
</head>
<body>
<divclass="box">
<divclass="phone">手机1</div>
<divclass="phone"style="background:yellow;">手机2</div>
</div>
</body>
</html>

解决外边距塌陷问题，主要有以下方案：

1、给父元素设置上边框
2、给父元素设置overflow属性（推荐）
3、给父元素设置浮动
4、给子元素设置浮动

示例：给父元素设置overflow属性（推荐）

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
*{
margin:0;
padding:0;
}

.box{
width:200px;
height:200px;
background:pink;
/*解决外边距塌陷*/
overflow:hidden;
}

.box.phone{
width:50px;
height:100px;
background:blue;
margin-left:50px;
margin-top:20px;
}
</style>
</head>
<body>
<divclass="box">
<divclass="phone">手机1</div>
<divclass="phone"style="background:yellow;">手机2</div>
</div>
</body>
</html>

overflow属性

overflow属性主要用于控制数据溢出效果，可选值有：

hidden：溢出隐藏
scroll：溢出滚动
auto：当内容超出元素时，自动设置滚动条，不超过没有滚动条

示例代码：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.box{
width:300px;
height:300px;
background:pink;
overflow:scroll;
/*强制换行*/
word-break:break-all;
/*强制不换行*/
/*white-space:nowrap;*/
/*字间距*/
letter-spacing:3px;
}
</style>
</head>
<body>
<divclass="box">
床前明月光，疑似地上霜。举头望明月，低头思故乡。床前明月光，疑似地上霜。举头望明月，低头思故乡。床前明月光，疑似地上霜。举头望明月，低头思故乡。
床前明月光，疑似地上霜。举头望明月，低头思故乡。床前明月光，疑似地上霜。举头望明月，低头思故乡。床前明月光，疑似地上霜。举头望明月，低头思故乡。
床前明月光，疑似地上霜。举头望明月，低头思故乡。床前明月光，疑似地上霜。举头望明月，低头思故乡。床前明月光，疑似地上霜。举头望明月，低头思故乡。
</div>
</body>
</html>

块元素居中

要实现块元素居中，需要满足以下要求：

1、块元素有自己的固定宽度
2、块元素的宽度比父元素的宽度小
3、设置左右边距为auto

示例代码：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.box{
width:800px;
height:500px;
background:pink;
text-align:center;
margin:0auto;
}

.one{
width:100px;
height:100px;
background:blue;
/*块元素居中的关键*/
margin:0auto;
}
</style>
</head>
<body>
<divclass="box">
<divclass="one"></div>
</div>
</body>
</html>

并集选择器

并集选择器将多个选择器用逗号分开，实现相同的属性。

示例代码：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.boxspan,.boxp,.box.one{
border:1pxsolidred;
}
</style>
</head>
<body>
<divclass="box">
<span>span</span>
<p>段落</p>
<h1class="one">标题</h1>
</div>
</body>
</html>

清除标签默认样式

默认标签样式主要包括：

所有标签的外边距和内边距
a标签的下划线
无序列表的小黑点
按钮和输入框的边框等

使用并集选择器，能够轻松实现默认标签样式清除。

示例代码：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
/*清除默认样式开始*/
html,body,h1,h2,h3,h4,ul,li,p,input,button,form,table,tr,td,a{
margin:0;
padding:0;
font-size:14px;
font-family:"MicrosoftYaHei","HeitiSC",tahoma,arial,"HiraginoSansGB","\5B8B\4F53",sans-serif;
font-weight:normal;
color:black;
}

a{
text-decoration:none;
}

ul,li{
list-style-type:none;
}

button,input{
border:none;
}

/*清除默认样式结束*/
</style>
</head>
<body>
<divclass="box"></div>
<h1>标题</h1>
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
<p>段落</p>
<ahref="#">超链接</a>
</body>
</html>

img底部留白

由于img是行内块元素，底部和文本的基线对齐，所有会有一部分留白。解决方案：

1、将img转换成块元素，display:block
2、将图片的父标签的字体设置成0

示例代码：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.box{
border:1pxsolidred;
/*解决图片底部留白*/
font-size:0;
}
</style>
</head>
<body>
<divclass="box">
<imgsrc="liuzhiyuan.jpg">
</div>
</body>
</html>

爱宠知识案例

效果预览：

参考代码：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
/*清除默认样式开始*/
html,body,h1,h2,h3,h4,ul,li,p,input,button,form,table,tr,td,a{
margin:0;
padding:0;
font-size:14px;
font-family:"MicrosoftYaHei","HeitiSC",tahoma,arial,"HiraginoSansGB","\5B8B\4F53",sans-serif;
font-weight:normal;
color:black;
}

a{
text-decoration:none;
}

ul,li{
list-style-type:none;
}

button,input{
border:none;
}

/*清除默认样式结束*/

/*主体背景*/
body{
background:#333;
height:3000px;
}

/*盒子样式*/
.box{
width:240px;
background:url(img/bg.gif);
margin:50pxauto0;
padding:10px;
}

/*标题样式*/
.boxh3{
color:#fff;
font-family:"黑体";
font-size:20px;
border-left:4pxsolid#c9e143;
margin-bottom:5px;
padding-left:5px;
}

/*列表样式*/
.box.list{
background:#fff;
}

/*列表项样式*/
.box.listli{
border-bottom:1pxdashed#666;
height:30px;
line-height:30px;
margin:010px;
background:url(img/tb.gif)no-repeat6pxcenter;
}

/*超链接文本样式*/
.box.listlia{
text-decoration:none;
color:#06c;
font-size:12px;
display:block;
padding-left:19px;
}

/*鼠标移入样式*/
.box.listlia:hover{
color:red;
text-decoration:underline;
}
</style>
</head>
<body>
<divclass="box">
<h3>爱宠知识</h3>
<ulclass="list">
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
<li>
<ahref="#">养狗比养猫对健康更有利</a>
</li>
</ul>
</div>
</body>
</html>

新浪微博案例

效果案例：

参考代码：

<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
/*清除默认样式开始*/
html,body,h1,h2,h3,h4,ul,li,p,input,button,form,table,tr,td,a{
margin:0;
padding:0;
font-size:14px;
font-family:"MicrosoftYaHei","HeitiSC",tahoma,arial,"HiraginoSansGB","\5B8B\4F53",sans-serif;
font-weight:normal;
color:black;
}

a{
text-decoration:none;
}

ul,li{
list-style:none;
}

button,input{
border:none;
}

/*清除默认样式结束*/


/*盒子样式*/
.box{
width:238px;
height:212px;
margin:100pxauto0;
border:1pxsolid#d9e0ee;
border-top:3pxsolid#ff8500;
}

/*标题样式*/
.boxh3{
border-bottom:1pxsolid#d9e0ee;
height:35px;
line-height:35px;
font-size:16px;
font-weight:400;
}

/*标题文本*/
.boxh3a{
color:#000;
margin-left:12px;
}

/*标题鼠标移入样式*/
.boxh3a:hover{
color:#ff8400;
}

/*图片样式*/
.box.banner{
width:180px;
height:108px;
background:pink;
margin:7pxauto0;
}

/*图片文本连接样式*/
.box.bannera{
display:block;
height:108px;
background:yellow;
text-decoration:none;
color:yellowgreen;
}

/*图片链接中的文本样式*/
.box.banneraspan{
display:block;
height:21px;
line-height:21px;
background:#000;
color:#fff;
text-align:center;
font-size:14px;
}

/*图片链接中的图片样式*/
.box.banneraimg{
display:block;
}

/*鼠标移入a时,让后代的span........*/
.box.bannera:hoverspan{
color:#ff8500;
}

/*列表样式*/
.box.list{
margin-top:10px;
}

/*列表项样式*/
.box.listli{
line-height:24px;
background:url(img/dian.png)no-repeat9pxcenter;
height:24px;
font-size:12px;
}

/*列表项连接样式*/
.box.listlia{
color:#666;
margin-left:19px;
}

/*列表项连接鼠标移入样式*/
.box.listlia:hover{
text-decoration:underline;
color:#ff8500;
}
</style>
</head>
<body>
<divclass="box">
<h3>
<ahref="#">图片博客</a>
</h3>
<divclass="banner">
<ahref="#">
<imgsrc="img/banner.jpg">
<span>那些培训完的学生都去哪儿了</span>
</a>
</div>
<ulclass="list">
<li>
<ahref="#">高考15分爸爸教四岁女儿学数学</a>
</li>
<li>
<ahref="#">优秀应届毕业生都去了什么行业？</a>
</li>
</ul>

</div>
</body>
</html>