常用的CSS属性。

html-css017

常用的CSS属性。,第1张

float,css的一种属性,主要属性值为:left(左浮动)、none(不浮动)、right(右浮动)、inherit(继承父元素浮动),多用于网页排版。

float属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。

扩展资料

CSS属性

1、整数和实数

在CSS中只能使用浮点小数,而不能像其他编程语言那样使用科学记数法表示实数,即1.2E3在CSS中将是不合法的。下面是几个正确的例子,整数:128、-313,实数:12.20、1415、-12.03。

2、长度量

相对长度单位有:em——当前字体的高度,也就是font.size属性的值;ex——当前字体中小写字母x的高度;Dx——一个像素的长度,其实际的长度由显示器的设置决定,比如在800木600的设置下,一个像素的长度就等于屏幕的宽度除以800。

3、百分数量(percentages)

百分数量就是数字加上百分号。显然,百分数量总是相对的,所以和相对长度量一样,百分数量不被子级元素继承。

参考资料来源:百度百科-CSS

参考资料来源:百度百科-FLOAT

参考: https://www.w3school.com.cn/cssref/css_units.asp

开发中主要用到的是 px、em、%。在css3中的vw、vh使用也慢慢多了起来。

相对于当前DOM元素的font-size。

如果设置当前元素的font-size为0.75em,而其父元素的font-size是16px时,则当前元素的font-size是0.75 * 16px = 12px

如果设置当前元素的width是10em,而当前元素的font-size是16px(无论是继承自父容器还是设置的)时,则当前元素的width是10 * 16px = 160px

注意1:任意浏览器的默认字体高都是16px,如果给body元素的font-size设置为62.5%,那body的font-size实际大小是 16px*62.5%=10px,如果所有子元素都以该字体大小使用em作为尺寸单位,相当于1em=10px,这样设置em就非常简单,只要将实际px数值除以10,就是em单位值。

注意2:em相对于px的值并不是固定的,是会随着父元素或者当前元素的font-size不同而变化

em是CSS3新增的一个相对单位(root em,根em),相对于根节点(一般为html节点)的font-size,如果html节点设置font-size = 100px,那么文档中的元素设置为0.3rem,则计算为:0.3 * 100px = 30px。

这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明(通过下边样式覆盖上边样式原理),这些浏览器会忽略用rem设定的字体大小

相对于父元素的长度高度。

注意1:position:fixed时,无论当前元素放在哪里,将相对于窗口宽度。

注意2:position:absolute时,将相对于其相对的元素宽度(递归父元素直到第一个设置了position的元素)。

CSS3新增样式,部分浏览器(IE8)不支持。

vh、vw:相对于视窗(Viewport)的高度和宽度,而不是父元素的(CSS百分比是相对于包含它的最近的父元素的高度和宽度)。

1vh 等于1/100的视窗高度,1vw 等于1/100的视窗宽度。

视窗:是指浏览器内部的可视区域大小,即window.innerWidth/window.innerHeight大小,不包含任务栏标题栏以及底部工具栏的浏览器区域大小

CSS3新增样式,部分浏览器(IE8)不支持。

vmin:取视窗高度和宽度的最小值作为基准。

vmax:取视窗高度和宽度的最大值作为基准。

例如:浏览器视窗大小为 window.innerWidth=1000px,window.innerHeight=800px,那么,1vmin=800px/100=8px1vmax=1000px/100=10px。

使用场景:做移动页面开发时,如果使用 vw、wh 设置字体大小(比如 5vw),在竖屏和横屏状态下显示的字体大小是不一样的。由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致

px是固定的像素,一旦设置了就无法因为适应页面大小而改变。

em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。

对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。

rem中的r意思是root(根源),这也就不难理解了。

% 是相对于父元素的大小设定的比率,vw、vh 是视窗大小决定的。

vw、vh 优势在于能够直接获取高度,而用 % 在没有设置 body 高度的情况下,是无法正确获得可视区域的高度的,所以这是挺不错的优势。

做移动页面开发时,如果使用 vw、wh 设置字体大小(比如 5vw),在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

首先,长度单位一共有两种,分绝对长度单位和相对长度单位;

绝对长度单位是固定的,用任何一个绝对长度表示的长度都将恰好显示为这个尺寸。

不建议在屏幕上使用绝对长度单位,因为屏幕尺寸变化很大。像cm,px这种就属于绝对长度单位;

而相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好。像em,ex,%这种就属于相对长度单位。