<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
1.绝对定位：当位置改变，该位置的坐标原点就会被释放， 后续的其他标签就可以占用该位置 <style> .div1{ height: 200px; width: 200px; background-color:grey;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @keyframes move{ /* 开始状态 */ 0%{ transform: translateX(0px); } /* 结束状态
相信有许多的朋友在学3D转换的时候很懵，或者学完之后想做个小练习获得成就感鼓励自己，再或者想更理解透彻。做完这小练习相信大家一定会有所收获。废话不多说了，直接开始： 构建基本架构 HTML代码： <div class="preserve"> <div class="front">前</div> <div class="back">后</div>
引言 圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。 区别 圣杯布局：为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后
文章目录 referenceexamplepreview reference Flexbox - Learn web development | MDN (mozilla.org) example <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Flexbox 1 — basic flexbox model chosen</
定位简介 定位作为网页布局的最后一种手段，常在标准流及浮动无法实现相应效果时使用。下面依次介绍静态定位，相对定位，绝对定位。 属性名：position: 定位需要配合left，right,top，bottom来使用，如： position: absolute; bottom: 0px; left:0px; 静态定位 position: static; 静态定位极
塌陷： explanation：父子块元素同时有上外边距，父元素应用较大的外边距值解决方法 父元素加上overflow:hidden;(常用）父元素加上透明border，即border: 1px solid transparent;父元素加上上内边距，即padding: 1px eg: /*塌陷时*/ <style> .fa { width: 500px;
1.flex方法 <style> .flex{ width: 200px; height: 200px; box-sizing: border-box; border: 1px solid red; float: left; display: flex; justify-content: center;
CSS3盒子模型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=&qu
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 后代 ul li{} 寻找父级元素下面的的元素（如：li，寻找父元素下面li标签） 父子 ul > li{} 寻找父级元素（如：ul，寻找子元素上面的ul标签） 兄弟
1.background-color：red ； //设置背景颜色为红色，rgb(0,0,0)和transparent 均为透明颜色 2.background-image（可缩bgi写用tab键） 语法：background-image：url('图片的路径')； 注意点：背景图片不会将原有的盒子撑开；如果一张图片占不满一个盒子，默认是在水平和垂直方向平铺的 3.背景平
一、scale()方法 缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。 跟translate()方法一样，缩放scale()方法也有3种情况： （1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；（3）scale(x,y)：元素水平方向和垂直方向
两侧固定宽度，中间以一个响应式或者自适应进行布局，例如CSDN和淘宝都是通过这种方式来进行布局。 1.利用浮动+margin 2.利用flex布局（常用）（父盒子设置display:flex,给中间的盒子设置flex为1） 3.利用圣杯布局 DOM结构(一个大的最外层盒子 MAIN盒子 左盒子 右盒子)先全部设置左浮动
源码下载：https://files.cnblogs.com/files/heyang78/hvcenter_211214.rar 实现一：（在Editplus和chrome都通过） 先上图： 代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>textarea在div内水平垂直都居中的实现一</title> <scri
一、盒子垂直居中的方法 1、先让盒子的上下边缘和父盒子的水平中心线重叠，，然后再让子盒子往回移动自身一半的距离 1 <div class="father"> // 结构 2 <div class="son"></div> 3 </div> 4 /* 通过 transform 属性来移动*/ 5 .fath
2.1内容的宽度和高度 ➢作用: 利用width和height属性默认设置是盒子内容区域的大小 ➢属性: width / height ➢常见取值:数字+px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=&
jQuery <!DOCTYPE html> <html> <head> <title>jQuery概述</title> <script src="jQuery.min.js"></script> <style type="text/css"> div{ width: 200px; height: 200px; background-color
选择器 css中的选择器有 id选择器，类（Class）选择器，属性选择器，通配符选择器，伪类选择器，伪选择器,群组选择器，后代选择器等。 这边要强调下 伪类选择器:简而言之的是它可以创建一个简单的一个元素的标签，如：after和:bfore 伪选择器：简而言之的是它描述的是一个标签的动态，如: :link,:fo
1.效果 2.代码展示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> * { margin:0px; padding:0px; } li { list-style: none; position: a
初学者在学习到CSS的时候会了解到它具有继承性、层叠性、优先级等等不同的属性，如果不了解这些属性会导致我们在使用它的时候出现各种各样的问题，今天长沙前端培训机构小编就来给大家介绍一下CSS的层叠性属性。 CSS层叠性的概念：有多个选择器或一个选择器对
##考核题目深度解析 1写出一个三角形 实现方法：设置一个盒子，将盒子的长宽设置为0，然后给盒子设置一个边框的厚度，颜色，最后将你想要边框的方向保留其他的颜色改为transparent(透明) 实现原理:因为将宽高设置为0，就可以将四周的边框积聚到一个点，从而形成四个三角形，最后将其他的盒子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>31-Vue-过渡动画</title> <script src="js/vue.js"></script> <style> *{
因为这里是使用的是本地的单词库，所以需要下载文件 下载地址：提取文件 - 单词库 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> 代码简洁 <style> .clearfix:before, .cl
