清除浮动的4种方式
摘要：
一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。优点： 通俗易懂，书写方便。（不推荐使用）缺点： 添加许多无意义的标签，结构化比较差。 给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可） 二、 父级添加overflo 阅读全文
posted @ 2020-08-30 20:57 申文静 阅读(403) 评论(0) 推荐(0) 编辑
水平居中与垂直居中
摘要：
一. 内联元素居中（文本text、图片img、按钮button等）给父元素设置text-align:center。给一个例子：使若干个元素（数量可变），在一行中居中显示，可用列表实现。我们知道列表中的<li>标签元素为块级元素，故可先将其display:inline，在一行中显示，然后将<li>的父 阅读全文
posted @ 2020-08-28 01:04 申文静 阅读(222) 评论(0) 推荐(0) 编辑
如何实现两三栏布局
摘要：
. 两栏布局,左边定宽 三栏布局,中间自适应 2. 通过positon定位实现三栏布局中间自适应 将父元素设置为position:relative. 左边元素:position:absolute; left:0; top:0; 右边元素:positon:absolute; right:0; top: 阅读全文
posted @ 2020-08-28 00:48 申文静 阅读(102) 评论(0) 推荐(0) 编辑
BFC
摘要：
BFC的基本概念: 通俗的讲，就是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。 BFC原理: BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。 BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。 BFC的区域不会与 阅读全文
posted @ 2020-08-27 08:24 申文静 阅读(137) 评论(0) 推荐(0) 编辑
flex弹性盒子
摘要：
弹性盒模型 弹性盒子是 CSS3 的一种新的布局模式。 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空 阅读全文
posted @ 2020-08-26 16:26 申文静 阅读(108) 评论(0) 推荐(0) 编辑
