CSS學習紀錄-06-行內跟區塊元素

css 學習筆記

joycechou_914 2024-05-23 23:49:25 ‧ 377 瀏覽

分享至

嗨嗨~我是914 今天也來學習行內跟區塊元素囉GOGOGO

趕快來貼一下~
最近的心情很複雜
不曉得是否該繼續努力下去於轉職
不曉得大家會覺得這個世界有太喧囂的時刻嗎?

display:inline行內元素
1.和其他元素都在一行上，相臨的行内元素会排列在同一行，
直到一行排不下，才會換行，其寬度隨元素的内容而變化。
2.設置寬高無效，只能由内容撑起来，即行内元素設置width，height屬性無效。
3.設置上下margin、padding无效，左右padding 、margin有效
https://codepen.io/JoyceChou914/pen/JjqKaoy?editors=1010

display:block區塊元素
1.占滿整個元素，會另起一行來進行呈現
2.高度，行高以及頂和底邊距都可控制；
3.默認情况下，其寬度自動填满其父元素寬度，即寬度100%
4.可以設置寬高 width hight
https://codepen.io/JoyceChou914/pen/QWREVWe

區塊元素常見包括
div、p、h1~h6、ul、ol、li、dl、dt、dd、form、table、hr、blockquote 、address、menu、pre

display: inline-block
同時具備了行內元素和區塊元素的特性。使用 inline-block 的元素既可以像行內元素一樣在同一行顯示，又可以像區塊元素一樣設定寬度、高度、邊距和填充等屬性。
https://codepen.io/JoyceChou914/pen/rNgLrXL?editors=1010

透過 display: inline-block; 的設置，這些區塊元素可以在同一行中顯示，而不會像普通的區塊元素一樣佔據整個行的寬度。
<div style="text-align: center;">
    <div style="display: inline-block; width: 100px; height: 100px; background-color: red;"></div>
    <div style="display: inline-block; width: 100px; height: 100px; background-color: blue;"></div>
    <div style="display: inline-block; width: 100px; height: 100px; background-color: green;"></div>
</div>

空元素
1.没有内容的 HTML 元素被稱為空元素。空元素是在開始標籤中關閉的。
2.單標籤，只有開始標籤，没有结束標籤
空元素常見包括:
<br> <hr> <img> <input> <link> <meta> <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

我是超級新手，若有任何建議或是錯誤的部分，歡迎底下留言唷thanks
我們下篇文章見掰掰~