盒子模型(CSS重点)

CSS三大模块: 盒子模型、浮动、定位,其余的都是细节。要求精通这三部分。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形盒子,也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。

看透网页布局的本质

我们说过,行内元素比如 文字 类似牛奶,也需要一个盒子把他们装起来,我们前面学过的双标签都是一个盒子。有了盒子,我们就可以随意的,自由的,摆放位置了。 看透网页布局的本质: 把网页元素比如文字图片等等,放入盒子里,然后利用CSS摆放盒子的过程,就是网页布局。

盒子边框(border)

边框就是那层皮。橘子皮。。柚子皮。 语法:

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

边框属性——设置边框样式(border-style) 边框样式用于定义页面中边框的风格,常用属性值如下:

none没有边框 即忽略所有的边框的宽度(默认值)
solid边框为单实线(最常用)
dashed边框为虚线
dotted边框为点线
double边框为双实线

盒子边框总结表

设置内容样式属性常用属性
上边框border-top 
下边框border-bottom 
左边框border-left 
右边框border-right 
综合设置border:四边宽度 四边样式 四边颜色 

表格的细线边框

以前学过的html表格边框很粗,这里只要写一句CSS就能让边框美观起来。

/*边框合并在一起*/
 table {
 	border-collapse: collapse;	/*collapse是合并的意思*/
 }

圆角边框(CSS3)

圈圈圆圆圈圈…… radius 半径 (距离) 语法格式:

 border-radius: 50%;	/* 让一个正方形变为圆形 */

内边距(padding)

padding 属性用于设置内边距。是指边框与内容之间的距离。 padding-top: 上内边距 padding-right: 右内边距 padding-bottom: 下内边距 padding-left:左内边距 注意:后面跟几个数值表达的意思不一样。

值的个数表达的意思
1个值padding:上下左右边距 比如padding:3px; 表示上下左右都是3像素
2个值padding:上下边距 左右边距 如padding:3px 5px; 表示上下3像素 左右5像素
3个值padding:上 左右 下 如padding:3px 5px 10px; 表示上3像素 左右5像素 下10像素
4个值padding:上 右 下 左 如padding:3px 5px 10px 15px; 表示上3px 右5px 下10px 左15px (顺时针)

内边距问题

padding 会撑开带有width和height的盒子。

 /*
 	1. 我们要求这个div就是标准的200*200
 	2. 但是我们给了padding就会撑开 240
 	3. 我们怎么能保证盒子不超过200*200?
 */
 div {
     width: 200px;
     height: 200px;		/*修改宽度和高度改为 160px就可以了*/
     border: 1px solid red;
     padding: 20px;
 }
 <div></div>

 

外边距(margin)

margin 属性用于设置外边距。设置外边距会在元素之间创建“空白”,这段空白通常不能放置其他内容。 margin: top right down left 取值顺序和内边距相同。

外边距实现盒子居中

可以让一个盒子实现水平居中,需要满足以下两个条件:

  1. 必须是块级元素

  2. 盒子必须指定了宽度(width) 然后就给左右的外边距都设置为auto,就可使块级元素水平居中。 实际工作中常用这种方式进行网页布局,示例:

.header {
     width: 960px;
     margin: auto;
 }

文字盒子居中 图片和背景区别

  1. 文字水平居中是 text-align: center

  2. 盒子水平居中 左右margin改为auto

 text-align: center;	/* 文字居中水平 可以让盒子内容(文字 行内元素 行内块元素)居中对齐 */
 margin: 10px auto;		/* 盒子水平居中	左右margin改为auto就阔以了 */
  1. 插入图片 我们用的最多 比如产品展示类

  2. 背景图片我们一般用于小图标背景 或者 超大背景图片

section img {
     width: 200px; /*插入图片更改大小 width 和 heigth*/
     heigth: 210px;
     margin-top: 30px; /*插入图片更改位置 可以用margin 或 padding 盒模型*/
     margin-left: 50px; /*插入当图片也是一个盒子*/
 }
 
 aside {
     width: 400px;
     height: 400px;
     border: 1px solid purple;
     background: #fff url(images/sun.jpg) no-repeat;
     
     background-size: 200px 210px; /*背景图片更改大小只能用background-size*/
     background-position: 30px 50px; /*背景图片更改位置 我用background-position*/
 }

清除元素的默认内外边距

为了更方便的控制网页中的元素,制作网页时,可以使用如下代码清除元素的默认内外边距:

 * {
     margin: 0; /*清除外边距*/
     padding: 0; /*清除内边距*/
 }
 /*实际开发中不用*,写出清除的div。这样速度快点,如*/
 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,input {
 	padding: 0;
 	margin: 0;
 }

 

注意: 行内元素是只有左右外边距的,是没有上下外边距的。内边距,在ie6等低版本浏览器也会有问题。我们尽量不要给行内元素指定上下的内外边距就好了。

外边距合并

使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。

相邻块元素垂直外边距的合并

当上下相邻的两个块元素(垂直)相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直边距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。

 

解决方案:避免就好了。

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。

解决方案:

  1. 可以为父元素定义1像素的上边框或上内边距。

  2. 可以为父元素添加overflow:hidden。

content宽度和高度

使用宽度属性width和高度属性height可以对盒子的大小进行控制。 width和height的属性值可以为不同单位的数值或相对于父元素的百分比%,实际工作中最常用的是像素值。 大多数浏览器,如Firefox、IE6及以上版本都采用了W3C规范,符合CSS规范的盒子模型的总宽度和总高度的计算原则是:

/*外盒尺寸(元素空间尺寸)*/
 Element空间高度 = content height + padding + border + margin
 Element空间宽度 = content width + padding + border + margin
 /*内盒尺寸计算(元素实际大小)*/
 Element Height = content heigth + padding + border (Height为内容高度)
 Element Width = content width + padding + border (Width为内容宽度)

 

注意:

  1. 宽度属性width和高度属性height仅适用于块级元素, 对行内元素无效(img标签和input除外)。

  2. 计算盒子模型的总高度时,还应考虑上下两个盒子垂直外边距合并的情况。

  3. 如果一个盒子没有给定宽度/高度或者继承父亲的宽度/高度,则padding不会影响本盒子大小。

盒子模型布局稳定性

开始学习盒子模型,大家最大的困惑就是,分不清内外边距的使用,什么情况下使用内边距,什么情况下使用外边距? 答案是: 其实它们大部分情况下是可以混用的。就是说,你用内边距也可以,用外边距也可以。你觉得哪个方便,就用哪个。但是,总有一个最好用的吧。我们根据稳定性来分,建议如下: 按照优先使用宽度(width)其次使用内边距(padding) 再次使用外边距(margin)。

 width > padding > margin

原因:

  1. margin 会有外边距合并还有IE6下面margin加倍的bug 所以最后使用。

  2. padding 会影响盒子的大小,需要进行加减计算(麻烦)其次使用。

  3. width 没有问题 我们经常使用宽度剩余法 高度剩余法来做。

盒子阴影

语法格式:

box-shadow: 水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子的大小) 阴影颜色(rgba) 内/外阴影;

 

描述
h-shadow必需。水平阴影的位置,允许负值。
v-shadow必需。垂直阴影的位置,允许负值。
blur可选。模糊距离
spread可选。阴影尺寸
color可选。阴影颜色
inset可选。将外部阴影(outset)改为内部阴影
  1. 前两个属性是必须写的。其余的可以省略。

  2. 外阴影(outset)但是不能写 默认 想要内阴影 inset

div {
     width: 200px;
     heigth: 300px;
     /* box-shadow: 水平阴影 垂直阴影 模糊距离(虚实) 阴影尺寸(影子的大小) 阴影颜色(rgba) 内/外阴影;*/
     box-shadow: 0 15px 30px rgba(0,0,0,0.4)
 }

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值