目录
CSS元素类型
1.块状元素 block
特点:
1.独占一行,自上而下排列;
2.可以直接设置宽度、高度、padding、margin值;
3.不设置宽度; 默认宽度是父元素宽度的100%;
4.块元素是一个容器,里面可以放其他块元素和行内元素/行内块元素;
如:div, dl, dt, dd, ol, ul, (h1-h6), p, form, hr, table,tr ,td,等;
文本类块元素只能放其他块元素,不能放其他元素;如p,h标签, 可以放行内/行内块元素。如 p里放a标签 <p> <a></p>
2.行内元素 inline(内联元素)
特点:
- 一行内显示多个;一行内的元素之间,默认有间隙;
- 不能直接设置宽度,高度,padding,margin值(只能显示左右值,上下值不能显示);
- 默认的宽度是内容的宽度;
- 行内元素只能放行内元素或文本;
如:a, span, i, em, strong, b等
3.行内块元素(内联块元素) inline-block
特点:
- 一行内显示多个;一行内的元素之间,默认有间隙;
- 可以直接设置宽度,高度,padding,margin值;
- 默认宽度是内容的宽度;
如:<img>、<input> <texarear>标签就是行内块元素;
元素的相互转换
转换成块元素:display:block;
转换成行内元素:display:inline;
转换成行内块元素:display:inline-block;
元素隐藏
display
display:none;不占位隐藏;
display:block;转换成块元素,和元素显示;
visibility
visibility:hidden;占位隐藏
visibility:visible;元素显示
文本溢出
overflow(容器溢出属性)
visible:默认值,不隐藏,会呈现在元素框之外;
hidden:内容会被修剪,溢出隐藏,并且多余内容是不可见的;
scroll:内容会被修剪,溢出隐藏,但是元素会显示滚动条;
auto:如果内容被修剪,溢出隐藏,溢出时隐藏并且显示滚动条,不溢出不显示滚动条;
inherit:从父元素继承overflow属性的值。(inherit:继承)
visibility:hidden;和display:none;的区别:
- visibility:hidden;属性会使对象不可见,但该对象在网页所占的空间没有改变,等于留出了一块空白区域。(占位隐藏)
- display:none属性会使这个对象彻底消失不显示,也不再占用位置。(不占位隐藏)
display:list-item;此元素会作为列表显示。
inline-block ( 行内块元素 )
vertical-align:top、middle、bottom、baseline(默认基线对齐)(只支持inline-block元素类型)
解决问题, 嵌套img元素,图片下有3px空白; (图片默认和文字的基线对齐)
解决方法一: 给img元素; vertical-align: top,middle,bottom; 不为baseline(默认基线对齐)
解决方法二: 给img元素 ;设置 display:block;
设置一个元素在一个容器中垂直水平居中
五个条件:
1:给当前元素在结构上添加一个弟弟元素(必须和当前元素写在一行上)。
2:给第弟元素添加height与父元素同高;
3:给当前元素和弟弟元素都添加display:inline-block;
4:给当前元素和弟弟元素添加vertical-align:middle。
5:给父元素添加text-align:center。
<style>
.box1 {
width: 500px;
height: 500px;
background-color: skyblue;
margin: 100px auto;
text-align: center;
}
.box2 {
width: 100px;
height: 100px;
display: inline-block;
background-color: pink;
vertical-align: middle;
}
.box3 {
display: inline-block;
height: 500px;
vertical-align: middle;
}
</style>
<body>
<div class="box1">
<span class="box2"></span>
<span class="box3"></span>
</div>
</body>
置换元素(可替换元素)
其性质等同于设置了 display: inline-block; 的元素
就是行内块元素,可以直接设置宽度 高度.
置换元素(可替换元素):浏览器根据元素的标签和属性,来决定元素的具体显示内容。
置换元素在其显示中生成了框,这也就是有的内联元素(img,input)能够设置宽高的原因。
如:img、input、textarea、select