TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索

04、HTML&CSS-盒子模型

zyz
2018-04-12
/
0 评论
/
757 阅读
/
正在检测是否收录...
04/12

一、盒子模型

盒模型: 是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属性:文本不会换行,文本会在同一行上继续,直到遇到<br/>标签为止(pre和nowrap样式一样);
3、溢出内容为隐藏: overflow:hidden;
4、溢出文本显示省略号: text-overflow:ellipsis;

赞(0)
评论 (0)