資訊專欄INFORMATION COLUMN
摘要：塊元素內(nèi)聯(lián)元素內(nèi)聯(lián)塊元素塊元素內(nèi)聯(lián)元素內(nèi)聯(lián)塊元素元素就是標(biāo)簽，布局中常用的有三種標(biāo)簽，塊元素內(nèi)聯(lián)元素內(nèi)聯(lián)塊元素，了解這三種元素的特性，才能熟練的進(jìn)行頁面布局。
css的定義方法是：
選擇器 { 屬性:值; 屬性:值; 屬性:值;}
選擇器是將樣式和頁面元素關(guān)聯(lián)起來的名稱，屬性是希望設(shè)置的樣式屬性每個(gè)屬性有一個(gè)或多個(gè)值。代碼示例：
div{ width:100px; height:100px; color:red }
1、外聯(lián)式：通過link標(biāo)簽，鏈接到外部樣式表到頁面中。
<link rel="stylesheet" type="text/css" href="css/main.css">
2、嵌入式：通過style標(biāo)簽，在網(wǎng)頁上創(chuàng)建嵌入的樣式表。
<style type="text/css"> div{ width:100px; height:100px; color:red } ...... style>
3、內(nèi)聯(lián)式：通過標(biāo)簽的style屬性，在標(biāo)簽上直接寫樣式。
<div style="width:100px; height:100px; color:red ">......div>
常用的應(yīng)用文本的css樣式：
color 設(shè)置文字的顏色，如： color:red;
font-size 設(shè)置文字的大小，如：font-size:12px;
font-family 設(shè)置文字的字體，如：font-family:微軟雅黑;
font-style 設(shè)置字體是否傾斜，如：font-style:normal; 設(shè)置不傾斜，font-style:italic;設(shè)置文字傾斜
font-weight 設(shè)置文字是否加粗，如：font-weight:bold; 設(shè)置加粗 font-weight:normal 設(shè)置不加粗
font 同時(shí)設(shè)置文字的幾個(gè)屬性，寫的順序有兼容問題，建議按照如下順序?qū)懀?font：是否加粗 字號/行高 字體；如： font:normal 12px/36px 微軟雅黑;
line-height 設(shè)置文字的行高，如：line-height:24px;
text-decoration 設(shè)置文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
text-indent 設(shè)置文字首行縮進(jìn)，如：text-indent:24px; 設(shè)置文字首行縮進(jìn)24px
text-align 設(shè)置文字水平對齊方式，如text-align:center 設(shè)置文字水平居中
css顏色值主要有三種表示方法：
1、顏色名表示，比如：red 紅色，gold 金色
2、rgb表示，比如：rgb(255,0,0)表示紅色
3、16進(jìn)制數(shù)值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00
常用的選擇器有如下幾種：
標(biāo)簽選擇器，此種選擇器影響范圍大，建議盡量應(yīng)用在層級選擇器中。
舉例：
*{margin:0;padding:0} div{color:red} <div>....div> <div class="box">....div>
通過id名來選擇元素，元素的id名稱不能重復(fù)，所以一個(gè)樣式設(shè)置項(xiàng)只能對應(yīng)于頁面上一個(gè)元素，不能復(fù)用，id名一般給程序使用，所以不推薦使用id作為選擇器。
舉例：
#box{color:red} <div id="box">....div>
通過類名來選擇元素，一個(gè)類可應(yīng)用于多個(gè)元素，一個(gè)元素上也可以使用多個(gè)類，應(yīng)用靈活，可復(fù)用，是css中應(yīng)用最多的一種選擇器。
舉例：
.red{color:red} .big{font-size:20px} .mt10{margin-top:10px} <div class="red">....div> <h1 class="red big mt10">....h1> <p class="red mt10">....p>
主要應(yīng)用在選擇父元素下的子元素，或者子元素下面的子元素，可與標(biāo)簽元素結(jié)合使用，減少命名，同時(shí)也可以通過層級，防止命名沖突。
舉例：
.box span{color:red} .box .red{color:pink} .red{color:red} <div class="box"> <span>....span> <a href="#" class="red">....a> div> <h3 class="red">....h3>
多個(gè)選擇器，如果有同樣的樣式設(shè)置，可以使用組選擇器。
舉例：
.box1,.box2,.box3{width:100px;height:100px} .box1{background:red} .box2{background:pink} .box2{background:gold} <div class="box1">....div> <div class="box2">....div> <div class="box3">....div>
常用的偽類選擇器有hover，表示鼠標(biāo)懸浮在元素上時(shí)的狀態(tài)，偽元素選擇器有before和after,它們可以通過樣式在元素中插入內(nèi)容。
.box1:hover{color:red} .box2:before{content:行首文字;} .box3:after{content:行尾文字;} <div class="box1">....div> <div class="box2">....div> <div class="box3">....div>
盒子模型解釋
元素在頁面中顯示成一個(gè)方塊，類似一個(gè)盒子，CSS盒子模型就是使用現(xiàn)實(shí)中盒子來做比喻，幫助我們設(shè)置元素對應(yīng)的樣式。盒子模型示意圖如下：
把元素叫做盒子，設(shè)置對應(yīng)的樣式分別為：盒子的邊框(border)、盒子內(nèi)的內(nèi)容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。
設(shè)置一邊的邊框，比如頂部邊框，可以按如下設(shè)置：
border-top-color:red; /* 設(shè)置頂部邊框顏色為紅色 */
border-top-width:10px; /* 設(shè)置頂部邊框粗細(xì)為10px */
border-top-style:solid; /* 設(shè)置頂部邊框的線性為實(shí)線，常用的有：solid(實(shí)線)
dashed(虛線) dotted(點(diǎn)線); */
上面三句可以簡寫成一句：
border-top:10px solid red;
設(shè)置其它三個(gè)邊的方法和上面一樣，把上面的top換成left就是設(shè)置左邊，換成right就是設(shè)置右邊，換成bottom就是設(shè)置底邊。
四個(gè)邊如果設(shè)置一樣，可以將四個(gè)邊的設(shè)置合并成一句：
border:10px solid red;
設(shè)置盒子四邊的內(nèi)間距，可設(shè)置如下：
padding-top：20px; /* 設(shè)置頂部內(nèi)間距20px */ padding-left:30px; /* 設(shè)置左邊內(nèi)間距30px */ padding-right:40px; /* 設(shè)置右邊內(nèi)間距40px */ padding-bottom:50px; /* 設(shè)置底部內(nèi)間距50px */
上面的設(shè)置可以簡寫如下：
padding：20px 40px 50px 30px; /* 四個(gè)值按照順時(shí)針方向，分別設(shè)置的是 上 右 下 左 四個(gè)方向的內(nèi)邊距值。 */
padding后面還可以跟3個(gè)值，2個(gè)值和1個(gè)值，它們分別設(shè)置的項(xiàng)目如下：
padding：20px 40px 50px; /* 設(shè)置頂部內(nèi)邊距為20px，左右內(nèi)邊距為40px，底部內(nèi)邊距為50px */ padding：20px 40px; /* 設(shè)置上下內(nèi)邊距為20px，左右內(nèi)邊距為40px*/ padding：20px; /* 設(shè)置四邊內(nèi)邊距為20px */
外邊距的設(shè)置方法和padding的設(shè)置方法相同，將上面設(shè)置項(xiàng)中的padding換成margin就是外邊距設(shè)置方法。
盒子模型的尺寸
按照下面代碼制作頁面：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子的真實(shí)尺寸title>
<style type="text/css">
.box01{width:50px;height:50px;background-color:gold;}
.box02{width:50px;height:50px;background-color:gold;border:50px
solid #000}
.box03{width:50px;height:50px;background-color:gold;border:50px
solid #000;padding: 50px;}
style>
head>
<body>
<div class="box01">1div>
<br />
<div class="box02">2div>
<br />
<div class="box03">3div>
body>
html>
頁面顯示效果如下：
通過上面的頁面得出結(jié)論：盒子的width和height設(shè)置的是盒子內(nèi)容的寬和高，不是盒子本身的寬和高，盒子的真實(shí)尺寸計(jì)算公式如下：
思考題：
1.在布局中，如果我想增大內(nèi)容和邊框的距離，又不想改變盒子顯示的尺寸，應(yīng)該怎么做？
請制作圖中所示的標(biāo)題：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style type="text/css">
.box{
width:385px;
height:35px;
border-top:1px solid #f00;
border-bottom:3px solid #666;
font-size:20px;
font-family: Microsoft Yahei;
line-height:20px;
color:#333;
padding-left: 15px;
padding-top:15px;
}
.box2{
width:400px;
height:50px;
border-top:1px solid #f00;
border-bottom:3px solid #666;
font-size:20px;
font-family: Microsoft Yahei;
text-indent:15px;
line-height:50px;
}
style>
head>
<body>
<div class="box">新聞標(biāo)題div>
<br>
<br>
<div class="box2">新聞標(biāo)題div>
body>
html>
View Code
1、設(shè)置元素水平居中： margin:x auto;
2、margin負(fù)值讓元素位移及邊框合并
外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。解決方法如下：
1、使用這種特性
2、設(shè)置一邊的外邊距，一般設(shè)置margin-top
3、將元素浮動(dòng)或者定位
在兩個(gè)盒子嵌套時(shí)候，內(nèi)部的盒子設(shè)置的margin-top會加到外邊的盒子上，導(dǎo)致內(nèi)部的盒子margin-top設(shè)置失敗，解決方法如下：
1、外部盒子設(shè)置一個(gè)邊框
2、外部盒子設(shè)置 overflow:hidden
3、使用偽元素類：
.clearfix:before{ content: ; display:table; }
當(dāng)子元素的尺寸超過父元素的尺寸時(shí)，需要設(shè)置父元素顯示溢出的子元素的方式，設(shè)置的方法是通過overflow屬性來設(shè)置。
1、visible 默認(rèn)值。內(nèi)容不會被修剪，會呈現(xiàn)在元素框之外。
2、hidden 內(nèi)容會被修剪，并且其余內(nèi)容是不可見的，此屬性還有清除浮動(dòng)、清除margin-top塌陷的功能。
3、scroll 內(nèi)容會被修剪，但是瀏覽器會顯示滾動(dòng)條以便查看其余的內(nèi)容。
4、auto 如果內(nèi)容被修剪，則瀏覽器會顯示滾動(dòng)條以便查看其余的內(nèi)容。
5、inherit 規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。
元素就是標(biāo)簽，布局中常用的有三種標(biāo)簽，塊元素、內(nèi)聯(lián)元素、內(nèi)聯(lián)塊元素，了解這三種元素的特性，才能熟練的進(jìn)行頁面布局。
塊元素，也可以稱為行元素，布局中常用的標(biāo)簽如：div、p、ul、li、h1~h6、dl、dt、dd等等都是塊元素，它在布局中的行為：
內(nèi)聯(lián)元素，也可以稱為行內(nèi)元素，布局中常用的標(biāo)簽如：a、span、em、b、strong、i等等都是內(nèi)聯(lián)元素，它們在布局中的行為：
1、去掉內(nèi)聯(lián)元素之間的換行
2、將內(nèi)聯(lián)元素的父級設(shè)置font-size為0，內(nèi)聯(lián)元素自身再設(shè)置font-size
內(nèi)聯(lián)塊元素，也叫行內(nèi)塊元素，是新增的元素類型，現(xiàn)有元素沒有歸于此類別的，img和input元素的行為類似這種元素，但是也歸類于內(nèi)聯(lián)元素，我們可以用display屬性將塊元素或者內(nèi)聯(lián)元素轉(zhuǎn)化成這種元素。它們在布局中表現(xiàn)的行為：
這三種元素，可以通過display屬性來相互轉(zhuǎn)化，不過實(shí)際開發(fā)中，塊元素用得比較多，所以我們經(jīng)常把內(nèi)聯(lián)元素轉(zhuǎn)化為塊元素，少量轉(zhuǎn)化為內(nèi)聯(lián)塊，而要使用內(nèi)聯(lián)元素時(shí)，直接使用內(nèi)聯(lián)元素，而不用塊元素轉(zhuǎn)化了。
display屬性是用來設(shè)置元素的類型及隱藏的，常用的屬性有：
1、none 元素隱藏且不占位置
2、block 元素以塊元素顯示
3、inline 元素以內(nèi)聯(lián)元素顯示
4、inline-block 元素以內(nèi)聯(lián)塊元素顯示
請制作圖中所示的菜單：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜單title>
<style type="text/css">
.menu{
width:694px;
height:50px;
margin:50px auto 0;
list-style:none;
padding:0;
font-size:0;
}
.menu li{
display:inline-block;
width:98px;
height:48px;
border:1px solid gold;
font-size:16px;
margin-right:-1px;
text-align:center;
line-height:48px;
}
.menu li:hover{
background-color:orange;
}
.menu a{
font-family:Microsoft Yahei;
color:pink;
text-decoration:none;
}
.menu a:hover{
color:red;
}
style>
head>
<body>
<ul class="menu">
<li><a href="">首頁a>li>
<li><a href="">公司簡介a>li>
<li><a href="">公司簡介a>li>
<li><a href="">公司簡介a>li>
<li><a href="">公司簡介a>li>
<li><a href="">公司簡介a>li>
<li><a href="">公司簡介a>li>
ul>
body>
html>
View Code
文檔流，是指盒子按照html標(biāo)簽編寫的順序依次從上到下，從左到右排列，塊元素占一行，行內(nèi)元素在一行之內(nèi)從左到右排列，先寫的先排列，后寫的排在后面，每個(gè)盒子都占據(jù)自己的位置。
1、浮動(dòng)元素有左浮動(dòng)(float:left)和右浮動(dòng)(float:right)兩種
2、浮動(dòng)的元素會向左或向右浮動(dòng)，碰到父元素邊界、浮動(dòng)元素、未浮動(dòng)的元素才停下來
3、相鄰浮動(dòng)的塊元素可以并在一行，超出父級寬度就換行
4、浮動(dòng)讓行內(nèi)元素或塊元素自動(dòng)轉(zhuǎn)化為行內(nèi)塊元素
5、浮動(dòng)元素后面沒有浮動(dòng)的元素會占據(jù)浮動(dòng)元素的位置，沒有浮動(dòng)的元素內(nèi)的文字會避開浮動(dòng)的元素，形成文字饒圖的效果
6、父元素內(nèi)整體浮動(dòng)的元素?zé)o法撐開父元素，需要清除浮動(dòng)
7、浮動(dòng)元素之間沒有垂直margin的合并
.clearfix:after,.clearfix:before{ content: "";display: table;} .clearfix:after{ clear:both;} .clearfix{zoom:1;}
清除浮動(dòng)的使用方法：
.con2{... overflow:hidden} 或者 <div class="con2 clearfix">
我們可以使用css的position屬性來設(shè)置元素的定位類型，postion的設(shè)置項(xiàng)如下：
絕對定位和固定定位的塊元素和行內(nèi)元素會自動(dòng)轉(zhuǎn)化為行內(nèi)塊元素
定位元素是浮動(dòng)的正常的文檔流之上的，可以用z-index屬性來設(shè)置元素的層級
1、固定在頂部的菜單
2、水平垂直居中的彈框
3、固定的側(cè)邊的工具欄
4、固定在底部的按鈕
background屬性是css中應(yīng)用比較多，且比較重要的一個(gè)屬性，它是負(fù)責(zé)給盒子設(shè)置背景圖片和背景顏色的，background是一個(gè)復(fù)合屬性，它可以分解成如下幾個(gè)設(shè)置項(xiàng)：
實(shí)際應(yīng)用中，我們可以用background屬性將上面所有的設(shè)置項(xiàng)放在一起，而且也建議這么做，這樣做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，這里面的“#00ff00”是設(shè)置background-color；“url(bgimage.gif)”是設(shè)置background-image；“no-repeat”是設(shè)置background-repeat；“left center”是設(shè)置background-position；“fixed”是設(shè)置background-attachment，各個(gè)設(shè)置項(xiàng)用空格隔開，有的設(shè)置項(xiàng)不寫也是可以的，它會使用默認(rèn)值。
舉例：
下面這些例子使用下面這張圖片做為背景圖：
1、“background:url(bg.jpg)”，默認(rèn)設(shè)置一個(gè)圖片地址，圖片會從盒子的左上角開始將盒子鋪滿。
2、“background:cyan url(bg.jpg) repeat-x”，橫向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。
3、“background:cyan url(bg.jpg) repeat-y”，縱向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。
4、“background:cyan url(bg.jpg) no-repeat”，背景不重復(fù)，背景和盒子左上角對齊，盒子其他部分顯示背景顏色“cyan”。
5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重復(fù)，背景和盒子左中對齊，盒子其他部分顯示背景顏色“cyan”。
6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重復(fù)，背景和盒子右中對齊，也就是背景圖片的右邊對齊盒子的右邊，盒子其他部分顯示背景顏色“cyan”。
相關(guān)代碼：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test backgroundtitle>
<style type="text/css">
.backshow{
width:320px;
height:160px;
border:3px solid #333;
float:left;
margin:10px;
}
.bg1{background:cyan url(bg.jpg);}
.bg2{background:cyan url(bg.jpg) repeat-x;}
.bg3{background:cyan url(bg.jpg) repeat-y;}
.bg4{background:cyan url(bg.jpg) no-repeat;}
.bg5{background:cyan url(bg.jpg) no-repeat left center;}
.bg6{background:cyan url(bg.jpg) no-repeat right center;}
style>
head>
<body>
<div class="backshow bg1">div>
<div class="backshow bg2">div>
<div class="backshow bg3">div>
<div class="backshow bg4">div>
<div class="backshow bg5">div>
<div class="backshow bg6">div>
body>
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1899.html
摘要：希望幫助更多的前端愛好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問起有關(guān)與時(shí)，老司機(jī)們首先就會告訴你其實(shí)是個(gè)沒有網(wǎng)絡(luò)請求功能的庫。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡單 原文地址：Learning React.js is easier than you think 原文作...
摘要：權(quán)重權(quán)重權(quán)重指的是樣式的優(yōu)先級，有兩條或多條樣式作用于一個(gè)元素，權(quán)重高的那條樣式對元素起作用權(quán)重相同的，后寫的樣式會覆蓋前面寫的樣式。標(biāo)簽支持格式屬性可選第三方播放器CSS權(quán)重 CSS權(quán)重指的是樣式的優(yōu)先級，有兩條或多條樣式作用于一個(gè)元素，權(quán)重高的那條樣式對元素起作用,權(quán)重相同的，后寫的樣式會覆蓋前面寫的樣式。 權(quán)重的等級 可以把樣式的應(yīng)用方式分為幾個(gè)等級，按照等級來計(jì)算權(quán)重 1、!impo...
摘要：和是最受歡迎的。虛擬環(huán)境將允許將項(xiàng)目依賴項(xiàng)與本地機(jī)器依賴項(xiàng)隔離開來。文件將是項(xiàng)目中的主文件。運(yùn)行后，檢查本地主機(jī)。在中創(chuàng)建一個(gè)名為的文件夾，并創(chuàng)建一個(gè)名為的文件夾。部署創(chuàng)建帳戶為前端和全棧應(yīng)用程序提供免費(fèi)部署服務(wù)。 ...
摘要：入門，第一個(gè)這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數(shù)式編程語言，它的代碼運(yùn)行在之上。它通過編輯類工具，帶來了先進(jìn)的編輯體驗(yàn)，增強(qiáng)了語言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了，總結(jié)過去的 2017，相信小伙們一定有很多收獲...
摘要：入門，第一個(gè)這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數(shù)式編程語言，它的代碼運(yùn)行在之上。它通過編輯類工具，帶來了先進(jìn)的編輯體驗(yàn)，增強(qiáng)了語言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了，總結(jié)過去的 2017，相信小伙們一定有很多收獲...
摘要：入門，第一個(gè)這是一門很新的語言，年前后正式公布，算起來是比較年輕的編程語言了，更重要的是它是面向程序員的函數(shù)式編程語言，它的代碼運(yùn)行在之上。它通過編輯類工具，帶來了先進(jìn)的編輯體驗(yàn)，增強(qiáng)了語言服務(wù)。 showImg(https://segmentfault.com/img/bV1xdq?w=900&h=385); 新的一年不知不覺已經(jīng)到來了，總結(jié)過去的 2017，相信小伙們一定有很多收獲...
閱讀 769·2023-04-25 19:43
閱讀 4021·2021-11-30 14:52
閱讀 3855·2021-11-30 14:52
閱讀 3909·2021-11-29 11:00
閱讀 3838·2021-11-29 11:00
閱讀 3949·2021-11-29 11:00
閱讀 3613·2021-11-29 11:00
閱讀 6310·2021-11-29 11:00
