table布局
<!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>Document</title>
<style>
.left{
background:red;
}
.right{
background:blue;
}
table{
width:800px;
height:200px;
border-collapse: collapse;//设置表格的边框是否被合并为一个单一的边框,还是像在标准的HTML中那样分开显示
}
.table{
margin-top:20px;
display: table;
width:800px;
height:200px;
}
.table-row{
display: table-row;
}
.table-cell{
vertical-align: center;
display: table-cell;
}
</style>
</head>
<body>
<table>
<tr>
<td class="left">左</td>
<td class="right">右</td>
</tr>
</table>
<div class="table">
<div class="table-row">
<div class="left table-cell">
左
</div>
<div class="right table-cell">
右
</div>
</div>
</div>
</body>
</html>
absolute是相对什么来定位的(面试题)
1 相对于他最近的父级的absolute或者relative来定位的
2 他是相离最近的absolute或者是relative来定位的
3 如果都都找不到就是相对于body定位的
Flex布局语法
一 什么是Flex布局?
Flex是Flexible Box的缩写意为“弹性布局”,用来为盒模型提供最大的灵活性。任何一个容器都可以指定为Flex布局
.box {
dislpay:flex
}
行内元素也可以使用Flex布局
.box {
display:inline-flex;
}
注意:设置为Flex布局后,子元素的float,clear,和verticle-align属性将失效
二 基本概念
采用flex布局的元素称为Flex容器(flex container),简称:“容器”。他的所有的子元素自动成容器成员,称为Flex项目(flex item),简称“项目”
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
三 容器的属性
1 flex-direction : 属性决定主轴的方向(既项目的排列方向)
.box {
flex-direction:row | row-reverse | column |column-reverse;
}
1 row(默认值):主轴为水方向,起点在左端
2 row-reverse: 主轴为水平方向,起点在右端
3 column:主轴为垂直方向,起点在上沿
4 column-reverse:主轴为垂直方向,起点在下沿。
float
1 元素“浮动”
2 脱离李文档流
3 但不脱离文本流
响应式设计和布局
1 在不同设备上正常使用
2 一般主要处理屏幕大小的问题
3主要方法:
1隐藏+折行+自适应空间
2 rem/viewport/media query
<style>
.container {
margin:0 auto;
max-width:800px;
border:1px solid black;
}
.intro {
display:inline-block;
width:180px;
heiht:180px;
line-height:center;
border-radius:90px;
border:1px solid red;
margin:7px;
}
@media (max-width:375px) {
html {
font-size:24px;
}
}
@media (max-width:320px ){
html {
font-size:20px
}
}
@ media (max-width:640px ){
.intro {
margin:.3rem auto;
display:block;
}
}
</style>
<body>
<div class="container">
<div class="intro">
介绍1
</div>
<div class="intro">
介绍1
</div>
<div class="intro">
介绍1
</div>
</div>
</body>
html {
font-size:16px
}
默认是16px
1rem = 16px
但是16px不好计算所以
html {
font-size:20px
}
rem和px和em的区别
rem是基于html元素的字体大小来决定的,而em则根据使用它的元素大小决定的
PX表示“绝对尺寸(并非真正的绝对)”,利用px设置字体和大小及元素宽度等比较稳定和精确,px的缺点是其不能适应浏览器缩放时产生的变化,因此一般不能用于响应式网站
em表示相对尺寸,其相对于当前对象内文本的font-size(如果当前对象内文本的font-size计量单位也是em,则当前对象内文本的font-size的参考对象为父元素文本font-size)使用em可以较好的相应设备屏幕尺寸的变化,但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size,如有遗漏可能会导致错误
rem也是相对尺寸,其参考对象为根元素<html>的font-size,因此只需要确定这一个font-size
position:absolute/fixed有什么区别?
1 absolute是相对于最近的absolute/relative定位
2 sbsoulte:是绝对定位,常用于页面
3 fixed是相对于屏幕定位的
4 fixed是固定定位,常用于网站边缘的公司联系方式和快速回到顶部
display:inline-block的间隙?
因为有些空白字符,这些空白字符会产生有一些间距
解决方法:消灭字符或者消灭间距
如何清除浮动和为什么清除浮动?
1为什么?
浮动的元素不会占据父元素的布局空间,父元素布局的时候不会管浮动元素,有可能浮动元素就会超出浮动元素,从而对其他元素产生影响,所以作为父元素一定要清除浮动,保证不会影响其他的元素
2 如何清除?
1 让盒子负责自己的布局
2 使用空标签清除浮动clear:both
.clearfloat{
clear:both
}
<div class="clearfloat"></div>
3 父级div定义overflow:hidden
<style>
.div1 {width:98%;overflow:hidden}
.div2 {float:left}
.div3 {float:right}
</style>
<body>
<div class="div1">
<div class="left">left</div>
<div class="right">right</div>
</div>
</div class="div2">div2</div>
</body>
4父级div定义伪类:after和zoom(用于非IE浏览器)
<style>
.left{float:left}
.right{float:right}
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden,height:0}
.clearfloat{*zoom:1}
</style>
<body>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">div2</div>
</body>
5 父级div定义overflow:hidden
如何适配移动端页面
1 viewport
<meta name="viewport" content="width=device-width,initial- scale=1.0">
2 rem/viewport/
media query
可以针对不同额media类型设置样式,还根据设定的宽度或者高度指定样式
@media screen and (max-width: 500px) {
body { background-color: black; }
}
当屏幕的宽度小于等于500px的时候body的背景颜色为黑色