前端整理——css部分

chaosx110 发布于2019-04-23 11:56 / 929人阅读

摘要：圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部浮动，但左右两栏加上负让其跟中间栏并排，以形成三栏布局。双飞翼布局，为了中间内容不被遮挡，直接在中间内部创建子用于放置内容，在该子里用和为左右两栏留出位置。

（1）盒模型（普通盒模型、怪异盒模型）

1、元素的content（内容）、padding(内边距)、border（边框）、margin（外边距）构成了CSS盒模型
2、IE盒模型和W3C盒模型
1）IE盒模型是怪异模式下的盒模型，W3C盒模型是标准模式下的盒模型；
2）IE盒模型的width/height包含了content的width/heigh+padding+border
W3C盒模型的width/height只是content的width/height
3、CSS3中的box-sizing
不同的人有不同的习惯，在css3中增加了box-sizing：content-box（遵循W3C盒模型）| border-box（遵循ie盒模型）|inherit（该属性的值从父元素继承）

（2）如何让元素水平居中

1、绝对定位实现水平垂直居中：

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

注意：
1>对父元素要使用 position: relative; 对子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。
2>如果只要垂直居中，可以不写right: 0；left: 0;
margin: auto; 可以换成 margin-top: auto; margin-bottom: auto;
3>如果只需要水平居中，top: 0; bottom: 0; 可以省略不写
margin: auto; 可以换成 margin-rihgt: auto; margin-left: auto; 。

2、确定高度的块级元素居中：

position：absolute;
top:50%;
margin-top:(自身高度的值的一半的负值)

3、对不定高的div实现垂直居中
a、利用css3的弹性布局实现
在父元素的css样式中加入以下代码：

display：flex；
justify-center:center;
align-items：center；

b、利用平移实现
在子组件中加入以下代码：

position：relative：
left:50%；
top:50%;
transform:translate(-50%,-50%);
-weikit-transform: translate(-50%,-50%);

4、一段文本、一张图片水平居中
text-content:center;
图片是行内元素，在 ie, edge, chrome, firefox, opera 中对于 img 的默认显示方式是： display: inline;
5）块级元素水平居中，使用margin：auto；
6）单行文本垂直居中，让height和line-height相等
注意：当box-sizing:content-box时，line-height和height相等；
当box-sizing:border-box时，line-height=height-(padding-top)-(padding-bottom)-(border-top)-(border-bottom)四个值，也就是说line-height等于content的有效高度。

（3）浮动&清浮动

1、是什么浮动？
浮动的元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。
2、为什么要清浮动？
浮动会导致父元素的高度塌陷。当父元素不设置高度，由内容撑开时，浮动元素脱离了文档流，并不占据文档流的位置，父元素就不能被撑开，也就没有了高度。所以需要通过清浮动来解决父元素高度坍塌的问题。
3、清浮动的方式：
1）clear清除浮动
在浮动元素后面添加一个空的div，设置clear属性为both。
clear属性不允许被清除浮动的元素的左边/右边挨着浮动元素，原理在被清除浮动的元素上面或者下面添加足够的清除空间。
2）clear清除浮动的最佳实践：利用伪类元素来清除有浮动的标签
IE8和非ie浏览器才支持：after，相当于在该元素后面添加了一个空元素，利用clear：both清除浮动。zoom可解决ie6、ie7的浮动问题。

3）父级div定义overflow：hidden
原理：必须要定义width或zoom：1，同时不能定义高，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

（4）圣杯布局和双飞翼布局

圣杯布局和双飞翼布局都是三栏布局，两边的盒子宽度固定，中间盒子宽度自适应。
1)圣杯布局
写结构时优先写中间盒子，因为中间盒子优先被渲染，设置其自适应，宽度设为100%。中间栏放在文档流前面以优先渲染。
第一步：设置center宽度为100%,然后left和right设置固定宽度。然后三个div都左浮动。

第二步：设置最外层包裹box： padding-left:200px;padding-right:250px;

第三步：设置left： margin-left: -100%; 设置right：margin-left: -250px;

第四步：需要将left和right通过相对定位移动到两侧

注意：最好给body加一个最小宽度min-width
圣杯布局有个问题，就是当面板的main部分比两个子面板宽度小的时候，布局就会乱掉。


    
    Title

2）双飞翼布局



    
        center
    
    left
    right

https://www.zhihu.com/question/21504052/answer/50053054

圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。
不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：
圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。
双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。
多了1个div，少用大致4个css属性（圣杯布局中间divpadding-left和padding-right这2个属性，加上左右两个div用相对布局position: relative及对应的right和left共4个属性，一共6个；而双飞翼布局子div里用margin-left和margin-right共2个属性，6-2=4），个人感觉比圣杯布局思路更直接和简洁一点。
简单说起来就是”双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了“。

混合云专线服务前端css css前端前端css框架浮动-前端-css

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1380.html

前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

Lowky 2019-08-22 11:22 评论0 收藏0
前端知识点整理

摘要：难怪超过三分之一的开发人员工作需要一些知识。但是随着行业的饱和，初中级前端就业形势不容乐观。整个系列的文章大概有篇左右，从我是如何成为一个前端工程师，到各种前端框架的知识。为什么 call 比 apply 快？这是一个非常有意思的问题。作者会在参数为3个（包含3）以内时，优先使用 call 方法进行事件的处理。而当参数过多（多余3个）时，才考虑使用 apply 方法。这个的原因...

snowLu 2019-08-29 14:05 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0
前端开发-从入门到Offer - 收藏集 - 掘金

摘要：一些知识点有哪些方法方法前端从入门菜鸟到实践老司机所需要的资料与指南合集前端掘金前端从入门菜鸟到实践老司机所需要的资料与指南合集归属于笔者的前端入门与最佳实践。工欲善其事必先利其器-前端实习简历篇 - 掘金有幸认识很多在大厂工作的学长，在春招正式开始前为我提供很多内部推荐的机会，非常感谢他们对我的帮助。现在就要去北京了，对第一份正式的实习工作也充满期待，也希望把自己遇到的一些问题和...

sf_wangchong 2019-08-20 16:10 评论0 收藏0
前端开发知识点整理

摘要：前言本文主要是有关前端方面知识按照目前的认知进行的收集归类概括和整理，涵盖前端理论与前端实践两方面。前言：本文主要是有关前端方面知识按照 XX 目前的认知进行的收集、归类、概括和整理，涵盖『前端理论』与『前端实践』两方面。本文会告诉你前端需要了解的知识大致有什么，看上去有很多，但具体你要学什么，还是要 follow your heart & follow your BOSS。初衷...

Blackjun 2019-08-20 17:14 评论0 收藏0