元素类型以及overflow,white-space等属性
1:预格式化标签:<pre></pre>
2:overflow属性="visible/hidden(隐藏)"/scroll/auto(自动)/inherit;
visible:默认值,内容不会被修剪,会呈现在元素框外;
hidden:内容会被修剪,并且其余内容是不可见的
scroll:内容会被修剪,但是浏览器会显示滚动条,以便产看其它内容
auto: 如果内容被修剪,浏览器会显示滚动条,以便查看其它内容
inherit:规定应该从父元素继承overflow属性的值
3:空余空间:
white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit
该属性用来设置如何设置元素内的空白
normal:默认值,空白会被浏览器忽略,
nowrap:文本不会被换行,文本会在同一行上继续,直到遇到<br/>标签为止;
pre:空白会被浏览器保留,其行为方式跟html中的pre标签
pre-wrap:保留空白符序列,但是正常的进行换行
pre-line;保留空白符序列,但是保留正常换行
4:>>
<<
©版权符号
5:text-overflow:clip/ellipsis
clip:不显示省略号,而是简单的裁切
ellipsis:当对象内文本溢出时,显示省略标记
text-overflow:当单行文本溢出时是否显示省略标记,并不具备其它的样式属性定义
6:还需要定义:
1、容器宽度:width:value
2、强制文本在一行内显示:white-space:nowrap;
3、溢出内容为隐藏:overflow:hidden;
4、溢出文本显示省略号:text-overflow:ellipsis;
5 、width:20em/不允许出现半汉字截断
7 :1)block块状显示,类似的在元素后面添加换行符,也就是说其它元素不能在后面并列
2)inline内联显示:在元素后面删除换行符,多个元素可以在同一行内并列显示。
3)当元素设置了float属性后,就是相当于该元素具备块状元素显示的特点;
4)inline-block行内块元素显示:元素的内容以块状显示,行内的其它元素显示在同一行。
8:删除线:<del>文本</del>
9:块状元素(block element)
A)块状元素在网页中是以块的形式显示,就是元素显示的是矩形区域,常用的块状元素包括div,dl,dt,dd,
ol,ul,fieldset,h,p,form,hr,colgroup,col,table,tr td等
10:默认情况下,块状元素都会占据一行,两个块元素不会出现并列情况
块元素都可以定义自己的宽度和高度。
块元素一般是作为其他元素的容器,他可以容纳其他内联元素和其它块状元素,可以把这种容器比喻为一个盒子。
11:内联元素(inline element)行内元素
常见行内元素:a,span,i,em,strong,b等
内联元素的表现形式始终是以行内逐个进行显示
内联元素没有自己的形状,不能定义它的宽和高,它显示的高度,宽度只能根据所包含内容的宽度和高度来确定,它的最小内容单元也会呈现矩形形状
内联元素也会遵循盒模型基本规则,如可以定义padding,border,margin,background等属性,但个别属性值不能正确显示
12:内联块元素
inline-block:和其它元素都在一行上
元素的高度,宽度,行高,以及顶和底边距都可以设置
常见标签:img input textarea
13:可变元素
需要根据上下文关系确定该元素时块元素或者是内联元素。
元素类型的转换
盒子模型可通过display属性来改变默认的显示类型
1)display属性与属性值(18个属性值)
属性值:block/inline/inline-block/none/list-item
作用:块元素和内联元素之间的转换。
说明:各属性值的作用
a:Block块状显示:类似在元素后面添加换行符,也就是说其它元素不能在其后面显示,或者是让元素竖排显示
b:inline内联显示:在元素后面删除换行符,多个元素可以在一行内并列显示,或者是让元素竖排显示
c:当元素设置了float属性后,就相当于该元素具备块状元素显示的特点;
d:inline-block行内块元素显示:元素的内容以块状显示,行内的其它元素显示在同一行img input
e:none元素不会被显示
f:list-item:将元素转换成列表,li的默认类型
7)A:大部分块元素display属性值默认为 block,其中列表的默认值为list-item
B:大部分内联元素的display属性默认为inline,其中的img input默认为inline-block
三:元素垂直居中
1:必须给容器父元素加上text-align:center
2:必须给当前元素转换成行内块元素,display:inline-block,再给当前元素加上vertical-align:middle;
3:在当前元素的后面加上同级元素span,并对span进行vertical-align:middle;width:0;height:100%;display:inline-block;等设置;
垂直对齐方式:vertical-align:top/bottom/middle;
应用于不同图片在div当中垂直居中
四:置换和非置换元素的概念
置换元素:;浏览器根据元素的标签属性,来决定元素的具体显示内容,且元素本身拥有一般固有尺寸的元素,称为置换元素。
置换元素在其显示中生成了框,这也就是有的内联元素能够设置宽高的原因。
非置换元素:html的大多数元素是非置换元素,即其内容直接表现给用户端。
元素类型以及overflow,white-space等属性的更多相关文章
- 与元素类型 "item" 相关联的 "name" 属性值不能包含 '<' 字符。
Android Studio 打包时,报错: 与元素类型 "item" 相关联的 "name" 属性值不能包含 '<' 字符. 这个问题自己百度也没有发现 ...
- mybatis进行mapper.xml测试的时候发生"必须为元素类型 “mapper” 声明属性 “namespace”
1.Caused by Caused by: org.xml.sax.SAXParseException; lineNumber: 7; columnNumber: 45; 必须为元素类型 " ...
- CSS元素类型
前面有一篇文章讲到在css世界中,html元素的表现都是一个个盒子,而css中盒子的显示方式有三种方式,分别是块元素.行内元素和行内块元素.本文总结这三种显示方式的特征和区别. 1 写在前面 最近在整 ...
- 《Programming WPF》翻译 第5章 4.元素类型样式
原文:<Programming WPF>翻译 第5章 4.元素类型样式 命名样式非常有用,当你得到一组属性并应用到特点的元素上.然而,如果你想要应用一个统一的样式到所有确定元素类型的实例, ...
- #CSS的盒子模型、元素类型
CSS的盒子模型.元素类型 本文首先介绍了CSS元素的统一内部结构模型,盒子模型:然后介绍了CSS元素基于不同分类标准定义的元素类型,包括基于不同内容设置方式定义的replaced元素和non-r ...
- js:给定两个数组,如何判断他们的相对应下标的元素类型是一样的
题目: 给Array对象原型上添加一个sameStructureAs方法,该方法接收一个任意类型的参数,要求返回当前数组与传入参数数组(假定是)相对应下标的元素类型是否一致. 假设已经写好了Array ...
- 解决 Mybatis 元素类型为 "resultMap" 的内容必须匹配 "(constructor?,id*,result*,association*,collection*,discriminat
在配置 mybatis mapper.xml文件时, 一不小心就会报如下类似的异常: Caused by: org.springframework.beans.factory.BeanCreation ...
- HTML基础--元素类型及类型转换
元素类型及类型转换 一.XHTML元素分类 根据css显示分类,XHTML元素被分为三种类型:块状元素,内联元素,可变元素 1.块状元素(block element) 1)块状元素在网页中就是以块的形 ...
- 5:CSS元素类型
5:CSS元素类型 学习目标 1.元素类型分类依据和元素类型分类 2.元素类型的转换 3.inline-block元素类型的应用 4.置换和非置换元素的概念和应用案例 一.元素类型分类依据和元素类型分 ...
随机推荐
- ionic3视频播放功能
因为项目的需要,需要使用视频播放的功能,使用的是videogular2插件,但是报了一个无法识别video-player 这个标签,百度了很多,发现原来是版本 不对,ionic3是以来angular5 ...
- HDU4496 D-City【基础并查集】
Problem Description Luxer is a really bad guy. He destroys everything he met. One day Luxer went to ...
- 简述Centos系统启动流程
1. Centos5 POST开机自检 运行CMOS中的BIOS程序,加载第一个启动磁盘的Bootloader 由Bootloader读取kernel 通过挂载临时根目录initramfs加载核心模块 ...
- Jmeter使用笔记之断言
前言 Jmeter的断言方式有很多种,由于在工作中经常做的是API接口测试,所以这篇文章主要介绍如何对接口的字段进行解析,如何对解析出来的字段的值断言 了解API接口 Restful API 规范 协 ...
- python正则表达式提取字符串
用python正则表达式提取字符串 在日常工作中经常遇见在文本中提取特定位置字符串的需求.python的正则性能好,很适合做这类字符串的提取,这里讲一下提取的技巧,正则表达式的基础知识就不说了,有兴趣 ...
- 夜话JAVA设计模式之策略模式
策略模式 定义了算法簇,分别封装起来,让他们之间可以互相替换,让算法簇的变化独立于使用算法的客户.设计原则1 找出应用中可能需要变化之处,把他们独立出来,不要和那些不需要变化的代码混在 ...
- 在Spring MVC和Spring Boot中使用thymeleaf模板
Spring MVC: POM: <!-- thymeleaf模板 --> <!-- https://mvnrepository.com/artifact/org.thymeleaf ...
- MyBatis3教程
MyBatis3教程: http://www.yihaomen.com/article/java/302.htm http://www.mybatis.org/mybatis-3/zh/index.h ...
- 微信最新开源的PhxSQL
在编者看到“[重磅]微信开源PhxSQL:高可用.强一致的MySQL集群”时,由衷赞叹,这等造福广大DBA及运维同仁的事情,真心赞.腾讯及微信的开放,真的不是说说而已. 本文由资深DB从业者撰写,相信 ...
- Ubuntu-14.04. sh .py腳本双击無法執行问题的解决方法
Ubuntu-14.04中默认文件用gedit文本打开,而不是BT5里面的默认双击打开四个选择,例如以下图(这是配置完毕后的结果,就不换BT5系统了): 直接文本打开,尽管非常安全.实际生产中肯定是不 ...