html5|HTML及CSS复习 css|html

1.
文章图片

src 是属性,用于指定图片的路径
alt 替换文本图像显示不出来时用文字替换
title 提示文本鼠标放在图片上显示信息

2.>文本或图片

target="_blank":开始一个新窗口打开页面, "_self":默认，当前窗口打开页面。

3. 锚点链接：快速定位到页面中的某个所需位置

4.在中加可以使本页面所有超链接实现此属性。
为页面上所有链接规定默认目标：

5.Emmet语法：

生成div类名有顺序：div.demo$*5
像生成标签里默认文字：div{文本}*5 |div{$}*5

6.※注意： outline:none; ---/*在谷歌浏览器中有默认的轮廓线*/
7.链接里面不能再放链接，可以放块级元素，但给转换成块级元素最可靠
8.行高
1.行高可以跟单位也可以不跟单位；
2.行高不跟单位表示文字大小的倍数；
3.如果子元素没有设置行高，则会继承父元素的行高为1.5
4.此时子元素的行高时当前子元素的文字大小*1.5
5.body行高1.5写法优势就是里面子元素可以根据自己文字大小自动调整行高。
9. 外边距合并:
①相邻块元素垂直外边距的合并:会取较大的值。 /*只设置一个值*/
②嵌套块元素垂直外边距的塌陷(合并):父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大外边距值。
/*①可以给父元素定义个上边框*/
/* ②可以给父元素定义上内边距*/
/* ③给父元素添加overflow:hidden; （溢出隐藏）*/
/*如果有定位盒子，慎用overflow:hidden*/
10. 清除内外边距:

*{ margin:0; padding:0; }

注意:行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距，但是转换成块级或行内块元素可以。
11. 清除浮动
原因：由于父盒子很多时候不方便给高度，但子盒子浮动又不占有位置，最后父级盒子高度为0就会影响下面的标准盒子。
①（不推荐）额外标签法也称为隔墙法，w3c推荐
选择器 { clear : both; }
闭合浮动：只让浮动在父盒子内部影响。
注意：新空标签必须是块级元素！
②父级添加overflow属性
overflow:hidden/*给父元素添加*/ | auto | scroll;
③父级添加after伪元素
/*:after{ content:' '; }*/

//伪元素清除浮动代码： .clearfix:after { content: ""; display: block; clear: both; height: 0; visibility: hidden; }.clearfix { /* IE6、7 专有 */ *zoom: 1; }

④父级添加双伪元素/*也是父元素添加*/

.clearfix:before, .clearfix:after { content: ""; display: table; /*block也行*/ }.clearfix:after { clear: both; }.clearfix { *zoom: 1; }

12.元素居中的方法
①定位top50%,left50%,然后transform:translate(-50%,-50%)
②利用flex布局中的align-Items:center垂直居中，然后再justify-content:center水平居中
13.flex布局
display : flex; (弹性布局) -----默认情况下一行显示
行内元素也可以使用Flex布局。
.box{
display: inline-flex;
}
/*主轴居中，主轴默认是x轴*/
justify-content: flex-start(左对齐) | flex-end(右对齐) | center | space-between | space-around;
justify-content:space-between; /*对齐方式是两边贴着边。剩余内容进行平分*/
justify-content:center; /*居中*/
justify-content:space-around; /*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
flex-direction:row(默认值) | row-reverse(主轴为水平方向,起点在右端) | column | column-reverse(主轴为垂直方向,起点在下沿); /*默认主轴方向是row*/
flex-wrap: nowrap(默认,不换行) | wrap(换行,第一行在上方) | wrap-reverse(换行,第一行在下方) ;
flex-flow: flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
align-items:flex-start(交叉轴的起点对齐) |
flex-end(交叉轴的终点对齐) |
center(交叉轴的中点对齐) |
baseline(子元素的第一行文字的基线对齐) |
stretch(如果子元素未设置高度或设为auto，将占满整个容器的高度);
align-content(定义了多根轴线的对齐方式): flex-start | flex-end | center | space-between | space-around | stretch(默认值,轴线占满整个交叉轴)
/*如果主轴是x轴，那么侧轴是y轴,侧轴就是交叉轴*/
可调margin
等比例分配:flex : 1; /*每个盒子按1:1分配*/
可调margin
注意：设为Flex布局以后，子元素float,clear,和vertaical-align属性将失效。
容器默认存在两根轴:水平主轴和垂直交叉轴。
14. 文本域
①取消表单轮廓和防止拖拽文本域：outline : none;
②禁止textarea被拖拽:resize:none; 防止用户拖拽文本域破坏布局.
③textarea中不建议把双标签换行写，textarea标签完全还原HTML中的空格。
④图片或表单和文字垂直对齐: vertical-align : center ;
vertical-align: baseline(默认，按基线对齐) | top | middle | bottom; /*会让图片地测有一个空白缝隙*/
因为行内块元素和文本默认按照基线对齐，添加vertical-align:top | middle | bottom; 即可；把图片转换为块级元素。
⑤单行文字语出省略号显示:white-space: nowrap; /* 1. 强制在一行显示文本，默认 normal 会自动换行 */
overflow: hidden; /*1 . 超出的部分隐藏 */
text-overflow: ellipsis; /* 2. 文字用省略号替代超出的部分 */
display: -webkit-box; /* 3. 弹性伸缩盒子模型显示 */
-webkit-line-clamp: 2; /* 4. 限制在一个块元素显示的文本的行数 */
-webkit-box-orient: vertical; /* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
15.鼠标样式
【html5|HTML及CSS复习】鼠标样式cursor: pointer | default(小白) | move(四个箭头) | text | not-allowed(禁止标志);