04、HTML&CSS-盒子模型

每天一句：说到和做到，是完全不一样的两个层次，不要质疑，只有踏踏实实的把每一件小事做好，才会有骄傲的资本。

一、盒子模型

盒模型: 是CSS的基石，指定标签如何显示。它规定了网页元素如何显示以及元素间相互关系。页面上的每个元素都被当成一个矩形盒子、占据一定的页面控件，这个盒子由内容(content)、内边距(补白/填充/padding)、边框(border)和外边距(margin)组成；
【padding一般用于调整内容位置，margin一般用于调整盒子位置】

二、填充padding

 填充: 
    padding，在设定页面中一个元素内容到元素的边缘(边框)之间的距离，也称之为补白；
 用法:
    > 用来调整内容在容器中的位置关系;
    > 用来调整子元素在父元素中的位置关系;
      注: padding属性需要添加在父元素上;
    > padding值是额外加载元素原有大小之上的，如果想要保证元素大小不变(盒子大小)，即元素宽高上减去添加的padding属性值;
 说明：
    可单独设置方向填充，如：
      padding-top: 10px; 
      padding-right: 10px;
      padding-bottom: 10px;
      padding-left: 10px;
 属性值的4种方式：
   四个值：上 右 下 左 { padding: 10px 20px 30px 40px; }  注: 起点在12,顺时针方向
   三个值：上 左右 下 { padding: 10px 20px 30px;}
   二个值：上下 左右 { padding: 10px 20px;}
   一个值：四个方向 { padding: 2px;  }定义元素四周填充为2px

三、边框border

 简写方式: 
   border: 3px solid red; // 粗细(数值+单位) (solid/dashed/dotted/double)  颜色
 说明: 
   右边框：border-right:线型（solid/dashed/dotted/double）  粗细（数值+单位） 颜色;
   左边框: border-left:线形（solid/dashed/dotted/double）   粗细（数值+单位） 颜色;
   上边框: border-top:线形（solid/dashed/dotted/double）    粗细（数值+单位） 颜色;
   下边框: border-bottom:线形（solid/dashed/dotted/double） 粗细（数值+单位） 颜色;
 备注: 
   border-width 边框的粗细
   border-style 边框的线型
   border-color  边框的颜色
   solid:实线，dashed:虚线，dotted:点状线，double:双线

四、外边距margin

  边界: 
    margin，在元素外边的空白区域，被称之为边距;
  说明:
   margin-left: 10px;
   margin-right: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
  属性值的4种方式：
   四个值：上 右 下 左 {margin: 10px 10px 10px 10px;}
   三个值：上 左右 下 {margin: 10px 20px 10px;}
   二个值：上下 左右 【margin: 0 auto; 即表示上下边距为0，左右边距为自动】
   一个值：四个方向 margin:2px; 定义元素四边边界为2px

五、溢出属性overflow

 语法:
    overflow:visible/hidden(隐藏)/scroll/auto(自动)/inherit;
 说明:
    visible:默认值，内容不会被修剪，会成现在元素框之外;
    hidden:内容会被修剪，并且其余内容是不可见的;
    scroll:内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;
    auto:如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;
    inherit: 规定应该从父元素继承overflow属性的值(父级元素是什么属性值，它就是什么属性值)；

问题1: 如果大盒子中嵌套小盒子，为了防止小盒子在设置margin时，大盒子受到的影响(小盒子顶部没有任何的效果)，解决方式是在大盒子中添加overflow:hidden;属性;

问题2: 同级盒子中，如果出现都添加margin值，在重合位置中(上下)，会有问题，只有最大值有效(而不是两个值之和margin-bottom + margin-top);

六、文本溢出属性text-overflow

 语法:
    text-overflow: clip  /  ellipsis
 说明:
    clip:不显示省略号(...)，而是简单的裁切;(不显示省略号)
    ellipsis:当对象内文本溢出时，显示省略标记;(显示省略号)

text-overflow属性,当文本溢出时是否显示省略标记，并不具备其它的样式属性定义，要实现溢出时产生省略号的效果还需定义：
1、容器宽度: width:value;(px、%，都可以);
2、强制文本在一行内显示: white-space:nowrap; // nowrap属性:文本不会换行，文本会在同一行上继续，直到遇到
标签为止(pre和nowrap样式一样);
3、溢出内容为隐藏: overflow:hidden;
4、溢出文本显示省略号: text-overflow:ellipsis;

作者：西门奄
链接：https://www.jianshu.com/u/77035eb804c3
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。