#前端学习笔记#day5_1 行内元素盒模型 实练
垂直方向布局
如果子元素从父元素中溢出使用overflower
overflow:scroll； 生成滚动条
overflow:auto; 自动的滚动条
overflow-x:
overflow-y:
外边距的折叠
垂直外边距的折叠
相邻的垂直方向外边距，会发生重叠现象（兄弟元素：box1和box2如果是垂直方向相邻，box1的margin-bottom和box2的margin-top是会重叠的）
兄弟元素：相邻垂直外边距会取两者之间的较大值（都是正值）
如果相邻的外边距一正一负，则取两者的和
兄弟元素之间外边距的重叠对于开发是有利的，所以我们不需要进行处理
父子元素：父子元素间的相邻边距，子元素会传递给父元素（上外边距）
父子外边距的折叠会影响页面的布局，必须要进行处理（padding或者boder-top:1px red solid把外边距隔开了，但是盒子高度变高了，可以从height中减去1）
行内元素间盒模型
行内元素不支持设置宽度和高度（span）
行内元素可以设置padding，但是垂直方向的padding不会影响页面布局
行内元素可以设置border，但是垂直方向的border不会影响布局
行内元素可以设置margin，但是垂直方向不会影响布局
因为a也是行内元素，所以没法设置宽和高
display用来设置元素显示的类型（在style里面设置）
可选值：inline将元素设置成行内元素
block将元素设置成块元素
inline-block行内块元素，宽和高都可以变，不会独占一行
display:none 可以隐藏一个元素（隐藏了，且位置也不存在了）
visibility：
可选值：
visible，默认值，在页面中正常显示
hidden，元素在我们页面中隐藏（虽然隐藏了，但是位置依然存在）
浏览器的默认样式
可以将其去掉
p{
margin: 0;
}
exercise
图片列表
.img li:not(:last-child){
width: 100%;
margin-bottom: 9px;
}
最后一个元素不设置
创建外部容器 nav div
. item:hover{
background-color: red;
}
鼠标移入后的状态显示
padding-left: 18px;
设置右边距是为了将文字向内移动
.item a{
color: black;
}
注意，这边的a前面没有.
text-decoration: none;
去除文本下划线
font-weight: bold;
设置文本加粗效果
<!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>3</title>
<link rel="stylesheet" href="./css/reset.css" />
<style>
body{
background-color: #bfc;
}
.new-warapper{
width: 300px;
height: 357px;
/* 设置居中 */
margin:50px auto;
/* 设置背景颜色 */
background-color: #fff;
/* 设置上边框 */
border-top: 1px solid #ddd;
}
.news-title{
/* 为了使得边框和文字宽度一致，将h2转换为行内块元素 */
display: inline-block;
height: 30px;
border-top: red 1px solid;
/* margin-top是移动自己的，正值往下走，负值往上走，移动h2盖住上边框 */
margin-top:-1px;
padding-top: 10px;
}
.news-title a{
color:#40406B ;
text-decoration: none;
font-weight: bold;
}
.img h2{
color: #fff;
margin-top: -30px;
font-weight: bold;
padding-bottom: 15px;
padding-left: 20px;
}
.img{
height: 150px;
}
.new-list{
padding-top: 20px;
padding-left: 14px;
}
.new-list li{
margin-bottom: 17px;
}
.new-list li a{
font-size: 14px;
color: #666;
}
.new-list li a:hover{
color: red;
}
</style>
</head>
<body>
<div class="new-warapper">
<!-- 创建标题 -->
<h2 class="news-title"><a href="#">体育</a></h2>
<div class="img">
<a href="#">
<img src="./img/03/1.jpg" alt="" />
<!-- 创建图片标题 -->
<h2>费德勒首负迪米 扶额头表示不满</h2></a>
</div>
<!-- 新闻列表 -->
<ul class="new-list">
<li><a href="#">乔治：我爱LA 喜欢和LBJ一起打球</a></li>
<li><a href="#">格林：三年前降薪就在等KD</a></li>
<li><a href="#">塔克4000双鞋让保罗羡慕嫉妒</a></li>
<li><a href="#">CBA下季新赛制:常规赛4组循环 增至46轮</a></li>
</ul>
</div>
</body>
</html>
浙公网安备 33010602011771号