css樣式表-margin 外邊距/border 邊框/border-radius 圓角/padding 邊框

時間 2019-11-20

標籤 css 樣式 margin 邊距 border 邊框 radius 圓角 padding 欄目 CSS 简体版

原文原文鏈接

css樣式表（二）

css盒模型

<!DOCTYPE html>

<html>

<head>

.div{width: 100px;

height: 100px;

/*[margin 外邊距]

margin屬性值最多有四個：

①寫一個值：四個方向的margin均爲這個值

②寫兩個值：上、右兩個方向，下默認=上，左默認=右

③寫三個值：上、右、下三個方向，左默認=右

④寫四個值：上、右、下、左四個方向

⑤寫三個值：+auto：控件居右顯示

margin：50px 30px 20px auto; 距離父右側 30px

⑥margin：0 auto；設置控件在父容器中，水平居中

/*給子元素加margin-top時，會致使父容器與子容器一下往下，處理方法之一是，給父容器加overflow: hidden;*/

margin:0px auto;

/*[border 邊框]

border 有三個元素：顏色color 樣式style 寬度width

原則上，三個屬性都須要手動制定（color不寫，默認爲黑色）

* */

/* [border-radius 圓角]

* 一、能夠接受8個屬性值： X軸(左上、右上、右下、左下)/Y軸

* 例如：border-radius: 50px 50px 50px 50px / 50px 50px 50px 50px;

* 二、只寫X軸時，Y軸默認等於X軸。只寫左上角，默認=右下角。只寫右上角，默認=左下角

* 例如：border-radius: 50px 0px ;

* =border-radius: 50px 0px 50px 0px;

* =border-radius: 50px 0px 50px 0px/50px 0px 50px 0px;

* 三、只寫一個數，默認8個值均相等。

border: 10px solid green;

/*[padding 邊框]

使用方式，同margin①~④

注意：使用padding 會將整個控件撐大，使用時須要注意控件可視區域的實際大小

* */

/* [box-shadow 盒子陰影]

* 一、六個屬性值，空格分割：

* x軸陰影距離：(必選) 可正可負，正——右移負——左移

* y軸陰影距離：(必選) 可正可負，正——下移負——上移

* 陰影模糊半徑：(可選) 只能爲正，默認爲0。數值越大，陰影越模糊

* 陰影擴展半徑：(可選) 可正可負，默認爲0。數值增大，陰影擴大。數值減少，陰影縮小

* 陰影顏色：(可選) 默認爲黑色

* 內外陰影：(可選) 可選值：inset(內陰影) 默認爲外陰影

box-shadow: 0px 0px 10px 0px white inset;

}

.div2{padding: 10px 10px 10px 10px;

width: 100px;

height: 100px;

border: 10px solid green;}

.div3{width: 270px; height: 200px;

border: 3px #F1B562 solid;

}

ul{list-style: none;

text-indent: -20px;

line-height: 30px;}

#span2{

margin-right: 16px;

}

</style>

</head>

<body>

這是div中的文字</div>

這是div中的文字</div>

<ul>

</ul>

</div>

</body>

</html>

圖片以下：

案例練習：

<!DOCTYPE html>

<html>

<head>

#div1{

width: 150px;

height:450px;}

li {float: left;

width:12px;

height: 30px;

line-height: 30px;

list-style: none;

}

#div2{width: 120px;

height: 60px;

margin: 0px auto;

border-bottom: 2px #B3B3B3 solid;}

#li2{white-space: nowrap;

height: 50px;width: 55px;line-height: 10px;

margin-top: 5px;color: #B3B3B3;

}

#li1{background: url(css/3-13-練習.png);

background-repeat: no-repeat;

width: 55px;height: 60px;

background-position: -90px 5px;

}

p{color: black;}

#div3{font-size: 12px;

}

</style>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div><div id="div2">

</div>

</body>

</html>

圖以下：

案例-02

<!DOCTYPE html>

<html>

<head>

img{height: 200px;

width:200px;border: 6px #FF8C00 solid;}

#img1{border-radius: 53px 0px;}

#img2{border-radius: 103px 100px;}

#img3{height: 0px;

width: 1px;

padding: 50px;

border: 50px #F3C17E solid;

border-radius:100px;}

</style>

</head>

<body>

</body>

</html>

圖以下：

陰影：

解析課後練習

圖以下：

代碼以下：

01-

<!DOCTYPE html>

<html>

<head>

.div1{width: 800px;

height:80px;

color: white;}

div div .li{float: right;

width: 100px;

margin: 20px 6px;

text-align: center;

line-height: 40px;

list-style: none;

border: 2px solid #8B9CBC;

font-weight: bold;}

.div2{float: left;line-height:30px;text-indent: 40px;}

</style>

</head>

<body>

<li class="li">後置雙攝像</li>

</ul></div>

</div>

</body>

</html>

02-

<!DOCTYPE html>

<html>

<head>

#div1{width: 410px;

height: 450px;

overflow: hidden;}

#div2{width: 390px;

margin:30px 20px;

border-bottom: 2px #DDDDDD solid;

}

#div2 span{color: red;}

#div3{float: right

}

#div4{

height: 380px;

width: 410px;

overflow: hidden;}

#div5{border-bottom: 2px #DDDDDD solid;

width: 390px;height: 50px;

overflow: hidden;

}

#div5 ul {list-style: none;

width: 260px;

margin-left: 5px;

overflow: hidden;

}

#div5 ul #li1{

width: 74px;

float: left;

}

#div5 ul #li2{float: left;

width: 150px;margin-left: 5px ;

}

#div5:hover{

border-left: 2px #FF0000 solid;

color: #FF0000;

width: 388px;}

#div5:hover #li1{border-bottom: 2px #FF0000 solid;

}

#div5:hover #li2{border-bottom: 2px #FF0000 solid;

}

</style>

</head>

<body>

MORE+

</div>

<ul>

<li id="li2">燃油粗濾器按期防水</li>

</ul>

</div>

<ul>

<li id="li2">燃油粗濾器按期防水</li>

</ul>

</div>

<ul>

<li id="li2">燃油粗濾器按期防水</li>

</ul>

</div>

<ul>

<li id="li2">燃油粗濾器按期防水</li>

</ul>

</div>

<ul>

<li id="li2">燃油粗濾器按期防水</li>

</ul>

</div>

<ul>

<li id="li2">燃油粗濾器按期防水</li>

</ul>

</div>

<ul>

<li id="li2">燃油粗濾器按期防水</li>

</ul>

</div>

</body>

</html>

03-

<!DOCTYPE html>

<html>

<head>

.a{width: 800px;height: 800px;overflow: hidden;}

.b{width: 200px;height: 400px;margin-left: 205px;margin-top: 5px;float: left;}

.c{width: 200px;height: 400px;margin-top: 5px;float: left;}

.d{width: 190px;height: 200px;;margin-top: 5px;float: left;}

.e{width: 190px;height: 200px;float: left;}

.f{width: 400px;height: 390px;float: left;margin-left: 205px;float: left}

.g{width: 190px;height: 200px;float: left;}

.h{width: 190px;height: 190px;float: left;}

</style>

</head>

</div>

</body>

</html>

學習新知識

css樣式表（二）：

/*[border-image 圖片邊框]

* 一、十個屬性：

* ① 圖片路徑：url()

* ② 圖片切片寬度：4個值，分別表明上、右、下、左，四條切線。經過四條切線切割後，會把圖片分紅九宮格，四個角分別對應邊框的四角(不會進行任何拉伸)，四個邊分別對應邊框的四邊(根據設置進行拉伸/平鋪/鋪滿)。

* 寫的時候，不能帶px單位

* ③ 圖片邊框的寬度：4個值，分別表明上、右、下、左四條邊框

* 寫的時候，必須帶px單位

* ④ 邊框背景重複方式：stretch(拉伸)、round(鋪滿)、repeat(平鋪)

* 【鋪滿和平鋪區別】

* 平鋪：會保持原有四條邊的寬度，進行平鋪。可能致使角落處沒法顯示完整一個圖標；

* 鋪滿：會對四條邊進行適當的拉伸壓縮，確保能夠正好顯示徹底。

* 二、屬性值寫法：border-image: ① ②/③px ④;

* 第②部分能夠只寫1個、2個、3個，判斷方式同margin

新知識-

3-14-CSS樣式表（三）

/*[相對定位relative]

* 1.使用position：relativw；設置元素爲相對定位的元素

* 2.定位機制：

* ①相對於本身原來文檔流中的位置定位，當不制定TOP等定位值時，不會改變元素位置

* ②相對定位元素，仍會站間距原有文檔流中的位置，而不會釋放。

* 3.使用top、left、bottom、right調整位置。當left和right同時存在，left生效，當top和bottom同時存在，top生效。

/*[absolute絕對定位]

* 一、使用position：absolute；這是元素爲絕對定位元素

* 二、定位機制：

* ①相對於第一個非static的祖先元素（即便用了relative/absolute/fixed定位的祖先元素）進行定位；

* ②若是祖先元素均爲定製，相對於瀏覽器瀏覽器左上角定位；

* ③使用absolute的元素，會從文檔六中徹底刪除，原有控件釋放再也不佔有

/*[固定定位fixed]

* 一、position：fixed；是一種特殊的絕對定位，夫榮妻貴無妨使用relative鎖住

* 二、定位機制：永遠相對於瀏覽器定位

/*[z-indexs 屬性]

* 1.做用：設置定位元素的Z軸層疊順序

* 2.使用要求： ①必須是定位元素才能使用。relative/absolute/fixed

* ②使用z-index須要考慮父容器的約束。

若是父容器爲z-inex，則子容器的z-index能夠不受父容器的約束；

若是父容器z-index進行了設置，則子容器的層疊將以父容器的z-index爲準（在同一父容器的不一樣子元素，仍能夠經過的本身的z-index調整層疊關係）

* 3.z-index：auto & z-index：0的異同

* ①z-index：auto爲默認值，與z-index：0處於同一層面

* ②z-index：auto，不會約束子元素的z-index層次，而z-index：0，會約束子元素必須與福元素處於同一平面

* 4.z-index相同（處於同一平面的定位元素）的層疊關係：後來者居上

* */

新知識：

display屬性 - none：隱藏元素，元素所佔空間釋放

- block ：設爲塊級元素

- inline ：設爲內聯元素（行級元素）

- inline-block ：設爲內聯塊級元素（自己爲行級元素，可是具備會計元素所特有的各類屬性，好比，寬、高、text-align等）

課後做業：

新知識：

display屬性 - none：隱藏元素，元素所佔空間釋放

- block ：設爲塊級元素

- inline ：設爲內聯元素（行級元素）

- inline-block ：設爲內聯塊級元素（自己爲行級元素，可是具備會計元素所特有的各類屬性，好比，寬、高、text-align等）

學習新知識：

1、過渡、變換

<!DOCTYPE html>

<html>

<head>

/*transform定義變換

* 經常使用變換：translate 平移

* scale縮放

* rotale定義旋轉(Z軸 2D平面轉 x-翻轉 y-翻轉)

* transform可同時進行多種變換，多種變換之間空格分隔

* 例如：transform：scale（1.8,3.0） translatey（0px）

*transform-origin：定義變形起點

* 可選值：left/center/tight left/center/tight

* 或者，直接寫X Y 軸座標點

* 例如：transform：rotate（180deg）：

* transform-origin：right bottom；

* 表示，繞左下角，旋轉180度

/*transtion屬性：定義過渡

* ⒈參與過渡的屬性，能夠單獨制定某個CSS屬性，也能夠all/none

* ⒉過渡開始到過渡結束時間： .3S .5S

* ⒊過渡的樣式行數常選 ease

* ⒋過渡開始前的延遲時間，能夠省略。

*transition 屬性能夠同時定義多個屬性，用逗號分隔

* transition：標籤 .3s ease（由快到慢的樣式）

#div1{width: 300px;

height: 300px;

overflow: hidden;

}

#div1 img{width: 100px;

height: 100px;

transition: all 3s ease;}

div:hover img{transform:scale(2) translate(40px,20px) rotateY(180deg);

transform-origin: left top}

</style>

</head>

<body>

</div>

</body>

</html>

2、動畫

<!DOCTYPE html>

<html>

<head>

#div1{width: 300px;

height: 300px;

-webkit-animation: mymymy 5s ease 3s infinite}

/*CSS3 動畫的使用

1.聲明一個動畫（關鍵幀）

@-webkit-keyframes name{

from{}

to{}

階段：

⒈.每一個階段必須用百分比表示，從0%到100%

⒉.起點必須設置即0%到100%或者from和to

二、在CSS選擇器中，使用Animation動畫屬性，調用聲明好的關鍵幀

【Animation:縮寫順序】

Animation-name 動畫名稱(@keyframes 名稱)

Animation-duration 動畫持續時間

Animtaion-timing-function動畫速度曲線常選ease

Animtaion-delay 動畫延遲時間

Animation-iteration-count 播放次數，默認爲1，無限次Infinite

Animation-direction 設置對象動畫在循環中是否反向運動（ Alternate 逆向播放）

* animation-fill-mode 設置對象動畫時間以外的狀態（forwards：停留在動畫結束狀態 backwards:停留在動畫開始狀態）

>>> 注意animation-name和animation-duration必須設置

>>> animation能夠同時設置多個動畫動畫之間用,分隔

animation:frame1 .3s,frame2 .5s……

@-webkit-keyframes mymymy{

0%{}

25%{}

50%{ line-height: 1.75;"> 75%{background-color: whitesmoke}

100%{ line-height: 1.75;"> }

</style>

</head>

<body>

</div>

</body>

</html>

開始個人製做網頁之旅：

臨摹賓之郎guanwang

官網：

我作的：

代碼：

<!DOCTYPE html>

<html>

<head>

<title>用心作好沒口檳榔_賓之郎</title>

</head>

<body>

<!--

Head部分

-->

</li>

<li>

<a href="#">走進賓之郎</a>

<ul>

</ul>

</li>

<li>

<a href="#">聚焦賓之郎</a>

</li>

<li>

<a href="#">品味賓之郎</a>

</li>

<li>

<a href="#">加盟賓之郎</a>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</nav>

</ul>

</div>

</header>

您的瀏覽器不支持video標籤

</video>

</div>

</section>

<p>走進賓之郎</p> </div>

</div>

<p>湖南賓之郎食品科技有限公司位於湖南▪湘潭-九華經濟技術開發區。是目前檳榔食品行業惟一一家實現全自動工藝生產流水線的現代化檳榔食品科技生產企業。</p>

</div>

發展歷程

</div>

公司概況</div>

</div>

<div class="right1"> <img src="img/ae0d63505960476eb59817808cc97a84.jpg"/> <div>印象賓之郎</div> </div>

</div>

</div> </div>

</section>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。