码迷,mamicode.com
首页 > 其他好文 > 详细

盒子模型

时间:2019-02-21 09:22:59      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:相关   htm   格式化   style   mic   ros   字体样式   位置   尺寸   

框:页面上所有的元素都可以称之为"框"
框模型:(Box Model),又称为盒子模型,定义框处理元素内容、内边距、外边距、边框的样式
尺寸
边框
内边距
外边距

1.1、外边距
        属性:margin
  margin-方向:

  margin-left:
  margin-right:
  margin-top:
  margin-bottom:

1.2取值:
     px
  %(当前元素的百分比,很少用)
  负值
  auto
上述讲个例子:01.html
  margin取值:
  margin:value; /*四个方向的外边距统一设置*/
  margin:v1 v2; /*v1:上下 v2:左右*/
  margin-left:5px;
  margin-right:5px;
  margin-top:10px;
  margin-bottom:10px;
  margin:v1 v2 v3;/*v1:上 v2:左右 v3:下*/
  margin:v1 v2 v3 v4;/*上右下左*/
  margin取值为auto:
左右外边距设置为auto时,当前的块级元素会居中显示
注意:
1.3 有些块级元素会存在默认外边距
  body
  h1~h6
  p 


2、垂直外边距合并
  两个垂直外边距相遇时,将会合成一个外边距。最终外边距的值是两者中外
  边距较的的值。
  例子:02.html
3、如果给子元素设置margin-top,默认会被识别成是父元素的margin-top
  解决方案:
1、给父元素加边框
2、通过父元素的 padding解决
2、内边距
1、什么是内边距
  内容区域和边框之间的空白
  内边距会扩大元素边框所占用的区域
2、属性
  padding
  取值:
  px
  %
  没有 auto和负数
  padding-top/bottom/left/right:
  padding:value; /*四个方向的内边距*/
  padding:v1 v2;上下 左右
  padding:v1 v2 v3;
  padding:v1 v2 v3 v4;

  有些元素,默认是有内边距的
  做个例子:03.html
  再做个练习:01demo.html 需要颜色:#D0E4C2 #CCC
2、背景
  1、背景色
  属性:background-color
  取值:合法颜色值
  transparent
  注意:背景颜色会填充到元素的边框、内边距、内容区域
  做个例子:04.html
2、背景图片 
  属性:background-image
  取值:url(图像路径)
  background-image:url("");
  background-image:url(‘‘);
  background-image:url();
  做个例子:还是在04.html中做
3、背景重复
  默认情况,背景图会在水平和垂直两个方向都出现重复的效果(平铺)
  属性:background-repeat
  取值:
  repeat :默认值,水平垂直平铺
  repeat-x : 水平平铺
  repeat-y : 垂直平铺
  no-repeat : 不平铺(用的最多)
  做例子:在04.html中继续做
4、背景图尺寸
5、背景图片固定
  属性:background-attachment
  取值:
  scroll ,滚动,默认值
  fixed,背景图像固定
6、背景定位 
  改变背景图像在元素中的位置
  属性:background-position
  取值:
  x y :x表示水平方向移动距离,+向右,-向左,y表示垂直方向移动距离,+向下,-向上
  x% y% : 
  0% 0% : 显示在元素的左上方
  100% 100% : 显示在元素的右下方
  50% 50% : 居中
  left :靠左
  right:靠右
  center :将元素显示在水平或垂直方向的中间
  top:靠上
  bottom:靠下

  background-position:left top;
  background-position:top left;
  background-position:center;
7、背景属性
  属性:background
  取值:color url(图像) repeat attachment position;
  background:red url() fixed;
  常用方式:
  background:url() repeat position;

3、渐变

  背景色:#FDEDD2
  渐变:#FAFAFA ~ #ccc
  按钮边框:#D5D5D5
  a背景:#005AA0 ,#fff
4、文本格式化
  1、字体相关
  1、指定字体
  font-family:value,value2,value3 ....;
  font-family:"microsoft yahei","arial","verdana";
2、字体大小
  font-size:value;
  px 或 pt作为单位
  font-size:12px;
3、字体加粗
  font-weight:normal / bold ;
  400 - 900 
4、字体样式(斜体)
  font-style:normal/italic;
5、小型大写字母
  font-variant:normal/small-caps;
6、字体属性
  font:font-style font-variant font-weight font-size font-family;

常用方式:
  font:font-size font-family;
  font:12px "微软雅黑",arial,verdana;
  免费注册:#7CBE56
  鼠标移入:#89C964

盒子模型

标签:相关   htm   格式化   style   mic   ros   字体样式   位置   尺寸   

原文地址:https://www.cnblogs.com/xuaima/p/10410264.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!