有时候在写CSS的过程中，某些限制总是不起作用，这就涉及到CSS样式覆盖的问题，如下
<pre class="brush:css;toolbar:false">#navigator {
height: 100%;
width: 200;
position: absolute;
left: 0;
border: solid 2 #EEE;
}
.current_block {
border: solid 2 #AE0;
}
登录复制
找了一些教材（w3schools等），只说css的顺序是“元素上的样式”>“文件上的样式元素”>“外部样式文件”，但是多个相同样式的优先级是多少？样式文件的排列，并不详尽。 经过测试和继续查找，得知优先级如下：
1、样式表的元素选择器选择越精确，样式优先级越高：
id选择器指定的样式>类选择器指定的样式>元素类型选择器指定的样式
所以在上面的例子中css 样式优先级，#navigator的样式优先级低于.current_block，即使.current_block是最新添加的，也不起作用。
2、同类型选择器绘制的样式，在样式表文件中，优先级越低，优先级越高
请注意，样式表文件中后面的优先级更高，而不是元素类出现的顺序。 例如css 样式优先级，.class2 在样式表中出现在 .class1 之后：
.class1 {
color: black;
}
.class2 {
color: red;
}
登录复制
然而，这些方法用于指定元素的类。 此时，即使在元素中指定时class1位于class2之后，但由于样式表文件中class1位于class2之上，因此此时class2仍然具有较高的优先级。 颜色的属性是红色，而不是黑色。
.class1 {
color: black !important;
}
.class2 {
color: red;
}
登录复制
登录复制
3、如果想让某个样式的优先级更高，可以使用!important来指定：
.class1 {
color: black !important;
}
.class2 {
color: red;
}
登录复制
登录复制
此时类将使用黑色而不是红色。
对于一开始遇到的问题，解决办法有两种：
1. 将#navigator 中的边框取出，放入类.block 中，并将.block 放在.current_block 之前：
#navigator {
height: 100%;
width: 200;
position: absolute;
left: 0;
}
.block {
border: solid 2 #EEE;
}
.current_block {
border: solid 2 #AE0;
}
登录复制
Moren 需要为 #navigator 元素指定 class="block"
2.使用！重要：
#navigator {
height: 100%;
width: 200;
position: absolute;
left: 0;
border: solid 2 #EEE;
}
.current_block {
border: solid 2 #AE0 !important;
}
登录复制
segmentfault.com/a/1190000011358507
前言
如今，我们被称为后端工程师。 不过，早年给我们起的绰号是Page Tsai。 事实上，职责越来越大，后端整体井喷式发展让我们只关注js，而忽视css和html。
虽然，我们可能经常谈论组件化，那又怎样。 而且，回过头来想一想，如果你看到一个设计稿，连布局都不清楚，那组件化呢？ 因此，在区分组件之前，我们需要先区分布局。 说了这么多废话，我只是想告诉大家，布局真的很重要。 本文总结了布局的基础知识+基本的PC端布局+联通端适配等，如果喜欢我的文章请评论欢迎Star~。欢迎关注我的github博客
文本
其实对于你来说，喜欢js的原因就是无法理解css的深度。 入门级的css很简单，掌握它并没有想象中的那么容易。 我们在本文中讨论布局。 后端开发，从收到设计稿的那一刻起，布局的思考就已经开始了。
例如，当建筑师设计房屋时，他需要测量开发地块的厚度以及每栋建筑物相对于其他房屋的位置。
在 css 布局中，它也是这样开始的。 我们也会区分各个元素的规格和定位，力求完美的实现整个设计稿。所以我们的布局应该从定位和规格开始
位置
定位的概念是，它允许您定义元素相对于其他普通元素的位置，即它应该出现的位置，无论是父元素、另一个元素甚至是浏览器窗口本身。 还有浮动，虽然浮动并不完全是定位，但是它的特点却是如此神奇，以至于在布局中得到了广泛的应用。 我们将在本文后面专门提到它。
说到定位，就得从position属性说起。 您能具体告诉我该职位的财产价值吗？ 我相信你可以完美地命名这六个属性值：static、relative、absolute、fixed、sticky和inherit。
简单介绍完position的属性值的含义，我们再来看看偏度top、right、bottom、left这四个属性。
不知道，我第一次学习css的时候，会不会对margin属性感到困惑呢？ 尽管如此，识别它们还是很容易的。 然而，由于这四个属性值，是定位时的倾斜量。 倾斜不会影响静态元素。 而margin，对应的是包包模型的外距离，它会在各个元素框架中发挥作用，促进元素框架与其他元素之间形成空白空间。
下：我们来看看一些常用定位的倾斜
这里设置顶部：100px，左侧：100px。
当然，这里描述的内容应该都是需要理解的。 这是布局的基础，但也非常重要。 需要说明的是，这里的挠曲量当然已经涉及到后面要提到的规格了。 在做自适应布局设计时，往往希望这个倾斜的单位可以使用ratio，或者rem等相对单位。
规格
前面提到的规格单位——百分比。 这样，下面的部分我们就围绕规范单元展开。
对于规格，我们应该从单位开始。 对于px这个单位，制作网页的人应该都很熟悉，就不多介绍了。
因此，我们可以引入以下单位：
单位只是定义元素大小的相对引用。 另一个概念，其实可以拿房子来举例。 早些年，每栋房子的周围都会有一层围栏，这样整个区域就可以看成是房子+内地块+围栏+外地块的模式。 在css中，每个元素也有包模型的概念。
Bag模型：每个元素都会生成一个菱形块css页面居中，主要包括四个部分：margin（外边距离）+border（边框）+padding（内行间距）+content（内容）
css中有两种不同的bag模型，可以通过box-sizing来设置不同的模型。 两款包款主要是宽度不同。 如图所示：
这是标准的袋子模型，可以看到宽度的宽度等于内容的间距； 当box-sizing属性值设置为border-box时，包模型的width=border+padding+content之和。
可以看出，不同型号的长度是不同的。 length的默认属性值为auto，这会导致内部元素的宽度手动填充父元素的宽度。 如图所示：
不过height的属性值也是默认的auto，为什么不像width呢？
不过，auto属性值代表的是浏览器手动估计。 这些手动估计需要一个基准。 一般浏览器都是允许高滚动的，所以会导致一个问题——浏览器在垂直方向找不到基准。
同样的推理也适用于保证金属性。 我相信，如果你检查居中，你也许可以闭上眼睛写下水平居中，并思考围绕脖子的垂直居中。 这是因为如果是水平居中的块级元素，只需要把水平方向的margin设置为auto即可。 而且垂直方向就没那么简单了，因为当你设置为auto时，margin就是0。这个问题还是需要仔细考虑的。
到目前为止，我们已经覆盖了布局中最基本部分的一大半，还有一块是浮动的。
漂浮
浮动，这是一个非常有趣的东西，在布局中被广泛使用。 最初设计浮动时，虽然不是为了布局，而是为了文字换行的特效，如图：
然而，浮动不仅仅如此。 什么是浮动？ 浮动应该说是‘自成一体’，类似于PS中的视口，浮动元素会排列在浮动层中，之前文档流中的元素位置会以某种形式被删除，并且仍然影响布局。 大家可能觉得有疑问，哪些叫影响布局？ 我们可以举一个反例：
首先我们规划有两个色块，如图：
然后我们将左边的块设置为向左浮动，如图：
是的，看起来文档流中原来元素的位置被删除了，因为左边的块向左浮动了。 然而，当右块填充原始位置时，右块中的字体被挤出。 这称为影响力布局。
布局中为什么要使用浮动？ 由于浮动元素会产生BFC（防止内部元素受到外界干扰），并且元素的长度将不再适应父元素的长度，而是适应自身的内容。 这样就可以轻松实现多列布局的效果了。
浮动的内容需要再引入一块清晰的浮动。 正如你所看到的，浮动元素虽然对于布局来说是非常危险的。 因为你可能把这块浮起来了，但是没有清理干净，从而造成了高沉降的问题。 就是上图所示的情况。
消除浮动有两种最常见的方法：
这里只是一点点。 下面我们就来介绍一下本文的核心——网页的布局。
初始布局 - 表格
最初，网页就像文本和链接一样简单。 这时候最常用的就是table。 由于表格可以显示多个块的排列。
这些布局现在应该不常用了，因为形状单一的时候用起来比较方便。 而且，如今的网页越来越复杂，适配问题也越来越多。 这些布局已经不合时宜了。
主要原因是div块的出现可以促进网页的灵活排列，使网页看起来繁荣。 这时，开发者也开始思考如何越来越清晰地识别网页的层次结构。 那么，我们可以看一下一些比较著名的布局形式。
两列布局
你还记得吗，这些网页同时带有主要内容和目录，如图：
与上面所示的布局类似的布局可以定义为两列布局。
两列布局：一列固定宽度，另一列自适应。 这样做的好处是固定宽度的栏目可以做广告，自适应的栏目可以作为内容的主体。
实现方法：
浮动+边距：
固定宽度
适应性
。左边{
宽度：200px；
高度：600px；
背景：红色；
向左飘浮;
显示：表；
文本对齐：居中；
行高：600px；
颜色：#fff；
。正确的{
左边距：210px；
高度：600px；
背景：黄色；
文本对齐：居中；
行高：600px；
如图所示：
其他方式：也可以使用绝对位置，可以使用同样的疗效
三列布局
三栏布局也是经常使用的布局。
它的特点：两边的宽度固定，然后中间的宽度是auto，可以适应内容，加上边距行距，来设置。
三列布局有4种实现方法，每种实现方法都有自己的异同。
1.左右列使用float属性，中间列使用margin属性，注意html的结果
左栏
右栏
中柱
。左边{
宽度：200px；高度：300px；背景：黄色；浮动：左；
。正确的{
宽度：150px；高度：300px；背景：绿色；浮动：右；
。中间{
高度：300px；背景：红色；左边距：220px；右边距：160px；
缺点是： 1、当厚度大于左右两侧总和时，左柱会被向下挤压； 2. html结构不正确
2.使用position定位来实现，即左右栏使用position进行定位，中间栏使用margin进行定位
左栏
中柱
右栏
。左边{
背景：黄色；
宽度：200px；
高度：300px；
位置：绝对；
顶部：0；
左：0；
。中间{
高度：300px；
边距：0220px；
背景：红色；
。正确的{
高度：300px；
宽度：200px；
位置：绝对；
顶部：0；
右：0；
背景：绿色；
好处是：html结构正常。
缺点：当父元素有内外行间距时，会导致中间列的位置出现错误
3.使用float和BFC来配合圣杯布局
将中间的间距设置为100%，然后将其浮动设置为向左，在主块中设置margin属性，然后在右列将浮动设置为左，然后将边距设置为-100%，将右列设置为float: left ，然后 margin-left 是它自己的大小。
中间
左栏
右栏
.包装器{
Overflow:hidden;//消除浮动
。中间{
宽度：100%；
向左飘浮;
.middle.main{
边距：0220px；
背景：红色；
。左边{
宽度：200px；
高度：300px；
向左飘浮;
背景：绿色；
左边距：-100%；
。正确的{
宽度：200px；
高度：300px；
向左飘浮;
背景：黄色；
左边距：-200px；
缺点是：1.结构不正确2.多了一层标签
4.柔性布局
左栏
中间
右栏
.包装器{
显示：柔性；
。左边{
宽度：200px；
高度：300px；
背景：绿色；
。中间{
宽度：100%；
背景：红色；
边距：020px；
。正确的{
宽度：200px；
高度：3000px；
背景：黄色；
不仅仅是兼容性，通常不会有太多缺陷
三栏布局应用比较广泛，但也是一种比较基础的布局形式。 对于PC端的网页来说，用的比较多，而联通端的长度有限，所以很难实现三栏的形式。 因此，随着中国联通的崛起，我们应该掌握一些自适应布局方法和flex方法。
中国联通时代
事实上，手机占据了人们大部分的时间。 对于后端工程师来说，除了了解h5和大后端技术外，还需要适应不同的手机屏幕。 PC端称帝的时代早已过去，现在所需的网页必须适应PC和联通。
之前讨论的两列和三列布局只能在PC上使用。 而中国联通这边，由于屏幕尺寸有限，很难做到类似的操作。 因此，我们需要学习新的东西。
1. 媒体查询
如果您需要一个网页根据不同的设计稿同时在PC和联通上显示，那么您只需设置媒体查询即可。
媒体查询的css标识符为@media，其媒体类型可分为：
所有、所有媒体
盲文嗅觉装置
浮雕盲文复印机
打印手持设备
投影复制预览
屏幕彩屏设备
语音“可听”类似媒体类型
tty 不适用于 Pixel 设备
电视 电视
代码示例：
@媒体屏幕{
p.test{字体系列：verdana，sans-serif;字体大小：14px;}
@媒体打印{
p.test{font-family:times,serif;font-size:10px;}
@mediascreen，打印{
p.test{字体粗细：粗体；}
/*联通风格*/
@mediaonlyscreen 和（最小设备宽度：320px）和（最大设备宽度：480px）{
/*样式*/
media query的主要原理：好像是给整个css样式设置一个断点，通过给定的条件进行判断，在不同的条件下显示不同的样式。 例如：移动端的规格为750px，而PC端的规格小于750px，我们可以将样式写为：
@mediascreenand（最小宽度：750px）{
。媒体{
高度：100px；
背景：红色；
@media（最大宽度：750px）{
。媒体{
高度：200px；
背景：绿色；
演示地址（，css，输出）
功效图：
弹性袋
虽然联通终端会经常使用flex布局，因为在简单的页面适配方面，flex可以起到非常好的拉伸效果。 我们先来看几张图：
从图中可以看出，无论屏幕码率如何变化，网页的高度和位置都保持不变，但上述元素的布局也没有改变，图标信息始终在左侧，薪资在左侧状态在左侧。
这就是显而易见的弹性布局。 Flex可以适应联通侧相对简单、元素相对单一的页面。
具体的flex布局内容这里就不详细解释了。 弹性门户
雷姆适应
rem可以说是联通适配的利器。 类似淘宝等的界面，使用rem进行适配。 这些界面的特点之一就是页面元素的复杂度比较高，使用flex进行布局会导致页面被拉伸，而顶部和底部的高度不会改变。 示例图：
有关详细说明，请参阅这篇更好的文章。 雷姆传送门()
总结
分析到这一点之后，布局中的很多东西就已经很清楚了。 我相信这是一篇值得收藏的文章。 内容可能有点多，总结一下：
相信看完这些，当你收到设计稿的时候，对于如何区分、如何布局css页面居中，你心里已经有了一个想法。
发表评论