标签:自适应 ges 左右 list conf font 选择 定时 ref
如果有以下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;
}
左中右布局主要方法也是浮动或者绝对定位,不过可以分情况选择其一使用甚至结合使用。
当要达到一个元素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;
}
<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%;
}
效果图:
::after
、::before
)max-width
属性a{color:inherit;}
2018-05-22 CSS 左右布局、左中右布局以及一些小技巧
标签:自适应 ges 左右 list conf font 选择 定时 ref
原文地址:https://www.cnblogs.com/EnochQin/p/9073939.html