html部分 <div class="outer-container"> <div class="inner-container"> <div class="content"> 滚动的内容 </div> </div> </div> css部分 .content, .outer-container { width: 200px; height: 200px;
直接上代码及注释吧 双飞翼布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv=&
圣杯和双飞翼布局 1.什么是圣杯布局和双飞翼布局？ 1.圣杯布局和双飞翼布局有共同的特性：两遍的宽度不变，中间的区域进行自适应。但是中间的区域放在左侧！就是cener，left，right 2.还可以使用flex布局来实现，中间区域的自适应。 3.今天先介绍1的两种布局 2.圣杯布局的步骤 1.设置一个
图解CSS布局（一）- Grid布局 先上图 简介 Grid 布局是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，也是唯一的二维布局方案，利用grid布局可以很轻松的实现很多的网页布局 正文 gird布局很强大，采用网格布局的区域，称为"容器"（container）。容器内部子元
CSS布局（一）- Grid布局 先上图 简介 Grid 布局是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，也是唯一的二维布局方案，利用grid布局可以很轻松的实现很多的网页布局 正文 gird布局很强大，采用网格布局的区域，称为"容器"（container）。容器内部子
一、css画三角形 参考：https://blog.csdn.net/weixin_36270908/article/details/98947183 核心重点：给一个div，设置宽高为0，设置border加粗、有颜色或透明 效果： 代码： 二、css画梯形 效果： 代码： <!DOCTYPE html> <html> <head> <title>css3绘制三角
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> div{ border: solid;
一、什么是文档流？ 将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素，称为文档流，也称为普通流。 这个应该不难理解，HTML中全部元素都是盒模型，盒模型占用一定的空间，依次排放在HTML中，形成了文档流。 二、什么是脱离文档流？ 元素脱离文档流之后，将不再在文档流中占据空间，而是
图片取自uniapp官方文档https://uniapp.dcloud.io/component/view detail.vue <template> <view> <!-- <view> <text>无敌季卡拉诺在学习</text> </view> <view> <text selectable>无敌季卡拉诺在学习</text>//selectable长按可选
大家好，全套HTML和CSS入门与实战课程正在我的专栏《HTML与CSS入门与进阶》更新中！内容通俗易懂，图文并茂，欢迎订阅！ 到此为止，html和css的基础已经全部讲完，接下来就是网页的布局。 如何把元素放在网页的任何一个位置？就是布局 文档流Normal flow 网页是一个多层的结构，一层包含着一层，
代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
img{ width: 200px; height: 200px; position: relative; } .div{ width: 200px; height: 50px; border: 1px solid dodgerblue;
鼠标移动到div块时，用CSS实现旋转 实现代码： <body> <div> </div> </body> <style> div { width:200px; height:200px; background-color:pink; margin:100px auto;
1 水平居中首先讨论一下如何将一个元素进行水平居中。给定以下HTML代码。<div class='box'>水平居中</div>通过css实现div的水平居中。.box{width:300px;height: 300px;margin: 0 auto;}首选设置box的宽度和高度，然后设置box外边距margin就可以实现水平居中。实现的原理很简单，利
屏幕中的流星效果 具体代码: <!--在<template>添加--> <!--流星--> <div class="liuxing liuxing1 liuxingFla"></div> <div class="liuxing liuxing2 liuxingFla2"></div> <div class="liuxing liuxing3 l
几道前端经典的面试题 掌握盒子水平垂直居中的五大方案 <style> body{ height: 100%; overflow: hidden; } .box{ height: 50px; width: 100px; background-color: blue; } </style> <body> <div class="box&
创建两块带有overflow: hidden属性的div，拼凑成一个正方形 合理利用border的上右（或下左）边框和transform的旋转属性，基于两个div实现一个环形边框 两个环形边框各旋转180°，可以将环形边框全部隐藏 基于你的需求，动态旋转一个或两个div，可以实现进度条的效果 代码如下 <html> <bo
完整学习视频及资料在这里哦~ 链接：https://pan.baidu.com/s/1XHxElnc2N-qwg2f2J30Qyw 提取码：4k8t 关键字(important) !important关键字：在调用的混合集后面追加 !important 关键字，可以使混合集里面的所有属性都继承 !important。这样可以提升样式的权重以至于不被层叠。 .bg()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title></title&
目录崩塌正常情况使用float脱离文档流后包裹基准线问题解决 参考文章 div在没有指定高度的情况下，是内容的高度；在没有设置宽度的清空下，默认是上一元素的宽度 崩塌 原因：子元素使用了float脱离了文档流，父元素又没有设置高度，产生崩塌 正常情况 <!--正常情况 --> <style>
盒子阴影(CSS3) 语法: box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影； 前两个属性是必须写的。其余的可以省略。外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset div { width: 200px; height: 200px; border: 10
HTML+CSS方块跳动 核心思想是将小方块放在隐形的大方块上，让大方块转动（rotate）带动小方块转动将4个方块分别装上animation，注意：这4个方块的动画总时长必须是相等的，然后再用infinite无限循环，可以用不同数量的方块，但时间一定要掐好。初学可以copy过去慢慢琢磨，我也是琢磨了好久才
4.1H5音频标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>H5新增的音频标签</title> </head> <body> <!-- HTML5新的语言标准 ，audio双标签, autoplay可设置自动播放（现在的浏览器都不支持） controls设置显示进度条，loop
1-在一个页面中给多个元素设置同样的 id，会导致什么问题？会导致通过js获取dom元素的时候, 只能获取到第一个元素, 后面的元素都无法正常获取.2-用伪类实现一个上三角（代码） .bottom:before{ content: ""; width: 0px; height: 0px;
什么是bfc？ bfc即Block Formatting Contexts,直译过来就是块级格式化上下文。BFC就是一个独立的容器，容器内的子元素不会影响到外面的元素。 如何创建bfc？ 只要满足以下任意条件之一就可以了 float不为noneposition不为relative或static``overflow不为visibledisplay为flex，inlin
