前端实习小知识笔记

最新推荐文章于 2023-12-13 16:42:38 发布

傻滴

最新推荐文章于 2023-12-13 16:42:38 发布

阅读量895

点赞数

分类专栏：前端文章标签： css小知识 vertical-align border-box

本文链接：https://blog.csdn.net/WEBGO_1/article/details/88119088

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前端实习小知识笔记

border-box：宽高不随padding的增加而扩大。
vertical-align：设置元素的基线在整行的位置。
将整个页面居中（上下，左右）

实现效果如下：
常用居中方法：
水平居中：通用设置：flex布局，父亲display：flex；justify-content：center；
垂直居中：子元素为多行内联文本：父元素为display:table-cell或inline-block;在设置vertical-align：middle;
块状元素：position：absolute;top、bottom为0，父元素设置为static意外的值，margin：auto;
通用方案：flex布局，给父元素设置display：flex；align-items:center；
单列布局：a.float + margin

<div id="content">
    <div class="sub">sub</div>
    <div class="extra">extra</div>
    <div class="main">main</div>
</div>
先写两侧，在写主栏
--------------------------
.sub{
	width: 100px;
	background: red;
	float: left;
	height: 100px;
}
.extra{
	width:200px;
	background: red;
	float: right;
	height: 100px;

}
.main{
	background: black;
	margin-left: 100px;
	margin-right: 200px;

	height: 100px;
	
}

在这里插入图片描述
6. position+margin

<div class="sub">left</div>
<div class="main">main</div>
<div class="extra">right</div>

.sub, .extra {
    position: absolute;
    top: 0; 
    width: 200px;
}
.sub { 
    left: 0;
}
.extra { 
    right: 0; 
}
.main { 
    margin: 0 200px;
}

在这里插入图片描述
7.
8.
9.
10.
11.
12.
13.
14.