css进阶

最新推荐文章于 2023-07-09 21:24:46 发布

kalinux

最新推荐文章于 2023-07-09 21:24:46 发布

阅读量91

点赞数

分类专栏： UI 文章标签： css html5 html

本文链接：https://blog.csdn.net/kalinux/article/details/119696108

版权

UI 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

flex布局

1.行内块状都可设为flex
2.设为flex布局后，子元素float，clear，vertical-align失效
3.设置在容器的属性：

flex-direction: 项目水平还是垂直排列
flex-wrap：水平（换行方式）
justify-content: 水平（左右居中贴边环绕？）
align-items：垂直（上下居中拉扯？）
align-content：垂直(上下居中贴边环绕？）多行
~~flex-flow:flex-direction和flex-wrap简写，用处不大~~

4，设置在子元素的属性：

order: 权重（越大排列越靠后）
align-self：覆盖align-items，子元素自己的垂直方式
flex-grow：放大比例（空间多余）
flex-shrink：缩小比例（空间不够）
flex-basis：占据固定空间（计算空间多余或不够之前就固定了）
~~flex:以上三个的缩写~~

5，应用场景
将第一张图使用flex布局成第二个图

代码：

<div class="back">
  <span class="point"></span>
  <span class="point"></span>
</div>

<style>
 .back{
width:100px;
height:100px;
background:red;
display:flex;
justify-content:space-between; //水平方向贴边
}
.point{
width:20px;
height:20px;
background:black;
border-radius:10px;
display:block;
}
.point:nth-of-type(2){
align-self:flex-end; //子元素自身，垂直方向，贴下边缘
}
</style>

BFC

BFC就是块级格式化上下文。就是一个隔离容器，在这个容器里面的布局不会影响到外部的元素。

BFC规则
1，内部元素从顶部垂直排列
2，内部元素贴边
3，内部相邻元素margin重叠
4，内部float元素高度也被包含
5，外部不与float重叠

产生BFC条件

float 除了none以外
overflow 除了visible 以外（hidden，auto，scroll ）
display (flex，inline-block，inline-flex，table-cell，table-caption)
position (absolute，fixed）
html
不常见：contain，多列容器，fieldset元素

补充：
假如是display：flex（第一条规则flex的优先级大于BFC规则，也就是BFC内部元素水平排列）
针对第三条BFC规则，其实任何相邻块级元素的margin都会重叠
针对第二条规则，其实大部分的元素都贴边

BFC使用场景（作用）：
1，避免外边距重叠（创造BFC: 将两个元素分别包裹在div中，这个div设置overflow:hidden)
2，清除浮动（父元素包裹子元素，子元素float:left，父元素高度坍塌，此时令父元素overflow:hidden，可以清除浮动，高度被子元素撑起来）
3，阻止浮动元素的覆盖（两个兄弟元素，第二个元素设置float:left，第一个元素被第二个覆盖，此时给第一个元素设置overflow:hidden，就可以不被覆盖）
4，两栏自适应布局

一个实例：div里包含img和p，希望图片在左，文字在右

<div>
    <img />
    <p>
</div>

目前状态：

img{
float:left;   //脱离文档流，父级高度坍塌
}
div{
overflow:hidden;  //产生BFC,（内部渲染不影响外部）清除了浮动，父级div高度为img高度（解决坍塌)
}
p{
oveflow:hidden; //产生BFC，自己的渲染不影响外部(img)，p的宽度为div-img，而不是div（解决宽度）

盒子模型

1，如何使得一个盒子无论width如何变化，它的实际宽度都是固定的？

使用box-sizing: border-box; 则该元素的border和padding不会额外增加宽度，而是借用width宽度绘制。

拖动事件

核心属性： draggable="true"

核心事件：
2，ondragstart
3，ondragover
4，ondrop

核心方法：
1， e.dataTransfer.setData
2，e.preventDefault（默认是不允许drop，这边屏蔽一下）
3，e.dataTransfer.getData

<html>
<style>
.start,.end{
  width:200px;
  height:200px;
  border:1px solid red;
  }
  .move{
  width:50px;
  height:50px;
  background:red;
  }
</style>
<body>

 <div class="start"  >
 	<div class="move" draggable="true" ondragstart="start(event)" id="start0"></div>
 </div>
 <div class="end" ondrop="drop(event)"  ondragover="allowdrop(event)" id="end0"></div>
</body>
<script>
function start(e){
e.dataTransfer.setData("text", e.target.id);
}
function allowdrop(e){
e.preventDefault();
}
function drop(e){
var id=e.dataTransfer.getData("text")
 var item=document.getElementById(id);
 e.target.appendChild(item);
}
</script>
</html>

position

static：用于取消继承
relative：相对于自身原来位置定位（占据文档流）
absolute：父级是relative，absolute，则相对于父级定位，否则相对于body定位（不占文档流）
fixed：相对于浏览器定位

图片懒加载

懒加载：图片列表太长，还没进入屏幕的时候不给src，进入屏幕的时候才给src，并发起请求。

核心思想：获取图片到可视区域的距离，假如小于0，则为src赋值

获取图片到可视区域的距离：clientHeight，offsetTop，scrollTop

代码：

<body>
    <img data-src="./images/1.jpg" alt="">
    <img data-src="./images/2.jpg" alt="">
    <img data-src="./images/3.jpg" alt="">
</body>
<script>
        var imgs = document.querySelectorAll('img');

        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetTop;
            }
            return T;
        }

        function lazyLoad(imgs) {
            var H = document.documentElement.clientHeight;//获取可视区域高度
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                }
            }
        }

        window.onload = window.onscroll = function () {  
            lazyLoad(imgs);
        }
</script>

px rem em

rem是相对于html的font-size属性的单位。

em是相对于当前元素的font-size，如果当前元素没有设置font-size，则相对于浏览器默认font-size(18px)，（注意：当前元素没有设置但是可以继承父级的也算是有这个font-size属性）。

场景实例

1，使用css实现一个箭头

<div class="arrow" ></div>
<style>
.arrow{
width:0;
height:0;
border:0;
border-left:10px solid red;
}
</style>

2，实现垂直居中的几个方法假如是大div里套着小div，样式如下：

假设初始化是这样的，大div套小div

方法一：position+transform

.inner{
/*这么写*/
margin:auto;
position:relative;
top:50%;
transform:translateY(-50%);
/*或者这么写*/
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

方法二：flex

.outer{
display:flex;
justify-content:center;
align-items:center;
}

方法三： table-cell+inline-block

.outer{
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner{
display:inline-block;
}

方法四：position+calc

.inner{
position:relative;
top:calc(50% - 50px);
left:calc(50% - 50px);
}

3，实现一端固定，一端自适应

方法一：calc

.left{
width:100px;
}
.right{
width:calc(100%-100px)
}

方法二：flex:1

.father{
display:flex;
}
.left{
width:100px;
}
.right{
flex:1;
}

方法三：float

.left{
width:100px;
float:left;
}
.right{
height:50px;
}

方法四：absolute+right:0

.father{
position:relative;
}
.left{
width:50px;
}
.right{
position:absolute;
top:0;
left:50px;
right:0
}

方法五：table+table-cell

.father{
display:table;
}
.left{
display:table-cell;
width:50px;
}
.right{
display:table-cell;
}

方法六：grid+grid-template-columns

.father{
display:grid;
grid-template-columns:50px auto;
}

4，实现一条高度为0.5px的线？

:before，scale(0.5)

5，获取第三个p元素

.father p:nth-child(3){
background:red;
}

kalinux

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css进阶

flex布局1.行内块状都可设为flex2.设为flex布局后，子元素float，clear，vertical-align失效3.设置在容器的属性：flex-direction: 项目水平还是垂直排列flex-wrap：水平（换行方式）justify-content: 水平（左右居中贴边环绕？）align-items：垂直（上下居中拉扯？）align-content：垂直(上下居中贴边环绕？）多行flex-flow:flex-direction和flex-wrap简写，用处不大.
复制链接

扫一扫