css--2
2.盒子模型之margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style type="text/css">
.box1{
width:200px;
height: 200px;
background-color: rgba(217,163,141,0.83);
/*margin*/
/*margin-top:20px;*/
/*margin-left:20px;*/
/*margin-right:2px;*/
/*margin-bottom:20px;*/
/*简写,对应的个数匹配和border的一样*/
/*margin:20px 30px 40px 50px;*/
/*使盒子元素水平居中*/
margin: 0 auto;
}
/*垂直外边距
*/
.box2{
width:200px;
height: 200px;
background-color:chartreuse;
/*下面这个盒子的上边距如果小于上面盒子的下边距，默认为上面盒子的下边距
margin上下移动，对应的盒子也同步移动
*/
margin-top:20px;
border: 1px solid chartreuse;
}
.box2ch{
width: 50px;
height: 50px;
background-color: rgba(217,15,46,0.83);
margin-top: 30px;
}
/*span{*/
/*background-color: rgba(146,217,97,0.83);*/
/*}*/
/*!*设置两个不同的margin左右同步移动*!*/
/*.span1{*/
/*margin-left: 30px;*/
/*margin-right: 20px;*/
/*}*/
/*.span2{*/
/*margin-left: 20px;*/
/*}*/
/*总结
水平边距相遇时，不会发生重叠
垂直边距相遇时，会形成一个外边距，称为 外边距合并
注意，父子级盒子嵌套设置外边距合并，影响页面布局，
解决办法：给父元素添加一个border！
当两个垂直外边距 相遇时，会形成一个外边距 ，称为‘外边距合并'
所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。
/*注意： 父子级盒子 嵌套 设置外边距 会形成外边距合并，影响页面布局，
解决办法： 子债父还
1. 父级或子元素使用浮动或者绝对定位absolute,浮动或绝对定位不参与margin的折叠
2. 父级overflow:hidden;
3. 父级设置padding（破坏非空白的折叠条件）
4. 父级设置border
*/
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
<div class="box2ch"></div>
</div>
<!--<span class="span1">span1</span>-->
<!--<span class="span2">span2</span>-->
</body>
</html>
3.盒模型之padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding填充</title>
<style type="text/css">
.box1{
width:100px;
height:200px;
background-color: lightgreen;
padding-left: 20px;
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<!--
内边框：内容区域到边框的距离
内边距会扩大会扩大元素所在的区域
注意：为元素设置内边距只能影响自己，不会影响其他的元素
-->
<div class="box1">padding</div>
<!--盒子模型计算尺寸
长：2 *(margin-left + margin-right + padding-left + padding-right) + width
宽：2 *(margin-top + margin-bottom + padding-top + padding-bottom) + height
-->
</body>
</html>
4.display属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>display</title>
<style type="text/css">
/*display属性
控制元素的显示和隐藏
块级元素与行内元素的转变
none 设置元素不会被显示
inline 元素会被显示为内联元素
block 元素会被显示为块级元素
inline-block 行内块元素
*/
div{
width:100px;
height:100px;
background-color: #A4D97B;
/*控制元素的隐藏，不占位置*/
/*display:none;*/
/*控制元素的隐藏，占位置,影响后面盒子的布局*/
/*visibility: hidden;*/
/*转换为行内块元素*/
display: inline-block;
/*转换为行内元素,行高等根据内容填充*/
display: inline;
}
a{
/*块级元素转换*/
display: inline-block;
width: 300px;
height: 300px;
background-color: #A4D97B;
}
img{
/*行内块元素一般和block进行转换，如果转换为行内元素没有意义*/
display: inline;
width:100px;
height: 100px;
}
</style>
</head>
<body>
<div>123</div>
<div>456</div>
<a href="#">百度一下</a>
<img src="https://g-search3.alicdn.com/img/bao/uploaded/i4/TB1d.RiRpXXXXaOapXX709V7VXX_014604.jpg_360x360Q90.jpg_.webp"
alt="华为">
</body>
</html>
5.浮动
浮动效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
*{
padding:0px;
margin:0px;
}
.wrap div{
width:200px;
height:200px;
border:1px solid black;
}
.box1{
background-color: red;
float: left;
}
.box2{
background-color: yellow;
margin-left: 20px;
}
.box3{
background-color: green;
}
.container{
/*width: 300px;*/
/*height: 300px;*/
background-color: rgba(229,107,40,0.83);
float:left;
}
span{
float:left;
background-color: aqua;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<!-- float浮动
left左浮动 左侧为起始、从左往右
right右浮动 右侧为起始、从右往左
文档流：可见元素在文档中排列位置
浮动产生的效果：
浮动可以使元素按指定位置排列，直到遇到父元素的边界或另一个元素的边界停止
浮动可以使元素脱离文档流，不占位置，
浮动会使元素提升层次
浮动可以使块元素在一行内排列不设置宽高时可以使元素适应内容
浮动可以使行内元素支持宽高
-->
<div class="wrap">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="container">哈哈</div>
<div class="container">哈哈</div>
<span>爽歪歪</span>
</body>
</html>
6.浮动产生的问题以及解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动产生的问题以及解决方案</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
.wrap{
width:1190px;
/*通常页面布局的时候父盒子的高度不需要设置，
通过子盒子填充父盒子的高度*/
/*height: 500px;*/
background-color: red;
margin: 0 auto;
overflow: hidden;
}
.wrap div{
float:left
}
.wrap_1{
width:220px;
height: 480px;
background-color: yellow;
}
.wrap_2{
width:700px;
height: 480px;
background-color: green;
margin-left: 25px;
}
.wrap_3{
width:220px;
height: 480px;
background-color: blue;
margin-left: 25px;
}
/*#clearfix{*/
/*float: none;*/
/*clear:both;*/
/*}*/
/*官方推荐的解决浮动最常用的方法！*/
/*.wrap:after{*/
/*visibility:hidden;*/
/*clear:both;*/
/*display:block;*/
/*content:".";*/
/*height: 0;*/
/*}*/
</style>
</head>
<body>
<!--浮动产生的问题
父元素不设置高度时，子元素设置了浮动，子元素不占位置，不会撑开父原子的高度，
解决办法：
1.给父盒子设置固定高度，但是不灵活
2.给浮动元素最后一个加一个空的块级元素，且该元素不浮动float: none;
并设置clear:both; 但是结构冗余
3.官方推荐的解决浮动最常用的方法，给父元素添加伪元素！
如果页面中有定位元素，并超过了父级的范围，就必须使用clear属性来清除浮动来扩展盒子的高度。
.wrap:after{
visibility:hidden;
clear:both;
display:block;
content:".";
height: 0;
}
4.推荐使用！！！给父元素添加----在.wrap加一个 overflow:hidden;
-->
<div class="wrap">
<div class="wrap_1"></div>
<div class="wrap_2"></div>
<div class="wrap_3"></div>
<!--<div id="clearfix"></div>-->
</div>
</body>
</html>
案例学习，京东导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京东导航栏练习</title>
<style type="text/css">
/*清除浏览器样式，否则影响布局*/
*{
padding: 0;
margin: 0;
}
.header{
width: 1000px;
height: 30px;
background-color: rgba(227,228,229,0.83);
font-family: 仿宋;
font-size: 15px;
margin:0 auto;
}
.header div,ul,li{
float:left;
line-height: 30px;
}
.header .list{
margin-left: 200px;
}
img{
width: 16px;
height: 16px;
margin-left: 40px;
margin-top:6px;
}
.header .myspan{
margin-left:10px;
}
.header .list a{
color: #281209;
text-decoration: none;
}
.header .list a:hover{
color: rgba(229,134,22,0.83);
}
#myul .seg:after{
content:"|";
}
</style>
</head>
<body>
<div class="header">
<div class="img">
<img id="img1" src="data:image/png;base64,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" alt="">
</div>
<div class="myspan"><span>路飞学城</span></div>
<div class="list">
<ul id="myul" type="none">
<li>你好，请登录 <a href="">登录</a></li>
<li class="seg"> </li>
<li><a href="#">我的京东</a></li>
<li class="seg"> </li>
<li><a href="#">京东会员</a></li>
<li class="seg"> </li>
<li><a href="#">企业采购</a></li>
<li class="seg"> </li>
<li><a href="#">客户服务</a></li>
<li class="seg"> </li>
<li><a href="#">网站导航</a></li>
<li class="seg"> </li>
<li><a href="#">手机京东</a></li>
</ul>
</div>
</div>
</body>
</html>
7.position定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position的用法</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width:200px;
height:200px;
}
.box1{
background-color: rgba(255,5,60,1);
position: relative;
top:20px;
left:40px;
}
.box2{
background-color:yellow;
}
.box3{
background-color: green;
position: absolute;
left: 40px;
top:10px;
}
.child{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left:10px;
}
</style>
</head>
<body>
<!--
overflow属性
visible 默认值。内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条一遍查看剩余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
-->
<!--position
大盒子一般用浮动，小盒子一般就用定位
position 的属性
static 默认值，没有定位
relative：
相对自身原来的位置进行偏移，用top left right bottom 进行设置单位px
不设定偏移量则本身没有变化
无论在标准流还是浮动流中，不会对父级元素和相邻元素有任何影响。
可以提升层级关系(会显示在最表面，不会被之前设置的元素遮盖)
absolute:
绝对定位,可以提升层级关系，脱离文档流
在没有父级父级元素定位时 定位！，以浏览器的左上角为基准
有父级的情况下，父级设置相对定位，子级设置绝对定位，是以父盒子进行定位的
“父相子绝对”
提升层级关系
脱离文档流
fixed :
固定定位，当浏览器精心滑动的时候，保持位置不变
-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3">
<div class="child"></div>
</div>
</body>
</html>
8.z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>x-index</title>
<style type="text/css">
/*
border-radius,设置圆圈
*/
.box1{
width: 300px;
height: 300px;
background-color: rgba(255,5,60,1);
position: relative;
}
.children{
width: 100px;
height: 100px;
background-color: rgba(167,255,254,1);
position: absolute;
left: 100px;
top: 100px;
border-radius: 50%;
}
</style>
</head>
<body>
<!--
z-index定位处理 堆叠
z-index属性值：整数 默认值为0
设置了position属性时，z-index属性可以
设置各元素之间的重叠高地关系
z-index值大的层位于其值小的层上方
-->
<!--常见的网页布局
上下结构
上中下结构
上左右下结构 1-2-1结构
上左中右下结构 1-3-1结构
-->
<div class="box1">
<div class="children">
</div>
</div>
</body>
</html>
