标签：指南 显示 行内 一篇 元素 滚动条 inline 新手 属性
1.元素类型 1.1XHTML元素分类 根据css显示分类，XHTML元素被分为块级（块状）元素和行内（内联）元素。 1.2块级元素 块级元素的特点： 1.元素显示为矩形区域 2.默认情况下会占据一行，两个相邻的块状元素不会出现并列显示的现象，默认情况下块级元素 会按顺序自上而下排列。 3.块级元素会定好-义自己的宽度和高度。不设置宽度的时候默认父元素的宽度。 4.块级元素一般都会作为其他元素的容器，他可以容纳所有的内联元素和部分块状元素。（p标签不可以作为块级 元素的容器） 常用的块级元素 div、dl、form、h1-h6、hr、 ol、p、ul、li、fieldest（表单字段集）、colgroup-col（表单列分组元素） table-tr-td(表格及行-单元格); 1.3行内元素 行内元素的特点： 1.行内元素的表现形式始终是以行内逐个进行显示； 2.行内元素没有自己的形状，不能定义他的宽高，它显示的宽高只能根据所包含内容的高度和宽度来确定， 他的最小的内容单元也会呈现矩形形状。 3.内联元素也会遵循盒子模型基本规则，如可以定义padding、border、margin、background、等属性， 但个别属性不能正确显示{padding-top/buttom,margin-top/bottom}. 常用的行内元素：a、br、em、img、lable、span、strong、sub、sup、textarea、u、select、b、i、 input。 2.元素类型的转换 当我们想把块级元素转换为行内元素或者把行内元素转换为块级元素的时候，可以通过display属性来实现。 diaplay属性有18个属性值。属性值：block/inline/inline-block/none/list-item/flex 2.1 block块状显示：将元素转化为块状元素，使元素拥有块状元素的特点 2.2 inline内联显示：将元素转为内联样式。 2.3 inline-block行内块元素显示：元素的内容以块状显示，行内的其他元素显示在同一行.(只有这一类元素支持 vertical-aling属性)img、input（行内块元素）。转换后拥有行内元素不独占一方和块级元素可设置宽高的特点。 2.4 none：此元素不会被显示。 2.5 list-item： 将元素转换成列表。 li的默认值。 置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到 图片的实际内容；<input>标签的type属性来决定是显示输入框，还是单选按钮等，value属性来显示内 容。 (x)html中的<img>、<input>、<textarea>、<select>都是置换元素。这些元素往往没有实际的 内容，即是一个空元素。置换元素在其显示中生成了框，这也就是有的内联元素（img,input）能够设置宽高 的原因。
非置换元素：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。 元素类型扩展： 1）当元素设置了float属性后，就相当于给该元素加了display:inline-bloc;声明； 2）大部分块元素display属性值默认为block，其中列表li的默认值为list-item。 3）大部分内联元素的display属性值默认为inline,其中img,input，默认为inline-block（行内块元素）。 问题：如何让一个不知道宽高的盒子在一个大盒子中水平垂直居中 解决步骤： （1）给大盒子设置text-align：center;注意：如果小盒子是块级元素，那么要把小盒子设置成display：inline-block。 （2）在小盒子后面添加一个兄弟元素，并且给这个元素设置display：inline-block；height：100%；width：0。 （3）给小盒子和小盒子的兄弟元素设置vertical-align：middle。 以下内容属于扩展暂时不要记住。1、滚动条的设置
（1）overflow内容溢出时的设置
相关属性：
overflow 水平及垂直方向内容溢出时的设置
overflow-x 水平方向内容溢出时的设置
overflow-y 垂直方向内容溢出时的设置
以上三个属性设置的属性值：
visible 默认值，其中的内容无论是否超出范围都将被显示。
hidden 效果与visible相反。任何超出“width”和“height”的内容都会隐藏。
scroll 无论内容是否超越范围，都将显示滚动条。
auto 当内容超出范围时，显示滚动条，否则不显示。
（2）自己定义滚动条的颜色
scrollbar-face-color(立体滚动条凸出部分的颜色)
scrollbar-highlight-color(滚动条背景条的颜色)
scrollbar-base-color(滚动条背景的亮光色，基底)
scrollbar-arrow-color(上下按钮三角箭头的颜色)
scrollbar-shadow-color(立体滚动条阴影的颜色)(滑动滚动条边框色,ie显示)
scrollbar-dark-shadow-color(立体滚动条强阴影的颜色（浏览器不显示）)
以上适用与<body>、<div>、<textarea>、<iframe>
2、Flash 和 marguee(滚动字幕)
（1）插入flash
1）语法：
<object width="value" height="value">
<embed width="value" height="value" src="flash路径及全称"></embed>
</object>
flash源文件格式.fla,
导出影片为.swf,
创建播放器格式为.exe.
2）将flash背景设置为透明
给<embed>标记添加属性：wmode="transparent"
3）IE中不显示flash,可做如下操作：
- 下载安装flash player;
- 打开IE浏览器，选择工具菜单--Internet选项----安全----低。
（2）滚动字幕的应用
<marquee behavior=”scroll/alternate” direction="up/down/left/right" scrollamount=”value” height="value" width="">内容</marquee>
说明：
behavior（行为）="scroll(滚动)/alternate（晃动）
direction（方向）="up(从下向上)/down（从上向下/ left（从右向左）/right（从左向右）”
scrollamount（滚动速度）="value"
height="value(上下滚动范围)"
width=""(左右滚动范围)
标签：指南,显示,行内,一篇,元素,滚动条,inline,新手,属性 来源： https://www.cnblogs.com/sun-shine1229/p/10514601.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。