CSS知识学习
关注
分享
扫一扫
文章平均质量分 51
围绕面试，学习CSS相关知识
我爱学习&&学习爱我
这个作者很懒，什么都没留下…
展开
-
垂直居中、水平居中
垂直居中布局垂直居中我感觉可以分为两个部分：1.内容垂直居中文本内容的垂直居中通过line-height实现，具体取值为height-paddingTop+paddingBottom;2.盒子垂直居中position+transform实现。（引出问题：为什么不用marginTop？？涉及到重排和chong'hu） /* <div class="father"> <div class="child"> ...原创 2022-01-18 17:29:24 · 200 阅读 · 0 评论 -
line-height属性实现文本垂直居中和padding的关系
使用line-height：height进行垂直居中时，发现了个小问题，如果说盒模型有padding，那么line-height的值就不能简单的设为height。经过总结发现此时line-height的值应该设为：height-paddingTop+paddingBottom,同时border和margin对line-height的值不会产生影响，如下图，但是说如果用的时padding-top,那么line-height的值应该就是300px大家可自...原创 2022-01-18 12:14:53 · 476 阅读 · 0 评论 -
CSS——三栏布局
html模板如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2022-01-17 21:00:26 · 92 阅读 · 0 评论 -
四种清除浮动的方法
为什么要清除浮动？清除浮动的本质:主要为了解决父级元素因为子级浮动引起内部高度为0的问题。也称为高度塌陷。清除浮动的方式清除浮动总体上可以分为两个大类：通过clear：both样式实现清除浮动 手动添加一个标签并指定样式为clear：both；缺点：多出无意义的标签 <div class="father"> <div class="child1"> 我是1号子盒子 </div> <di...原创 2022-01-17 15:46:39 · 200 阅读 · 0 评论 -
BFC块级格式上下文（Block Formating-context）
写在前面 本文来自对各个博主文章的摘录，如有侵权请联系删除。BOXBox 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。不同类型的 Box， 会参与不同的 Formatting Context 进而决定如何渲染这个盒子。盒子一共有如下种类： block-level box:display 属性为 block, list-item, ta...原创 2022-01-17 15:29:04 · 86 阅读 · 0 评论 -
什么是文本流和文档流？为什么文本会超出盒子宽度？为什么会超出高度？
文档流：相对于盒子模型讲的文本流：相对于段落讲的元素浮动之后（float布局）元素则会脱离文档流，也就是说当他后面还有元素时，其他元素会无视他所占据了的区域，直接在它身下布局。但是文字、图片、表单等元素依然会为这个脱离了文档流的元素让出位置，会认同浮动元素所占据的区域，围绕着它布局，也就是说浮动元素没有脱离文本流。绝对定位后，不仅元素盒子会脱离文档流，同时也会脱离文本流，那么后面元素的文本就不会认同该元素的位置了，直接在它下面而不会环绕。示例一：蓝色区域为左浮动，因此其脱离了...原创 2022-01-17 11:57:51 · 1215 阅读 · 0 评论