优设设计师网站,wordpress做ftp,微商商城系统开发,注册永久免费域名1.display:none;和visibility:hidden;的区别
相同点#xff1a;都可以让元素不可见
区别#xff1a;
display:none;可以让元素完成在渲染树中消失#xff0c;渲染时不占任何空间#xff1b;visibility:hidden;不会让元素从渲染树消失#xff0c;渲染元素继续占据空间和visibility:hidden;的区别
相同点都可以让元素不可见
区别
display:none;可以让元素完成在渲染树中消失渲染时不占任何空间visibility:hidden;不会让元素从渲染树消失渲染元素继续占据空间只是内容不可见。
修改元素的display通常会造成文档重排修改isibility属性只会造成本元素的重绘
2.外边距折叠
相邻两个或多个普通流中的块元素在垂直方向上的margin会折叠。
浮动元素或行内块元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠
创建了块级格式化上下文BFC的元素不会和它的子元素发生margin折叠
3.z-index是什么
z-index属性设置元素的堆叠顺序。仅在定位元素上有效果。在position的值是relative,absolute,fixedsticky时候可以触发
4.盒模型
内容Content,内边距Padding,边框Border,外边距Margin
box-sizing:content-box|border-box|inherit;
CSS有两种不同的盒模型 标准盒模型W3C Box Model默认在这个模型中元素的width和height只指内容区域的宽度和高度。内边距、边框和外边距会加在内容的宽度和高度上。 IE盒模型也称为“怪异盒模型”在IE浏览器中元素的width和height包括了内边距和边框的宽度。也就是说设置的宽度和高度实际上是元素的外部尺寸。 5.移动端适配
a.meta viewport视口
b.图片适配
c.媒体查询
d.动态rem方案
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width,initial-scale1.0,minimum-scale1.0,maximum-scale1.0,user-scalablenotitleDocument/titlelink relstylesheet hrefcss/reset.csslink relstylesheet hrefcss/05.csslink relstylesheet hrefzuqiuFont/iconfont.css
/headbodyheaderdiv热点/divdiv关注/div/headernavdivxx现场/divdivxx生活/divdivxx美女/div/navmainfigureimg srcimg/1.jpg altfigcaption小丸子啊/figcaption/figurefigureimg srcimg/1.jpg altfigcaption小丸子啊/figcaption/figurefigureimg srcimg/1.jpg altfigcaption小丸子啊/figcaption/figurefigureimg srcimg/1.jpg altfigcaption小丸子啊/figcaption/figurefigureimg srcimg/1.jpg altfigcaption小丸子啊/figcaption/figurefigureimg srcimg/1.jpg altfigcaption小丸子啊/figcaption/figurefigureimg srcimg/1.jpg altfigcaption小丸子啊/figcaption/figurefigureimg srcimg/1.jpg altfigcaption小丸子啊/figcaption/figurefigureimg srcimg/1.jpg altfigcaption小丸子啊/figcaption/figurefigureimg srcimg/1.jpg altfigcaption小丸子啊/figcaption/figure/mainfooterdivspan classiconfont icon-shouye/span 首页/divdivspan classiconfont icon-shouye/span 首页/divdivspan classiconfont icon-xiangji/span/divdivspan classiconfont icon-shouye/span 首页/divdivspan classiconfont icon-shouye/span 首页/div/footer
/body
/html
!-- 1.该项目的设计稿总宽度是640px,所以对应在iPhone5上做,该设备的真实大小是320,所以dpr 22.改视口3.考虑适配(vwrem实现实时适配)假设基准字号为100pxhtml的字号需要写vw,就需要把100px转成vw如果我们基于iPhone5做,100vw320px 1vw3.2px 100px100/3.231.25vw记住:改工具里面的设置4.在body里面让字号回归为默认字号16px5.正常书写布局代码--
html {font-size: 31.25vw;
}html,
body {height: 100%;
}body {font-size: 16px;display: flex;flex-direction: column;
}/* header */header {height: .44rem;background-color: green;display: flex;justify-content: center;align-items: center;
}header div:nth-child(1) {width: .6rem;height: .24rem;background-color: #63d985;border-radius: .12rem 0 0 .12rem;text-align: center;line-height: .24rem;color: white;font-size: .12rem;
}header div:nth-child(2) {width: .6rem;height: .24rem;background-color: #54cc76;border-radius: 0 .12rem .12rem 0;text-align: center;line-height: .24rem;color: white;font-size: .12rem;
}nav {height: .35rem;border-bottom: 1px solid gray;display: flex;/* justify-content: space-around; */
}nav div {width: 33.33%;text-align: center;line-height: .35rem;
}nav div:hover {border-bottom: 2px solid green;color: green;
}main {flex: 1;background-color: pink;display: flex;flex-wrap: wrap;justify-content: space-between;overflow: auto;
}main figure {border: 1px solid gray;width: 48%;margin-top: .1rem;
}main figure img {width: 100%;vertical-align: middle;
}main figure figcaption {border-top: 1px solid gray;padding: .05rem 0 .05rem .1rem;
}footer {height: .44rem;display: flex;justify-content: space-around;align-items: center;
}footer div {display: flex;flex-direction: column;align-items: center;
}footer div:nth-child(3) {border: 1px solid gray;width: .52rem;height: .52rem;border-radius: 50%;text-align: center;line-height: .52rem;/* margin-top: -8px; *//* position: relative;top: -7px; */transform: translateY(-0.05rem);background-color: #fff;
}footer div:nth-child(3) .icon-xiangji {font-size: .3rem;
} 6.css3的transformtransition过渡,animation动画
transform属性用于在2D或3D空间中对元素进行变换。可以通过旋转、缩放、倾斜和移动等效果来改变元素的形状和位置。
.box {width: 100px;height: 100px;background-color: blue;transform: translate(50px, 50px) rotate(45deg);
}
transition用于创建平滑的变化效果使CSS属性的变化更加自然。它定义了当元素状态变化时过渡效果的持续时间、效果和延迟。从一种效果逐渐改变为另一宗效果。通常需要由事件来触发。transition是一次性的不能重复发生除非再次触发。
属性
transition-property: 指定需要应用过渡效果的CSS属性。transition-duration: 定义过渡效果的持续时间。transition-timing-function: 定义过渡效果的速度曲线如ease、linear、ease-in等。transition-delay: 定义过渡效果的延迟时间。
.box {width: 100px;height: 100px;background-color: blue;transition: background-color 0.5s ease, transform 0.5s ease;
}.box:hover {background-color: red;transform: scale(1.2);
}
animation用于创建更复杂的动画效果。与transition不同animation可以控制关键帧允许在多个状态之间进行变化。
属性
animation-name: 指定动画的名称通常与keyframes一起使用。animation-duration: 定义动画的持续时间。animation-timing-function: 定义动画的速度曲线。animation-delay: 定义动画的延迟时间。animation-iteration-count: 指定动画的循环次数如infinite。animation-direction: 定义动画的播放方向如normal、reverse、alternate等。
keyframes slide {0% {transform: translateX(0);}50% {transform: translateX(100px);}100% {transform: translateX(0);}
}.box {width: 100px;height: 100px;background-color: blue;animation: slide 2s infinite;
} 7.父元素和子元素宽高不固定如何实现水平处置居中
方法一使用 Flexbox style.parent {display: flex; /* 启用 Flexbox */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中可选 */height: 100vh; /* 高度设为 100% 视口高度便于查看效果 */border: 2px solid #333; /* 添加边框以显示父元素 */}.child {padding: 20px;background-color: lightblue;border: 1px solid #007bff; /* 添加子元素的边框 */}/style 方法二使用绝对定位 style.parent {position: relative; /* 使父元素成为定位上下文 */height: 100vh; /* 高度设为 100% 视口高度 */border: 2px solid #333; /* 添加边框以显示父元素 */}.child {position: absolute; /* 使用绝对定位 */left: 50%; /* 移动到父元素的 50% */top: 50%; /* 移动到父元素的 50% */transform: translate(-50%, -50%); /* 将元素中心移动到该点 */padding: 20px;background-color: lightcoral;border: 1px solid #007bff; /* 添加子元素的边框 */}/style 方法三使用 Margin 自动设置 style.parent {width: 80%; /* 设置父元素宽度 */margin: 0 auto; /* 使父元素居中 */height: 100vh; /* 高度设为 100% 视口高度 */border: 2px solid #333; /* 添加边框以显示父元素 */}.child {width: fit-content; /* 宽度根据内容自适应 */margin: 0 auto; /* 子元素水平居中 */padding: 20px;background-color: lightgoldenrodyellow;border: 1px solid #007bff; /* 添加子元素的边框 */}/style
8.假设默认高度100px写三栏布局左右栏300px,中间自适应
style.container {display: flex; /* 使用Flexbox布局 */height: 100px; /* 设置容器高度 */}.left-column, .right-column {width: 300px; /* 左右栏固定宽度 */background-color: #f0f0f0; /* 背景色 */padding: 10px; /* 内边距 */text-align: center; /* 居中对齐文本 */}.center-column {flex: 1; /* 自适应宽度 */background-color: #d0e0f0; /* 背景色 */padding: 10px; /* 内边距 */text-align: center; /* 居中对齐文本 */}/style
