一、HTML
1. meta标签
记住2个属性:name和http-equiv
- name:描述网页
<meta name="参数" content="具体的描述">
- http-equiv:文件头
HTML中的meta标签及其使用方法
二、CSS
1. css实现水平居中的几种方式
css实现水平居中的几种方式
一、 行内
text-align:center;
二、已知宽高块级元素(三的特例)
margin-左+右:auto;
子绝父相,left50%,margin左(宽度/2)
子绝父相,top四相0,margin:auto;
三、未知宽高块级元素
display:table或者用<table>; + margin:auto;
转为行内/行内块 + text-align:center;
父元素:display:flex;flex-direction;+子元素:align-self:center;/或者margin:auto;
父元素转行内/行内块或者浮动,父相;left:50%;+子元素相对,right:50%;
子绝父相,left:50%;transform:translateX(50%);
top、left、right、bottom设置为0,用于实现居中,填满父容器
未知宽高:是不知道宽高而不是没有。实例
css3:父元素display:flex;子元素:margin:auto;好用,有兼容问题
flex布局,兼容写法
带有box放后写:
.box{
display: -webkit-flex; /* 新版本语法: Chrome 21+ */
display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */
display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
display: -moz-box; /* 老版本语法: Firefox (buggy) */
display: -ms-flexbox; /* 混合版本语法: IE 10 */
}
.flex1 {
-webkit-flex: 1; /* Chrome */
-ms-flex: 1 /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1 /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
}
2. css伪类
css伪类(:before和:after)
在指定的元素内容(而不是元素本身)之前或者之后插入一个包含content属性指定内容的行内元素
*1. 自适应两栏布局的4种方式
先决条件:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.left {
height: 100%;
}
.right {
height: 100%;
}
一类:左浮动,右三变体
- 左:宽固定100px,
float: left;
- 右:
①margin-left:左宽100px
②右浮动float: right
计算右宽width:calc(100% - 100px);
注意:运算符号左右必须有空格
③右边创建BFC