2018-05-22 CSS 左右布局、左中右布局以及一些小技巧
阿新 • • 發佈:2018-05-22
add www. 分享 適應 line -o pad 默認 改變
1、左右布局
如果有以下html結構,設置左右兩欄布局
<div class="parent">
<div class="leftChild"></div>
<div class="rightChild"></div>
</div>
設置浮動:左右布局常用的方法就是為子元素設置浮動,然後在其父元素上使用clearfix類清除浮動。示例代碼如下:
.clearfix::after{ content:""; display:block; clear:both; } .leftChild, .rightChild{ float:left; }
設置position絕對定位,為父元素設置
position:relative;
為子元素設置position:absolute
。示例代碼如下:.parent{ position:relative; } .leftChild{ position:absolute; left:0; top:0; } .rightChild{ position:absolute; left:200px; top:0; }
2、左中右布局
左中右布局主要方法也是浮動或者絕對定位,不過可以分情況選擇其一使用甚至結合使用。
3、特定情況下使用浮動還是絕對定位
- 使用浮動時:不需要計算特別精確的位置,不過不易操控,浮動元素的寬度需要註意,否則會換行展示,適用於導航欄等地方。
- 使用絕對定位:需要計算元素的具體位置,不過更加準確,易於操控。
- 當某些元素的位置要根據父元素的大小自適應,內容寬度無法確定時,建議使用浮動
- 當特定元素的位置是相對父元素固定,或者內容寬高確定,需要精確定位甚至以後要用js操作變換位置時,建議使用浮動。
5、其他小技巧
- 使用偽元素清除浮動 ,代碼展示見下一條。
當要達到一個元素hover狀態下有邊框,正常情況下無邊框時,如果直接在hover狀態添加邊框,該元素會因為多出來的border寬度導致位置有略微改變。技巧:可以在普通情況下就添加透明色的邊框,hover時改變顏色即可。比如
html代碼:<nav class="clearfix"> <li><a href="#">link1</a></li> <li><a href="#">link2</a></li> <li><a href="#">link3</a></li> <li><a href="#">link4</a></li> <li><a href="#">link5</a></li> <li><a href="#">link6</a></li> </nav>
css代碼
.clearfix::after{
content: "";
display: block;
clear: both;
}
nav{
border: 1px solid red;
float: right;
}
nav > li{
float: left;
list-style: none;
}
nav > li > a{
text-decoration: none;
color:inherit;
display: inline-block;
margin:5px;
padding:10px;
border: 3px solid transparent;
transition:0.3s;
}
nav > li > a:hover{
border:3px solid blue;
}
效果圖:
- 水平線樣式設置
代碼示例:
hr{
height:0;
border:none;
border-top:1px solid red;
}
- dl中dd、dt設置左右結構
html代碼
<body>
<main>
<dl class="clearfix">
<dt>num</dt>
<dd>1</dd>
<dt>num</dt>
<dd>2</dd>
<dt>num</dt>
<dd>3</dd>
<dt>num</dt>
<dd>4</dd>
</dl>
</main>
css代碼
main > dl{
width:300px;
border: 1px solid;
}
main > dl >dt,
main > dl >dd{
float: left;
width:30%;
box-sizing:border-box;
border:1px solid blue;
}
main > dl >dd{
width:70%;
}
效果圖:
- 一些圖標素材可以使用iconfont網站 來查找
- 合理使用偽元素(如
::after
、::before
) - 塊級元素寬度自使用,合理使用
max-width
屬性 - a標簽去掉其默認樣式時,顏色可設置為繼承父元素
a{color:inherit;}
2018-05-22 CSS 左右布局、左中右布局以及一些小技巧