css可以达到一样的效果，但有着明显的区别的属性

1、display：none和opacity：0，rgba()，visibility：hidden的区别

display：none和visibility：hidden的区别：

首先要知道的是display：none，是让元素消失，它是不占页面的尺寸的，而且display：none时没有过渡效果的。而visibility：hidden是让元素消失，但是原来的位置是还在的，在过渡效果中是没有选中功能的，opacity：0；也会占用尺寸，在过渡中有选中功能的，会让后代元素都透明，具有继承性。rgba是设置背景图和背景色透明效果取值0到1。

2、盒子的四个组成部分，content内容区域，padding内边距区域，border边框，margin外边距区域，如果想要一个块盒在水平方向上水平居中，给块盒一个宽度，margin：atuo，外边距合并的问题，是由于两个元素没有间隙与border和padding都是0，解决方法就是创建BFC，这是最好的解决方法，还有加设置border和padding，但是这两种一旦设置了，尺寸也就发生了改变，所以不推荐，外边距合并不一定一定是兄弟关系，还有可能是父子级关系。

3、vorflow：hidden是从padding区域开始隐藏的，而不是border区域开始隐藏。

4、下拉列表想要实现多选的功能，给select一个宽高和在select标签中添加multiple属性。

代码：

<style>

select{

width: 200px;
height: 200px;
}
</style>
<select name="city" id="" multiple>
<option value="ZG">中国</option>
<option value="RB">日本</option>
<option value="HB">韩国</option>
<option value="MG">美国</option>
</select>

效果：

 

 

 5、行内元素与块级元素的区别：块级元素会独占一行，行内元素会在一行显示，如果一行显示不下，才会换行，还有行内元素设置宽高无效（除了可替换元素）还有上下的margin和padding也是没有效果的，解决方法，把行内元素display的值改成inline-block。

6、如果想要纯css和html改变form表单里面的样式，就必须借助伪元素来实现。举例，单选框最开始是一个空心圆，在你点击文字的时候，前面的空心圆变成里面包含了一个实心圆。

代码：

<style>

input{
display: none;
}
label::before{
content: "";
width: 14px;
height: 14px;
display: inline-block;
border: 3px solid slateblue;
border-radius: 50%;
box-sizing: border-box;
}
input:checked+label::before{
padding: 2px;
background-clip: content-box;
background-color: red;
}
</style>
<input type="radio" name="gender" id="man">
<label for="man">男</label>
<input type="radio" name="gender" id="woman">
<label for="woman">女</label>

 

效果：

没点击时：

 

 

 点击过后：

 

 

 7、定宽高和不定宽高的块盒在垂直方向上居中的方法：

1定宽高的块盒在垂直方向上居中的方法：

使用定位：position：absolute；top：50%；left：50%；margin-left：负宽度的一半，margin-top：负高度的一半

2不定宽高

方法1：

使用弹性盒模型，给父级加上display：flex；align-items：center；

方法2：

元素A {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #000;
  width:50%;
  height: 50%;
transform: translateX(-50%) translateY(-50%);

 8、如果有header、main、footer三个元素，其中header、main、footer的宽度都是100%，header和footer的高度是50px；想要main撑满整个视口的高，用flex来解决。

方法如下

代码：

<style>

body,html{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
header,footer{
width: 100%;
height: 20px;
background-color: slateblue;
}
footer{
background-color: green;
}
main{
background-color: deeppink;
flex-grow: 1;
}

</style>

<header></header>
<main></main>
<footer></footer>

效果

 

 

 9、flex：1和flex-grow：1的区别

举例看看什么样子的

<style>

.container{
width: 900px;
height: 500px;
border: 1px solid red;
display: flex;
}
.box1,.box2,.box3{
width: 200px;
height: 100px;
background-color: rebeccapurple;
}
.box2{
background-color: green;
flex-grow: 1;
}
.box3{
background-color: deeppink;
flex-grow: 3;
}

</style>

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>

 

 

 

 

 

 当.box2取flex-grow：1，.box3取flex-grow：3的时候，可以知道总共宽900px，.box1宽度200px，.box2的宽度是275px，.box3的宽度是425；

这里的计算：总的宽度减去所有项目的宽度（900-600=300px），考虑了.box2和.box3的宽度。然后用300/4=75，.box1宽度200px，.box2的宽度是275px，.box3的宽度是425；

 当.box2取flex：1，.box3取flex：3的时候，可以知道总共宽900px，.box1宽度200px，.box2的宽度是175px，.box3的宽度是525；

这里计算的规则就是总的宽度减去.box1的宽度（900-200=700），这里是用700来进行分配的没有计算.box2和.box3的宽度。

700/4=175,.box2就是175*1=175px；.box3就是175*3=525px;

<style>

.container{
width: 900px;
height: 500px;
border: 1px solid red;
display: flex;
}
.box1,.box2,.box3{
width: 200px;
height: 100px;
background-color: rebeccapurple;
}
.box2{
background-color: green;
flex: 1;
}
.box3{
background-color: deeppink;
flex: 3;
}

</style>

<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>

效果

 

posted @ 2020-05-23 17:56  H_l_w_f  阅读(195)  评论(0)    收藏  举报