前端之css

class

1. 多样式问题

/*这个div用了header和wrapper两个样式*/
<div class="header wrapper"></div>

/*在change前面写foods是为了保证在foods下的change没问题，以免后面重名的change样式把前面的change覆盖了*/
.foods .change{
    color: gray;
}
.change{
color: red; 
}

2. 内联元素-浮动

块元素：行元素，div,p,ul,h1-h6,dl,dt,dd等都是块元素

内联元素：行内元素，a,span,em,b,strong,i等都是内联元素

缺点：代码换行，盒子之间会产生间距

解决办法：a.去掉内联元素之间的换行b.将内联元素的父级设置font-size为0，内联元素自身再设置font-size

浮动元素：浮动让内联元素或块元素自动转化为行内块元素，此时不会有行内块元素间隙问题

3. s

属性

1. boder-sizing：被修饰的元素的外边距为0，所有的boder和padding距离都是在盒子里边进行的。

2. line-height（行高）：font-size+上下半行距。

注：line-height=height，字体在容器中垂直居中（可以想象成一行字设置的高度与容器完全一致，所以这行字与容器可以完全重合，而字体在行高中肯定是垂直居中的）

3. text-align（文本位置）：设置为center，只是水平居中，要想垂直居中还是要设置行高。

4. :hover在鼠标移到链接上时添加的特殊样式（链接加上了灰色的下划线）

.nav li a:hover{
    border-bottom: 2px solid #808080;
}

5. ::placeholder 选择器选取带有占位符文本的表单元素，并设置文本样式（设置了字体大小和颜色）

.search input::placeholder{
    font-size: 16px;
    color: #bfbfbf;
}

6. float：放在外层样式上面，放在里层，会对该标签产生影响。

.foods ul{
     float: left; /*只写这个，整个ul标签左悬浮，三个li标签一列*/
     margin-left: 30px; 
 }
 .foods ul li{
     float: left; /*每个li标签左悬浮，三个li标签一行*/
 }
 .foods li a{
     border-left: 1px solid #bfbfbf; /*a标签没必要写了，因为li标签已经一行了*/
     padding: 0 30px;
     color: black;
 }

7. display: flex，弹性盒子，加上这个属性就会变成第二个图，宽度就不是继承父盒子的宽度了，而是根据子盒子内容设置宽度。

布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。

/*在弹性布局中有如下属性*/
justify-content: space-between; /*表示两端对齐，项目之间的间隔都相等。就一个span时会左对齐*/
justify-content: center; /*div设置为flex，让其内的span居中就设置这个*/
align-items: center; /*设置垂直方向对齐方式*/
/*父盒子属性*/
div {
    display: flex; /*先在父盒子上面加弹性布局*/
    flex-direction: row; /*不写这个属性，默认主轴是x轴 row*/
    justify-content: flex-start/center/space-around/space-between; /*设置主轴的子元素排列方式：头部对齐/居中/平均剩余空间/先两边贴边再平均剩余空间*/
    flex-wrap: wrap; /*默认不换行，子盒子多了就会缩小子盒子的宽度，从而达到一行的效果，写上这个属性就可以换行了*/
    align-items: flex-start/center/stretch;/*设置侧轴上的子元素排列方式（单行）：从上到下/挤在一起居中（垂直居中）/拉伸(子元素不要给高度，否则拉伸没有效果)*/
    align-content: flex-start/center/space-around/space-between/stretch; /*设置侧轴上的子元素排列方式，适用于换行的情况（多行）：头部对齐/侧轴方向居中/侧轴方向平均剩余空间/侧轴方向先两边贴边再平均剩余空间/设置子元素高度平分父元素高度*/
    /*单行用align-items,多行用align-content（单行情况失效）*/
}

点击查看：flex各属性详细介绍

flex属性简要介绍

8. cursor: pointer; /* 鼠标改成手的形状 */

9. s

小经验

1. 当还原别人写的demo时出现偏差，可以F12，选择该元素，看右侧的样式与原网站有什么区别。

2. 不知道别人写的样式代码应用在哪个div上，最快速的方式就是加background：red。