css四大布局(css代码大全)

admin 2023年12月17日 12:52 489 0

其实css四大布局的问题并不复杂，但是又很多的朋友都不太了解css代码大全，因此呢，今天小编就来为大家分享css四大布局的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

一、css布局时,div互相重叠是为什么

在做css+div布局是重叠有很多中情况，我给你分析分析

首先看看一个容器套两个字容器的情况，在我们做布局的时候网页中div之间的关系基本都可以简化到这种关系。

<divid="top1Sun1">top1Sun1</div>

<divid="top1Sun2">top1Sun2</div>

</html>

下面我们来看一下那种方式可能会产生重叠

现在我们将top1Suan2的margin-top设置成-10px

可以看到top1Sun2向上偏移了10个像素，因此这中情况是可能产生重叠的。

这个不用解释了，肯定可以产生重叠

3、父容器高度不固定，子容器使用float，看看父容器的兄弟容器会不会产生偏移

<divid="top1Sun1">top1Sun1</div>

<divid="top1Sun2">top1Sun2</div>

<divid="top2"></div>

</html>

现在让top1Sun1、top1Sun2的float都为left

你会发现，top2容器居然和top1发生了重叠

发生这种情况的原因是因为top1我们没有设置固定高度，当他的两个字容器向左浮动时，top1的高度就不会被他的子容器撑开了，这是我们可以选择两个方法给top1提供高度占位，一种是设置固定高度，还有一种是设置top1的overflow为hidden（这种方式会让父容器高度自适应字容器），现在我们把top1的overflow设置为hidden看下效果

布局达到了我们预想的效果（top1Sun2因为设置了margin-top:-10px所以会往上偏移10像素，多出的部分，因为父容器设置了溢出隐藏，所以看不到了）

二、css网页的几种布局实例

本文主要介绍了浅谈css网页的几种布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

2018年已经过了一周，总结一下2017年在公司wiki上写的一篇关于css布局的知识，当时也借鉴了几个大神写的css布局知识，和自己在项目中遇到的坑。废话不多说。请看以下的干货。

1、左边固定，右边自适应布局的两种实现方式

第一种实现方式通过负边距与浮动实现左边固定，右边自适应的布局。主要代码如下：

设置子元素的margin,然后父元素必须浮动。

用父元素包裹，主要是因为right会覆盖left，从而导致left内容不可以看到，如果直接在left上设置margin或者padding会导致布局变化，因此只能再用一个p包裹内容，并且去除right覆盖的宽度。

-margin必须大于或等于自身的宽度才会上移

</body>实现过程中需要注意的是:

1.自适应的容器需要容器包裹住，否则容器内的内容会被覆盖。

2.right容器的负边距必须大于或等于自身的宽度才会上移。

3.如果right容器负边距等于自身的宽度它会靠右对齐，如果负边距等于-100%，则会靠左对齐。

第二种通过浮动布局来实现左边固定，右边自适应的布局

@media(min-width: 650px) and(max-width: 1000px){

左边固定宽度，右边自适应

</body>实现过程中需要注意的是： 1. left需要脱离文档流，而right只需要正常显示就可以。

2.left只是覆盖在right上边，因此想要让right内容完整显示需要给right padding-left或者margin-left。

即左右固定，中间自适应，它可以利用margin-left为负数来实现，它的实现原理就是margin为负值可以改变float元素的排列位置

当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移

</body>实现过程中需要注意:

1.中间自适应的p需要放在left和right容器前面并且内容p需要用父容器包裹

2.left和right容器向同一个方向浮动。

左右固定宽度并且向两边浮动，中间的p设置两边的margin

该方案有一个缺陷，在小屏幕情况下回导致right被挤下去，main没有了

</body>实现过程中需要注意:

1.该方式只需要注意中间自适应的p需要放在left和right容器的后面。

<title>使用flex实现“双飞翼布局”</title>

display:-webkit-flex;//谷歌浏览器加前缀

flex语法我参照了阮一峰关于flex语法介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

</html>如果未了解过flex布局请移至文末点击链接查看阮一峰大神写的关于flex语法

这边就不絮絮叨叨的讲一些基础的css定位知识了（ps:不会的请自行到w3c官网查阅），我主要来讲解一下工作中遇到的坑。以免其他人和我一样掉入坑中。

第一：使用多个fixed时，注意自己需要基于什么定位，因为如果父级有用transform属性时，可能会导致子元素的fixed基于父元素容器定位，而不是基于body定位。效果如下：

在上图中我可以发现中间黑色的小框是基于父级来定位，并且宽度也基于父容器的50%。详细的请看下面代码：

<title>关于position的定位的坑</title>

background-color: rgba(0,0,0,0.3);

/*使用postion和 transform水平垂直居中*/

background-color: rgba(0,0,0,0.3);

transform: translate(-50%,-50%);

-webkit-transform: translate(-50%,-50%);

-moz-transform: translate(-50%,-50%);

-o-transform: translate(-50%,-50%);

.dialog-button>.button-box{

background-color: rgba(0,0,0,0.2);

transform: translate(-50%,-50%);

-webkit-transform: translate(-50%,-50%);

-moz-transform: translate(-50%,-50%);

-o-transform: translate(-50%,-50%);

background-color: rgba(0,0,0,0.2);

-删除

提示

是否删除该项,点击确定

确定

取消

三、css布局-百分比布局

书写手机网页时，必须约束视口宽度（320-420左右）：

initial-scale=1.0初始视口倍数是1倍

minimum-scale=1.0最小允许视口宽度是1倍

maximum-scale=1.0最大允许视口宽度是1倍

user-scalable=no不允许用户缩放视口

书写移动端网页，没有版心，必须用百分比布局。百分比布局也叫流式布局。

width:宽度的百分比是相对于父盒子width内容宽的比。没有父盒子就是相对于浏览器的宽。

height:高度的百分比是相对于父盒子height内容高的比。

padding,margin.:padding和margin不管任何方向百分比都是相对于父盒子width内容宽的比。

子盒子如果绝对定位，width百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）；

height百分比参考的是距离最近，且有定位的父盒子的height（算上padding.）；

padding,margin百分比参考的是距离最近，且有定位的父盒子的width（算上padding.）；

div{ width: 50%; overflow: hidden;} p{ width: 50%; height: 100px; float: left; background-color: pink;} p:last-child{ background-color: green;}

css3的box-sizing：盒模型内减。（在width、height基础上再书写padding或者border，是在原有宽高上进行内减。）

内减盒模型：书写的width、height就是盒子真正占有的宽和高。

讲真，内减盒模型简直不能再更好用了！！尤其是要自己各种测算的时候！

display的属性值：block,inline,inline-block,none;

书写：3个P，宽度比是1:2:3。（X+2X+3X=100%）

固比固模型：第一部分和第三部分宽度是固定值，第二部分宽度是剩余部分的宽度。

例：1和3部分宽度是120px，2自动撑开。

移动端网页宽度必须使用百分比，但是网页的最小宽度或者是最大宽度只能书写像素px。不能用百分数。

END，本文到此结束，如果可以帮助到大家，还望关注本站哦！