1.解释一下display的几个常用的属性值,inline , block, inline-block inline(行内元素): 使元素变成行内元素,拥有行内元素的特性,即可以与其他行内元素共享一行,不会独占一行. 不能更改元素的height,width的值,大小由内容撑开. 可以使用paddin ...
分类:
Web程序 时间:
2020-01-02 22:12:05
阅读次数:
71
text-align(文本对齐样式):可控制字体与行内元素如span 与 img left right center justify(两端对齐) 常见编程问题:想让文字上下左右居中对齐: text-align:center 配合line-height 想让图片上下左右居中对齐: text-align ...
分类:
其他好文 时间:
2020-01-01 16:35:42
阅读次数:
62
[toc] 网格布局 grid(1) 实现方式 也可成为 行内元素 tip:设为网格布局以后,容器内的子元素的 float 、 display:inline block/table cell , vertical align 和 column 等 各项设置属性都将失效 对容器设置的属性 行高与列宽的 ...
分类:
其他好文 时间:
2019-12-28 12:51:54
阅读次数:
91
常见布局实现: 作者:Sweet_KK 链接:https://juejin.im/post/5aa252ac518825558001d5de 来源:掘金 一、水平居中 文本/行内元素/行内块元素居中 ==text align== 只控制行内内容(文字、行内元素、行内块元素)如何相对于他的块父元素对齐 ...
分类:
其他好文 时间:
2019-12-27 21:53:44
阅读次数:
102
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } 容器默认存在两根轴:水平的 ...
分类:
其他好文 时间:
2019-12-27 09:36:16
阅读次数:
96
水平居中 1.行内元素水平居中,外面的父级块元素设置样式text align:center; 效果图如下: 2.块级元素的水平居中 方法一:设置左右两边的margin为auto即可 效果图如下: 方法二:css3新属性fit content意思是宽度缩小到和内容一样宽配合margin:auto; 效 ...
分类:
Web程序 时间:
2019-12-25 13:16:53
阅读次数:
100
div水平居中 1.行内元素 .parent{ text align: center } 2.块级元素 .son{ margin: 0 auto ; } 3.flex布局 .parent{ display: flex; justify content: center } 4.绝对定位 定宽 .son ...
分类:
Web程序 时间:
2019-12-23 16:38:26
阅读次数:
91
共有三大体系:常规流(normal flow) 浮动(float) 绝对定位(absolute position) 常规流:在没有css的干预下,块级元素独占一行,宽高可设;行内元素并排显示,宽高自动。 当元素浮动后,脱离文档流。因为子级元素浮动后导致父级高度坍塌。 浮动:1.左浮动的元素向上向左排 ...
分类:
其他好文 时间:
2019-12-21 20:56:51
阅读次数:
70
盒模型(内容(content),内边距(padding),边框(border),外边距(margin)) 这里做个比喻:content:比喻在网上买了几个鸡蛋; padding:比喻快递员包装鸡蛋用的防撞纸的距离,把鸡蛋牢牢的包裹起来,以免碰撞; border:外面使用包装箱的厚度; margin: ...
分类:
其他好文 时间:
2019-12-21 19:03:07
阅读次数:
78