欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS盒子模型、圓角邊框、盒子陰影效果實現(xiàn)

  發(fā)布時間:2024-10-18 16:24:13   作者:Sakura_0413   我要評論
盒子模型是網(wǎng)頁布局的基礎(chǔ),包括邊框、外邊距、內(nèi)邊距和實際內(nèi)容,通過CSS可以控制盒子之間的距離及其外觀,如邊框樣式、邊框顏色等,重要屬性包括padding和margin,分別控制內(nèi)容與邊框的距離和盒子之間的距離

頁面布局的三大核心:盒子模型、浮動、定位。

盒子模型、圓角邊框

盒子模型

網(wǎng)頁布局的核心:通過css擺放盒子。
盒子模型的組成包括:邊框、外邊距、內(nèi)邊距、實際內(nèi)容

盒子模型

padding:默認頂著盒子顯示,控制文字與盒子的距離
margin:控制盒子與盒子之間的距離

盒子

邊框border

邊框包括:邊框?qū)挾龋ù旨殻⑦吙驑邮剑▽嵕€、虛線、點線)、邊框顏色

div {
    width: 300px;
    height: 200px;
    border-width: 5px;            邊框?qū)挾?
    border-style: solid;          邊框樣式:實線
    border-style: dashed;                   虛線
    border-style: dotted;                   點線
    border-style: pink;           邊框顏色
}

邊框簡寫

border: 1px solid red;    沒有順序

邊框分開寫法(用來修改某一條邊):

border-top: 1px solid blue;
border-bottom:1px solid pink;

邊框只有一條不一樣的時候,可以利用層疊性書寫:

border: 5px dashed pink;
border-top: 1px solid blue;          覆蓋了上面整個盒子的一條上邊框

表格的細線邊框:

當給一個表格中的單元格與單元格之間的間距設(shè)置為0時,由于相鄰兩個單元格的邊框放在了一起,所以會出現(xiàn)這個部分的寬度比設(shè)置的一個單元格邊框的寬度要大,為了解決這個問題,可以使用border-collapse屬性。
border-collapse屬性控制瀏覽器繪制表格邊框的方式,它控制相鄰單元格的邊框。把相鄰的邊框合并在一起:

table {
    border-collapse: collapse;    這個屬性必須加在table上才有效
} 

邊框會影響盒子的實際大小
邊框的存在會增加盒子的大小,因為有兩種方案:
(1)測量盒子大小的時候,不要量邊框
(2)如果測量的時候包含了邊框,則需要將width和height的值減去邊框的寬度

內(nèi)邊距padding

邊框與內(nèi)容之間的距離。

padding

padding

內(nèi)邊距會影響盒子的實際大小
為了保證盒子大小和效果圖保持一致,則需要將width和height的值減去內(nèi)邊距的寬度
如果盒子本身沒有指定width、height屬性,則padding不會撐開盒子的大小:沒有指定寬,則左右的padding不會撐大盒子;沒有指定高度,則上下的padding不會撐大盒子

外邊距margin

控制盒子與盒子之間的距離

margin

margin

典型應(yīng)用:讓塊級盒子實現(xiàn)水平居中,必須滿足兩個條件:盒子必須指定了寬度;盒子左右的邊距設(shè)置為auto
行內(nèi)元素、行內(nèi)塊元素:想要實現(xiàn)水平居中對齊、只要給其父親元素添加text-align:center即可

外邊距合并
(1)嵌套塊元素垂直外邊距的塌陷問題:對于兩個嵌套關(guān)系(父子關(guān)系)的塊元素,父元素有上邊距同時子元素也有上邊距,此時父元素會塌陷較大的外邊距值。

在這里插入圖片描述

解決方案:為父元素指定一個外邊框;為父元素指定一個內(nèi)邊距;給父親添加一個overflow:hidden(常用)

清除內(nèi)外邊距

網(wǎng)頁元素很多帶有默認的內(nèi)外邊距,且瀏覽器不同默認的也不同,因為在布局前,要清除一下網(wǎng)頁元素的內(nèi)外邊距。

* {
    margin: 0px;    清除內(nèi)邊距
    padding: 0px;   清除外邊距
}

行內(nèi)元素為了照顧兼容性,盡量只設(shè)置左右內(nèi)外邊距,不要設(shè)置上下內(nèi)外邊距,但是轉(zhuǎn)換為塊級和行內(nèi)級元素就可以了。

圓角邊框

讓盒子變成圓角。
border-radius屬性用來設(shè)置元素的內(nèi)外框圓角。
語法:

border-radius:length;  參數(shù)越大弧度越明顯,這個參數(shù)可以是具體數(shù)組也可以是百分比

其原理:

圓角邊框的寫法:
(1)圓形的寫法:當盒子是一個正方形,當length=盒子高度或?qū)挾鹊囊话霑r,這個盒子就是一個圓形。一半:可以是精確數(shù)值,也可以是50%。】
(2)圓角矩形的寫法:參數(shù)設(shè)置為高度的一半
(3)該屬性是一個簡寫屬性,其實是:左上角、右上角、右下角、左下角(順時針)
(4)如果只想設(shè)置一個角,可以寫為:border-top-left-radius、border-bottom-right-radius等,注意 順序不能顛倒。

盒子陰影

box-shadow屬性為盒子添加陰影。
語法:

box-shadow:h-shadow v-shadow blur spread color inset;  盒子默認外陰影

blur:影子的虛實,參數(shù)越大,越模糊

文字陰影

text-shadow
語法:
text-shadow:h-shadow、v-shadow、blur、color

到此這篇關(guān)于CSS盒子模型、圓角邊框、盒子陰影的文章就介紹到這了,更多相關(guān)CSS盒子模型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!

相關(guān)文章

  • 分享CSS盒子模型隱藏的幾種方式

    這篇文章主要分享的是CSS盒子模型隱藏的幾種方式,盒子的隱藏會使做出來的界面更加精致,靈活,帶給用戶更好的使用體驗,盒子的隱藏使用css與js會有更好的動畫效果,下面我i
    2022-02-25
  • 詳解css盒子模型之內(nèi)邊距padding及簡寫

    這篇文章主要介紹了詳解css盒子模型之內(nèi)邊距padding及簡寫,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-10-27
  • 看完不迷糊的 CSS 盒子模型介紹

    這篇文章主要介紹了看完不迷糊的 CSS 盒子模型介紹,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-08-25
  • 深入理解CSS中的盒子模型

    下面小編就為大家?guī)硪黄钊肜斫釩SS中的盒子模型。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-25
  • CSS盒子模型是什么

    什么是CSS盒子模型?CSS盒子模型是為了讓我們充分理解div+css模型的定位功能,盒子模型在學(xué)習(xí)div+css布局方式中必須要學(xué)習(xí)的一個模型
    2016-05-10
  • 使用CSS實現(xiàn)漸變圓角邊框的效果

    這篇文章給大家介紹了如何使用CSS實現(xiàn)漸變圓角邊框的效果,有沒有發(fā)現(xiàn)在現(xiàn)如今的網(wǎng)站應(yīng)用中,我們大量的使用到這類場景,在解決這類問題時,我們利用了css的mask與mask-comp
    2023-10-12
  • border-radius以外的CSS圓角邊框制作方法

    用CSS3的border-radius屬性來制作圓角邊框相當順手,然而瀏覽器的兼容問題并不是太好處理,這里我們就來總結(jié)一下border-radius以外的CSS圓角邊框制作方法.
    2016-06-02
  • CSS圓角邊框制作指南與實例

    這篇文章主要介紹了CSS圓角邊框制作指南與實例,這里突出講解了以純代碼實現(xiàn)的小圓角 來消滅鋸齒的方法,需要的朋友可以參考下
    2016-03-10
  • css教程制作css圓角邊框(兼容全部瀏覽器)

    css制作的圓角框,兼容全部瀏覽器,大家參考使用吧
    2013-12-27
  • 兼容IE6的圖片圓角邊框CSS

    純CSS實現(xiàn)的圖片圓角邊框效果,兼容IE6.
    2010-07-04

最新評論