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 · 1797 阅读 · 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 · 332 阅读 · 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 · 208 阅读 · 0 评论 -
全屏布局
主要特点保持充满整个窗口滚动条往往控制局部区域需求顶栏和低栏是定高的,整体的宽度是自适应的,中间的主内容去,侧边栏定宽,内容区自适应。实现方案一:Position<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全屏布局position</title> <style type="t原创 2017-09-13 10:28:21 · 343 阅读 · 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 · 363 阅读 · 0 评论 -
CSS盒模型
CSS 盒模型当我们面对一个页面的时候,我们可以将它抽象成一块块矩形区域,页面上的每一个文档元素都占据了这样的一个矩形,像是放在一个个矩形的盒子中,从而我们有了盒模型的概念这篇文章对CSS中的盒子模型进行一个简单的总结两种不同的盒模型盒模型有两种常见的形式,标准盒模型和IE盒模型:W3C的标准模型:容器的width和height仅仅表示内容区域(上图中的content)的宽度和高...原创 2019-04-01 22:45:28 · 152 阅读 · 0 评论 -
margin 重叠
margin 重叠只发生在block元素上(不包括float、absolute、inline-block元素)只发生在垂直方向上(不考虑writing-mode)margin的重叠发生可以发生在父子元素、兄弟元素和元素本身上兄弟元素表现为两个兄弟元素之间的margin会合并,并且按照较大margin宽度的计算布局div{ width:100px; height:1...原创 2019-04-01 23:56:20 · 138 阅读 · 0 评论