css 积累 笔记 发过开程遇到的问题

 

14、caret-color   选中input  竖线颜色

13、css实现一段文字的两端分散对齐（兼容所有浏览器）

<style>
div {
	text-align-last:justify;
	text-align:justify;
	text-justify:distribute-all-lines; // 这行必加，兼容ie浏览器
	border: 1px solid red;
	width: 150px;
}
</style>
<div lang="ch">张京最美</div>

12、给选中的tab加下划线

1、代码 

.inquiry-list-wrap .mini-tab-active :after {
    content: '';
    width: auto;
    min-width: 44px;
    height: 2px;
    background: #1182FB;
    border-radius: 1px;
    display: block;
    margin-top: 1px;
}
2、效果图

11、flex 自适应高度

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;

10、html两段代码一模一样但是第一个img之间没有空隙，后查是有个标签没换行，切记

9、滚动条不能显示底部全部内容，style="height: calc(100vh - 8.75rem);"，需要把5.75调大8.75

8、手机左右内容不居中问题：不要设置固定宽度，设width:auto

7、手机版内容可以全部显示但有下拉，有时是头部margin或其他margin撑开了

6、 /* css初始化 */

    * {

        margin: 0;

        padding: 0;  /* 清除内外边距 */

        font-size: 20px;

    }

    .normalfont {

        font-size: .75rem;

    }

    ul {

        list-style: none; /* 去掉列表样式小点 */

    }

    a {

        color: #8a8a8a;

        text-decoration: none;  /* 取消下划线 */

    }

    input {

        border: 0;  /* 所有的表单边框为0 */

        box-sizing: border-box; /* CSS3盒子模型 border 和 padding 都包含到 width 里面去 */

    }

5、/*小屏幕  max-width: 768px:宽度在768以下 */ 

    @media screen and (max-width: 767px){

4、/*中屏幕  max-width: 1024px:宽度在768 - 1024    1046*/ 

    @media screen and (min-width: 768px) and (max-width: 1046px){

3、margin: 0 auto; width: 100%;  设置宽度才居中 

2、有时要设置高度，不然底部跑上面

1、设置标签 hover 没有效果，要考虑是否设置z-index影响，遇到就是z-index = -1时没起作用