6、尺寸和定位的相关属性

一、CSS3新增的与尺寸相关的属性

新增了box-sizing和resize两个与尺寸相关的属性。

1、box-sizing用于设置盒模型组成模式：content-box border-box

值content-box表示padding和border不被包含在定义的width 和height内，对象的实际宽度=width+padding+border

值border-box表示padding和border包含在定义的witdth和height之内，实际放内容的地方只有 =width-padding-border

2、设置对象的区域是否允许用户缩放的属性-resize

值:none | both | horizontal | vertical
注：在使用resize属性时，需要设置overflow属性。

3、定位的相关属性当使用这些定位时，记得加上宽和高

CSS中提供了用于设置定位方式的属性:position。 position属性的语法格式如下：

position: static | absolute | fixed | relative

static : 无特殊定位，对旬遵循HTML定位规则。使用该属性值时，top、right、bottom、left等设置无效。

absolute:绝对定位，使用top riht left bottom 等属性指定绝对位置。(相对父容器，父容器需要设置宽和高)

fixed:绝对定位，且对象位置固定，不随滚动条的移动而改变位置。元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身

releative：相对定位，（相对对象本身原来的位置），使用top right left bottom 等属性指定。
注：使用left top right bottom定位时，记得使用position指定定位方式。

4、left top right bottom
当我们将对象的定位方式设置成absolute、relative、fixed时，就需要设置其与父对象的距离
使用这四个东东。。

5、设置层叠顺序 z-index

当某些元素比如div 区域有交叉时，可以指定哪个在上，哪个在下，通过z-index设置（前提：在使用该属性时，必须定义position属性值为
absolute、relative、fixed三个中的一个），最大在上。

6、尺寸和定位的相关属性相关推荐

css与背景相关的属性有哪些,css的背景background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) (图 ...
CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
offsetParent、getBoundingClientRect与其他位置相关属性
offsetParent.getBoundingClientRect与其他位置相关属性写在前面:本文章中的代码演示,默认清除的了 body 和 html 的 margin.padding. 定位父级 ...
html盒子页面居中,网页布局盒子(box)相关属性和盒子居中
网页布局中盒子的相关属性: 一.盒子的基础属性: 1.width和height:设置盒子的宽度和高度:常见单位:px,em,rem,vh/vm等 2.background:color(设置背景颜色), ...
PyQt（Python+Qt）入门：Designer组件属性编辑界面中QWidget类相关属性详解
本文适用人员:本文比较长,适合不理解Qt Designer部件属性的人员阅读或资料查找. 声明: 1.如果有人认为本文是简单的复制粘贴+翻译而成,敬请读本文最后的后记: 2.本文为老猿Python学习 ...
spa:单页web应用（介绍，实现思路及技术点，路由，router-link相关属性）
SPA是什么单页Web应用(single page application,SPA),就是只有一个Web页面的应用, 是加载单个HTML页面,并在用户与应用程序交互时动态更新该页面的Web应用程序 ...
【CSS 定位之 display 属性】
CSS 定位之 display 属性 1. display 属性: 设置元素的显示类型 / 框的类型 (元素和子元素的布局) ⑴ 设置元素的显示类型 ( 框的类型 ) ⑵ 元素的显示类型 ⑶ 显 ...
CSS3的字体和文本相关属性
CSS3其中一个重要变化就是增加了服务器字体功能,这样避免了我们浏览页面时因为字体缺失导致网页效果变差的问题.通过CSS3的服务器字体功能,可以控制浏览器使用服务器包含的字体,这样可以保证即使我们的电 ...
林期苏曼属性标签编辑_解析制作条形码的相关属性
标签打印软件是一款专业的条码标签设计软件,对于刚接触标签设计软件的新用户来说,在软件中制作条形码还能还是比较生疏.主要还是源于对条码软件的不了解.例如,想要修改条形码的尺寸.类型.数据字体大小等,都不 ...

6、尺寸和定位的相关属性

6、尺寸和定位的相关属性相关推荐

最新文章

热门文章