嘉兴网站网站建设,网站建设整体设计流程,完整的外贸出口流程,怎么创建一个公众号文章目录 1. vertical-align1.1. 概念1.2. 常用值1.3. 作用1.4. 出现的情况一1.4.1. 原因1.4.2. 解决方案 1.5. 出现情况二1.5.1. 解决方案一1.5.2. 解决方案二1.5.3. 解决方案三 1.6. 出现情况三1.6.1. 原因1.6.2. 解决方案 2. 溢出效果2.1. 作用2.2. 属性名 3. 隐藏效果3.1. … 文章目录 1. vertical-align1.1. 概念1.2. 常用值1.3. 作用1.4. 出现的情况一1.4.1. 原因1.4.2. 解决方案 1.5. 出现情况二1.5.1. 解决方案一1.5.2. 解决方案二1.5.3. 解决方案三 1.6. 出现情况三1.6.1. 原因1.6.2. 解决方案 2. 溢出效果2.1. 作用2.2. 属性名 3. 隐藏效果3.1. 使用 display 隐藏3.2. 使用 visibility 隐藏3.3. 完整代码 1. vertical-align
1.1. 概念
用于指定同一行元素之间或表格单元格内文字的垂直对齐方式 。
1.2. 常用值
baseline 默认值元素的基线与父元素的基线对齐。top 使元素的顶部与其所在行的顶部对齐。middle 中部对齐。bottom 使元素的底部与其所在行的底部对齐。length将元素升高或降低指定的高度可以是负数。
1.3. 作用
可以解决行内块的幽灵空白问题。
1.4. 出现的情况一
图片和文字在一行显示的时候图片底部和文字的底部并没有对齐。 !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title01-其他属性-vertical-align使用/titlestyle.box {border: 1px solid #000;}img {width: 100px;}/style/headbodydiv classboximg src./images/girl.png altgirl /girl/div/body
/html注意这里给图片宽度 100px是因为图片过大适当地缩小图片没有影响的因为父元素没有设置宽高内容是由子元素撑开的。 1.4.1. 原因
图片和文字默认沿着这一行的基线对齐。
1.4.2. 解决方案
给 img 加上vertical-align: bottom;文字就能对齐底端了。
如果单单解决空白问题而不是文字对齐底端vertical-align取值除了 baseline 外其他值( middel 、 bottom 、top)都可以。 1.5. 出现情况二
图片下面与最底端出现空白问题。 1.5.1. 解决方案一
给图片vertical-align除了 baseline 外其他值都可以解决。
1.5.2. 解决方案二
如果父元素只有一张图片可以给图片加display: block;也能解决。
/* vertical-align: middle; */
display: block;1.5.3. 解决方案三
如果父元素只有图片没有文字的话可以给父元素设置font-size: 0;也可以解决。如果该行内块内部还有文本则需单独设置 font-size 。
1.6. 出现情况三
设置单行文本垂直居中时设置line-height: height;之后文字居中了但是图片没有居中。 1.6.1. 原因
图片还是沿着所在一行的基线对齐。
1.6.2. 解决方案
给图片设置vertical-align:middle把子元素放置在父元素的中部。
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title03-其他属性-vertical-align解决img垂直居中问题/titlestyle.box {width: 300px;height: 300px;border: 1px solid #000;line-height: 300px;}img {width: 100px;vertical-align: middle;}/style/headbodydiv classboximg src./images/girl.png altgirl /girl/div/body
/html2. 溢出效果
2.1. 作用
控制溢出部分的显示效果。
2.2. 属性名
overflow属性值如下
visible 内容不会被修剪会呈现在元素框之外(默认值)。hidden 隐藏内容其余内容是不可见的。scroll 显示滚动条以便查看其余的内容不论内容是否溢出。auto 自动显示滚动条内容不溢出不显示。
3. 隐藏效果
3.1. 使用 display 隐藏
display:none 不占位置(最常用)。 加了display:none后 .c2 {width: 100px;height: 100px;background: red;/* 使用display隐藏:不占位置*/display: none;
}3.2. 使用 visibility 隐藏
visibility:hidden 占据位置 .c2 {width: 100px;height: 100px;background: red;/* 使用visibility隐藏:占据位置 */visibility: hidden;
}3.3. 完整代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title01-其他属性-隐藏效果/titlestyle.c1 {width: 100px;height: 100px;background: lightblue;}.c2 {width: 100px;height: 100px;background: red;/* 使用display隐藏:不占位置*//* display: none; *//* 使用visibility隐藏:占据位置 */visibility: hidden;}.c3 {width: 100px;height: 100px;background: green;}/style/headbodydiv classc1/divdiv classc2/divdiv classc3/div/body
/html
