oops

用css完成简易手风琴效果，可以利用锚点链接来切换显示的色块。a标签为按钮，用来控制哪个盒子拉出要想用transition增加动画效果需要给盒子初始高度为0，就会有缓慢下拉动画效果。<style> .box { margin: 50px auto; width: 500px; height: 600px; border: 1px solid #000; } #box1, #box2, #box3 {

css双飞翼布局指的是左右两侧盒子固定，中间的盒子自适应大小这里有四种方式可以实现一、利用浏览器加载顺序将中间需要自适应的盒子放在最后，让浏览器左后加载，先让左右两个固定宽度的盒子浮动上去，中间自适应的盒子就可以上去了。 <style> * { margin: 0; padding: 0; } .left-box { float: left; width: 300px; height: 900px;

两栏布局是一种比较常见于后台管理的布局方式，通常是左边固定宽度，右边随着屏幕宽度自适应宽利用BFC，左侧盒子设置浮动后，右侧的盒子就会上去，出现在左侧盒子底部，给右侧的盒子变成BFC区域就可以解决被左侧盖住的问题代码展示 <style> * { margin: 0; padding: 0; } .left-box { float: left; width: 300px; height: 900px;

在网页布局中经常会遇到想给盒子设置高度自适应但出现高度塌陷问题，造成这个问题的原因就在于父盒子没有设置高度，子盒子有浮动这里有四种解决高度塌陷的方法一、给父盒子添加高度，这个可以从根本上解决问题，但无法做到高度自适应。二、给父级添加overflow：hidden属性,原理是我们给父盒子添加文本溢出隐藏属性后，会触发BFC（块级格式化上下文），这时浮动的盒子也会参与高度计算。这样就可以解决高度自适应问题缺点是当有子级元素需要超出父盒子时元素会被隐藏 div { width:

有些需求是禁止用户框选的，使得一些文本无法被复制 body { -moz-user-select : none; -khtml-user-select: none; user-select : none; } ```

在flex布局的时候有时候我们在设置justify-content: end;属性的时候因为被其他盒子影响而无法靠右对齐这时因为浮动在flex布局下也不能使用的时候我们可以用到这个方法轻松解决div { margin-left:auto;}这个属性可在不适用浮动的情况下让盒子靠右对齐...

html+css实现在浏览器居中显示下面有两种方法，个人更推荐第一种利用transform方法实现居中一、利用固定定位属性让盒子相对浏览器上左移动各50%，再上左移动自身50% <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background: pink; position: fixed;

利用css完成轮播图效果方法很简单，下面先看代码 <style> * { margin: 0; padding: 0; } div { margin: 200px auto; width: 520px; height: 280px; border: 1px solid #000; position: relative; } ul { display: fl

当我们插入的图片小于父盒子的时候，图片就会默认在左上角显示。一、先给父盒子添加 text-aling:centor; 使图片在水平居中显示。二、在img标签后添加一个行内块标签（如果不是可转换为行内块）。三、设置span标签样式（span宽度可以为0，高度100%自适应）span { display: inline-block; width: 0; height: 100%; background: red; vertical-align: middle;}

加上padding和border后盒子被撑大了怎么解决？关于盒子被撑大，这就要涉及到盒子模型的知识了，一个盒子由内容、padding、border和margin组成，导致盒子被撑大的主要原因就于padding和border了。这里有两种解决办法一、修改盒子的宽高给多少的padding和border值就减去多少的盒子长度，可以解决撑大盒子问题，不过这个方法不太推荐。二、给盒子添加一条属性可以完美解决盒子撑大问题 “box-sizing”.box { box-sizing:..

css解决文字和图片对齐方式问题通常情况下图片是默认顶部对齐，而文字则是默认底部对齐的，所以我们在布局时经常会遇到图片和文字不能对齐的问题。解决方法很简单我们只需要给图片添加一条属性即可img { width : 20px; vertical-align: middle;}vertical-align: text-top; //顶部对齐vertical-align: middle; //居中对齐vertical-align: text-bo

解决页面img图片底部有空白区域平时插入图片经常会遇到这种底部会有空白区域的问题，并不是img高度设置的问题，因为“img”属于行内标签，所以我们只需要设置它为块级元素，就可以完美解决这个问题 img { display: block; width : 188px; height: 235px;}...

css字体图标引入方法在网页中将小图标制作成字体是很多网站的常用做法，为的是减少页面请求。 先推荐一个字体图标库（阿里巴巴矢量图标库） https://www.iconfont.cn/一、首先根据项目按需选择好自己需要的图标，添加至入库二、都选好后，将库中的图标添加至项目中，没有项目可先创建项目，添加在项目里后，将项目下载至本地，解压出来即可 三、最后就可以在代码中引入图标了（字体图标文件里的html文件里可打开查看图标的代码）...

利用css画三角箭头图标方式单独设置正方形的两条相邻的边框，通过transform的rotate属性值旋转实现箭头图标(注意单位为deg) div { width: 50px; height: 50px; border-left: 2px solid black; border-top: 2px solid black; transform: rotate(-45deg); }...

利用css实现三角形一、首先建立一个四边形 设置其边框属性二、设置其余边框为透明色 只留下一条边框，用于形成三角形 div { width: 200px; height: 200px; border: 40px solid transparent; //四条边框透明 border-top-color: red; //留下其中一条 }三、将留下的边长度设为0，从而实现三角形div {

整体内容高度自适应HTML代码： <div class="content_2 w"> <div class="content_2_left"> <img src="images/img20190926qf.jpg" alt=""> </div> </div>CSS代码：.content_2 { display: flex; align-items: center; heigh...