css（二）
盒子模型
border(边框)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
background: deepskyblue;
border: 5px solid black /*border:width style color; 复合样式,这样是四条边都一样*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
border-width ： 边框宽度 border-style ：边框类型 (solid实线 dashed虚线 dotted点线 double双边框) border-color ： 边框颜色
以上三个东西可以给多个值：
一个值 代表4个方向都一样 上右下左 （顺时针） 两个值 上下 右左 三个值 上 右左 下 四个值 都不一样
另外还可以详细要求：
border-right-width 右边框大小
border-bottom-width 下边框大小
border-top-width:上边框大小
border-style 边框样式
border-top-style 顶部边框类型
border-right-style 右边边框类型
border-bottom-style 底部边框类型
border-left-style 左边边框类型
border-color 边框颜色
border-top-color 顶部边框颜色
border-right-color 右边边框颜色
border-bottom 底部边框颜色
border-left-color 左边边框颜色
复合样式:
border-top
border-right
border-left
border-bottom
padding(内边距)
※※※padding会撑大盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
background: chartreuse;
padding: 100px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
可以看到padding已经撑大了盒子，padding也可以详细标注，具体如下：
padding-right
padding-left
padding-top
padding-bottom:
注意：不能给padding设置颜色
margin(外边距)
外边距是相对而言的
margin 外边距 元素与其他元素的距离（边框以外的距离） 1个值 代表4个方向值一样 顺时针 2个值 上下和左右 ※※※margin: auto; 快速左右居中 如果设置了两个值的话： 垂直方向： margin-bottom , margin-top 取两者之间的较大值 水平方向： margin-left , margin-right 取两者之和
也可以具体要求：
margin-left
margin-top
margin-bottom
margin-right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0; <!--去掉缝隙-->
margin: 0;
}
.box{
width: 100px;
height: 100px;
background: chartreuse;
margin: 100px;
}
.box1{
width: 100px;
height: 100px;
background: chartreuse;
margin: 200px;
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box1">
</div>
</body>
</html>
有无margin的区别：
display: inline-block
与 display: inline 相比，主要区别在于 display: inline-block 允许在元素上设置宽度和高度。
同样，如果设置了 display: inline-block，将保留上下外边距/内边距，而 display: inline 则不会。
与 display: block 相比，主要区别在于 display：inline-block 在元素之后不添加换行符，因此该元素可以位于其他元素旁边。
下例展示 display: inline、display: inline-block 以及 display: block 的不同行为：
<!DOCTYPE html>
<html>
<head>
<style>
span.a {
display: inline; /* the default for span */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
</style>
</head>
<body>
<h1>display 属性</h1>
<h2>display: inline</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="a">the People's Republic of China</span>. Welcome to <span class="a">Shanghai</span>!</div>
<h2>display: inline-block</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="b">the People's Republic of China</span>. Welcome to <span class="b">Shanghai</span>!</div>
<h2>display: block</h2>
<div>Shanghai is one of the four direct-administered municipalities of <span class="c">the People's Republic of China</span>. Welcome to <span class="c">Shanghai</span>!</div>
</body>
</html>
注：display: inline-block这个小节的图片和源码来自于W3school
overflow:hidden
超出父类的会被切掉，相当于不存在，不论是文字还是别的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background: blue;
overflow: hidden;
}
.box div{
width: 100px;
height: 100px;
background: blueviolet;
margin: 100px;
}
</style>
</head>
<body>
<div class="box">
<div>
</div>
</div>
</body>
</html>
有无overflow:hidden的区别
注意
1.margin调整内部div外边距；
2.padding调整外部div内边距，它调整的是自身大小，所以如果不希望破坏外观，则尽量使用margin布局（padding有可能撑大外盒子，但如果是margin过大，则盒子内容会被挤出，但不会改变盒子本身大小）
3.border内部div和外部div定位时需要找到边界，外部div如没有设置border，则内部div的margin设置时会一直往上找，直到找到边界位置。
4.内部相邻div间的margin，取值为两个div各自设置margin的最大值，而不是相加值。
5.盒子的长/宽 = 样式大小 + 内边距 *2 + 边框 *2
另外再说一个网址，这里面的代码的作用是把浏览器自带的、默认的设置全部取消
https://meyerweb.com/eric/tools/css/reset/
浮动
基本内容
浮动产生了脱离文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1{
width: 100px;
height: 100px;
background: blue;
float: left;
}
.box2{
width: 100px;
height: 100px;
background: blueviolet;
float: right;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
区别如下：
可以看出，有浮动属性的是飘起来的，没有浮动属性的会压在下面。
高度塌陷
可以看到，内容把边框撑大了（截屏原因，实际上红框从左至右都有，这里只截了一部分）
可以看到有浮动以后产生了高度塌陷，由于现在子元素脱离文档流，所以红框产生高度塌陷，怎么解决呢？（解决父级高度塌陷）
1.如果知道高度塌陷的高度，就直接指定红框高度即可，这种方法不常用。
2.标准用法：clearfix
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul{
border: 1px solid red;
}
li{
list-style: none;
width: 50px;
height: 50px;
background: deepskyblue;
float: left;
}
.clearfix:after{
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<ul class="clearfix"> <!--此类名专门用来清除浮动，其他什么都不干-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
注：文字左右居中 text-align : center
文字上下居中 line-height : 行高px
倒圆角 border-radius ：可以填1，2，3，4个值，填50%就是圆
定位
静态定位（默认）相当于没定位
1.相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.a{
width: 100px;
height: 100px;
background: deepskyblue;
position: relative;
top: 100px;
left: 100px;
}
.b{
width: 100px;
height: 100px;
background: #831ee0;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。
2.绝对定位（会脱离文档流）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.a{
width: 100px;
height: 100px;
background: deepskyblue;
position: absolute;
top: 100px;
left: 100px;
z-index: 2;
}
.b{
width: 100px;
height: 100px;
background: blueviolet;
position: absolute;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
谁权重高就先显示谁，子级要绝对定位时，要给父级一个相对定位，这样可以减少定位时的错误
3.固定定位
他是依据浏览器窗口定位的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 100px;
height: 100px;
}
.a{
background: deepskyblue;
position: fixed;
bottom: 50px; <!--位置是自己填写的(上下左右)-->
right: 0;
}
</style>
</head>
<body style="height: 2000px"> <!--设置浏览器页面高度-->
<div class="a"></div>
<div class="b"></div>
</body>
</html>
这时你会发现无论怎么滑动鼠标，有一块东西都会在一个地方不动
4.补充
浙公网安备 33010602011771号