前端css
css使用技巧
tongtongtheBEST
这个作者很懒,什么都没留下…
展开
-
移动端布局神器 -- 弹性盒(flexbox)
一、什么是弹性盒弹性盒子是 CSS3 的一种新的布局模式,在移动端布局中应用广泛。CSS3弹性盒( Flexible Box 或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。二、flex布局flex容器:采用 flex 布局的元素的父元素;flex项目:采用 flex 布局的元素的父元素的子元素;容器默认存在两根轴原创 2020-06-25 20:21:44 · 1205 阅读 · 0 评论 -
Web端页面布局小技巧 -- 解决高度塌陷的三种方法
1、什么是高度塌陷? 当子元素有浮动,父元素没有高度的时候,父元素会出现高度塌陷。2、解决方法2.1、给父元素添加over-flow:hidden<head> <meta charset="UTF-8"> <style> #box { width: 200px; background: pink; overflow: hidden; }原创 2020-06-21 19:20:03 · 1517 阅读 · 0 评论 -
web端页面布局小技巧 -- 如何利用定位使元素居中
元素在浏览器窗口居中的方法这里先给出代码块,如果有同学已经看出来点眉目可以先自己尝试一下。 position:fixed; /*给想要居中的元素设置*/ left:50%; /*或者right:50%*/ top:50%; /*或者bottom:50%*/ margin-left:-元素宽度的一半; /*或者margin-right*/ margin-top:-元素高度的额一半; ...原创 2020-05-05 18:32:13 · 2297 阅读 · 2 评论