HTML/CSS
青衫客~
来日方长,要在不慌不忙之中学会坚强
展开
-
实现元素水平垂直居中的4种方法
引 元素的垂直水平居中在网页开发中极为常见,其实现方法也多种多样,接下来将介绍4种实现元素垂直水平居中的方法。实现效果如图: <body> <div class="father"> <div class="son"></div> </div> </body> 一、 使用弹性盒模型flex实现 设置父元素的布局方式为flex, display: flex; 设置父元素在水平方向上的对齐方式为居中对齐,j原创 2020-09-30 19:42:17 · 4195 阅读 · 0 评论 -
清除浮动的本质及方法
引 为什么要清除浮动? 元素浮动在网页开发中十分常见,但很多时候会发现,浮动的元素会影响其他元素的排列。这是因为浮动元素会脱离标准流,不再保留原来的位置,其后面的标准流元素会补上浮动元素空出来的位置,从而会影响其后面的标准流。 一 清除浮动的本质 先来看一下浮动会产生的影响: 所以,清除浮动的本质是清除浮动元素造成的影响,若父元素本身有高度,则不需要清除浮动。清除浮动后,父级就会根据浮动的自盒子自动检测高度,父级有了高度,就不会影响其后面的标准流了。 二 清除浮动的方法 清除浮动主要有四种方法:额外标原创 2020-09-14 17:34:44 · 516 阅读 · 0 评论 -
CSS中外边距(margin)合并问题
引 使用margin定义块级元素的垂直外边距时,可能出现外边距的合并。主要有以下两种情况: 相邻块元素垂直外边距的合并 嵌套块元素垂直外边距的塌陷 一 相邻块元素垂直外边距的合并 当上下相邻的两个块元素(兄弟关系)垂直排列时,如果上面的元素有margin-bottom,下面的元素有margin-top,则他们之间的垂直距离不是margin-bottom与margin-top之和,而是取两个值中较大的一个。 上图中:设置box1的margin-bottom为20px,box2的margin-top值为1原创 2020-09-13 21:04:35 · 899 阅读 · 0 评论 -
CSS中三角形的绘制与巧妙应用
引 网页中常见的一些三角形,无需制作成图片或者字体图标,使用CSS就可以直接画出来。如小米官网中: 以及京东网页中的: 那么这些三角通过是CSS怎么实现的呢? 三角的实现 我们可以通过将一个div容器的宽和高都设置为0,通过设置容器的边框来实现。 .box { height: 0; width: 0; border-color: wheat skyblue pink rgb(154, 121, 230); bo原创 2020-09-10 18:49:27 · 260 阅读 · 0 评论