css变换transform 以及 行内元素的一些说明
变换transform的用法比较简单:【变换其实和普通的css属性,如color等没什么区别,可以为变换应用过渡或动画,就像其他普通css属性一样】
#test {
transform: translate(平移) / scale(缩放) / rotate(旋转) / skew(倾斜);//用空格隔开即可,其取值如下图所示。其中translate如果取百分比,是相对于元素自身的长宽的百分比,若取长度则类似于33px。
transform-origin: 指定变换的起点,具体取值见表23-7
}
自己试验时,发现了一个问题:transform对span元素不起作用。于是查阅资料,又了解到很多细节问题。记录如下。
1,在官方文档里,有如下说明:https://www.w3.org/TR/css-transforms-1/#funcdef-translate
transformable element:A transformable element is an element in one of these categories:
- an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or table-caption [CSS21]
- an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, ‘patternTransform‘ or gradientTransform [SVG11].
总结一下就是可以使用变换的元素必须是块级元素或者原子内联级元素,单纯的内联元素是不能应用变换的。另外,float或者absolute会将非display:none的元素转化为display:inline-block
2,这里有个名词:atomic inline-level element,翻译为原子内联级元素.它的解释如下:
An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a 'display' value of 'inline' generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box.
一个内联盒是一个(特殊的)内联级盒,其内容参与了它的包含内联格式化上下文。一个'display'值为'inline'的不可替换元素会生成一个内联盒。不属于内联盒的内联块级盒(例如,可替换内联级元素,inline-block元素和inline-table元素)被称为原子内联级盒(atomic inline-level boxes),因为它们作为单一的不透明盒(opaque box)参与其内联格式化上下文。
另外一段描述:不参与生成行内格式化上下文的行内级盒称为原子行内级盒。对于非替换元素,比如a,span等标签可以设置水平方向上的margin但是无法设置垂直方向的margin,至于border和padding,垂直方向可以设置,但是当border-top和padding-top到达页面顶部后就不在增加了。而对于替换元素比如input、img等标签,是可以正常使用margin、border、padding的。
总结下,内联元素分为两类,一类就是单纯的display:inline的内联元素,还有一类叫原子内联级元素,包括可替换内联级元素,inline-block元素和inline-table元素等。
3,这里又有个名词,可替换元素。它的说明如下:http://www.3lian.com/edu/2014/04-15/141796.html
1. 替换和不可替换元素
从元素本身的特点来讲,可以分为替换和不可替换元素。
a) 替换元素
替换元素就是浏览器根据元素的标签和属性,来决定元素的具体显示内容。
例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来,而如果查看(x)html代码,则看不到图片的实际内容;又例如根据<input>标签的type属性来决定是显示输入框,还是单选按钮等。
(x)html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容,即是一个空元素,例如:
<img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" />
浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
b) 不可替换元素
(x)html 的大多数元素是不可替换元素,即其内容直接表现给用户端(例如浏览器)。例如:
<p>段落的内容</p>
段落<p>是一个不可替换元素,文字“段落的内容”全被显示。
2. 显示元素
除了可替换元素和不可替换元素的分类方式外,css 2.1中元素还有另外的分类方式:块级元素(block-level)和行内元素(inline-level,也译作“内联”元素)。
a) 块级元素
在视觉上被格式化为块的元素,最明显的特征就是它默认在横向充满其父元素的内容区域,而且在其左右两边没有其他元素,即块级元素默认是独占一行的。
典型的块级元素有:<div>、<p>、<h1>到<h6>,等等。
通过css设定了浮动(float属性,可向左浮动或向右浮动)以及设定显示(display)属性为“block”或“list-item”的元素都是块级元素。
但是浮动元素比较特殊,由于浮动,其旁边可能会有其他元素的存在。而“list-item”(列表项<li>),会在其前面生成圆点符号,或者数字序号。
b) 行内元素
行内元素不形成新内容块,即在其左右可以有其他元素,例如<a>、<span>、<strong>等,都是典型的行内级元素。
display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素,例如<img>、<input>等等。
不过元素的类型也不是固定的,通过设定css 的display属性,可以使行内元素变为块级元素,也可以让块级元素变为行内元素。
替换元素与块级元素在格式编排中很多地方相同,如垂直边界压缩而水平边界不压缩,边框和补白默认为0。
所有的替换元素都可以用height和width属性进行缩放,如<img />标签,如果一张图片的宽,高为100px,那么将height和width设置为auto时,图片保持原来大小,但是设置为其它值时,就会发生缩放。
css变换transform 以及 行内元素的一些说明的更多相关文章
- 为什么transform对行内元素不生效
注:赶时间的同学可直接下拉到底,看结论. 我使用transform对一个元素进行位移,代码如下: <div class="box"> <span>今天你吃了 ...
- 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922
1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P h1--h6 ul li ol li div h ...
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
- css盒子模型的深入理解,在块级、行内元素的区别和特性
css盒子模型用于处理元素的内容.内边距.边框和外边距的方式简称.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘是边框.边框以外是外边距,外边距默认是透明的 ...
- CSS中定位和浮动对行内元素的宽高的影响
行内元素的大小是由元素里面的内容撑开的宽高决定的,就算在css中对行内元素设置width,height.行内元素也会忽略宽高的设置. 但是当行内元素使用position:absolute或者posit ...
- CSS里常见的块级元素和行内元素
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
- CSS HACK tab制表符导致行内元素之间的空隙如何解决
<!DOCTYPE html> <html lang="zh-CN"><head> <meta name="viewport&q ...
- CSS行内元素和块级元素的居中
一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...
- css块级元素、行内元素
说说对html页面元素的排列认识: html中所有元素从上到下排列,所以需要css来对其中的元素进行排序.调节样式,并用js为其添加交互效果. css的排序.定位是相对块级元素而言的,margin/p ...
随机推荐
- SyntaxError: 'ascii' codec can't decode byte 0xe4 in position 7: ordinal not in range(128)
问题描述: SyntaxError: 'ascii' codec can't decode byte 0xe4 in position 7: ordinal not in range(128) 解决方 ...
- 刘志梅201771010115.《面向对象程序设计(java)》第六周学习总结
实验六 继承定义与使用 实验时间 2018-9-28 1.实验目的与要求 (1) 继承的定义:用已有类来构建新类的一种机制.当定义了一个新类继承了一个类时,这个新类就继承了这个类的方法和域,同时在新类 ...
- Getting started - RN1
0. down yarn https://yarnpkg.com 1. Expo Cli 此环境用于开发或学习之用. (1)install npm install -g expo-cli (2) us ...
- 杰克.多西 twitter创始人 必做清单和不必做清单
必做清单 活在当下 接受脆弱(Be vulnerable) 只喝柠檬水和红酒 每天 6 组下蹲和俯卧撑 每天跑步 3 英里 每天思考本清单 站直了 打拳击沙袋 10 分钟 跟所有人打招呼 每天 7 小 ...
- Sphinx 安装与使用
Sphinx 优点 高速索引(接近10M/S) 高速搜索(2-4G文本搜索耗时不到0.1秒) 高可用性(单CPU支持100GB文本,100M文档) 提供相关性排名.分布式搜索.文档摘要(高亮显示) S ...
- layer.js 注册登录切换的问题
layer.js 是一个很好用的弹窗框架,使用的时候很方便,但是今天遇到一个问题,让我很头疼啊,一直都做不出来,就是登录和注册弹窗的切换问题 这里涉及到两个页面:guide.html 即父页面,den ...
- 关于吴恩达机器学习支持向量机的问题,讲到对偶前有一个最小化f(w)使用拉格朗日求解时转化成一个最大的相等式的理解和一些困惑
(纯属个人理解) 参考: https://www.zhihu.com/question/267482928 https://www.cnblogs.com/90zeng/p/Lagrange_dual ...
- Es6(Symbol,set,map,filter)
首先再讲这几个新东西之前,先说一个Es6中新出的扩展运算符(...) 1.展开运算符,就是把东西展开,可以用在array和object上 比如: let a=[,] let b=[,...a,]//[ ...
- Python面向对象中的classmethod类方法和__getattr__方法介绍
一.classmethod介绍 介绍:@classmethod修饰符我们从名称就可以知道,这是一个类方法,那么和普通的类中的方法有什么不同的 a.类方法,是由类本身调用的,无需实例化类,直接用类本身调 ...
- spring mvc重定向
spring mvc重定向有三种方法. 1.return new ModelAndView("redirect:/toUrl"); 其中/toUrlt是你要重定向的url. 2.r ...