当前位置:Gxlcms > html代码 > 7.css盒模型_html/css_WEB-ITnose

7.css盒模型_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:3人阅读

  所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西。

  而根据元素的特效,其盒模型的特效也不同,下面是一些总结:

1.块级元素(区块)

  所谓块级元素,就是能够设置元素尺寸、有隔离其他元素功能的元素、比如

等分组元素

2.行内元素(内联)

  所谓行内元素,是不能够设置元素尺寸的,它只能自适应内容、无法隔离其他元素,其他元素会紧跟其后。比如等文本元素。

3.行内-块元素(内联块)

  所谓行内-块元素,可以设置元素尺寸,但无法隔离其他元素。比如

4.隐藏元素

  设置了隐藏属性的元素。

  明白了这些分离以后,就可以进行相应的属性的学习了,其实这些属性可以看成是对盒子的操作。

一.元素尺寸

  元素尺寸的设置,说白了就是对盒子大小的设置,按照上面的分类的解释,对行内元素无效,有以下的属性可用:

属性 说明 CSS 版本
width auto、长度值或百分比 设置元素的宽度 1
height auto、长度值或百分比 设置元素的高度 1
min-width auto、长度值或百分比 设置元素最小宽度 2
min-height auto、长度值或百分比 设置元素最小高度 2
max-width auto、长度值或百分比 设置元素最大宽度 2
max-height auto、长度值或百分比 设置元素最大高度 2

div {    width: 200px;    height: 200px;} 

  解释:设置元素的固定尺寸。

div {    min-width: 100px;    min-height: 100px;    max-width: 300px;    max-height: 300px;} 

  解释:这一组主要是应对可能动态产生元素尺寸变大变小的问题,从而限制它最大和最小的值。

div {     width: auto;     height: auto; } 

  解释:auto 是默认值(),width 在 auto 下是 100%的值;height 在 auto 下是自适应。

scolia

#a {    background: silver;     width: 200px;     height: 200px; } #b {     background: gray;     width: 80%;     height: 80%; }

  解释:百分比就是相对于父元素长度来衡定的。

  注意:为什么元素的大小是用宽和高表示,而不是我们熟悉的长和宽呢?因为我们的网页是在屏幕里显示的,而最初没有移动设备的时候,显示器都是放在桌面上的,可以看作将平面立了起来。所以就变成了用高和宽来表示了。

二.元素内边距

  CSS 盒模型中可以设置元素内部边缘填充空白的大小,我们称为内边距。

属性 说明 CSS 版本
padding-top 长度值或百分比 设置顶部内边距 1
padding-bottom 长度值或百分比 设置底部内边距 1
padding-left 长度值或百分比 设置左边内边距 1
padding-right 长度值或百分比 设置右边内边距 1
padding 1 ~ 4 个长度值或百分比 简写属性 1

  可以分开设置: 

div {     padding-top: 10px;     padding-bottom: 10px;     padding-left: 10px;     padding-right: 10px;}

  也是可以用简写形式:

div {     padding: 10px 10px 10px 10px; }

  四个值的时候代表按顺序设置上、右、下、左,也就是按逆时针方向。

div {     padding: 10px 50px 200px; }

  三个值代表按顺序设置上、左右、下,即左右合并。

div {     padding: 10px 20px; }

  两个值代表按顺序设置上下、左右。

div {     padding: 10px; }

  一个值,代表上下左右都设置为这个值。

  注意:内边距的设置其实就是向盒子里面填充东西,会使盒子变大。如果同时设置了背景颜色,内边距越大,背景颜色的面积越大。

     另外内边距比较特别的是,对于内联元素也有作用,但是一般也用不到这个特性,了解一下就好。

三.元素外边距

  CSS 盒模型中可以设置元素外部边缘填充空白的大小,我们称为外边距。其实也就是盒子搬开,增加其间隔。和内边距不同,外边距不会改变盒子的大小。

  有下面属性可供选择:

属性 说明 CSS 版本
margin-top 长度值或百分比 设置顶部内边距 1
margin-bottom 长度值或百分比 设置底部内边距 1
margin-left 长度值或百分比 设置左边内边距 1
margin-right 长度值或百分比 设置右边内边距 1
margin 1 ~ 4 长度值或百分比 简写属性 1

  注意:其使用特性和外边距一样,这里就不再重复说明。

四.处理溢出

  当设置了元素固定尺寸且内容过大时,就会出现溢出的问题。其实就是我们规定了盒子的大小以后,要装的东西太多,而盒子又装不下时,东西就会满出来。而满出来的行为是怎么样的,我们可以进行设置。

溢出主要朝两个方向:右侧和底部。我们可以通过 overflow 系列样式来控制它。

属性 说明 CSS 版本
overflow-x 溢出值 设置水平方向的溢出 3
overflow-y 溢出值 设置垂直方向的溢出 3
overflow 溢出值 简写属性 2

溢出处理主要有四种处理值:

说明
auto 浏览器自行处理溢出内容。如果有溢出内容,就显示滚动条,否则就不显示滚动条
hidden 如果有溢出的内容,直接剪掉
scroll 不管是否溢出,都会出现滚动条。但不同平台和浏览器显示方式不同
visible 默认值,不管是否溢出,都显示内容

div {     overflow-x: auto; }

  总结:可以看出溢出处理的逻辑是,先确定从溢出的方向,再确定对溢出的部分怎么处理。

五.元素的可见性

  我们在按特性对元素分类的时候,还剩下一个隐藏元素没有解释清楚,所谓的设置了隐藏属性的元素中的隐藏属性就是我们接下来要说的。

属性 说明 css版本
visibility visible 默认值,元素在页面上可见 2
hidden 元素不可见,但会占据空间 2
collapse 元素不可见,隐藏表格的行与列,如果不是表格,则和hidden一样 2

div {     visibility: hidden; }

  解释:设置元素隐藏,但占位,也就是该元素的分组效果依然会存在。

table tr:first-child {     visibility: collapse; };

  解释:隐藏表格的行或列,但不占位,支持度一般。

六.元素类型转换

  我们按元素的特性对其进行了分类,但其实可以使其转换,从而实现别的元素的特性。

属性 说明 CSS 版本
display block 盒子为块级元素 1
inline 盒子为行内元素 1
inline-block 盒子为行内-块元素 2
none 盒子不可见,不占位 1

span {    background: silver;     width: 200px;     height: 200px;     display: block; }

  解释:将行内元素转成块级元素,原来无效的属性也可以使用了,其他就不再演示了。

七.元素的浮动

  我们一直在二维空间中设置元素的盒模型,但其实可以将元素向上浮动一层,注意是一层

属性 说明 CSS 版本
float left 浮动元素靠左 1
right 浮动元素靠右 1
none 禁用浮动 1

  那么,上浮一层是什么意思?

  这就需要一定的空间思维能力的,如果我们将同一层的元素都当成是一张张的小卡片,一般情况下,他们都放在地面上,都在同一层,按着一定的顺序排列。这时,上浮一层,就相当于与你将卡片拿起来,然后在用一块玻璃将地方的卡片压住,在将拿去来的卡片放在玻璃上。但浮动还不仅仅做了这个动作,当你把一种卡片拿走以后,卡片原来占有的位置就会被剩下的卡片挤掉。如果此时你将卡片放在玻璃上的话,必然会遮挡住下面那层的卡片,为了解决遮挡的问题,又有下面的属性可用。

属性 说明 CSS 版本
clear none 允许两边均可浮动 1
left 左边界不得浮动 1
right 右边界不得浮动 1
both 两边都不得浮动 1

#c {     clear: both; }

  解释:方法其实是一种非常强硬的方法,既然浮动会造成遮挡的话,那就不允许浮动就好了。

      但是还有一种比较取巧的方法,那就对被遮挡的元素进行外边距的设置,既然惹不起,那总躲得起吧。

总结:

  下面总有了盒模型内容有哪些:

  1.设置元素尺寸

  2.内边距

  3.外边距

  4.尺寸固定后的溢出处理

  6.隐藏元素

  7.类型转换

  8.元素浮动

人气教程排行