CSS相关问题

纯css画三角形?
https://blog.csdn.net/xiaoxiaoluckylucky/article/details/80940242

一个背景图的线性渐变?
.box {
width: 100px;
height: 100px;
background-image: linear-gradient(to right, red, blue);
}

手机适配问题:一个图片比较大或者比较小，怎么适配手机怎么优化?
https://blog.csdn.net/rj_jqd/article/details/8651251

圣杯布局和双飞翼布局？
https://blog.csdn.net/xiaoxiaoluckylucky/article/details/79713542

让大div里面的小div水平垂直都居中
<div class=”parent”>
<div class=”child”></div>
</div>
①相对/绝对定位法
.parent{
position:relative;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child{
postion: absolute;
top: 50%;
left: 50%;
width:100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
border: 1px solid violet;
}
注意点：使用定位方法,需要知道子元素的宽高,但是不需要知道父元素的宽高.
②利用定位及margin:auto实现
.parent{
position:relative;
width: 300px;
height: 200px;
border: 1px solid red;
}
.child{
position: absolute;
top: 0;
left: 0;
right: 0;
botton: 0;
/*width:100px;
height: 100px;*/
margin: auto;
border: 1px solid violet;
}
实现原理：设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子的居中;
优点：可不用知道子div的高宽
③使用dosplay:table-cell
.parent{
display: table-cell;
width: 300px;
height: 200px;
border: 1px solid red;
vertical-align: middle;
text-align: center;
}
.child{
width: 100px;
heiht: 100px;
border: 1px solid violet;
}
实现原理：display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签.
组合使用vertical-align,text-align,可以使父元素内的所有行内元素水平垂直居中（也就是将内部的元素设置display:inline-block）
④使用弹性布局display:flex
.parent{
display: flex;
width: 300px;
height: 300px;
border: 1px solid red;
justify-content: center;
align-items: center;
}
.child{
width: 100px;
height: 100px;
border: 1px solid violet;
}
⑤计算四周的间距设置子元素与父元素之间的margin-top和margin-left;
.parent{
width: 300px;
height: 200px;
border: 1px solid red;
}
.child{
width: 100px;
height: 100px;
margin-top: 50px;
margin-left: 100px;
}

三栏布局：假设高度已知，其中左栏、右栏宽度各位300px，中间自适应
<style type=”text/css”>
html *{
padding: 0;
margin: 0;
}
.layout{
margin-top: 20px;
}
.layout article div{
min-height: 100px;
}
</style>
①浮动方法
<section class=”layout float”>
<article class=”left-right-center”>
<div class=”left”></div>
<div class=”right”></div>
<div class=”center”>
<h1>浮动解决方案</h1>
这是三栏布局中间部分
</div>
</ article >
</section>
<style type=”text/css”>
.layout.foat .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yelleow;
}
</style>
②绝对定位方法
<section class=”layout absolute”>
<article class=”left-center-right”>
<div class=”left”></div>
<div class=”center”>
<h1>绝对定位解决方案</h1>
这是三栏布局中间部分
</div>
<div class=”right”></div>
</ article >
</section>
<style type=”text/css”>
.layout.absolute .left-center-right{
position: absolute;
}
.layout.absolute .left{
left: 0;
width: 300px;
background: red;
}
.layout.absolute .center{
left: 300px;
right: 300px;
background: yellow;
}
.layout.absolute .right{
right: 0;
width: 300px;
background: blue;
}
</style>
③flex布局方法
<section class=”layout flexbox”>
<article class=”left-center-right”>
<div class=”left”></div>
<div class=”center”>
<h1>flex布局解决方案</h1>
这是三栏布局中间部分
</div>
<div class=”right”></div>
</ article >
</section>
<style type=”text/css”>
.layout.flexbox{
margin-top: 140px;
}
.layout.flexbox .left-center-right{
display: flex;
}
.layout.leftbox .left{
width: 300px;
background: red;
}
.layout.felxbox .cneter{
flex: 1;
background: yellow;
}
.layout.flexbox .right{
width: 300px;
background: blue;
}
</style>
④表格布局方法
<section class=”layout table”>
<article class=”left-center-right”>
<div class=”left”></div>
<div class=”center”>
<h1>表格布局解决方案</h1>
这是三栏布局中间部分
</div>
<div class=”right”></div>
</ article >
</section>
<style type=”text/css”>
.layout.table .left-center-right{
display: table;
width: 100%;
height: 100px;
}
.layout.table .left-center-right>div{
display: table-cell;
}
.layout.table .left{
width: 300px;
background: red;
}
.layout.table .center{
background: yellow;
}
.layout.table .right{
widht: 300px;
backgorund: blue;
}
</style>
⑤网格布局方法
<section class=”layout grid”>
<article class=”left-center-right”>
<div class=”left”></div>
<div class=”center”>
<h1>网格布局解决方案</h1>
这是三栏布局中间部分
</div>
<div class=”right”></div>
</ article >
</section>
<style type=”text/css”>
.layout.grid .left-center-right{
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.layout.grid .left{
background: red;
}
.layout.grid .center{
background: yellow;
}
.layout.grid .right{
background: blue;
}
</style>
每个布局方案的优缺点：
浮动布局：缺点：脱离文档流（需要清楚浮动以及处理好浮动周边的关系）；
优点：兼容性较好
绝对定位：缺点：布局脱离文档流，使得其子元素也必须脱离文档流，导致其有效性和可用性比较差；
优点：快捷，配合JS使用非常快也不容易出问题
flex布局： CSS3主要解决上述两种布局的缺点，比较完美，用于移动端；
表格布局：缺点：当其中一个单元格高度超出的时，其他高度也会变化；
优点：方便，兼容性好
网格布局：新技术，使布局不再是模拟网格布局，可以做很多复杂的事情但代码量能减少很多
补充：如果中间内容高于容器高度，flex和table布局可用

扩展：三栏布局
左右宽度固定，中间自适应
上下高度固定，中间自适应
两栏布局
左宽度固定，右自适应
右宽度固定，左自适应
上高度固定，下自适应
下高度固定，上自适应

一个块级元素的水平居中，你有哪几种方式可以实现？使用flex让元素水平居中有做过吗？
①.子绝父相
<style>
.father{
position:relative;
width:400px;
height:400px;
background:blue;
}
.son{
position:absolute;
top:50%;
left:50%;
width:200px;
height:200px;
background:red;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
注意：外层div要设定高度和宽度
缺点：当子元素宽高大小不是偶数时，移动50%之后，像素点并不是整数，出了小数，和显示像素没有对上。会导致子元素内部字体边缘模糊。
transform:translate (-50%,-50%) 造成的文字边缘模糊解决方案 https://www.aliyun.com/jiaocheng/639148.html
②.父元素弹性布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.father {
display: flex;
width: 400px;
height: 400px;
background: red;
justify-content: center;
/*x轴对齐方式*/
align-items: center;
/*y轴对滴方式*/
}
.son {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>

猜你喜欢