CSS中一行最長(zhǎng)的文章是什么？

body {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: 80px;
background-color: #333;
}
.nav {
width: calc(100% - 240px);
height: 60px;
float: left;
background-color: #666;
}
.nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
display: inline-block;
margin-right: 20px;
}
.nav li a {
display: block;
padding: 10px 20px;
color: #fff;
text-decoration: none;
}
.nav li.active a {
background-color: #fff;
color: #333;
}
.logo {
width: 240px;
height: 60px;
float: left;
background-color: #999;
}
.content {
max-width: 1000px;
margin: 0 auto;
padding: 50px 0;
background-color: #eee;
}
.footer {
width: 100%;
height: 60px;
background-color: #333;
}

上面的代碼是一個(gè)簡(jiǎn)單的頁(yè)面布局，并沒(méi)有任何復(fù)雜的CSS屬性。其中一行最長(zhǎng)的部分是

.nav {
width: calc(100% - 240px);
height: 60px;
float: left;
background-color: #666;
}

這行代碼中的calc函數(shù)和100%的組合，使得這行代碼的長(zhǎng)度過(guò)長(zhǎng)。

當(dāng)然，在實(shí)際開發(fā)中，為了避免一行代碼過(guò)長(zhǎng)而導(dǎo)致代碼可讀性降低，可以將代碼分行書寫。比如，上面代碼可以改寫為：

.nav {
width: calc(100% - 240px);
height: 60px;
float: left;
background-color: #666;
}

這樣就更易讀了。