文章目录
1.使用margin常见的bug
1.1浮动下块元素水平居中
float: left;
margin: 0 auto;
原因分析：
浮动脱离文档流，auto无法自动计算
正常情况下，auto只能设置水平，自动居中，除非特殊情况（定位、flex布局）
解决方案：
margin的值指定像素
margin: 0px 668px;
1.2清除浮动的元素设置margin-top
#box1{
width: 50px;
height: 50px;
background: cornflowerblue;
float: left;
}
#box2{
width: 50px;
height: 50px;
background: rgb(34, 31, 31);
clear: both;
margin-top: 100px;
}
原因分析：
需要先把上面的距离填满，才能往下移动
解决方案：
1、把margin-top换成给上面的浮动元素设置margin-bottom
#box1{
width: 50px;
height: 50px;
background: cornflowerblue;
float: left;
margin-bottom: 100px;
}
#box2{
width: 50px;
height: 50px;
background: rgb(34, 31, 31);
clear: both;
}
2、给浮动的元素套层父元素，用高度隔开（就不需要用clear设置）
<div id="box">
<div id="box1">
</div>
</div>
<div id="box2">
</div>
#box{
height: 1px;
}
1.3上下两个盒子之间的margin会重叠
#box{
height: 1px;
margin-bottom: 50px;
}
#box1{
width: 50px;
height: 50px;
background: cornflowerblue;
float: left;
}
#box2{
width: 50px;
height: 50px;
background: rgb(34, 31, 31);
margin-top: 50px;
}
原因分析：
上下两个盒子之间的margin会重叠（左右不会），谁的值大设置谁
解决方案：
1、BFC解决
给重叠的盒子中的任意一个盒子套一层父级,然后用overflow:hidden触发BFC
<div class="box">
<div class="box1">box1</div>
</div>
<div class="box2">box2</div>
.box{
overflow: hidden;
}
.box1,.box2{
display: block;
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
.box2{
background: lightcoral;
}
2、只给一个盒子设置margin
#box{
height: 1px;
}
#box1{
width: 50px;
height: 50px;
background: cornflowerblue;
float: left;
}
#box2{
width: 50px;
height: 50px;
background: rgb(34, 31, 31);
margin-top: 50px;
}
1.4 margin-top的传递问题
#box{
width: 100px;
height: 100px;
background: lightcoral;
}
#box1{
width: 50px;
height: 50px;
background: cornflowerblue;
margin-top: 20px;
}
<div id="box">
<div id="box1">
</div>
</div>
原因分析：
父元素下的第一个子元素，设置margin-top的时候，margin-top会错误的传递给父元素，这个就是margin-top的传递问题
解决方案：
父元素
1.设置border
#box{
width: 100px;
height: 100px;
background: lightcoral;
border: 1px solid slategray;
}
2.设置padding-top
#box{
width: 100px;
height: 100px;
background: lightcoral;
padding-top: 1px;
}
3.overflow：hidden 设置内容超出隐藏(最常用)
#box{
width: 100px;
height: 100px;
background: lightcoral;
overflow: hidden;
}
4.设置float 不推荐专门解决，可以顺便解决
#box{
width: 100px;
height: 100px;
background: lightcoral;
float: left;
}
子元素
1.设置浮动float（不推荐，可能会引起其他问题）
#box1{
width: 50px;
height: 50px;
background: cornflowerblue;
margin-top: 20px;
float: left;
}
2.vertical-align的使用
水平排列的内容设置垂直居中
2.1需要设置参照物，相互参照效果（都设置 vertical-align：middle）
<div class="test01">
<img src="../day01/day05/images/0.jpeg" alt="">
<p>奥运</p>
</div>
.test01{
overflow: hidden;
width: 100px;
height: 100px;
background: cadetblue;
}
.test01 img{
width: 50px;
height: 50px;
vertical-align: middle;
}
.test01 p{
display: inline-block;
vertical-align: middle;
}
作用：字和图片始终是水平垂直居中的，字会随着图片的改变自适应
2.2表格类型的内容垂直居中(只能设置文字内容，图片不适用)
使用条件:
父元素display:table
子元素display:table-cell
vertical-align：middle
<div class="test02">
<p>test02父元素</p>
<div class="test02-1">
<p>test02子元素</p>
</div>
</div>
.test02{
display: table;
overflow: hidden;
width: 200px;
height: 200px;
background: coral;
}
.test02-1{
display: table-cell;
vertical-align: middle;
width: 80px;
height: 80px;
background: darkgray;
}
2.3解决图片下方的间隙问题
给图片设置vertical-align: top/middle;
<div class="test03">
<img src="../images/banner.jpg" alt="">
<div class="test03-1">
</div>
</div>
.test03{
overflow: hidden;
width: 300px;
height: 300px;
background: darksalmon;
}
.test03 img{
width: 100px;
height: 100px;
vertical-align: top;
}
.test03-1{
width: 100px;
height: 100px;
background: yellow;
}
3.两端对齐justify的使用
3.1使用text-align-last达到效果(兼容性比第二种方法差)
<p>测试</p>
p {
width: 150px;
height: 150px;
background: rgb(100, 155, 226);
text-align: justify;
padding: 0px 10px;
}
加上text-align-last
text-align-last 属性规定如何对齐文本的最后一行。
注意：text-align-last 属性只有在 text-align 属性设置为 “justify” 时才起作用。
p {
width: 150px;
height: 150px;
background: rgb(100, 155, 226);
text-align: justify;
text-align-last: justify;
padding: 0px 10px;
}
3.2使用span标签达到效果
<div>测试</div>
div {
width: 150px;
height: 150px;
background: rgb(226, 100, 226);
text-align: justify;
}
在div中加入span标签并且将span转成行内块元素将剩下的宽度占满
<div>测试<span></span></div>
div {
width: 150px;
height: 150px;
background: rgb(226, 100, 226);
text-align: justify;
}
span {
display: inline-block;
width: 100%;
}
4.文本内容溢出
4.1设置单行文本内容溢出隐藏省略号显示
第一步 设置宽度范围
第二步 强制内容不换行 white-space:nowrap
第三步 隐藏超出的内容 overflow：hidden
第四步 隐藏的内容省略号显示 text-overflow：ellipsis
#test1{
width: 150px;
height: 150px;
border: 3px solid springgreen;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
4.2设置多行文本溢出隐藏省略号显示
display: -webkit-box; 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; 设置或检索伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3; 用来限制在一个块元素显示的文本的行数
overflow: hidden;
(缺陷：兼容性没有单行隐藏的兼容性好，显示设置不太灵活)
#test2{
width: 150px;
height: 150px;
border: 3px solid rgb(255, 0, 98);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
overflow: hidden;
}
5.定位水平垂直居中
<div class="box1">
<div class="box2">定位水平垂直居中</div>
</div>
5.1用定位触发的属性+外边距
.box1{
width: 300px;
height: 300px;
background: cadetblue;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background: darkolivegreen;
position: absolute;
/* 第一种方法:用定位触发的属性+外边距 */
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
5.2用定位触发的属性+2D平移
第一种方法改良版
margin-left:-(自身宽度的一半)
margin-top：-（自身高度的一半） 换成
2d的位移，
transform:translate(-50%,-50%)
.box1{
width: 300px;
height: 300px;
background: cadetblue;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background: darkolivegreen;
position: absolute;
/* 第二种方法:用定位触发的属性+2D平移 */
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
5.3重置定位触发的属性+外边距自适应
.box1{
width: 300px;
height: 300px;
background: cadetblue;
position: relative;
}
.box2{
width: 100px;
height: 100px;
background: darkolivegreen;
position: absolute;
/* 第三种方法:重置定位触发的属性+外边距自适应 */
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
margin: auto;
}
6.宽高自适应
让元素内容在不同的分辨率下都能灵活显示
6.1父元素的高由内容撑开
情况1父元素不设置height
情况2父元素高度设置height:auto
问题:高度塌陷
原因:如果父元素的高度由内容撑开，内容浮动后不占位，父元素的高度就会塌陷
<div id="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
#box{
width: 500px;
border: 2px solid rgb(26, 25, 25);
}
.box1{
float: left;
width: 100px;
height: 300px;
background: cadetblue;
}
.box2{
float: right;
width: 100px;
height: 600px;
background: chocolate;
}
解决方法
1.父元素设置overflow:hidden
原理:overflow可以触发BFC（BFC的布局规则定义：浮动元素也参与高度计算）
#box{
width: 500px;
border: 2px solid rgb(26, 25, 25);
/* 第一种方法:给父元素加overflow: hidden; */
overflow: hidden;
}
2.浮动元素最下方设置一个空盒子，给空盒子清除浮动，把塌陷的父元素撑开
<div id="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
/* 第二种方法:在浮动元素最下方添加一个空盒子,空盒子清除浮动(不推荐,代码冗余) */
.box3{
clear: both;
}
3.可以动态模拟空盒子（after和before必须结合content属性一起使用才可以）
::after 可以在盒子内容的后面动态生成一个空盒子
::before 可以在盒子内容的前面动态生成一个空盒子
注意：css渲染的盒子是内联
万能清除浮动法(可以单独设置一个清除高度塌陷的类选择器,在有问题的地方引用即可)
使用对象:父元素
父元素:after{
content:".";
clear:both;
display:block;
height:0;
overflow:
hidden;
visibility:hidden;
}
父元素{zoom:1;}
IE8以上和非IE浏览器才支持:after,zoom(IE专有属性)可解决IE6,IE7浮动问题
#box::after{
/* content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。 */
/* 这里插入.是避免插入空出错 */
content: ".";
/* ::after添加的元素是内联元素,无法撑开父容器的高度 */
display: block;
clear: both;
height: 0px;
overflow: hidden;
/* 隐藏添加内容,占位 */
visibility: hidden;
}
6.2内容的高度等于父元素的高height:100%
例子：盒子等于当前窗口的高度
html，body{height:100%}
内容{height:100%}
6.3宽高度自适应的特点
宽度自适应的特点
属性:width
属性值: 常规属性值(数值+单位)、100%、不设置
如果当前元素是块级元素的情况下，设置宽度为100%或者不设置的情况下，宽度会沾满全屏(通栏效果)
块级元素不设置的宽度的情况下，会和父级等宽
重点:设置元素脱离文档流，当前元素宽度由自身内容决定(设置浮动和定位的时候，元素一定要设置一个固定的宽高)
高度自适应的特点
属性:height
属性值: 常规属性值、100%、auto/不设置
当元素不设置宽度或者设置成auto的时候，高度不显示，元素的高度由自身内容决定
重点
①窗口100% html,body{width:100%;height:100%} => 文档对象设置100%，子级元素自适应到整个文档
②图片100% img{width:100%;height:100%} => 拉伸图片
6.4最小高度（给自己设置了一个高度底线）
min-height(最常用)
内容的高度 < 最小高度 取最小高度
内容的高度 > 最小高度 取内容的高度
max-height最大高度
内容的高度 < 最大高度 取内容的高度
内容的高度 > 最大高度 取最大高
6.5min-height的兼容
元素具备最小高度的自适应
min-height属性：最小高度；(IE6浏览器不识别该属性)
兼容元素具备最小高度自适应的方法：
IE6以下浏览器，height就是最小高额效果
例子
hack1:
min-height: value; 高版本浏览器
_height:value; IE6以下设置height
hack2:
min-height:value;
height:auto !important;
height:value;(建议使用 不能换顺序)
高版本浏览器：能识别min-height，height:auto !important;
IE6以下浏览器（不识别min-height，不识别！important）height:value;
6.6过滤器
下划线（IE6和IE6以下浏览器识别）
_属性：属性值
！important（IE7以上浏览器识别）
属性：属性值 ！important
/9（IE浏览器识别）
属性：属性值 /9
/0（IE8以上浏览器识别）
属性：属性值 /0
* +（IE7以下浏览器识别）
* 属性：属性值
6.7calc()动态计算宽高数值
calc()的算术运算符 + - * /
按照标准盒子计算
例子： width: calc(100% - 20px);
7.BFC
BFC:格式化上下文,是一个独立的渲染区域 ， 可以理解为一个封闭的大盒子，有自己的布局规则
7.1BFC的布局规则
1.BFC的盒子都是上下显示，垂直排列
2.同一个BFC的两个盒子，上下的margin会重叠
3.盒子左边的边框和margin会接触
4.BFC区域和浮动区域不会重叠
5.每一个BFC都是独立的，相互之间不影响
6.在BFC区域内，浮动元素也参与高度计算
7.2BFC的触发条件
1.html 根元素
2.定位：绝对和固定
3.浮动
4.display:
inlin-block
table-cell
table-caption
flex
inline-flex
5.overflow: auto/scroll/hidden
7.3BFC的应用
1.BFC解决高度塌陷
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
*{
margin: 0px;
padding: 0px;
}
.box{
width: 500px;
border:5px solid black;
/* 推荐,影响小 */
overflow: hidden;
/* float: left; */
/* position: absolute; */
/* display: inline-block; */
}
.box1{
float: left;
width: 100px;
height: 300px;
background: darkcyan;
}
.box2{
float: right;
width: 200px;
height: 500px;
background: darkorchid;
}
2.BFC可以实现自适应两栏布局
<div class="box1">left</div>
<div class="box2">right</div>
*{
margin: 0px;
padding: 0px;
}
body,html{
height: 100%;
}
.box1{
float: left;
width: 100px;
height: 500px;
background: lightblue;
}
.box2{
overflow: hidden;
height: 100%;
background: lightcoral;
}
3.BFC可以解决margin重叠的问题
给两个子元素中任意一个套一个父级,然后父级用overflow:hidden触发BFC即可
<div class="box">
<div class="box1">box1</div>
</div>
<div class="box2">box2</div>
.box{
overflow: hidden;
}
.box1,.box2{
display: block;
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
.box2{
background: lightcoral;
}
4.BFC也可以解决margin传递问题
参照1.4中的内容
7.4扩展:自适应三栏布局
1.圣杯布局
步骤:
1.中间的盒子设置width：100%
2、left，right，center都设置浮动
3、给left和right设置margin-left负值，把盒子挪上去
4、给大盒子设置左右的padding(与双飞翼布局的差别)
5、给left，right设置相对定位把盒子挪到padding的区域内
<div class="box">
<!-- 先写middle中间内容是为了先加载 -->
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
*{
margin: 0px;
padding: 0px;
}
.box{
overflow: hidden;
padding: 0px 100px;
}
.middle{
position: relative;
float: left;
width: 100%;
height: 100px;
background: cadetblue;
}
.left{
position: absolute;
float: left;
width: 100px;
height: 100px;
background: rgb(153, 119, 153);
left: 0px;
}
.right{
position: relative;
float: left;
width: 100px;
height: 100px;
/* 右外边距要偏离自身宽度的距离 */
background: darkolivegreen;
margin-right: -100%;
right: 0px;
}
2.双飞翼布局
1、中间的盒子设置width：100%
2、left，right，center都设置浮动
3、给left和right设置margin-left负值，把盒子挪上去
4、给中间center设置padding(与圣杯布局的差别)，让left和right自动在center的padding区域内显示，（center设置怪异盒模型）
第二种方法:定位(参考1.圣杯布局)
1、中间的盒子设置不设置width
2、left，right设置绝对定位,移动到左右两边
left：0 top:0
right:0 top:0
3、中间盒子设置padding
<div class="box">
<!-- 先写middle中间内容是为了先加载 -->
<div class="middle">middle</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
*{
margin: 0px;
padding: 0px;
}
.box{
overflow: hidden;
}
.middle{
float: left;
width: 100%;
height: 100px;
background: cadetblue;
padding: 0px 100px;
box-sizing: border-box;
}
.left{
float: left;
width: 100px;
height: 100px;
background: rgb(153, 119, 153);
/* 左外边距要偏离父容器宽度的距离 */
margin-left: -100%;
}
.right{
float: left;
width: 100px;
height: 100px;
/* 左外边距要偏离自身宽度的距离 */
background: darkolivegreen;
margin-left: -100px;
}
总结:这两种布局的差异点就是设置中心区域的内容不同,圣杯的中心区域只占中心区域,双飞翼的中心区域是占整个盒子
8.CSS重置
css重置不建议用通配符清除内外边距,因为这样做会导致浏览器加载慢,负载大,一般各个公司都有自己重置之后的默认样式,下面是我的重置默认样式
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
dl,
dt,
dd {
margin: 0;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 16px;
font-weight: normal;
}
body {
background-color: #fff;
font: 12px Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
"\5B8B\4F53", sans-serif;
}
em,
i {
font-style: normal;
}
b,
strong {
font-weight: normal;
}
li {
list-style: none;
}
img {
border: 0;
vertical-align: middle;
}
a {
text-decoration: none;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clear-fix::after {
content: ".";
display: block;
clear: both;
height: 0;
overflow: hidden;
visibility: hidden;
}
.clear-fix {
*zoom: 1;
}
9.扩展知识点
1.哪些标签自带边框
input、hr、textarea、select
2.置换和非置换元素的特点
置换元素(可变元素)
自己的初始宽高 (设置标签没有设置样式的时候就能显示出来) img、input
可以根据自身的属性，改变属性值从而达到当前显示的不同 img(src=“1.jpg/2.jpg”) input(type=“text\submit\reset…”)
3.总结
哪些标签是行内块元素: img\input\textarea\select
哪些标签自带边框: hr\input\textarea\select
哪些标签是置换元素: img\input
4.隐藏元素
display: none; 删除隐藏元素:删除是整个html的结构，在浏览器中完全找不到 ,即不占位隐藏
visibility: hidden; 隐藏显示的文本盒子 ,即占位隐藏
5.思考
有三个小盒子，上下盒宽高固定大小，中间盒子在变化 ？
如果中间盒子内容比较多的时候可以做到自适应
如果中间盒子内容没有的时候，保持一个最小高度
10.移动端
1.声明
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
width = device-width：宽度等于当前设备的宽度
initial-scale： 初始的缩放比例（默认设置为1.0）
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
2.像素转换
物理像素
设计图测量的像素
逻辑像素
屏幕显示的大小，和css设置的大小
设备像素比
dpr = 物理像素 / 逻辑像素
iPhone 4、5 640px(物理像素) 320px(逻辑像素) 2(dpr)
iPhone 6、7、8 750px(物理像素) 375px(逻辑像素) 2(dpr)
平板或者plus 1080px/1242px(物理像素) 414px(逻辑像素) 3(dpr)
如果设计图是750px 测量大小100px 先看dpr 2
100px / dpr 2= 50px
3.等比缩放布局
单位
em ：先相对于自己，自己没有就相对于父元素font-size值
rem ：相对于根元素的font-size值
vw :视口宽度的百分比
vh：视口高度的百分比
vmin：vh和vw谁小设置谁
vmax：vh和vw谁大设置谁
1.媒体查询结合rem（不常用）
@media all and (max-width: 320px) {
html {
font-size: 42px;
}
}
@media all and (min-width: 321px) and (max-width: 376px) {
html {
font-size: 50px;
}
}
@media all and (min-width: 377px) {
html {
font-size: 55px;
}
}
通过媒体查询的范围设置html的font-size， 内容的单位统一转换成 rem
原理： html的font-size值控制 单位 rem的内容
例子
设计图是 750px 盒子测量 100px dpr2
1、 100px / dpr2 =50px
2、 50px / 50px =1rem（ 因为是375px font-size 除以50px)
2.vw+rem
分两种情况：
第一种直接转换 vw
比如设计图 750px 逻辑375px dpr2，
375px = 100vw
所以1vw=3.75px
如果测量单位是100px
100px / 2 =50px
50px / 3.75px(1vw) =13.33vw
第二种找中间单位 rem （这样做的目的是好计算）
比如设计图 750px 逻辑375px dpr2
先确定html的font-size值
100px / 3.75px(1vw) = 26.6666666667vw;
1rem = 100px
如果测量单位是100px
100px / 2 =50px
50px / 100px = 0.5rem;
在网页中使用vw+rem:
1.先在html中写font-size:26.66667vw;
2.body设置font-size的值防止html的font-size被继承;
3.使用cssrem插件之前将基准font-size设置成200;
声明:
font-size无论在哪都可以自己定义
参考文档
https://juejin.cn/post/6967222005129019400
4.移动端重置
/* 先把html中的font-size定一个转换标准,之后可以直接通过px转成rem */
html{
font-size: 26.66667vw;
}
/* 再将body中的font-size重置,防止html的值继承下来影响后面的内容 /
body{
margin: 0 auto;
min-width: 320px;
max-width: 540px;
background: #fff;
font-size: 14px;
font-family: -apple-system, Helvetica, sans-serif;
line-height: 1.5;
/ 取消手机横屏的 自动缩放功能 /
-webkit-text-size-adjust: 100% !important;
/ 设置手机底部间距固定 */
padding-bottom: env(safe-area-inset-bottom);
}
/* 一般不建议使用通配符,但是在移动端中将盒子类型转换成IE盒子能节省计算成本 */
*{
box-sizing: border-box;
}
642
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
