CSS基础三
盒子模型
一个盒子我们会分成几个部分
-内容区(content):我们设置width和height的时候,都是设置内容区的宽度和高度
-内边距(padding)
-边框(border)
-外边距(margin)
内边距:(会影响其他盒子的位置)
边框(会影响其他盒子的位置)
外边距:(会影响其他盒子的位置)
关于垂直外边距的问题(条件:一必须是垂直方法,二必须是相邻(即就是中间两个元素之间没有任何元素))
例一:
效果:
例二:
效果二:
例二为了解决父元素和子元素一起的办法,
方法一:给父元素添加一个上边距或一个上内边距
效果
方法二:
效果
刚刚我们讲的是块元素的盒子模型,接下来我们来讲讲内联元素的盒子模型
内容区、内边距 、边框 、外边距
1.内容区 内联元素不能设置width和height
2..内边距
设置水平内边距,内联元素可以设置水平方向的内边距
垂直方向内边距,内联元素可以设置垂直方向内边距,但是不会影响页面的布局(不会影响其他盒子的位置)
3.边框
为元素设置边框,内联元素可以设置边框,但是垂直的边框不会影响到页面的布局(不会影响其他盒子的位置)
4.外边距
内联元素支持水平方向的外边距,而且水平方向的相邻外边距不会重叠,而是求和
内联元素不支持垂直外边距