學習筆記(盒子背景、塊盒子、內盒子)

盒子背景
  • 背景顏色:只能是純色,全平鋪——css3里面已經可以設置過度色。background-color:顏色值;
  • 背景圖片:需要設置圖片路徑,還可以設置是否重復(平鋪),怎么重復,怎么定位。background-image:url(圖片路徑);
    background-repeat: repeat // no-repeat // repeat-x // repeat-y;
    background-position: 水平定位方式 垂直定位方式;
    水平定位方式有: left // center // right // 離左邊的像素值;
    垂直定位方式有: top // center // bottom // 離頂部的像素值;
  • 背景綜合屬性:可以一次性設置有關背景的多個數據值:
    background:背景色值 背景圖值 背景圖重復性值 背景圖定位值;
塊盒子和行內盒子的真相

對塊盒子,其display屬性的值默認是block
對行內盒子,其display屬性的值默認是inline;
塊盒子和行內盒子可以相互轉換。
div{ display: inline;} ——此時div就跟span一樣。
span{ display: block;} ——此時span就跟div一樣。
display: inline // block // none: 顯示為:行內盒子//塊盒子//不顯示

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,621評論 32 459
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,806評論 1 92
  • 1.CSS基本概念 1.1 CSS的定義 CSS(Cascading Style Sheets)層疊樣式表,主要用...
    寥寥十一閱讀 1,875評論 0 6
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么? ...
    Simon_s閱讀 2,228評論 0 8
  • 少耽玄幻景, 今為稻梁謀。 碌碌呼油膩, 翩翩怎訴求。 向天翻白眼, 困井待青眸。 世事無前悔, 余生有后憂。 吾...
    花屋主人蕭寒閱讀 671評論 21 35