CSS的学习
介绍一下BFC及应用
BFC特性:
- 内部box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由
margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。 - 在BFC中，每一个盒子的左外边缘(
margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说，则触碰到右边缘) - 形成了BFC的区域不会与
float box重叠 - 计算BFC高度时，浮动元素也参与计算
生成BFC的还有:行内块元素、网格布局、contain值为layout、content或strict的元素等。
BFC的应用：
- 利用特性4可以实现左图右文的效果：
<body>
<img src="img">
<p>文字</p>
</body>
img {
float: left;
}
p {
overflow: hidden;
}
- 利用特性5可以解决浮动元素造成的父元素高度塌陷问题：
<div class="parent">
<div class="float">浮动</div>
</div>
.parent {
overflow: hidden;
}
.float {
float: left;
}
怎么让一个div水平垂直居中
使用flex或者grid：
div-parent{
display :flex;
// display :grid;
}
div.child{
margin: auto;
}
水平垂直居中有好多种实现方式，主要就分为两类不定宽高和定宽高，以在body下插入一个div为例
一、定宽高
使用定位+margin：
element.style {
position: absolute;
left: 50%;
top: 50%;
margin-left: -250px;
margin-top: -250px;
width: 500px;
height: 500px;
background: yellow;
z-index : 1;
}
使用定位+transform：
element.style {
position: absolute;
left: 50%;
top: 50%;
width: 500px;
height: 50Opx;
background: yellow;
z-index: 1;
transform : translate3d( -50%,-50%,e);
}
二、不定宽高
不定宽高的方法基本都适用于定宽高的情况
这里把div的宽高按照内容展开
使用定位+transform同样是适用的：
element.style {
position: absolute;
left: 50%;
top:50%;
background: yellow;
z-index: 1;
transform: translate3d(-50%,-50%,0);
}
使用table-cell的方式：
.parent {
display: table-cell;
height: 200px;
width: 200px;
background-color: orange;
text-align: center;
vertical-align: middle;
}
.child {
display: inline-block;width: 180px;
height: 100px;
background-color: blue;
}
<div class='parent'>
<div class='child'></div>
</div>
已知如下代码，如何修改才能让图片宽度为300px ?注意下面代码不可修改。
<img src='1.jpg' style="width: 480px !important;">
方法一：
添加max-width: 300px
方法二：
box-sizing: border-box;
padding: 0 90px;
方法三：
transform: scale(0.625);按比例缩放图片
方法四：
使用js：document.getElementsByTagName('img')[O].setAttribute('style','width:300px !important;')
方法五：
img {
animation: test Os forwards;
}
keyframes test {
from {
width: 300px;
}
to {
width: 300px;
}
}
利用CSS动画的样式优先级高于limportant的特性
如何用css或js 实现多行文本溢出省略效果，考虑兼容性
对于单行：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
对于多行：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行数
overflow: hidden;
js实现：
- 使用split +正则表达式将单词与单个文字切割出来存入words
- 加上 ‘…’
- 判断
scrollHeight与clientHeight，超出的话就从words中pop一个出来
const p = document.querySelector('p')
let words = p.innerHTML.split(/(?<=[\u4e0o-\u9fa5])|(?<=\w*?1b)/g)
while (p.scrollHeight > p.clientHeight){
words.pop()
p.innerHTAL = words.join('')+ '...'
}
清除浮动
一、添加额外标签clear
<style>
.box1 {
width: 200px;
height: 200px;
background-color: green;
float: left;
}
.box2 {
width: 300px;
height: 300px;
background-color: yellow;
}
.clear {
clear: both;
}
</style>
<body>
<div class="box1"></div>
<div class="clear"></div>
<div class="box2"></div>
</body>
二、使浮动元素的父级变为BFC块
<style>
.parent {
overflow: hidden;
}
.box1 {
width: 200px;
height: 200px;
background-color: green;
float: left;
}
.box2 {
width: 300px;
height: 300px;
background-color: yellow;
float: left;
}
</style>
<body>
<div class="parent">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
三、使用伪元素清除浮动：
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after{
content: " ";
display: inline-block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom: 1;
}
关于css禁用
pointer-events: auto;
cursor: not-allowed;
鼠标事件的禁用
pointer-events: none;
