思维导图
文章目录
思维导图1:边框2:内边距3:外边距外边距合并1. 相邻块元素垂直外边距的合并2. 嵌套块元素垂直外边距的塌陷所谓 盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框、外边距、内边距、和 实际内容
1:边框
border:border-width | border-style | border-color;
div {/* 实线 虚线 点线 */border-style: solid;border-style: dashed;border-style: dotted;}
注:
○也可以单独加上下左右的边框
○边框会影响到盒子的大小
○细线边框:border-collapse: collapse;(相邻的边框合并在一起)
【叽叽歪歪】举个例子吧
<style>table {border-collapse: collapse;}table,td {border: 1px solid black;}</style>
<body><div><table><tr><td>你好吗</td><td>你好吗</td><td>你好吗</td></tr><tr><td>你好吗</td><td>你好吗</td><td>你好吗</td></tr></table></div></body>
以后设置表格,就不用必须在table里面加border,cellpadding=“20px” cellspacing=“0”…
2:边框的复合写法(举例:宽窄为1px的红色的实线)
border:1px solid red;
2:内边距
padding 属性用于设置内边距,即边框与内容之间的距离
四种写法:
注:
当我们给盒子指定 padding 值之后,发生了 2 件事情:
内容和边框有了距离,添加了内边距。padding影响了盒子实际大小。
也就是说,如果盒子已经有了宽度和高度,此时再指定内边框,会撑大盒子。
padding内边距可以撑开盒子, 有时候,也会让我们去修改宽度如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小。
3:外边距
margin 属性用于设置外边距,即控制盒子和盒子之间的距离。
复合写法和padding一致
❤
外边距的几种应用
让盒子水平居中
① 盒子必须指定了宽度(width)。
② 盒子左右的外边距都设置为 auto 。
width:1220px;margin:0 auto;
常见的写法,以下三种都可以:
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注::以上方法是让块级元素水平居中,行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可, line-height的值等于盒子height的值就可以垂直居中。
外边距合并
使用 margin 定义块元素的垂直外边距时,可能会出现外边距的合并。
主要有两种情况:
相邻块元素垂直外边距的合并嵌套块元素垂直外边距的塌陷
1. 相邻块元素垂直外边距的合并
当上下相邻的两个块元素(兄弟关系)相遇时,如果上面的元素有下外边距 margin-bottom,下面的元素有上外边距 margin-top ,则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并。
注:尽量只给一个盒子添加 margin 值
2. 嵌套块元素垂直外边距的塌陷
【叽叽歪歪】概念好奇的话先自己去查一下,想自己像上面一个画图解释,但没描述出来。
解决方案:
给父盒子加边框,设成透明色给父盒子设置内边距,但不可以是0px,给盒子内容减加的内边距父盒子设置overflow:hidden;
以后写代码,先清除内外边距:
* {padding: 0;margin: 0;}