客服热线:

WEB前端教程:盒子模型

2019-04-22 20:42:04浏览:6 评论:0 来源:招生宝   
核心摘要:外边距围绕在元素边框周围的空白区域会在元素外创建额外的空白区域外边距是透明的语法:margin:value;单边设置margin-top/right/


外边距

围绕在元素边框周围的空白区域

会在元素外创建额外的空白区域

外边距是透明的

语法:margin:value;

单边设置

margin-top/right/bottom/left: value;

value可取值为像素,%,auto,负值


外边距简写

margin:value(四个方向相同) ;

margin: value(上下) value(左右);

margin: value(上) value(左右) value(下);

margin: value(上) value(右) value(下) value(左);

margin设置元素外边距的宽度,它有这么几个特点

1. 块级元素的垂直相邻外边距会合并

2. 行内元素实际上不占上下外边距。行内元素的的左右外边距不合并

3. 浮动元素的外边距也不会合并

4. 允许指定负的外边距值,不过使用时要小心

内边距

内容区域和边框之间的空间

会扩大元素边框所占用的区域

语法:padding:value;

单边设置

padding-top/right/bottom/left:value;

value可取值为像素,百分比,但不能为负数

内边距的简写

padding:value(四个方向相同) ;

padding: value(上下) value(左右);

padding: value(上) value(左右) value(下);

padding: value(上) value(右) value(下) value(左);

border边框

border属性设置一个元素的边框,它有三个要素:宽、样式、颜色,统称“边框三要素”。

三要素书写的时候一般如下顺序

border:宽度 样式 颜色

border: 1px solid red;

不过不按此顺序来写依然能正常显示。

div{ border: red solid 2px; }

border的三要素可以统一写在”border”属性中,也可以单独设置。

统一的写法:border: 1px solid  red;

单独设置的写法:

border-width:;

border-style:;

border-color:;

要注意,在style属性为空的情况下,整个边框是不会出现的。这不论是统一写在border或是单独设置都是这样的。

不写width会有默认3像素的值。

不写颜色会默认为黑色。

border-style设置边框的样式,有五种常用样式可选

点状dotted

实线solid

双线double   ( 需要最起码设置为3像素,不然显示不下)

虚线dashed

无边框none


Box-sizing

box-sizing属性允许你以“W3C的盒模型”或“IE盒模型”来定义元素,以适应区域。换句话说,当前元素使用哪种盒模型,可以由box-sizing属性来指定

它有两个值

content-box(标准)

padding和border不被包含在width和height内,元素的实际大小为宽高+border+padding,此为标准模式下的盒模型。

border-box(怪异)

padding和border被包含在定义的width和height中,元素实际的大小为你定义了多宽就是多宽。此属性为怪异模式下的盒模型。

四、伸缩盒模型flexbox

伸缩盒模型也叫弹性盒模型,或flexBox。它决定一个盒子在其它盒子中的分布,以及如何处理可用的空间。使用该模型,可以轻松的创建“自适应”浏览器窗口的流动布局。

flexbox是一个很新的东西,在w3c希望可以使用flexbox实现一些更复杂的布局和应用。传统盒模型基于HTML文档流排列,使用弹性盒模型可以规定特定的顺序。要开启弹性盒模型,只需要设置display的属性值 flex,因为它是CSS3中为display新添加的值类型。

目的:在浏览器窗口变化时,盒子相应改变大小。

设置了弹性盒模型后,float,clear和vertical-align在flex中不起作用。

flexbox的基础知识

由于 flexbox是一个整体的模块,它们之中一些属性是在父容器上设置,而一些是在子容器上设置。

一个flexbox的基本结构:

.box{ display: flex;}    //最外层的为父容器,定义此容器为弹性布局

.item1{ flex-grow: 1; background:pink}       flex-grow占1比例

.item2{ flex-grow: 2; background:orange}     占2比例

.item3{ flex-grow: 3; background:red}        占3比例


1


2


3


1.首先规定哪个是父容器,父容器中包含多个“项目”(每个子div),项目是可以在父容器中弹性布局的。

2.其次还可以规定父容器中要怎么来显示它里面的项目,如是否换行、项目排列方向等

父容器常用属性

1.父容器中的常用属性

display: flex;

定义一个flex容器

新弹性盒  设置父元素是一个弹性盒,子元素会自动水平排列

4.子元素常用属性

*伸缩盒中的每一个元素称为一个项目。

flex-grow: number;

  一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

.item1{ flex-grow: 1; background:pink}

.item2{ flex-grow: 1; background:orange}

.item3{ flex-grow: 1; background:red}

旧的伸缩盒

伸缩盒从被提出到如今一直在修改,所以这里涉及到了新老写法

伸缩盒最老版本

display:box;

将对象作为弹性伸缩盒显示(火狐和webkit内核都支持display:-webkit-box;或display:-moz-box;)

子元素   box-flex:;

伸缩盒过渡版本

display:flexbox;

将对象作为弹性伸缩盒显示

伸缩盒最新版本

display:flex;

将对象作为弹性伸缩盒显示

根据不同的浏览器内核,css前缀会有不同。最基本的浏览器内核有如下四种,其它的内核都是基于此四种进行再研发的。

1.Gecko内核      前缀为-moz-   火狐浏览器

2.Webkit内核    前缀为-webkit-   也叫谷歌内核,chrome浏览器最先开发使用,safari浏览器也使用

该内核。国内很多浏览器也使用了webkit内核,如360极速、世界之窗、猎豹等。

3.Trident内核    前缀为-ms-  也称IE内核

4.Presto内核      前缀-o-   目前只有opera采用

六、css中的继承

所谓css的继承是指被包在内部的标签将拥有外部标签的样式性质。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个body定义了颜色值也会应用到段落的文本中。

继承的局限性

在css中,继承是非常自然的行为,但是继承也有局限性。有些属性是不能继承的,比如border属性用来设置边框,它就没有继承性。padding和margin也不能继承。

能被继承的常用属性有哪些?

color, cursor, font-family, font-size, font-style, font-weight, font, letter-spacing, line-height, list-style,text-align, text-indent


(责任编辑:小编)
下一篇:

WEB前端教程:雪碧图和滑动门

上一篇:

WEB前端教程:05css基本样式和c3选择器

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们
 
0相关评论