css基础2(盒子模型)

盒子模型

image

网页布局本质

  • 看透网页布局的本质:
    • 首先利用CSS设置好盒子的大小,然后摆放盒子的位置。
    • 最后把网页元素比如文字图片等等,放入盒子里面。
    • 以上两步 就是网页布局的本质

先写大的,再写小的。
image

盒子模型

image
总结:

  • 盒子模型有元素的内容、边框(border)、内边距(padding)、和外边距(margin)组成。
  • 盒子里面的文字和图片等元素是 内容区域
  • 盒子的厚度 我们成为 盒子的边框
  • 盒子内容与边框的距离是内边距(类似单元格的 cellpadding)
  • 盒子与盒子之间的距离是外边距(类似单元格的 cellspacing)
    标准盒子模型:
    image

盒子边框(border)

边框综合设置:

border : border-width || border-style || border-color 

内边距(padding)

padding属性用于设置内边距。 是指 边框与内容之间的距离。

属性 作用
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距

当我们给盒子指定padding值之后, 发生了2件事情:

  1. 内容和边框 有了距离,添加了内边距。
  2. 盒子会变大了。
    我们分开写有点麻烦,我们可以不可以简写呢?
值的个数 表达意思
1个值 padding:上下左右内边距;
2个值 padding: 上下内边距 左右内边距 ;
3个值 padding:上内边距 左右内边距 下内边距;
4个值 padding: 上内边距 右内边距 下内边距 左内边距 ;

如果没有给一个盒子指定宽度, 此时,如果给这个盒子指定padding, 则不会撑开盒子

外边距

margin属性用于设置外边距。 margin就是控制盒子和盒子之间的距离

属性 作用
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距

块级盒子水平居中

  • 可以让一个块级盒子实现水平居中必须:
    • 盒子必须指定了宽度(width)
    • 然后就给左右的外边距都设置为auto
      实际工作中常用这种方式进行网页布局,示例代码如下:
.header{ width:960px; margin:0 auto;}

常见的写法,以下下三种都可以。

  • margin-left: auto; margin-right: auto;
  • margin: auto;
  • margin: 0 auto;

文字居中和盒子居中的区别

  1. 盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐
  2. 块级盒子水平居中 左右margin 改为 auto
text-align: center; /*  文字 行内元素 行内块元素水平居中 */
margin: 10px auto;  /* 块级盒子水平居中  左右margin 改为 auto 就阔以了 上下margin都可以 */

插入图片和背景图片区别

  1. 插入图片 我们用的最多 比如产品展示类 移动位置只能靠盒模型 padding margin
  2. 背景图片我们一般用于小图标背景 或者 超大背景图片 背景图片 只能通过 background-position

我们根据稳定性来分,建议如下:
注意:
按照 优先使用 宽度 (width) 其次 使用内边距(padding) 再次 外边距(margin)。

  width >  padding  >   margin   
  • 原因:
    • margin 会有外边距合并 还有 ie6下面margin 加倍的bug(讨厌)所以最后使用。
    • padding 会影响盒子大小, 需要进行加减计算(麻烦) 其次使用。
    • width 没有问题(嗨皮)我们经常使用宽度剩余法 高度剩余法来做。

ps常用快捷键

因为网页美工大部分效果图都是利用ps 来做的,所以,以后我们大部分切图工作都是在ps里面完成。

  • 文件--打开 -- 可以打开 我们要测量的图片
  • ctrl+r 可以打开标尺 或者 视图 -- 标尺
  • 右击标尺, 把里面的单位改为 像素
  • ctrl+ 加号 键 可以 放大 视图 ctrl+ 减号 缩小视图
  • 按住空格键, 鼠标可以 变成小手 ,拖动 ps 视图
  • 用选区 拖动 可以 测量 大小
  • ctrl+ d 可以取消选区 或者旁边空白处点击一下也可以取消选区

圆角边框

  • 语法:
border-radius:length;  
  • 其中每一个值可以为 数值或百分比的形式。

  • 技巧: 让一个正方形 变成圆圈

  border-radius: 50%;

我们这里矩形就只用 用 高度的一半就好了。精确单位。
image

盒子阴影

  • 语法:
box-shadow:水平阴影 垂直阴影 模糊距离(虚实)  阴影尺寸(影子大小)  阴影颜色  内/外阴影;
  • 前两个属性是必须写的。其余的可以省略。
  • 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 inset
div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸(影子大小) 阴影颜色  内/外阴影; */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}
posted @ 2021-04-12 21:03  黑蛋的博客  阅读(295)  评论(0编辑  收藏  举报