前端面试之CSS布局

最新推荐文章于 2023-07-07 16:31:11 发布
最新推荐文章于 2023-07-07 16:31:11 发布
阅读量155 收藏
点赞数
分类专栏： 面试 文章标签： html css3 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45969432/article/details/109028983
版权
一、三栏布局：
1. 高度已知，左右两栏固定，中间自适应

（1） float实现

<section class="float">
    <article>
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </article>
</section>

<style>
    .float .left {
        width: 300px;
        float: left;
        background: green;
     }
    .float .center {
    	margin-left: 300px;
    	margin-right: 300px;
        background: yellow;
        
     }
    .float .right {
        width: 300px;
        float: right;
        background: red;
     }
</style>

（2）absolute实现

<section class="absolute">
    <article>
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </article>
</section>

<style>
   .absolute article > div {
        position: absolute;
    }
   .absolute .left {
   		width: 300px;
        left: 0;
        background: green;
    }
    .absolute .center {
		left: 300px;
		right: 300px;
 		background: yellow;
	}
	.absolute .right {  
		width: 300px;
		right: 0;
		background: red;
	}
</style>

（3）flex实现

<section class="flex">
    <arctile class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </arctile>
</section>

<style>
	.flex .left-center-right {
		display: flex;
	}
	.flex .left {
		width: 300px;
		background: green;
	}
	.flex .center {
		flex:1;
		background: yellow;
	}
	.flex .right {
		width: 300px;
		background: red;
	}
</style>

（4）table实现

<section class="table">
    <arctile class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </arctile>
</section>

<style>
	.table .left-center-right {
		width: 100%;
		height: 100px;
		display: table;
	}
	.table .left-center-right div {
		display: table-cell;
	}
	.table .left {
		width: 300px;
		background: green;
	}
	.table .center {
		background: yellow;
	}
	.table .right {
		width: 300px;
		background: red;
	}
</style>

（5）gird实现

<section class="grid">
    <arctile class="left-center-right">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </arctile>
</section>

<style>
	.grid .left-center-right {
		display: grid;
		width: 100%;
		grid-template-rows : 100px;
		grid-template-columns : 300px auto 300px;
	}
	.grid .left {
		background: green;
	}
	.grid .center {
		background: yellow;
	}
	.grid .right {
		background: red;
	}
</style>
2. 高度未知，左右两栏固定，中间自适应

（1）flex：可用
（2）table：可用

3. 上下固定，中自适应
<body>
    <article class="top"></article>
    <article class="center"></article>
    <article class="bottom"></article>
</body>

<style>
	article {
		width: 100%;
	}
	.top{
		height: 200px;
		background: red;
		position: absolute;
		top: 0;
		left: 0;
	}
	.bottom {
		height: 200px;
		background: blue;
		position: absolute;
		bottom: 0;
		left: 0;
	}
	.center {
		background: yellow;
		position: absolute;
		height: auto;
		top: 200px;
		bottom: 200px;
	}
</style>
二、垂直居中：

（1）弹性盒方法——flex布局

display: flex;
justify-content: center;
align-items: center;

（2）定位+transform

position: relative   //父元素
position: absolute;  //子元素
top: 50%;
left: 50%;
transform: translate(-50%,-50%)

（3）纯absolute

position: relative   //父元素
position: absolute;  //子元素
top: 50%;
left: 50%; 
margin-left:-1/2子元素宽度;
margin-top: -1/2子元素高度;

（4）margin：auto+absolute

position: relative   //父元素
position: absolute； //子元素 
top: 0； 
left: 0; 
right:0; 
bottom:0;
margin:auto

（5）table-cell

display table   //父元素上一层
display: table-cell;   //父元素
vertical-align: middle;
text-align: center;
display: inline-block;  //子元素
秋色遇见喵
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试题之CSS篇
01-08
本文总结了前端面试题中，关于css部分 ，掌握这些 ，对你面试会有很大帮助。关于JS，浏览器，框架等后续会有更新呦，需要的小可爱可以关注一下，真的全是干货，不要错过哦！:heart_suit::heart_suit::heart_suit: ...
JQuery概述和常用API
qq_43714708的博客
05-08 599
JQuery概述和常用API
jQuery——常用API
@一只躺平的猪@的博客
08-01 620
JavaScript 库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。 ......
jQuery 二 属性操作， 数据缓存data() ，内容文本值，元素遍历、创建、添加和删除操作，尺寸、位置操作，
m0_55170432的博客
03-23 304
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。 1. 获取属性语法 2. 设置属性语法 element.prop("属性名") 1.获取元素固有的属性值 console.log($("a").prop("href")); element.prop("属性名",
jQuery -- 常用API（上）
weixin_58470558的博客
05-01 1583
jQuery选择器：jQuery基础选择器、jQuery层次选择器、隐式迭代、jQuery筛选选择器、 jQuery筛选方法（重点）、 jQuery里面的排他思想、链式编程；jQuery样式操作：操作css方法、操作类样式方法、类操作与className区别；jQuery效果：显示隐藏效果、滑动效果、动画队列及其停止排队方法、淡入淡出效果、自定义动画animate
二、jQuery常用API
qq_55891636的博客
11-29 535
jQuery给我们封装的常用API让我们很方便的编写代码
前端大厂面试思维导图-css面试
最新发布
03-31
前端大厂面试题目思维导图，非常全面，包含了常见的面试题目，0.5px的线如何实现，sass的常用功能，弹性布局flex-direction，justify-content，align-items，css常见单位rpx、px、em、rem、%、vh、vw的区别，垂直...
前端面试必备之CSS3的新特性
12-02
CSS3中新添加了很多选择器，解决了很多之前需要用javascript才能解决的布局问题。 element1~element2: 选择前面有element1元素的每个element2元素。 [attribute^=value]: 选择某元素attribute属性是以value开头的...
前端面试《综合问题版》
05-15
前端需要注意哪些 SEO ? manifest 、 worker 、 socket input 和 textarea 的区别 ⽤⼀个 div 模拟 textarea 的实现 1.2 CSS css3 有什么新特性，浏览器⽀持怎么样 伪类是什么？有哪些？会有哪些兼容性问题？如何...
前端大厂最新面试题-css布局.docx
06-06
前端大厂最新面试题-css布局
jQuery 常用API
Lotus_fragrance的博客
06-07 473
jQuery 常用API
jQuery常用的API
m0_67388537的博客
07-07 347
jQuery常用API
jqueryApi
weixin_51207199的博客
05-10 227
文章目录什么是jquery？jQuery的DOM操作添加或删除calss中的操作jquery中的事件jquery中的ajax遍历与选择常用的apijQuery 效果 什么是jquery？ jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程 jquery插件里面提供一个全局的对象$和jQuery对象,本质是一个函数， $(document).ready(function(){ //预加载函数; //method }) $(function()
jQuery常用API汇总
weixin_41596078的博客
07-24 331
平常开发基本要用的API都在这里了 收藏回家慢慢看！ 选择器 $('input:not(:checked)') //查找所有未选中的 input 元素 $("tr:gt(0)") //匹配所有大于给定索引值的元素 $(":header") //匹配如 h1, h2, h3之类的标题元素 $(":animated") //匹配所有正在执行动画效果的元素 $(":root") //选择该文档的根元素。 $(":contains('文本')") //匹配包含给定文本的元素 $(":empt..
jQuery-常用API
weixin_45846980的博客
05-10 273
1-jQuery选择器 JQA-01：hide() 作用：隐藏 语法：$(‘名’).hide(); JQ-02:$(document).ready() 作用：入口函数，等着页面加载完成运行函数方法，相当于DOMContentLoaded 语法：$(document).ready(function(){ 方法 }) JQA-02S：$() 作用：跟Fun-02作用一致，升级简洁版 语法：$(function(){ 方法 }) JQA-04：$(‘选择器’) 作用：原生js获取元素的方式有很多，很杂，而且兼容性
jQuery二、常用API
李宥的博客
03-28 1093
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
jQuery 效果——动画队列及其停止排队方法
qq_39368007的博客
11-28 276
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&gt...
前端面试html和css部分笔试题
07-28
当然，我可以帮你回答一些前端面试中关于HTML和CSS的笔试题。以下是一些常见的问题： 1. 请解释一下HTML和CSS的作用。 HTML（超文本标记语言）用于创建网页的结构和内容，而CSS（层叠样式表）用于控制网页的样式和布局。 2. 请描述一下HTML5的新特性。 HTML5引入了许多新的元素和API，例如`<video>`和`<audio>`用于嵌入多媒体内容，`<canvas>`用于绘制图形，`<article>`和`<section>`用于更好地组织内容等等。 3. 如何在HTML中插入图像？ 可以使用`<img>`标签来插入图像。例如：`<img src="image.jpg" alt="描述文字">`。其中，`src`属性指定图像的路径，`alt`属性用于提供图像的替代文本。 4. 如何创建一个有序列表和无序列表？ 有序列表使用`<ol>`标签，无序列表使用`<ul>`标签。列表项使用`<li>`标签。例如： ```html <ol> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ol> <ul> <li>列表项 1</li> <li>列表项 2</li> <li>列表项 3</li> </ul> ``` 5. 请解释一下CSS选择器的概念。 CSS选择器用于选择要应用样式的HTML元素。常见的选择器包括标签选择器（例如`p`）、类选择器（例如`.class`）、ID选择器（例如`#id`）等等。 这些是一些常见的HTML和CSS笔试题，希望能对你有所帮助！如需进一步了解，请随时询问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值