CSS的学习

最新推荐文章于 2024-07-14 12:56:18 发布

何嘉烟

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量118

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/the_more_more/article/details/125056606

版权

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;

何嘉烟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的学习

CSS的学习介绍一下BFC及应用BFC特性:内部box会在垂直方向，一个接一个地放置。Box垂直方向的距离由margin决定，在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。在BFC中，每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说，则触碰到右边缘)形成了BFC的区域不会与float box重叠计算BFC高度时，浮动元素也参与计算生成BFC的还有:行内块元素、网格布局、contain值为layout、cont
复制链接

扫一扫