前端各种CSS布局

╰半夏微凉° 2022-03-09 10:08 294阅读 0赞

# ***两栏布局*** #

# 一栏固定宽度，一栏自适应 #

# 1. 固定宽度端float:left，另一边使用margin-left留出与左侧栏的宽度 #

#left{
    	height:200px;
    	width:200px;   //定宽
    	background:red;
    	float:left;
    }
    #right{
    	height:200px;
    	margin-left:200px;
    	backgrount:blue;
    }

# 2，固定宽度边position:absolute; 另外一边margin-left：固定边宽度:…; #

#left{
    	height : 200px;
    	width:200px;
    	background:red;
    	position:absolute;
    }
    #right{
    	height:200px;
    	background:blue;
    	margin-left:200px;
    }

# 3,固定宽度一边float ， 另外一边overflow:hidden; #

#left{
    	height:200px;
    	width:200px;
    	background:red;
    	float:left;
    }
    #right{
    	height:200px;
    	background:blue;
    	overflow:hidden;
    }

# 4,两栏的容器设置display:flex 固定宽度一边flex:0 0 宽度 ； 另外一边flex:1 1; #

#container{
    	height:500px;
    	dispaly:flex;
    }
    #left{
    	background:red;
    	flex:0 0 300px;
    }
    #right{
    	background:blue;
    	flex : 1 1;
    }

flex属性  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MjkzNw_size_16_color_FFFFFF_t_70]

# ***三栏布局*** #

两边固定宽度，中间自适应  
html规则定宽的两栏写在前面，中间栏写在最后，所以中间栏最后加载出来

# 1,左右两边float 中间margin-left margin-right #

//优点：比较简单  
//缺点：中间部分最后加载，如果内容较多时会影响体验

#left{
    	width:200px;
    	height:200px;
    	background:red;
    	float:left;
    }
    #right{
    	width:200px;
    	height:200px;
    	background:blue;
    	float:right;
    }
    #middle{
    	height:200px;
    	background:black;
    	margin-left:200px;
    	margin-right:200px;
    }

# 2，左右两栏定宽float , 中间栏overflow：hidden #

# 3，三栏式布局：圣杯布局，核心是左中右都通过float同一边分布，然后通过负值margin进行调整； #

//此时的html规则是先写中间栏再写左右两栏

三者float:left  
中间：float:left; width:100%;  
左：float:left; width:宽度；margin-left:-100%; position:relative; left: -宽度；  
右：float:left; width:宽度；margin-left:-宽度；position:relative; right:-宽度；  
处理中间栏写入内容会被遮住问题：给三者的容器加入样式左右padding分别为左右栏宽度

#container{ //为了中间栏内容不被遮挡
    	padding-left:200px;
    	padding-right:200px;
    }
    #middle{
    	height:200px;
    	background:black;
    	float:left;
    	width:100px;
    }
    #left{
    	height:200px;
    	width:200px;   //定宽
    	background:red;
    	float:left;
    	margin-left:-100%;   //因为中间部分宽度100%会把两边挤到第二行，设置这个可以左边上去
    	position:relative;
    	left:-200px;     //相对定位靠左，为了不遮挡中间栏
    }
    #right{
    	height:200px;
    	width:200px;    //定宽
    	background:blue;
    	float:left;
    	margin-left:-200px;    //让右栏上去
    	position:relative;
    	right:-200px;     //相对定位靠右。为了不遮挡中间栏
    }

# 4，三栏布局：双飞翼布局 三栏float同一边，中间宽度100%， #

中间元素使用给伪类clear:both;清除浮动  
中间：float:left ; width:100% ;  
中间伪类after:clear:both;  
左：float:left; width:宽度；margin-left:-100%;  
右：float:left; width:宽度；margin-left:-宽度；  
区别圣杯布局：处理中间栏写入内容会被遮住的问题的方式不同  
双飞翼布局采用在中间元素加入子元素，给子元素设置margin-left:左栏宽度，margin-right:右栏宽度  
这样各左右两栏留出位置

#middle-content{
    	margin-left:200px;
    	margin-right:200px;
    }
    #middle{
    	height:200px;
    	background:black;
    	float:left;
    	width:100%;
    }
    #middle::after{
    	clear:both;   //清除浮动
    }
    #left{
    	height:200px;
    	background:red;
    	width:200px; //定宽
    	float:left;
    	margin-left:-100%;
    }
    #right{
    	height:200px;
    	background:blue;
    	width:200px;   //定宽
    	float:left;
    	margin-left:-200px;
    }

# 所以圣杯布局与双飞翼布局的比较： #

***相同点***：都是采用的两边定宽，中间自适应的三栏式布局； 中间栏都处于文档流的前面，即html 中 中间栏写在左右栏前面以优先渲染中间栏  
***区别***：处理中间栏内容被遮挡问题的方式不同；  
圣杯布局：三者容器padding-left:左栏宽，padding-right:右栏宽,左右栏都position:relative  
左栏left:-左栏宽度 右栏right:-右栏宽度  
双飞翼布局：给中间栏元素添加一个子元素，再给子元素设置margin-left:左栏宽度 ；  
margin-right:右栏宽度  
总的来说区别就是“双飞翼布局比圣杯布局多一个div,但是不用相对定位”

# 5，绝对定位；也是优先加载主体 #

中间栏：position:absolute; left:左栏宽度 ; right:右栏宽度；  
左：position:absolute ; left:0;  
右：positio:absolute; right:0;

#middle{
    	height:200px;
    	background-color:black;
    	position:absolute;
    	left:200px;    //留出左边栏的宽度
    	right:200px;   //留出右边栏的宽度
    }
    #left{
    	height:200px;
    	background-color:red;
    	width:200px;
    	position:absolute;
    	left:0;
    }
    #right{
    	height:200px;
    	background-color:blue;
    	width:200px;
    	posotion:abso;ute;
    	right:0;
    }

# ***静态布局（static layout）*** #

即定宽，指不管浏览器尺寸具体是多少， 网页布局始终按照最初写代码时的布局显示。常规的pc网站都是静态布局显示的；  
设置了min-width .只要小于这个宽度就会出现滚动条； 如果大于这个宽度内容居中显示，外加背景。  
（网页最外层容器（outer）有固定的大小，所有的内容以该容器为标准。超出容器高宽的部分以滚动条overflow：scroll来实现滚动查阅）  
优点：不存在兼容性问题（css2）  
缺点：移动端不可以使用pc端的布局，两个页面的布局不一致，移动端需要自己设置一个布局，并使用不同域名呈现。

# ***流式布局*** #

又叫百分比布局，随着屏幕大小的改变，页面布局不会发生较大的变化，可以进行适配调整。  
优点：元素高宽用百分比作为单位，高宽变化按屏幕分辨率调整，布局不会发生变化。  
缺点：屏幕尺度跨度过大的时候，布局不能正常显示。  
常用的设计模板：  
1，左侧固定，右侧自适应  
2，两边固定，中间自适应

# ***自适应布局*** #

1、布局特点  
屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。  
2、设计方法  
使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。  
在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。

# ***响应式布局*** #

响应式布局可以为不同终端的用户提供更加舒适的页面和更好的用户体验。  
优点：面对不同分辨率设备 的灵活性强； 能快捷解决多设备显示适应问题；  
缺点：不能兼容所有的浏览器，代码累赘，会出现隐藏无用元素，加载时间加长  
一定程度上改变了用户原有的布局结构，会出现用户混淆的情况  
实现原理：是通过css的Media Query(媒介查询) @media功能来判断我们终端的设备宽度在多少像素内，然后执行与之对应的css布局

实现一个简单的响应式布局：

/*通过浏览器视口宽度的不同来改变css样式*/
    body{
    	background : red;
    }
    @media screen and(max-width:1000px){
    	body{
    		background:black;
    	}
    }
    
    @media screen and(max-width:800px){
    	body{
    		background:blue;
    	}
    }

***弹性布局***（Flex Layout）  
是css3引入的布局方式，  
优点：简单，方便，快捷  
缺点：兼容性差，

# ***BFC*** #

Block Formating Context(块级格式化上下文)  
可以把具有BFC布局特性的元素看作一个大箱子，无论箱子内元素如何让变化都不会影响到箱子外的元素。

父元素：块级元素  
子元素：块级元素

# 创建BFC(块级执行上下文)： #

1，浮动元素  
2，绝对定位元素  
3，块级元素以及块级容器（比如：inline-block table-cell table-capation）  
4，overflow不为visible的块级盒子

# 执行规则： #

1，盒子内部的元素是从盒子顶部垂直向下排列，（盒子最左边开始垂直向下排，）  
2，内部相邻元素间距是由margin决定的，且相邻两个垂直元素的垂直margin是折叠的  
3，BFC就是页面上一个独立的容器，容器内的元素不会影响到容器外的元素  
这回想到浮动元素的塌陷问题：（脱离文档流的元素都可能出现塌陷问题）

#father{
     width : 100px;
     background : blue;
     nargin :20px 0;
    }
    #child{
    	 background: red;
            width:100px;
            height: 100px;
            margin:20px 0; 
            float: left;
    }

这会使父元素出现高度塌陷，父元素没有被撑开，因为child元素设置float：left;创建了一个新的BFC,成为了一个独立的容器，不会影响到father元素布局，所以父元素没有被撑开，可以给父元素添加overf：hidden。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzU3MjkzNw_size_16_color_FFFFFF_t_70]: /images/20220309/574da8fddbaa4b579582158fea093af1.png