关于css的总结

时间 2019-11-12

标签关于 css 总结栏目 CSS 繁體版

原文原文链接

本文转载于:猿2048网站关于css的总结php

　　写在前面 ,学好css,须要长期的推敲和积累 ,细节是不断完善的,逐渐造成本身的风格让本身的css更加接近优雅.css

　　下面来总结一些我以为比较好的css代码风格 :html

　　1. 通常网页中的背景用背景时设置为行内样式 style="background-image: url(img/01.jpg)";

　　　　这样作有一点好处:图片通常为资源尽可能写在html中便于后期维护结构清晰前端

　　　　这样作还有一点要注意:这里应该使用 "background-image" 而不要偷懒写"background",由于行内样式的权重比较高(1000),避免在外联css中设置其余背景属性设置不上;css3

　　2.左边固定右边自适应

　　在布局的时候，好比一些列表页，经常左边是一个固定大小的图，右边剩余部分展现标题，web

　　方法有两种浏览器

　　　　1.100%宽的div用padding-left把左边图片的位置留出来，div元素内容的部分就是标题，图片绝对定位到padding-left区域，这样就实现了左固定右自适应，（前提是box-sizing必须是border-box，不然padding加上100%宽会超出屏幕宽度），代码以下：布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .container{
        position: relative;
        width: 50%;
        margin: 0 auto;
    }
    .left{
        width: 300px;
        height: 300px;
        position:absolute;
        left: 0;
        top: 0;
        background: red;
    }
    .right{
        box-sizing: border-box;
        width: 100%;
        height: 300px;
        padding-left: 300px;
        background: #ccc;
    }

</style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right">
            我就是左边自适应的内容        我就是左边自适应的内容        我就是左边自适应的内容        我就是左边自适应的内容        我就是左边自适应的内容        我就是左边自适应的内容    
        </div>
    </div>
    
</body>
</html>

　　　2.父容器width100% 左边盒子宽度固定左浮动右边盒子 overflow:hedden(原理暂不清楚) 代码以下:字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container{
            width: 100%;
        }
        .left{
            float: left;
            width: 300px;
            height: 300px;
            background: red;
        }
        .right{
            overflow: hidden;
            background: #ccc;
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">我是左边固定盒子</div>
        <div class="right">
            我就是左边自适应的内容        我就是左边自适应的内容        我就是    左边自适应的内容        我就是左边自适应的内容        我就是左边自适应的内容        我就是左边自适应的内容        
        </div>
    </div>
</body>
</html>

　　　　3.元素的上下间距

　　布局的时候从上往下开始写页面，通常都是写下一个的元素margin-top来决定和上一个元素的间距，那么就尽可能不要又是写margin-top又是写margin-bottom，若是混着用，后期很差维护，好比某一块区域须要换位置，或者是一个组件可能会被不少地方共用，混着写的话后期在改的时候，可能会麻烦一点，这里致使的问题能够说不痛不痒，可是不论是js仍是css，注重细节并养成好的习惯，是代码能力的一种体现。优化

　　　　4.字体颜色透明

　　有时候设计师，在配置字体颜色的时候可能用透明的百分比，来设置几种不一样的颜色，好比主色是#000，浅灰色#000 75%的透明度，这种状况下不建议web写透明度，而是让设计师给到对应的颜色值，由于透明色会根据背景的不一样，这样扩展性就比较差。　　

　　　　5.命名

　　命名是一个让人最纠结的事情，先看第一种,这样命名的更详细能够一目了然的知道当前类的意思，可是长度比较长，增长代码量。

　　　　　　nav-botton-float-right

　　第二种使用缩略命名，会使代码更短，写起来更快，可是不易读。

　　　　　　nav-btn-fr

　　若是用缩略命名，能够约定文档，有约定和熟悉成本，可是熟悉之后更高效，类的命名也会变得更规范和统一

　　　　　　约定 fr为 float right

　　　　6. 0.5px边框的理解误区

　　以前写边框的时候就发现，只要让边框的颜色更淡，边框看起来就更细，因此当设计师问我为何边框看起来比较粗的时候，我都告诉他们颜色调浅一点就行了，这个技巧我一直在实际使用。网上有博客说经过css3 transform的缩放scale 50%，能够实现0.5px边框，我一直很奇怪，1px实际是物理的最小单位，怎么可能实现0.5px，就这样我作了个实验，我设置了1px颜色为000的边框（黑色）

　　　　7.rem布局的文字大小

　　你们都知道浏览器通常不会让文字小于12px，若是设置小于12px浏览器都会显示12px，咱们在用到rem布局的时候，元素是会根据屏幕宽度等比例缩放的，好比设计师给到750px的设计稿，若是某一个元素文字是22px，那么当用户的屏幕宽度是375的时候，文字会缩放为11px，实际浏览器就会显示为最小12像素，那么其余非字体元素比例仍然会缩小，这个时候字体可能和其余元素的比例就不是原设计稿的比例了，若是用户屏幕是320px，那么和原设计稿元素间的比例就差更多了。因此咱们必定要根据本身的状况告诉设计师(也许人家就知道)，在宽是750像素的设计稿里，字体最小应该是24像素。

　　　　8.没有必要过度的去兼容低版本的IE

　　　　兼容IE就是甚至浪费人力成本，好比说IE8不支持圆角，得用图片代替，没有没有placeholder，得用JS来模拟。对于我的来讲，技术的更新换代是大势所趋，咱们要往前看，有的是东西给你学，不要在这个地方浪费青春。

　　　　总结:

　　要作好css，写好页面，和设计师的沟通也是很重要的一个技能，由于设计师决定页面最终要呈现的样子，要经过项目验收，也必需要设计师验收经过才行。

　　设计师给过来一个交互效果，前端拿到，一想交互效果还能够，可是实现成本比较高，功能都作不完，不想作这么细，而后就直接说没时间这个作不了，设计师一想这个交互很难吗，别人都能作，你为何不作，就这样来回几句就闹矛盾了，闹到产品那里去了，最后可能交互效果还得作，时间也耽误了。其实这个是不少前端会遇到的问题，时间压得紧，功能可能都要延期，还来作这些交互，天然会有点抱怨，情绪一上来，把产品和设计都得罪了，最后仍是要作，长此以往矛盾愈来愈深，沟通就愈来愈困难。换个思路想问题，设计师大部分时候时间也很紧，要对产品和设计领导有所交代，前端又在催，好不容易作出来了，你这也不能实现那也不能实现，你这样我也无法交代啊。那么咱们换个沟通方式，好比这样说：咱们这边时间确实有点紧，这个交互比较麻烦，比较费时间，我作是能够作，只是可能会影响项目进度，你看要不我先作简单点，等到提测的时候有时间再加上这个交互，实在不行能不能等到上线以后，我单独再优化一下这个地方，很快就能上线。

　　设计师们仍是讲道理的，根据web上的一些特性，设计师设计出来的一些样式一些想法或许无法实现，又或者实现成本过高，咱们就得说服他们这个地方为何不能实现，由于他们不懂，因此惧怕你忽悠他们（实际有时候就有人忽悠他们），因此要想说服别人，本身必定要把问题搞清楚，把知识点理清楚，不能实现的理由对设计师说清楚，而且要有理有据，同时最好网上找到相关博客或者官方解释进行佐证。有不少矛盾和问题，就在于咱们疏忽了沟通，又或者说是咱们本身偷懒了，其实当本身把知识点能给外行说清楚了，这也说明是理解透了，也是对本身能力的提高。设计师辛苦设计的稿子必定要尽可能达到他们的效果，也要考虑扩展性和可实现性，态度很重要，不要让人以为是在敷衍他们，什么是敷衍，不解释清楚就说不作，就是敷衍，不然碰一鼻子灰只有怪本身。技术点要搞清楚，要不解释不清楚，别人不买单，在发现设计稿有问题的时候，耐心提醒其中一些不合适的地方，多帮别人承担一点，前端和设计师要友好相处。

1. 关于HTML、CSS基础总结
2. 关于总线的总结
3. 关于异常的总结
4. 关于z-index的总结
5. 关于Android LayoutParams的总结
6. 关于HSTS的总结
7. 3.关于TCP的总结
8. 关于集合的总结
9. 关于域的总结
10. 关于Spring IOC的总结
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• ☆基于Java Instrument的Agent实现
• NewSQL-TiDB相关

关于css的总结

1. 通常网页中的背景 用背景时 设置为行内样式 style="background-image: url(img/01.jpg)";

2.左边固定 右边自适应

3.元素的上下间距

4.字体颜色透明

5.命名

6. 0.5px边框的理解误区

7.rem布局的文字大小

8.没有必要过度的去兼容低版本的IE

总结:

　　1. 通常网页中的背景用背景时设置为行内样式 style="background-image: url(img/01.jpg)";

　　2.左边固定右边自适应

　　　　3.元素的上下间距

　　　　4.字体颜色透明

　　　　5.命名

　　　　6. 0.5px边框的理解误区

　　　　7.rem布局的文字大小

　　　　8.没有必要过度的去兼容低版本的IE

　　　　总结: