html 和css
2019-04-25 本文已影响0人
不染事非
- 页面布局
- css 盒模型
- BFC
1、 页面布局
假设高度已知，请写出三列布局，其中左右的各为300px,中间自适应，有四种方法
第一种方法 ：浮动
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.left{
background: red;
width: 300px;
height: 100px;
float: left;
}
.comm{
background: blue;
height: 100px;
}
.right{
background: green;
width: 300px;
height: 100px;
float: right;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="comm"></div>
</body>
</html>
第二种方法 : 定位
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.left{
width: 300px;
height: 300px;
position: absolute;
left: 0;
background: red;
}
.right{
width: 300px;
height: 300px;
position: absolute;
right: 0;
background: hotpink;
top:0;
}
.center{
height: 300px;
background: pink;
padding:0 300px;
}
</style>
<body>
<div style="position: relative;">
<div class="left"></div>
<div class="center">
<h2>绝对定位解决方案</h2>
1.这是三栏布局的浮动解决方案；
2.这是三栏布局的浮动解决方案；
</div>
<div class="right"></div>
</div>
</body>
</html>
第三种 flex布局
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.fa{
display: flex;
/* height: 300px; */
}
.center{
flex: 1;
background: hotpink;
}
.left{
background: red;
width: 300px;
}
.right{
background: pink;
width: 300px;
}
</style>
<body>
<div class="fa">
<div class="left"></div>
<div class="center">
<h2>flex解决方案</h2>
1.这是三栏布局的浮动解决方案；
2.这是三栏布局的浮动解决方案；
</div>
<div class="right"></div>
</div>
</body>
</html>
第四种 网格布局（CSS最新增的，类似于bootstrap的栅格系统）
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
fu{
display: grid;
grid-template-rows: 300px;
grid-template-columns: 300px auto 300px;
}
.left{
background: red;
}
.right{
background: hotpink;
}
.center{
background: pink;
}
</style>
<body>
<div class="fu">
<div class="left"></div>
<div class="center">
<h2>网格布局解决方案</h2>
1.这是三栏布局的浮动解决方案；
2.这是三栏布局的浮动解决方案；
</div>
<div class="right"></div>
</div>
</body>
</html>
若高度不给，那么高度能自适应的只有 flex 布局和 表格布局，网格布局了，其他则不可以
2、css 盒模型
- 有两种模型 标准模型 和 IE 模型
2.1、css如何设置这2种模型
- box-sizing：border-box; IE模型
- box-sizing：content-box; 标准模型（默认）
2.2 js如何设置获取盒模型对应的宽和高：
- dom.style.width/height 这个只能取到内联样式的宽高
- dom.currentStyle.width/height 拿到渲染后的宽高，但这个是IE支持的，其他不支
- dom.getComputerStyle.width/height 拿到渲染后的宽高，兼容火狐
- dom.getBoundingClientRect().width/height 这个也能拿到，有4个值，还 有2个是距离顶部和左边的距离
3、BFC（边距重叠解决方案）
3.1、什么是BFC
- 块级格式化上下文 ，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用
3.2 原理
- 如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器
3.3 怎么创建BFC
- 浮动元素，float 除 none 以外的值；
- 绝对定位元素，position（absolute，fixed）；
- display 不为none；
- overflow 除了 visible 以外的值（hidden，auto，scroll）
3.4、BFC有什么用
- 解决塌陷
- 清除浮动
4、如何实现不确定宽高的盒子上下左右居中
div{
position:absolute;
top:50%; //相对于父元素
left:50%; //相对于父元素
transform:translate(-50%,-50%); //相对于自己
}
5、如何实现不确定宽高的图片上下左右居中
img{
position:absolute;
top:0; /* 四周拉力相同 */
right:0; /* 四周拉力相同 */
bottom:0; /* 四周拉力相同 */
left:0; /* 四周拉力相同 */
margin:auto; /* 再设置 marign 自动 */
}
6、纯css写倒三角的原理：
.kailong{
width:0;
height:0;
border-right:50px solid transparent;
border-left:50px solid transparent;
border-bottom:50px solid red;
}
