两个相邻盒子的边框怎么只显示一个_css笔记4（盒子模型）

重要知识点-盒子模型

盒子模型是HTML+CSS布局页面中的核心！它规定了网页元素如何显示及元素间相互关系
1）CSS定义所有的元素都可能拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区域、。
2）网页中的大部分对象，实际呈现形式都是一个个盒子形状对象 ，页面都是由一个个盒子形状的区域拼合而成的。
3）盒模型关系到网页设计中排版、布局、定位等操作，任何元素都必须遵循盒模型规则。

盒子模型-构成

Margin  边界
Border  边框
Padding 内边距
content （内容）

css属性-外边距

• margin:设定页面中一个元素所占空间的边缘(边框)到相邻元素边框之间的距离
• 属性值的4种方式
  四个值：上 右 下 左
  三个值：上 左右 下
  二个值：上下 左右
  一个值：四个方向

css属性-边框

• border:是边框属性的综合应用
    • 语法：border:边框宽度 边框风格 边框颜色 
    • 例如：border:5px solid #f00

• 边框宽度 border-width: 设定边框宽度，数值，单位为px

• 边框颜色 border-color:

• 边框风格 border-style:设定边框风格
     值有:none 无 /solid  实线 /dotted 点划线 /dashed 虚线 / double双线

css属性-填充（内边距）

padding:
    设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 
    可规定内容到达元素边缘的位置关系 
    可规定子元素与父元素的位置关系

Padding是添加在原有的大小之上的，若想保持元素大小不变，需从元素的原有大小上减去后添加的padding值

盒子模型的补充

1）margin总是透明的，padding也是透明的，但padding受背景影响，能够显示背景色或背景图
2）margin可以定义负值，但border和padding不支持负值。
3）margin、border、和padding都是可选的，它们默认值为0。我们可以单独定义一边或统一定义盒 子四边的属性值
4）如果需要，每一条可见边框都可以定义不同的宽度，但前提是要定义border-style属性为可见样式
5）每一个盒子所占页面区域的宽度和高度等于margin外沿的宽度和高度。盒子的大小并不总是内容区域的大小

盒子模型的尺寸

• 盒子的实际大小（公式）：
         • 宽=左右margin+左右border+左右padding+width 
         • 高=上下margin+上下border+上下padding+height

溢出属性

1、溢出属性（容器的） 
      overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
      visible:默认值，内容不会被修剪，会呈现在元素框之外； 
      hidden：内容会被修剪，并且其余内容是不可见的； 
      scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容; 
      auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容

2、空余空间：该属性用来设置如何处理元素内的空白
      white-space：normal/pre/nowrap/pre-wrap /pre-line /inherit
      normal：默认值，空白会被浏览器忽略， 
      pre：空白会被浏览器保留，其行为方式类似HTML中的pre标签； 
      pre-wrap：保留空白符序列和换行符，但是正常的进行换行(碰到边缘)； 
      pre-line:合并空隔符，但是保留换行符；
      nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止

3、文本溢出:text-overflow:clip/ellipsis 
      clip：不显示省略号（...），而是简单的裁切; 
      ellipsis：当对象内文本溢出时，显示省略标记

在尚学堂学习前端的笔记