css与html注意的点

最新推荐文章于 2024-08-01 09:59:14 发布

面条请不要欺负汉堡

最新推荐文章于 2024-08-01 09:59:14 发布

阅读量1.7k

点赞数

分类专栏： css+html 文章标签： css与html注意的点 css和html a标签之间存在间隔缝隙 img之间存在间隔缝隙布局注意

本文链接：https://blog.csdn.net/gao_xu_520/article/details/56832193

版权

css+html 专栏收录该内容

15 篇文章 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标签之间存在间隔缝隙？

解决方法：

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高度的原因：

解决：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;
}

:nth-of-type(1)

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

table--tr的边框问题

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

最后效果：

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

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

<span style="color:#333333"><!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div class="clearfix game" id="games">
    <table cellpadding="0" cellspacing="0">
    </table>
</div>
</body>
</html></span>

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>

清除浮动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::-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

怎么样才能让层显示在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).首先了解一些常用的命名

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

(2).BEM思想

a.什么是BEM

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

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

如上图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')

面条请不要欺负汉堡

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录