【CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例】的更多相关文章

CSS基础 行内元素/行内块元素设置垂直对齐方式及常见使用案例

vertical-align 属性值 效果 baseline 基线对齐 top 顶部对齐 middle 中心对齐 bottom 底部对齐 使用案例1:百度搜索框左边和右边底部没有对齐 使用vertical-align:top;/vertical-align:bottom; 之后效果 案例,html结构代码: <body> <input type="text" ><input type="button" value="百度&qu…

元素显示模式：块元素 & 行内元素 & 行内块元素

元素显示模式 前言 了解元素的显示模式可以更好的让我们布局页面.了解显示模式需要学习以下三个方面 什么是元素的显示模式 元素显示模式的分类 元素显示模式的转换 什么是元素显示模式 元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>. HTML 元素一般分为块元素和行内元素两种类型. 网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页. 块元素 常见的块元素有<h1>~<h6…

使用float和display:block将内联元素转换成块元素的不同点

使用float和display:block将内联元素转换成块元素的不同点 使用float和display:block将内联元素转换成块元素的不同点:内联元素可以转换成块级元素,常用的方法比如可以为内联元素使用float属性让内联元素浮动起来,或者为内联元素添加display:block.虽然两者都可以让内联元素转换成块级元素,但是有区别的.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8…

内联元素于与块元素的转换 相对定位、绝对定位以及fixed定位 Z轴覆盖

今天上午学习了内联元素于与块元素的转换     个人觉的display:none将元素非常好用,可以配合当鼠标放到这里会出现. 转换成行内元素display: inline;  转换成块元素display:block 将元素隐藏display:none   Z轴是对于用户的视角z-index: 50; 下午学习的相对定位.绝对定位以及fixed定位: fixed定位也就是浏览器的浏览页面定位,用处比较大,相对定位和绝对定位处于辅助级, 相对定位:相对于元素本身应该在的位置移动 绝对定位:距离父类…

vertical-align 属性设置元素的垂直对齐方式。

 值 描述 baseline 默认.元素放置在父元素的基线上. sub 垂直对齐文本的下标. super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部. bottom 把元素的顶端与行中最低的元素的顶端对齐. text-bottom 把元素的底端与父元素字体的底端对齐. length   % 使用 "line-height" 属性的百分比值来排列此元素.允许使用负值. i…

行内块和文字垂直对齐vertical-agign

vertical-align 垂直对齐 (对于块级元素无效,主要用来控制表单或者图片与文字对齐的) 图片和文字默认是基线对齐 属性: baseline 基线 top 顶线 middle 中线 bottom 底线 vertical-align 另一个作用 去除文字底侧空白缝隙 有一个特性:图片或者表单等行内块元素,他的底线和父级盒子的基线对齐,装图片底层会有一个空白缝隙 解决方法1:display: block; 解决方法2: vertical-align: top…

（转自MDN）CSS基础一定要看的包含块（containing block）

之前在写<个人常用的水平居中方法>这篇文章的时候,百分比问题涉及到了包含块(containing block)这个概念. 今天刷面试题的时候,又看到了containing block这个词,之前计算百分比考虑了几种情况(如那些属性值根据哪个元素计算的),但不知道所谓的'哪个元素'就是包含块.系统的看了看MDN中的内容,感觉受益匪浅.大家可以移步去MDN看,我这篇仅仅是在原文基础上加了个小知识点--client相关值. 原文 MDN布局和包含块 一个元素的尺寸和位置经常受其包含块(contain…

CSS3限,2行3行等文字在块元素显示的文字内容超出显示省略号

大家都知道文字超出一行显示省略号用css就可以搞定,但2行.3行等多行超出显示省略号有的人就不知怎么搞了,我用js做过一个文字判断有兴趣的可以看一下传送门,今天就来试验一下多行超出省略号 使用时注意浏览器兼容 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head><style> p{…

HTML&CSS基础学习笔记1.25-input标签隐藏元素

隐藏元素 有时候我们编写前端代码的时候,可能需要把一些数据告诉后台,但是这些数据又不想让用户看到,我们可以设置<input>标签的[type]属性为"hidden". <input>的[type]属性值为"hidden"表示隐藏输入域. 这种类型的输入标签是看不见的,但是是真实存在的.这个不可见的标签的 [value] 属性保存了一个要提交给 Web 服务器的任意字符串.如果想要提交并非用户直接输入的数据的话,可以使用这种类型的<inp…

转帖 css的块元素、内联元素、内联块元素、display属性、浮动、定位

块元素 块元素,也可以称为行元素,布局中常用的标签如:div.p.ul.li.h1~h6.dl.dt.dd等等都是块元素,它在布局中的行为:1.支持全部的样式.2.如果没有设置宽度,默认的宽度为父级宽度100%.3.盒子占据一行.即使设置了宽度.内联元素 内联元素,也可以称为行内元素,布局中常用的标签如:a.span.em.b.strong.i等等都是内联元素,它们在布局中的行为:1.支持部分样式(不支持宽.高.margin 上下.padding 上下).2.宽高由内容决定.3.盒子并在一行.4…