目录： 1、水平居中 2、垂直居中 水平居中 块级标签：设置 margin : 0 auto 行内标签：设置 text-align : center 行内-块级标签：设置 text-align : center 块级标签水平居中 <!DOCTYPE html> <html> <head> <meta ...
分类：
其他好文 时间：
2020-05-06 21:59:24
阅读次数：
77
利用图片的margin属性将图片水平居中，利用div的padding属性将图片垂直居中。 结构代码同上； css代码如下： div {width:300px; height:150px; padding-top:50px; border:#000 1px solid;} img {display:b ...
分类：
Web程序 时间：
2020-05-05 18:00:25
阅读次数：
64
垂直居中 相信我们大多数人都是从static,浮动，定位这三种布局方式来开始制作网页的。在大多数的业务需求下，浮动和定位都能够很好的满足我们的开发需要。即使是在响应式设计中，浮动和定位配合百分比，rem，媒体查询都能够解决大多数的问题。但是如果你只使用浮动和定位的话，碰到以下的场景你就会发现不是那么 ...
分类：
其他好文 时间：
2020-05-05 17:38:47
阅读次数：
79
怪异盒模型 box-sizing:content-box 标准盒模型 总宽/高度=width+左右/上下padding+左右/上下border box-sizing:border-box 怪异盒模型（IE盒模型） 总宽/高度=width(包含padding和border) 弹性盒 特点：1、在弹性盒 ...
分类：
Web程序 时间：
2020-05-04 15:34:51
阅读次数：
89
梳理下平时常用css水平垂直居中方式～ 使用flex布局 HTML CSS 利用flex的 垂直居中， 水平居中 利用相对定位和绝对定位的 HTML CSS 相对定位下，使用绝对定位将上下左右都设置为0，再设置 即可实现居中 利用相对定位和绝对定位，再加上外边距和平移的配合 HTML CSS 相对定 ...
分类：
Web程序 时间：
2020-05-04 13:23:36
阅读次数：
77
案例基础布局 html <ul class="box"> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> css .box{ display: -web ...
分类：
其他好文 时间：
2020-05-02 13:25:00
阅读次数：
55
1、line-height（行间距） line-height 设置的是行高，指的是段落中每行文字间的距离。一般来说，将 line-height 设置为 div 元素的高度，则 div 内部的文字将会垂直居中显示。 line-height 与 font-size 的计算值之差（在 CSS 中成为“行间 ...
分类：
Web程序 时间：
2020-04-27 15:23:03
阅读次数：
79
<div class="box"> <img src="./1.jpg" alt=""/></div> 第一种：水平居中 .box { width:300px; height:300px; border:2px solid red;}img{ display:block; width:100px; ...
分类：
Web程序 时间：
2020-04-21 12:52:51
阅读次数：
70
代码结构： <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="https://timgsa.baidu.com/timg?i ...
分类：
其他好文 时间：
2020-04-15 13:51:19
阅读次数：
213
?引入bootstrap4 css文件，只在bootstrap4有效，bs3效果不太行： 垂直居中：为需要垂直居中的div新建如下样式 ~~~css .col center block { position: absolute; top: 50%; webkit transform: transla ...
分类：
其他好文 时间：
2020-04-14 09:17:34
阅读次数：
119
