1.盒模型
这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战
感激相遇 你好 我是y大壮
作者：y大壮
链接：juejin.cn/user/756923… 来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
🌊🌈关于前言：
文章部分内容及图片出自网络，如有问题请与我本人联系
-
盒模型的真实大小固定不变，增加内边距，改变的是内容区
-
内容区，定义的高度和宽度
-
边框，边框的粗细 边框的颜色 边框的类型 border
-
内边距，内容区与边框之间的距离 padding
-
外边距，元素与元素之间的距离 margin
-
/* 外边距，在水平方向上使用auto可以水平剧中，但是垂直方向上不可以，和元素所占的空间位置相关*/ 如何子盒子在父盒子中显示不了上边距就开启dfc 1.border:1px solid yellow; 设置边框 2.overflow:hidden; 清除浮动 3.position:absolute; 设置定位 <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .content{ width: 200px; height: 200px; background-color: seagreen; /* 开启dfc*/ /*border: 1px solid yellow;*/ /*overflow: hidden;*/ /*position: absolute;*/ margin-top: 50px; } .item2{ width: 100px; height: 100px; border: 1px solid red; background-color: sandybrown; margin-top: 20px; } </style> </head> <body> <!-- 盒模型： 盒模型的真实大小固定不变，增加内边距，改变的是内容区 1. 内容区，定义的高度和宽度 2. 边框，边框的粗细 边框的颜色 边框的类型 3. 内边距，内容区与边框之间的距离 4. 外边距，元素与元素之间的距离 --> <div class="content"> <div class="item2"></div> </div> </body> </html>
-
-
2.网站的布局方式
-
元素之间的转换和浮动
-
块级元素变成内联块元素
display:inline-block; margin-left:-5px; -
浮动
(1) 浮动的元素性质发生了改变，变成了内联块元素 (2) 浮动元素脱离开文档流 (3) 浮动的元素会导致父元素的高度塌陷 (4) 浮动的元素在遇到包含框或者另一个浮动元素，则停止浮动 高度塌陷 解决方式：开启bfc-
解决高度塌陷的方法
-
解决方式：开启bfc
- overflow: hidden; 副作用相对来说较小，但是会剪切掉超出元素的其他部分
- float: left;也会导致父元素脱离文档流
- position: absolute; 也会导致父元素脱离文档流
- display: inline-block; 但是会导致宽度
- .nav::after{ 终极解决 content: ""; display: block; clear: both; 清除浮动 }
-
-
-
定位
position: absolute;定位：指定元素在浏览器中任意摆放位置 默认值：没有开启定位 static (1) 相对定位，相对于元素原来的位置发生偏移 relative 不会脱离文档流 元素的性质也不会发生改变 (2) 绝对定位，absolute 脱离文档流 元素性质也发生改变 元素的层级上升一个层级 1-如果祖先元素开启定位，则绝对定位的元素相对于开启定位的祖先元素，发生偏移量。 2-祖先元素没有开启定位，则以浏览器作为参照物发生偏移量 (3) 固定定位(是绝对定位的特殊的一种情况)fixed 对于body 参照物永远是相对于浏览器窗口body而定位，不会随着浏览器的滚动发生改变。 z-index: 10; /* 元素的层级 只有开启了定位的元素，z-index才生效 值越大层级越高 */ -
水平和垂直居中
/*1、块级元素和块级元素之间的水平方向和垂直反向上的居中 第一种情况 position: absolute; left: 50%; right: 50%; margin-left: -100px; margin-top: -100px; 第二种情况，不知道子元素的高度和宽度 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 第三种情况，改变元素所占的 position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; */ -
弹性布局
/*弹性盒模型包含了弹性容器 和弹性子项目*/ /* 1.开启弹性窗口 display: flex;*/ display: flex; /* 2.决定子项目在主轴的排列方向 row，水平方向 column，垂直方向 */ flex-direction: row; /* 3.弹性子项目在水平方向上的对应方式 justify-content (1) flex-start，左对齐 (2) flex-end，右对齐 (3) space-between，两端对齐 (4) center，居中对齐 (5) space-around，均匀对齐 */ justify-content: space-around; /* 4.强制换行 (1) wrap，强制换行 (2) wrap-reverse，反向强制换行 */ flex-wrap: wrap; /* 5.在垂直方向上子项目之间的对齐方式 (1) flex-start，顶部对齐 (2) flex-end，底部对齐 (3) center，居中 */ align-items: flex-start;.nav{ border: 1px solid red; /*弹性盒模型包含了弹性容器 和弹性子项目*/ /* 1.开启弹性窗口 display: flex;*/ display: flex; /* 2.决定子项目在主轴的排列方向 row，水平方向 column，垂直方向 */ flex-direction: row; /* 3.弹性子项目在水平方向上的对应方式 justify-content (1) flex-start，左对齐 (2) flex-end，右对齐 (3) space-between，两端对齐 (4) center，居中对齐 (5) space-around，均匀对齐 */ justify-content: space-around; /* 4.强制换行 (1) wrap，强制换行 (2) wrap-reverse，反向强制换行 */ flex-wrap: wrap; /* 5.在垂直方向上子项目之间的对齐方式 (1) flex-start，顶部对齐 (2) flex-end，底部对齐 (3) center，居中 */ align-items: flex-start; } -
伪元素（图标）
从阿里巴马图标库里面获取想要的图标，在下载代码，获取css，最后直接使用相应图标的名称。 <link rel="stylesheet" href="./iconfont.css"> -
元素层级
元素层级，只有开启定位的元素，此属性才生效 z-index: 2; 设置同一级的元素
3.背景定位
/* 1.背景图像*/
background-image: url("img/login3.jpg");
/* 2.背景平铺方式
(1) no-repeat，不平铺
(2) repeat-x，水平方向平铺
(3) repeat-y，垂直方向平铺
*/
background-repeat: repeat-x;
/* 3.背景图像的大小
(1) 100%，水平方向和元素宽度一样，垂直方向自动等比例缩放
(2) 100% 100%，水平和垂直方向都是100%
(3) cover 覆盖，图像先无限放大
*/
background-size: cover;
使用了精灵图的方式（就使用定位的方式，来定位图片的位置）
background-image: url("img/精灵图.png");
/* 1.背景定位 水平方向上 垂直方向上*/
background-position: -190px -10px;
