css与html注意的点

向右看齐 2021-09-11 07:52 449阅读 0赞

**解决设置table中td宽度不生效**  
特性：table是一个整体，每一列td的宽度是由一个其中一个最长td的宽度决定的。

解决：一定要在table标签上加word-wrap: break-word; word-break: break-all;之后再设置百分比宽度就可以生效了

**多出俩行则显示省略号**

width: 100%;
        height: 1.2rem;
        line-height: 0.6rem;
        font-size: 0.32rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

## a标签之间存在间隔缝隙？ ##

![20170224093154785][]

解决方法：

space\{ display:inline-table;

word-spacing:-6px;

space a\{

word-spacing:0;

或是：space\{ display:table;  /\* 调教webkit\*/

word-spacing:-1em;

space a\{word-spacing:0;

\*display:inline;

# #

**img**之间存在间隔缝隙?(div中img)

造成div高度大于img高度的原因：

![20170224094237425][]

解决：img\{ vertical-align:bottom;\}  
或是\{display:block\}

## img的alt与title有何异同？ ##

img的alt是用当图片加载不出来的时候显示的内容,   
title 是当我们鼠标悬停时候显示的内容

## 解决display:inline-block 出现的间隙 ##

父加上样式　font-size:0;　是为的是去掉多余的空白  
子元素加上应有的字体样式

##    解决button 样式在firefox 和chrome高度不一致的BUG ##

button::-moz-focus-inner \{  
    border:0;  
    padding:0;  
\}

![20170224094610647][]

##    :nth-of-type(1) ##

这个适用于边距和外边线的时候，而不能用于i设置图标

## table--tr的边框问题 ##

teble\{  
    border: 1px solid \#e0e0e2;  
    border-bottom: none;  
    border-collapse: collapse;\}  
td\{  
    border-bottom: 1px solid \#e0e0e2\}

最后效果：

![20170224094745155][]

##    ie与其他浏览器处理表格table的方式不同 ##

所以最容易的方法就是对包围tabel的div指定样式而不是对table本身指点样式

tabel不做任何样式,把样式写在id=games

如果没有边框时，不要写成border:0，应该写成border:none;

## 内联元素float与块元素float的区别 ##

内联元素float后，增加边框为从边界处往内增加边框，而块元素为往外增加边框。即内联元素float后，再设置size px的边框，其所占区域并不会增加，所以也不会影响布局。

<!DOCTYPE html>  
    <html>  
    <head>  
        <title>测试内联元素浮动后边框问题</title>  
        <meta charset="utf-8"/>  
        <style type="text/css">  
            *,p,button{  
                margin:0;  
                padding:0;  
                border:0;  
            }  
            button,p{  
                float: left;  
                width: 50px;  
                height: 100px;  
                background-color: pink;  
            }  
            button+button{  
                background-color: gray;  
                border:10px solid red;  
            }  
            p+p{  
                border:10px solid blue;  
            }  
        </style>  
    </head>  
    <body>  
    <button>button1</button><button>button2</button>  
    <p>段落1</p>  
    <p>段落2</p>  
    </body>  
    </html>

![20170425100127391][]

##    清除浮动float ##

清除浮动的方法有三种：

①在html中加入一行:<div class="clear"></div>.clear\{clear:both\}   
②在父级中加入:overflow:hidden

③父级div定义 伪类:after和 zoom

.父级:after \{  
    content: " ";  
    height: 0;  
    visibility: hidden;  
    display: block;  
    clear: both;  
\}  
\* html,.父级 \{  
    zoom: 1;  
    \*zoom: 1;  
\}

其中第三种方式是最好的，浏览器支持好、不容易出现怪问题；建议定义公共类，以减少CSS代码

## 图片img ##

图片的处理，特别是在移动端来，对于前端来说是一个挑战性问题。图片大小影响页面加载速度重要因素之一。  
      html移动页图片说明：宽度为全屏的内容图片的实际宽度为640px  
      为什么是640px?  
在手机移动端，符合不同设备不同分辨率情况下， 响应式区间为【0 - 640px】，平板响应式区间【641px - 1024px】，故而移动端HTML页面。图片实际宽度设置为640px; 然后设置图片宽度相对于其父元素100%，如此适应不同分辨率的图片。

## [改变input标签中placeholder显示的颜色][input_placeholder] ##

使用伪元素可以改变input标签中placeholder显示的格式，以颜色为例:

input::-webkit-input-placeholder { /* WebKit browsers */  
        color:    #A9A9A9;  
    }  
    input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */  
       color:    #A9A9A9;  
       opacity:  1;  
    }  
    input::-moz-placeholder { /* Mozilla Firefox 19+ */  
       color:    #A9A9A9;  
       opacity:  1;  
    }  
    input:-ms-input-placeholder { /* Internet Explorer 10+ */  
       color:    #A9A9A9;  
    }

## 超过宽度后以省略号显示 ##

li \{

width:200px;

white-space:nowrap;//文本不进行换行

text-overflow:ellipsis; //省略号

overflow: hidden;

## 多行文本溢出显示省略号(超出高度) ##

li\{

overflow: hidden;

height: 60px!important;

word-break: break-all;

text-overflow: ellipsis;//省略号  
    display: -webkit-box;//必须结合的属性 ，将对象作为弹性伸缩盒子模型显示  
    -webkit-line-clamp: 3;//用来限制在一个块元素显示的文本的行数,它需要组合其他的WebKit属性  
    -webkit-box-orient: vertical;//必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

http://www.css88.com/archives/5206

## 删除线 ##

a.使用标签：<del>20</del>

b.css:text-decoration:line-through

## 超链接提示---title ##

![20170714095807214][]

## 怎么样才能让层显示在FLASH之上 ##

给FLASH设置透明 <param name="wmode" value="transparent" />

## 背景图片(i)background-position ##

background: url(../img/inco26.png) no-repeat;  
background-position: right;  
background-size: auto 9px;  
尽量不用background-position: 98%;而是用background-position: right;padding-right:10px;  
如果在有时候用padding-right:10px;不行，这时你可以使用js,  
var form\_li\_w=$('.kept\_form .col\_w .select\_li').width()-10;

$('.kept\_form .col\_w .select\_li').css('background-position',form\_li\_w);

**css命名规范--BEM思想**

(1).首先了解一些常用的命名

![SouthEast][]选择器的命名，选择器应该在满足功能的基础上尽量简短，减少选择器嵌套，查询消耗。但是一定要避免覆盖全局样式设置。

(2).BEM思想

a.什么是BEM

BEM的意思就是块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。

b.BEM分析：B 是块(block)  E是元素(element)  M是修饰符(modifier)

![SouthEast 1][]

如上图1所示.stick-man 是一个人，\-------块B

图2人有有三部分（head,arms,feet）\-------元素E

图3 这个人有大头和小头之分 (small big）------修饰符M

//块
    .stick-man{...}
    
    //身体部分
    
    .stick-man__head {
    }
    .stick-man__arms {
    }
    .stick-man__feet {
    }
    
    //修饰部分
    
    .stick-man__head--small {
    }
    .stick-man__head--big {
    }

总结下：

1.块内成分可以通过在两条下划线后加上元素名称来产生。  
2.修饰符的类名都可以通过在两条连字符后加上元素名来产生

（3）跟js有关的css命名-----> js-类名

如：这样就可以直观看到这个与js 有关

<div class="site-navigation js-site-navigation">
    </div>
    同样的在 JavaScript 代码中：
    const nav = document.querySelector('.js-site-navigation')

[20170224093154785]: /images/20210813/d25860e11ffb4834808123a37517b479.png
[20170224094237425]: /images/20210813/3a76cf98086148278acf0d8af3b98a7c.png
[20170224094610647]: /images/20210813/c6ac4d2fc284445b986b2706b76aae5d.png
[20170224094745155]: /images/20210813/c0d2882a0e0144a58a82364b3f5cfc5f.png
[20170425100127391]: /images/20210813/73b89ef4bf374e26aa04a0e8869e0fc7.png?
[input_placeholder]: http://blog.csdn.net/xxgujh/article/details/45074527
[20170714095807214]: /images/20210813/2403e56be728441b989bb20b4d65bb4d.png
[SouthEast]: /images/20210813/f1324a168d0a44fd9acce169f990c745.png
[SouthEast 1]: /images/20210813/22ca481df50b44a8892ba83943a850f1.png