【css】-【常考手写】-笔记
1 三栏布局
1.1 position布局
- 父元素相对定位,子元素通过绝对定位将左右两栏固定,
top/left: 0;
- 三栏布局,中间一栏最先加载、渲染出来(主要内容) - middle通过 margin 设置左右边距,留出内容块
<div class="box">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.box {
position: relative;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 300px;
}
.main {
margin-left:300px;
margin-right: 300px;
text-align:center;
height: 300px;
}
通过浮动实现的三栏布局的缺点,必须把.main 元素放在最下面
而不是中间位置,这是 float 所产生的的布局影响所导致的。
1.2 圣杯模式
- 首先设置外层box的
padding: 0 200px 0 180px;
- 所有元素都是float,且有一致的高度;
- main的宽度是100%,所以
left
和right
被“挤”到了第二行 - 将
left
放置到之前预留出的位置上,使用margin-left: -100%;
- 使用
position: relative
和right: 200px
将left
的位置在原有位置基础上左移200px,以完成left
的放置 margin-right: -150px;
完成right
的放置
<div class="box">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
body {
min-width: 800px; /* 设置页面最小宽度*/
margin: 0;
}
.box {
padding: 0 200px 0 180px;
height: 100px;
}
.box div {
float: left; /* 所有元素向左浮动*/
height: 100px; /* 统一高度*/
}
.main {
width: 100%;
}
.left {
width: 180px; /* (1) 挤在main下面*/
margin-left: -100%; /* (2) main的最左侧*/
position: relative;
left: -180px; /* (3) 相对自己左移padding-left:180px的距离*/
}
.right {
width: 200px; /* (1) 挤在main下面,left的右边*/
margin-left: -200px;/* (2) main的最右侧*/
position: relative;
right: -200px; /* (3) 相对自己左移padding-right:200px的距离*/
}
1.3 双飞翼模式
两侧内容宽度固定,中间内容宽度自适应
三栏布局,中间一栏最先加载、渲染出来(主要内容)
实现方式 【浮动+margin负值】
双飞翼布局的DOM结构与圣杯布局的区别是用main
仅包裹住main-content
,另外将.column
类从center
移至container
上。
<div class="main">
<div class="main-content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
.main {
float: left;
height: 100px;
width: 100%;
}
.main-content {
margin: 0 200px 0 180px; /* 注释后不影响*/
height: 100px;
}
.left2 {
float: left;
height: 100px;
width: 180px;
margin-left: -100%;
}
.right2 {
float: left;
height: 100px;
width: 200px;
margin-left: -200px;
}
1.4 flex布局
.box{
display:flex;
}
.left, .right{
width:200px;
}
.center{
flex:1;
}
双飞翼布局稍微简单一点,利用
开启浮动+清除浮动
主区域两侧留白【margin】
两侧上去【margin负值】
圣杯布局稍微复杂一点
开启浮动+清除浮动
主区域两侧留白 【padding】
两侧上去【margin负值+相对定位】
2 鼠标移出后,卡片内容消失
<body>
<header>
<nav>
<ul class="nav-ul">
<li>
<span>客服服务</span>
<i class="triangle-down"></i>
<ul class="concat-ul">
<li>
<img src="" alt="">
<span>联系客服</span>
</li>
<li>
<img src="" alt="">
<span>帮助中心</span>
</li>
<li>
<img src="" alt="">
<span>知识产权保护</span>
</li>
<li>
<img src="" alt="">
<span>规则中心</span>
</li>
</ul>
</li>
<li>
<span>充值服务</span>
<i class="triangle-down"></i>
</li>
</ul>
</nav>
</header>
</body>
<script>
let div1 = document.querySelector('.div1')
let div2 = document.querySelector('.div2')
let timer
div1.onmousemove = function() {
div2.style.display = 'block'
}
div1.onmouseout = function() {
timer = setTimeout(() => {
div2.style.display = 'none'
},2000)
}
div2.onmousemove = function() {
}
div2.onmouseout = function() {
div2.style.display = 'none'
}
</script>
3 水平居中
水平居中:
(1)行内元素:父元素是块级元素,给父元素设置text-align: center;
(2)块级元素:
方案1:分子元素宽度定不定两种情况 :
子元素定宽,给其设置 margin: 0 auto;
子元素不定宽,设置为display: inline-block;
或 display: inline;
转换成行内块级/行内元素,再给父元素设置 text-align: center;
方案2:使用定位属性:
父相子绝
left: 50%;
margin-left: -50px;
transform: translateX(-50%);
方案3:使用flex布局:
display: flex;
justify-content: center;
4 垂直居中:
1)行内元素(文本可行)父亲height:200px; 子元素line-height: 200px;
2)块级元素
方案1:使用定位属性:
父相子绝
top: 50%;
margin-top: -50px;
transform: translateY(-50%);
方案2:使用flex布局
display: flex;
align-items: center;
5 垂直水平居中:
方案1:使用定位属性
父相自绝:
top: 50%; left: 50%;
margin-top: -50px; margin-left: -50px; transform: translate( -50%, -50%);
方案2:使用flex布局
display: flex;
align-items: center;
justify-content: center;
父亲flex
儿子margin:auto;
方案3:margin: auto;实现绝对定位元素的居中
position: absolute;
width: 100px; height: 100px;
top: 0; left: 0; right: 0; bottom: 0;
margin: auto;
6 双栏布局
1)左浮动,右margin
左float: left;
,右 margin-left: 300px;
2)左浮动,右hidden。
左float: left;
,右 overflow: hidden;
.box {
height: 100px;
}
.left {
height: 100px;
width: 300px;
float: left;
}
.right {
height: 100px;
margin-left: 300px; /* 方法1:左浮动,右margin*/
overflow: hidden; /* 方法2:左浮动,右hidden(右边的盒子就变成了一个绝缘的盒子,BFC中治理高度塌陷)*/
}
3)flex实现
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
.box {
height: 20px;
display: flex;
}
.left {
height: 200px;
width: 300px;
}
.right {
height: 200px;
flex: 1; /* 比例设置为1,撑满剩余空间 == flex: 1 1 0% */
}
2)左浮动,右hidden。
在这里插入代码片