盒子模型
一.盒子模型
盒子的组成
border边框
ps:在实际开发中边框的大小会影响带盒子实际的大小
解决方案：测量盒子时不量边框 如果包含了边框在对width和height赋值的时候减去边框宽度
<!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>边框颜色</title>
<style>
div {
width: 300px;
height: 200px;
/* border-width：边框的粗细一般用 px为单位 */
border-width: 5px;
/* border-style: solid 实线边框/ dashed 虚线边框/ dotted 点线边框 */
border-style: solid;
/* border-color: 边框颜色 */
border-color: aqua;
/*
复合简写 没有先后顺序 一般规定这么写
border-top：上边框
border-bottom：下边框
border-left：左边框
border-right：右边框
*/
border: 1px solid royalblue;
/* 合并相邻边框 */
border-collapse: collapse;
}
</style>
</head>
<body>
</body>
</html>
content内容
paddin内边距
设置padding会扩大块级标签 但不指定height 和width时 设置padding不会扩大盒子范围
<!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>
div {
width: 200px;
height: 150px;
background-color: blue;
/*
px为单位
padding-left 左内边距
padding-top 上内边距
padding-botton 下内边距
padding-right 右内边距
简写：padding 5px：只写一个 表示上下左右都是5像素
padding 5px 10px：表示上下是5像素 左右是10像素
padding 5px 10px 15px：表示上是5像素 左右是10像素 下是15px
padding 5px 10px 15px 20px：表示上是5像素 右是10像素 下是15px 左20px
注意：
padding会影响盒子大小 （设置大小的时候减去 2*内边距 ）
*/
padding: 5px;
}
</style>
</head>
<body>
<div>
盒子内容是content 盒子内容是content 盒子内容是content 盒子内容是content 盒子内容是content
</div>
</body>
</html>
margin外边距
<!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>外边距</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.one {
/*
px为单位
margin-left 左内边距
margin-top 上内边距
margin-botton 下内边距
margin-right 右内边距
简写：margin 5px：只写一个 表示上下左右都有外边距5像素
margin 5px 10px：表示上下外边距是5像素 左右外边距是10像素
margin 5px 10px 15px：表示上外边距是5像素 左右外边距是10像素 下外边距是15px
margin 5px 10px 15px 20px：表示上外边距是5像素 右是10像素 下是15px 左20px
*/
margin-bottom: 20px;
}
.two {
/*
上边距 对于不同盒子的角度 应该多考虑
典型应用：
外边距只能让!!块级!!盒子水平居中
满足：指定宽度 盒子左右外边距设置为auto(margin: 0 auto)
*/
width: 900px;
height: 200px;
background-color: pink;
margin: 100px auto;
/* 让一个行内元素/行内块元素居中找到他的夫亲在他里面加 */
text-align: center;
}
/*
外边距合并问题：上下两个块级元素 当上块级元素设置下边距小于下块级元素设置的上边距时
页面显示的时候 按照下块级元素的上边距来显示（谁大显示谁）
解决：只在一个盒子加外边距
嵌套块元素垂直外边距的塌陷：对于两个嵌套关系（父子关系）的块元素 外边距合并形成一个外边距区域
解决：1.为父元素指定一个边框: border: 1px solid transparent;
2.指定一个内边距 padding：1px
3.可以给父亲添加一个 overflow:hidden
*/
.father {
width: 400px;
height: 400px;
background-color: purple;
margin-top: 50px;
border: 1px solid transparent;
}
.son {
width: 200px;
height: 200px;
background-color: pink;
margin-top: 100px;
}
/* 清除外边距 */
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="one">1</div>
<div class="two">2
<span>里面的文字</span>
</div>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
ps: 行内元素为了照顾兼容性 尽量只设置左右 的内外边距 不要设置上下的内外边距
块级和行内块元素无所谓
二.圆角边框(CSS3新增加的*)
<!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>圆角边框</title>
<style>
div {
width: 300px;
height: 150px;
background-color: royalblue;
/*
变成圆角边框 设定半径长度 在原来的长方形的四个角上 画四个圆
用圆的边替换原来长方形的四个角 半径单位是像素值px/百分比
全：border-radius: 左上 右上 右下 左下;
简：border-radius: 10px;
*/
border-radius: 10px;
}
.yuanxing {
width: 200px;
height: 200px;
background-color: royalblue;
/* 变成圆的时候 设置值为长或者宽的一半（50%/100px） */
border-radius: 50%;
}
.juxing {
width: 200px;
height: 100px;
background-color: royalblue;
/* 圆角矩形 把值设置为高度的一半（50%/50px） */
border-radius: 50px;
}
</style>
</head>
<body>
<div></div>
<div class="yuanxing"></div>
<div class="juxing"></div>
</body>
</html>
三.盒子阴影(CSS3新增加的)
<!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>盒子阴影</title>
<style>
div {
width: 200px;
height: 200px;
background-color: royalblue;
margin: 100px auto;
/*
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow:必要！！ 水平阴影的距离 允许负值
v-shadow:必要！！ 垂直阴影的距离
blur:模糊距离
spread:阴影大小
color:阴影颜色
inset:内部阴影 （outset外部阴影）
注意：默认是outset但是不可以写！！！
不占用空间 不会影响其他的
例：box-shadow: 10px 10px 10px 6px rgba(0, 0, 0, 0.3);
*/
box-shadow: 10px 10px 10px -2px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
四.文字阴影(CSS3新增加的)
<!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>文字阴影</title>
<style>
div {
font-size: 50px;
color :aqua;
font-weight: 700;
/*
text-shadow：h-shaow v-shadow blur color
h-shaow：必要 水平阴影的位置 可以为负
v-shadow：必要 垂直阴影的位置 可以为负
blur：可选 模糊的距离
color：可选 阴影的颜色
*/
text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
}
</style>
</head>
<body>
<div>
我是柯南，想挂科都难
</div>
</body>
</html>
CSS浮动
一.浮动
1.传统网页的三种布局
①标准流（普通流和文档流）：指标签按照规定好的默认的方式排列
②浮动：
③定位：
这三种方式都是用来摆放盒子的
在实际开发中一张网页有三种流一起构成 标准流负责纵向排列 多个块级元素的浮动负责横向排列
2.什么是浮动
属性值 float：none 不浮动 / left 左浮动 / right 右浮动
定义：左右浮动到左边缘或者右边缘触及包含块或另一个浮动框的边缘
注意与使用：和标准流的父级搭配使用 先用标准的父元素排列上下位置 之后内部子元素采取浮动到其中的指定位置
一个浮动了其他的也得浮动 否则会影响界面 浮动的盒子只会影响后面的标准流不会影响前面的
符合网页布局的第一标准
（网页设计第二准则：先设置盒子大小 在设置盒子位置）
任何元素都可以添加浮动属性
对行内元素添加浮动会有行内块的特性 所以添加完浮动不需要在转换为 环内块元素
对块级元素添加浮动会有行内块的特性
3.浮动的特性
①浮动元素会脱离标准流（脱标）
不在保留原来的位置 让其他的标准流占用
②浮动元素会一行内显示并且元素顶部对齐
③浮动的元素会具有行内块元素的特性
二.常见的网页布局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XQ1414e0-1669211869136)(C:\Users\t-y-x\AppData\Roaming\Typora\typora-user-images\image-20221122160904617.png)]
<!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>常见网页布局</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
/* 去掉无序列表前面的点 */
list-style: none;
}
.top {
/* 和浏览器一样宽度（通栏） 不用指定宽 */
height: 50px;
background-color: gray;
}
.banner {
width: 980px;
height: 150px;
margin: 10px auto;
background-color: gray;
}
.box {
width: 980px;
margin: 0 auto;
height: 300px;
background-color: black;
}
.box ul li {
float: left;
width: 237px;
height: 300px;
background-color: gray;
margin-right: 8px;
}
.footer {
/* 和浏览器一样宽的 不用指定宽 指定高就行*/
height: 200px;
background-color: gray;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>
三.清除浮动
背景：由于父盒子在很多情况下不方便设置高 但是子盒子浮动又不占有位置 最后父级盒子的高度为0时 就会影响到下面的标准流的盒子
本质：清除浮动元素脱离标准流造成的影响
策略：闭合浮动 只让浮动在父盒子内部影响 不影响父盒子外面的其他盒子
方法一：额外标签法（不常用）
定义：隔墙法 在最后一个浮动的子元素后面添加一个额外标签 引用清除浮动样式
<!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>清除浮动</title>
<style>
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color:purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
margin-top: 10px;
}
/* 额外标签法 新增的盒子必须是块级元素 不能是行内元素 */
.clear {
/*
属性 clear ：left不允许左侧有浮动/right不允许右侧有浮动/both清除两侧浮动
一般用clear:both;
*/
clear:both;
}
</style>
</head>
<body>
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
<div class="clear"></div>
</div>
<div class="footer"></div>
</body>
</html>
方法二：overflow伪元素
<!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>清除浮动2</title>
<style>
.box {
/*
清除浮动 overflow: hidden
使用时找到 浮动元素的父级元素 设置这个就可以清楚浮动了
*/
overflow: hidden;
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color:purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
</html>
方法三：after伪元素法(以后再将)
额外标签法的升级版 也是在父元素上添加
优点：没有增加新标签 结构更简单
缺点：照顾低版本的浏览器
<!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>
<style>
/* after伪元素法 */
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7专有 */
*zoom: 1;
}
/* */
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color:purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
</html>
方法四：双伪元素清除浮动
（基于三在before也添加一个盒子）
<!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>清除浮动4</title>
<style>
/* 双伪元素清除浮动 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
/* IE6、7专有 */
*zoom: 1;
}
/* 双伪元素清除浮动 */
.box {
width: 800px;
border: 1px solid blue;
margin: 0 auto;
}
.damao {
float: left;
width: 300px;
height: 200px;
background-color:purple;
}
.ermao {
float: left;
width: 200px;
height: 200px;
background-color: pink;
}
.footer {
height: 200px;
background-color: black;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="box clearfix">
<div class="damao">大毛</div>
<div class="ermao">二毛</div>
</div>
<div class="footer"></div>
</body>
</html>
四.常见的图片格式
jpg：JPEG( JPG )对彩色信息保存的好 高清 颜色多 产品图片使用最多的格式
gif：GIF格式下只能存256色 简单的图形和文字储存 可以保存透明背景和动画效果 实际用于一些图片和小动画
png：结合了jpg和gif的优点 可以切换背景颜色为透明
PSD：photoshop专用格式 可以直接复制前端上面的文字 测量大小和距离
五.CSS书写顺序
①布局定位属性
display(建议第一个写)/position/float/clear/visibility/overfloe
②自身属性
width/height/margin/padding/border/background
③文本属性
color/font/text-decoration/text-align/vertical-align/white-space/break-word
④其他属性(CSS3)
rgin-top: 10px;
}
大毛
二毛
四.常见的图片格式
jpg：JPEG( JPG )对彩色信息保存的好 高清 颜色多 产品图片使用最多的格式
gif：GIF格式下只能存256色 简单的图形和文字储存 可以保存透明背景和动画效果 实际用于一些图片和小动画
png：结合了jpg和gif的优点 可以切换背景颜色为透明
PSD：photoshop专用格式 可以直接复制前端上面的文字 测量大小和距离
五.CSS书写顺序
①布局定位属性
display(建议第一个写)/position/float/clear/visibility/overfloe
②自身属性
width/height/margin/padding/border/background
③文本属性
color/font/text-decoration/text-align/vertical-align/white-space/break-word
④其他属性(CSS3)
content/cursor/border-radius/box-shadow/background:linear-gradient
1246
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
