邊框border相關屬性以及其他注意點

2021-10-20 11:55:41 字數 1961 閱讀 6331

一、邊框 border

單獨設定

border-top:邊框的寬度 邊框的線型 顏色;(順序可以隨便調)

border-bottom

border-left

border-right

線型實線 solid

虛線 dashed

雙線 double

點狀線dotted

全邊框設定

border:邊框的寬度 邊框的線型 顏色;

注意點:邊框新增了之後,也會把盒子給撐大,不想被撐大,解決方法跟padding、margin一樣

拆開寫:

邊框線型 border-style

邊框顏色 border-color

邊框寬度 border-width

border-image css3新增加的

>

邊框可以書寫三角形,用純css書寫乙個箭頭朝左的三角形

.box1

邊框可以書寫角形,用純css書寫由四個三角形拼接成的正方形

/* .box1*/

style

>

>

class

="box1"

>

div>

body

>

頁面搭建的正確過程

1、先分析,在腦海中大致想一下布局和**(需要經驗)分析的時候,是從大到小,從左往右

2、先做大的布局排版(浮動、寬高、文字樣式、間距的清除)

3、再去書寫相關的背景圖或者邊框

小tip:

line-height對於預設豎著排列的這類塊元素有效:塊元素 預設豎著排列,設定寬高又生效的標籤統成為塊元素。line-height對於預設橫著列的這類行內元素無效,行內元素預設橫著著排列,設定寬高不生效的標籤統成為行內元素。

解決方法:給行內元素新增浮動或者新增display:block,轉化成塊元素

line-height可以設定為不帶單位的數字,表示font-size的倍數,谷歌瀏覽器的最小字型大小為12px

二、塊級元素和行內元素

常見的塊級元素(自動換行, 可設定高寬 )有:

div,h1-h6,p,pre,ul,ol,li,form,table,label等
常見的行內元素(無法自動換行,無法設定寬高)有:

a,img,span,i(斜體),em(強調),sub(下標),sup(上標)等。
常見的行塊級元素(擁有內在尺寸,可設定高寬,不會自動換行 )有:

(button,input,textarea,select), img等
三、margin-top的傳遞問題

是當子元素是塊元素的時候,給子元素設定了margin-top之後,父元素也會有上間距,但是像img這類不是塊元素就不會有上間距傳遞的問題

瀏覽器在解析img的時候,會向下多解析3畫素

解決方法:1、設定元素型別display:block;

解決方法:2、設定vertical-align:top; 垂直靠上對齊

四、加粗

font-weight:單詞/數字,不帶單位;

font-weight:bold/bolder;

font-weight:600-900;中間隨意乙個數值,整數 加粗

font-weight:100-500;中間任意乙個數值,整數 去除加粗

font-weigh:normal;去除加粗

五、標題的使用

整片文章的標題用h1

大模組的標題用h2

小模組的標題用h3

em 是乙個相對單位,相當於font-size的幾倍大小;

CSS 元素的邊框border屬性

邊框相關屬性 寬度 border width 可以使用thin,medium,thick等文字值,也可以使用除百分比和負數之外 的任何絕對值。樣式 border style 有none 無邊框 hidden 隱藏邊框 dotted 點線邊框 dashed 虛線邊框 solid 實線邊框 double...

簡單實用的css邊框屬性border

本文主要講述利用border屬性做出不同的幾何形狀從而適用於比較好看的視覺樣式。預備知識border相關屬性 案例舉例為了更加通俗易懂,demo用的是最簡單的dom元素和css屬性 商品介紹 商品評價 border border left border icon border right 上面的cs...

CSS3的邊框(border)屬性 image

還是 先來介紹它的語法 border image none stretch repeat round 相關屬性 border image border top image border right image border bottom image border left image border ...