一、页面布局

1.1页面布局分类

css网页布局的本质：就是在网页中排列盒子（标签）

css网页布局分为3种机制：普通流、浮动、定位

普通流：就是从上到下，从左到右的排布

浮动：本质是让块元素横向排列

定位：相对定位（relative）、绝对定位（absolute）、固定定位（fixed）、静态定位（static）

普通流相当于大地，浮动相当于海平面，定位相对于天空

1.2定位语法

定位=定位模式+边偏移（top、bottom、left、right）

1.3相对定位

相对定位的参照点是它自身在网页中的原来的位置计算的，元素本身的位置还占据

语法：position：relative；

1.4绝对定位

绝对定位的参照点是它的定位父级元素的位置来移动的，设置绝对定位后，元素会脱离标准文档流，不占据元素本身位置

语法：position：ablution；

1.5固定定位

固定定位的参照点是网页来移动位置的。不占据本身位置。

语法：position：fixed；

1.6层级属性（层级最高，压在别的元素之上）

z-index：99；注意z-indox属性只能添加到有定位的元素上。

1.7overflow属性

用来处理超出区域的内容如何显示

overflow: hidden; - 隐藏超出的内容 overflow: scroll; - 以滚动方式显示内容(一定会预留滚动条的占位) overflow: auto; - 有超出内容才以滚动方式显示

 <!DOCTYPE html><html><head><meta charset="utf-8"><title>overflow属性</title><style>.box {width: 200px;height: 300px;background-color: pink;}/*1）默认子级(内容)超出父级显示区域，不会做任何处理(正常显示)2）overflow: hidden; - 隐藏超出的内容3）overflow: scroll; - 以滚动方式显示内容(一定会预留滚动条的占位)4）overflow: auto; - 有超出内容才以滚动方式显示*/.box {overflow: auto;}</style></head><body><div class="box">哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂芬纳士大夫士大夫四大哈斯蒂</div></body></html>

二、经典面试题（小盒子套大盒子的方式）

页面中有一个大盒子套小盒子，小盒子在页面水平垂直居中，有几种方式？（小盒子宽高不一定固定）

2.1第一种方式

规则：小盒子绝对定位，设置top：50%，left：50%；margin-left和margin-top分别设置小盒子宽高的一半，大盒子相对定位

 <style>* {margin: 0; padding: 0; }#big { width: 200px; height: 200px; background-color: red; /* 水平居中 */ margin: 0 auto; position: relative; }/* 子绝父相 */ #small { width: 150px; height: 100px; background-color: yellow; position: absolute; top: 50%; /* margin设置为小盒子高度的一半 */ margin-top: -50px; left: 50%; /* margin设置为小盒子自身宽度的一半 */ margin-left: -75px; } </style> </head> <body> <div id="big"> <div id="small"></div> </div> </body>

2.2第二种方法

CSS3新属性：位移

<style>#big{width: 200px;height: 200px;background-color: red;/* 相对定位 */position: relative;}#small{width: 50px;height: 50px;background-color: yellow;/* 绝对定位 */position: absolute;top:0;left: 0;transform:translate(-50%,-50%);}</style></head><body> <div id="big"> <div id="small"></div> </div> </body></html>

2.3第三种方法

规则：固定写法(四个方向为0，再加一个margin：auto；)

<style>#big{width: 200px;height: 200px;background-color: red;/* 相对定位 */position: relative;}#small{width: 50px;height: 50px;background-color: yellow;/* 绝对定位 */position: absolute;top:0;bottom:0;left: 0;rigt:0;margin:auto;}</style></head><body> <div id="big"> <div id="small"></div> </div> </body></html>

经典面试题：CSS定位知识及小盒子套大盒子的方法相关推荐

小盒子在大盒子里面并排问题
当两个盒子在一个大盒子里时默认是从上往下依次往下的. 盒子如下:(这是我写的) <div class="xtx-main-nav contain ...
CSS创建三角形（小三角）的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
css做三角形横线加小三角,CSS创建三角形（小三角）的几种方法
你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...
HTML、css基础知识
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表学习目标理解 css的目的作用 css的三种引入方式应用 css三种引用方式的书写通 ...
李洪强iOS经典面试题144-数据存储
李洪强iOS经典面试题144-数据存储数据存储 sqlite中插入特殊字符的方法和接收到处理方法. 除'其他的都是在特殊字符前面加"/",而 ' -> '' .方法:k ...
【HTML+CSS】实现小盒子水平垂直居中大盒子
小div在大div中如何水平垂直居中关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: // 大盒子嵌套 ...
CSS学习笔记（内边距~文字在盒子里的垂直居中）
内边距 1.内边距就是内容和边框之间的距离. 2.格式 2.1.非连写 .san1{width: 100px;height:100px;border: 1px solid black;padding- ...
小div在大div里面水平垂直都居中的实现方法
关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...
音频声音太小怎么调大？
音频声音太小怎么调大?随着视频自媒体时代的带来,导致对于音频文件的使用也越来越频繁,音频文件最重要的就是声音,声音的大小决定了音频文件质量,如果音频的声音不符合我们的使用需要时就需要调整,太大的时候就 ...

经典面试题：CSS定位知识及小盒子套大盒子的方法