Web布局
关注
分享
扫一扫
Raaabbit
从入门到精通，脚踏实地
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
web居中布局-水平居中
居中布局水平居中要求：两个容器嵌套，且宽度不一定，满足小容器在大容器的水平居中位置<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试专用</title> <style type="text/css"> .parent{background-color: gray;wi原创 2017-09-13 10:22:49 · 1933 阅读 · 0 评论 -
web布局-垂直居中
垂直居中需求：父子容器高度不固定情况下，实现子元素在父元素内居中<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试专用</title> <style type="text/css"> .parent{background-color: gray; width: 100原创 2017-09-13 10:25:23 · 403 阅读 · 0 评论 -
多列布局-定宽与自适应
多列布局定宽与自适应分两列布局，其中一列宽度固定，另一列自适应<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试专用</title> <style type="text/css"> *{margin: 0;padding: 0;} .parent{wi原创 2017-09-13 10:26:42 · 255 阅读 · 0 评论 -
全屏布局
主要特点 保持充满整个窗口 滚动条往往控制局部区域 需求顶栏和低栏是定高的，整体的宽度是自适应的，中间的主内容去，侧边栏定宽，内容区自适应。实现方案一：Position<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全屏布局position</title> <style type="t原创 2017-09-13 10:28:21 · 414 阅读 · 0 评论 -
多列等高布局
多列布局—等高需求：当两列的内容变化时，要保证内容相同，且和较长的那列相同。<!DOCTYPE html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试专用</title> <style type="text/css"> *{margin: 0;padding:原创 2017-10-08 16:43:18 · 459 阅读 · 0 评论 -
CSS盒模型
CSS 盒模型 当我们面对一个页面的时候，我们可以将它抽象成一块块矩形区域，页面上的每一个文档元素都占据了这样的一个矩形，像是放在一个个矩形的盒子中，从而我们有了盒模型的概念 这篇文章对CSS中的盒子模型进行一个简单的总结 两种不同的盒模型 盒模型有两种常见的形式，标准盒模型和IE盒模型： W3C的标准模型：容器的width和height仅仅表示内容区域（上图中的content）的宽度和高...原创 2019-04-01 22:45:28 · 262 阅读 · 0 评论 -
margin 重叠
margin 重叠 只发生在block元素上(不包括float、absolute、inline-block元素) 只发生在垂直方向上(不考虑writing-mode) margin的重叠发生可以发生在父子元素、兄弟元素和元素本身上 兄弟元素 表现为两个兄弟元素之间的margin会合并，并且按照较大margin宽度的计算布局 div{ width:100px; height:1...原创 2019-04-01 23:56:20 · 225 阅读 · 0 评论