布局
菜鸟咸鱼一锅端
毕业设计项目可以找我
展开
-
三.overflow 内容溢出容器时的处理方式
三.overflow 内容溢出容器时的处理方式visible可见的 hidden隐藏 scroll出现滚动条 auto内容溢出才出现滚动条设置某个方向:overflow-x 水平方向 overflow-y垂直方向当某一个方向的值不为visible,另一个方向的值会自动设置为auto备注:隐藏元素的两种方式1.display:none;隐藏元素,不占位置2.visibility:hidden;隐藏元素,占位置overflow的应用场景:1.高度塌陷,子元素都浮动了,父元素会没有原创 2020-07-22 14:12:05 · 754 阅读 · 0 评论 -
二. 定位 position
二. 定位 position1.static 静态定位,默认定位不能配合left right bottom top使用。2.相对定位relative特点:①.相对于自己本身所在的位置进行移动定位②.配合left,right,top ,bottom使用,相对于自己的某条边往元素中心方向移动为正值③相对定位的元素不脱离标准流(灵魂定位)3.absolute绝对定位特点:①绝对定位的元素相对于html或者最近的有定位(除了static)的父元素进行定位②通过left,right,t原创 2020-07-22 14:11:29 · 126 阅读 · 0 评论 -
移动端布局
一.页面结构布局1.百分比布局。2.弹性盒布局。3.分栏布局。4.响应式布局。移动端布局为多种布局结合使用,达到完美适配效果二.单位1.px2.百分比3.em 相对单位,基于自身字体大小font-size来计算,所以不同的元素1em代表的具体大小可能不同(部分浏览器的默认字体大小为16px)4.vw viewport width,视窗宽度,1vw等于视窗宽度的1%5.vh viewport height,视窗高度,1vh等于视窗高度的1%注意:使用vw/vh,需设置met原创 2020-07-22 14:09:52 · 156 阅读 · 0 评论 -
四.css sprites 的原理
1.将多张背景图片等有规则的合并成一张背景图,即多张图片合为一张整图,然后用background-position来实现背景图片定位技术①,通过图片整合来减少对服务器的请求次数,从而减少页面的加载速度②,通过整合图片来减少图片的体积2.滑动门技术...原创 2020-07-22 14:12:21 · 111 阅读 · 0 评论 -
自适应布局与响应式布局
自适应布局不同大小设备呈现同样的页面效果,只是文字、图片等的大小不一样,但是相对位置一样。例如:百分比布局、弹性盒布局flex、分栏布局。百分比布局所有的宽高都用百分比来实现Css3分栏布局css3多列布局可以自动将内容按指定的列数排列,这种特性实现的效果和报纸、杂志类排版非常相似。分栏布局属性columns:列宽 列数column-width 栏目最小宽度column-count 栏目最大列数column-gap 栏目间距,不能为负column-rule 栏原创 2020-06-19 16:11:26 · 470 阅读 · 0 评论