由于H5在移动端的发展如日中天，现在大部分公司对高级前端需求也是到处挖墙角，前端薪资也随之水涨船高，那公司没有配备专用的前端怎么办呢？

　　作为老板眼中的“程序猿” 前端都不会是非常无能的表现，那作为后端人员需要不需要懂前端呢？为了提升价值还是需要懂点的，不然一点问题就找前端，那是不是让别人疯了……

　　前端先从最常见的调样式说起吧，重要知识点之盒子模型，这里就不叽叽歪歪那些难懂的概念，直接看下面的图吧。

什么叫做外边距，内边距……

图1：英文版

通俗点就是下面的图：

图2：中文版

再看看总宽度与总高度的计算，应该都看得懂：

图3

　　之所以要知道宽度与高度的计算，当你在一行内容后面再加个按钮时，这个按钮会随着浏览器的大小满屏的到处乱飞，虽然你左调右调宽度，定位，就差那一两个像素的事会让你抓狂，这时你就要学会计算那刚刚好的几像素问题。

那这里就再讲讲多个元素之间要注意的问题：

padding只存在于一个盒子内部，所以通常它不会涉及与其他盒子之间的关系和相互影响的问题。

margin则用于调整不同的盒子之间的位置关系。

① 行内元素之间的水平margin

图4  行内元素之间的水平margin

两个块之间的距离为：30px+40px=70px。

② 块级元素之间的竖直margin

图5  块级元素之间的竖直margin

如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。

两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图所示。这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。

　　有时你想给一个按钮加个背景佬的啊，竟然无效果！一查原来是被其它样式覆盖了，怎么回事？那就要了解CSS样式优先级

　　CSS样式中会有外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。

一般情况下，优先级如下：

　　（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

　　 行内样式（直接在元素上打style=""）》 ID样式(用id=标识)》 类别样式（class=""） 》 标记样式（写在head中或css文件中） 

　　标准的写法当然是将样式统一写在css的文件中方便复用管理，页面中尽量不要写样式，保持代码的整洁性。（看到一锅粥的页面你是不是会有一种看到大海的感觉……）

那怎么定位到我想到的元素呢？CSS选择器出场

一.基本CSS选择器有标记选择器、类别选择器、ID选择器3种：

　　1.标记选择器
    　　 每一种HTML标记的名称都可以作为相应的标记选择器的名称，如h1,p,div等等
　　2.类别选择器
   　　类别选择器的名称可以由用户自定义
   　　格式如下：.class{color:green;font-size:20px;}
　　3.ID选择器
     　  与类别选择器相试
   　　 格式如下：#id{color:green;font-size:20px;}

二.复合选择器：就是两个或者多个基本选择器，通过不同方式连接而成的选择器
　　1.“交集”选择器：由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集，其中第一必须是标记选择器，第二个必须是类别选择器或者ID选择器，两个选择器之间不能有空格，必须连续书写
　　　　如：h3.class{color:red;font-size:23px;} div#special{...} 注意两者间没有空隔

　　2.“并集”选择器：同时选中各个基本选择器所选择的范围，任何形式的选择器都可以，并集选择器是多个选择器通过逗号连接而成的，
　　　　格式如:h1,h2,h3{color:red;font-size:23px;} 注意中间是有逗号分隔

三.后代选择器：
　　写法：把外层的标记写在前面，内层的标记写在后面，之间用空格分隔，当标记发生嵌套时，内层的标记就成为外层标记的后代了
　　举个栗子：

<html>

<head>

<title>后代选择器</title>

<style type="text/css">

p span{

    color:red

}

span

{

   color:blue;

}

</style>

</head>

<body>

<p>嵌套<span>用CSS</span>标记的方法</p>嵌套之外的<span>标记</span>不生效

</body>

</html>

　　效果：

　　

　　效果是：“用CSS”的显示红色，其他用<span>包围起来的是兰色
　　后代选择器产生的影响不仅限于元素的“直接后代”，而且会影响到它的“各级后代”

四.子选择器：也就是只有对直接后代有影响的选择器，而对“孙子”以及对个层的后代不产生作用。
　　格式如下：p>span{color:blue;}

有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

<head>

    <style type="text/css">

      /* 内部样式 */

      h3{color:green;}

    </style>

    <!-- 外部样式 style.css -->

    <link rel="stylesheet" type="text/css" href="style.css"/>

    <!-- 设置：h3{color:blue;} -->

</head>

<body>

    <h3>测试！</h3>

</body>

这里就先讲两个常用甚而知识点，等有空再补其它内容……

最后还是那个问题：后端程序猿必须要懂前端么？投票

福利：同学们注意了下载源码已上传至公众号【一个码农的日常】回复：数据库，NET 即可自行下载，以后会定期更新

不懂CSS的后端难道就不是好程序猿？的更多相关文章

  1. 不懂Git,别说自己是程序猿–20分钟git快速上手(转)

    在Git如日中天的今天,不懂git都不好意思跟人说自己是程序猿.你是不是早就跃跃欲试了,只是苦于没有借口(契机). 好吧,机会就在今天. 给我20分钟,是的,只要20分钟, 让你快速用上git. 我们 ...

  2. 不懂CSS也能定制博客界面!

    之前没想过定制博客界面,毕竟CSS,HTML什么的都不懂,不过看了这篇文章分分钟搞定: [详细图解]一步一步教你自定义博客园(cnblog)界面 我是基于模板BlueSky做了些改动,先看修改前后的效 ...

  3. 一个Java程序猿眼中的前后端分离以及Vue.js入门

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...

  4. css中那些容易被我们程序猿所忽略的选择器

    css中那些容易被我们程序猿所忽略的选择器 作为一个程序猿,我们可能会遇到这样的问题,假如:有5个li,要求给第三个li设置背景颜色怎么办?有人会说,用JS啊,循环遍历出第三个不就行了.但是,用JS解 ...

  5. 程序猿果真有前端后端client吗

    前端 后端 client DBA OP 程序猿有分这么细的吗? 入行时候有区别. 殊途同归 吾道一以贯之, 假设作为程序猿不能领悟一贯, 则永远不清楚.

  6. Typora优化-适合不懂CSS代码的小白

    转载请注明出处:https://www.cnblogs.com/nreg/p/11116176.html  先来一张优化前与优化后的对比图: 优化前: 优化后: 1.通过 文件-偏好设置 打开主题文件 ...

  7. [程序猿入行必备]CSS样式之优先级

    专业玩家请移步:http://www.w3.org/TR/CSS2/cascade.html 使用CSS控制页面样式时,常常出现设定的样式被"覆盖",不能生效的情况. 浏览器是根据 ...

  8. 纯css手写圆角气泡对话框 微信小程序和web都适用

    嗯……我们设计师强烈要求一定要圆角!圆角的气泡对话框,不要那种尖角的.这其中还遇上了个尴尬的问题,z-index不生效 无非就是两种方法,一种是使用图片再定位拼接起来使用,太简单了具体就不详细的说了. ...

  9. 后端程序猿怎能不会的linux命令

    (图片超清,可放大网页查看) 来源 https://zhuanlan.zhihu.com/p/28674639

随机推荐

  1. 探索C#之6.0语法糖剖析

    阅读目录: 自动属性默认初始化 自动只读属性默认初始化 表达式为主体的函数 表达式为主体的属性(赋值) 静态类导入 Null条件运算符 字符串格式化 索引初始化 异常过滤器when catch和fin ...

  2. KMP算法求解

    // KMP.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> using namespac ...

  3. Centos6.5下编译安装mysql 5.6

    一:卸载旧版本 使用下面的命令检查是否安装有MySQL Server rpm -qa | grep mysql 有的话通过下面的命令来卸载掉 rpm -e mysql //普通删除模式 rpm -e ...

  4. Python标准模块--Unicode

    1 模块简介 Python 3中最大的变化之一就是删除了Unicode类型.在Python 2中,有str类型和unicode类型,例如, Python 2.7.6 (default, Oct 26 ...

  5. 安卓易学，爬坑不易——腾讯老司机的RecyclerView局部刷新爬坑之路

    针对手游的性能优化,腾讯WeTest平台的Cube工具提供了基本所有相关指标的检测,为手游进行最高效和准确的测试服务,不断改善玩家的体验.目前功能还在免费开放中. 点击地址:http://wetest ...

  6. Linux上如何查看物理CPU个数，核数，线程数

    首先,看看什么是超线程概念 超线程技术就是利用特殊的硬件指令,把两个逻辑内核模拟成两个物理芯片,让单个处理器都能使用线程级并行计算,进而兼容多线程操作系统和软件,减少了CPU的闲置时间,提高的CPU的 ...

  7. 个人网站对xss跨站脚本攻击（重点是富文本编辑器情况）和sql注入攻击的防范

    昨天本博客受到了xss跨站脚本注入攻击,3分钟攻陷--其实攻击者进攻的手法很简单,没啥技术含量.只能感叹自己之前竟然完全没防范. 这是数据库里留下的一些记录.最后那人弄了一个无限循环弹出框的脚本,估计 ...

  8. GJM ： C#设计模式汇总整理——导航 【原创】

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  9. 使用github远程仓库

    经过几天对github的研究,终于把自己想完成的给解决了,发现google真的有很多解释,但是很多也会出现一些bug,对于初学者真的很多烦恼,所以整理一份,能给初识github的你有所帮助 一,首先, ...

  10. 图解CSS3制作圆环形进度条的实例教程

    圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...