1.元素的显示属性
display 元素以什么⽅式显示(以下为常⽤显示⽅式)
display: block; 以块级元素⽅式显示
display: inline; 以内联元素⽅式显示
display: inline-block; 属于⾏内元素,但以块级显示,俗称⾏内块
display: none; 不显示
display: table; 以table⽅式显示
2.内联元素
内联元素也可以叫⾏内元素
设置宽度⾼度⽆效(⾏内块级显示元素除外)
和其他内联元素横向从左向右排列
设置上下内、外边距⽆效 常⻅的⾏内元素 span a 等
3.inline-block 行内块元素
它是⾏内元素的⼀种
不⾃占⼀⾏横向从左向右排列
可以设置宽度、⾼度以及内外边距
常⻅的⾏内块级显示元素 img button input
会出现幽灵空⽩节点
a.把img标签变成块级元素 display: block;
b.⽗级元素 font-size: 0; 去掉空⽩节点
4.块级元素
每个元素都⾃占⼀⾏,后⾯的元素也只能另起⼀⾏
元素的宽度、⾼度以及内外边距都可以设定
块级元素宽度不设定,为⽗级元素宽度
⾼度不设定为内容⾼度,如果没有内容,⾼度为0
常⻅的块级元素 div,p,h1,ul,li,table
5. 显示和隐藏属性
1. display:none
display:none; 使元素消失,脱离⽂档流的消失
display:block; 使元素出现,元素显示为块级元素
2. visibility: hidden
visibility: visible; 元素显示
visibility: hidden; 元素隐藏,占据⾃身位置
3. opacity: 0;
opacity属性代表元素的透明度,取值范围是0-1之间的数字,0 代表完全透明,1 代表不透明
缺点是,元素内的⼀切都会随着透明度改变
display和visibility的区别:visibility和display两个属性都有隐藏元素的功能。visibility属性所控制的元素虽然不在浏览器里面显示出来,但他在浏览区里是存在的,只是不显示而已。而display属性设置为none,这个元素就变成了一个不显示的元素。