HTML和CSS总结
HTML超文本标记
基本标签学习：
指定搜索引擎检索语言；告诉搜索引擎爬虫网站是关于什么内容的。
指定编码格式；
页面内容
打开一个新的网页
本地相对路径：图片和html在同一文件下，直接文件名.后缀名；photo.jpg
本地绝对路径：在不同文件下，写详细，盘/文件/图片名.后缀名；D:/photo/timg.jpg
属性:type=text(文本框)/password(密码框)/submit(提交按钮);name="数据名"value="数据值"placeholder输入框中默认字;
type="radio"单选框,同意名字满足单选关系;checkbox多选框;
下拉选项
Html编码: 空格;<左尖角号;>右尖角号.
div和span封装语句，显得代码规格化。作用：1.结构化2.统一定义
标签分为:
1.行级元素(内容决定元素所占位置,不可通过css改宽高):strong,em,a,del,span…
2.块级元素(独占一行,可以通过css改变宽高)div,p,ul,li,ol,form,address…
3.行级块元素(内容决定大小,可改变宽高)img,span…
凡是带有inline的元素都有文字特性
行级只能嵌套行级,块级可以嵌套任何
CSS层叠样式
引入css:
1.行间样式//标签里加入style=“属性”.
2.页面级css//在head里写style标签,标签里写样式.
3.外联css//在head里写link标签,引入css文件
css基础选择器:
1.id选择器 //以#加上id值来定义{},一对一的特性
2.class选择器 //以.加上class值来定义{},多对多特点;class=" "以空格形式引入多个class值
3.标签选择器//直接在css里写标签名定义{},所有标签应用此样式;
4.通配符选择器//以*{}定义,特点所有全局标签应用此样式,初始化所有标签
css权重:
| !important | Infinity(正无穷大) |
|---|---|
| 行间样式 | 1000 |
| id | 100 |
| class, 属性,伪类(:hover) | 10 |
| 标签,伪元素(before,after) | 1 |
| 通配符 | 0 |
css复杂选择器:
1.派生/父子选择器:选择标签可加很多修饰条件,每一层及不需要都是标签属性名也可.(层级间加空格eg:div span .num{})
2.直接子元素选择器:只控制直属父子关系内容修改.eg:div>span{}
3.并列选择器:用多个限制条件选择一个选择器(不加空格eg:.wraper.block{})
4.分组选择器:一起选择多个选择器用逗号隔开;
css常用属性:
文本对齐方式text-align:left/center/right;
单行文本所占高度line-height;要使文本上下没有空隙则设置为文字高度,要使文本居中则设为容器高度;
text-indent:2em首行缩进2个文本距离,1em=16px;
圆角border-radius;修饰文本text-decoration:none(无,清空a标签下的线条使用)/underline文本下的线overline文本上的…
背景图片处理： background-image：url（）；插入背景图片；
background-size：图片大小；
background-repeat：no-repeat；一张图片铺满不重复
background-position：改图片位置
vertical-align：px/middle调节字底部对齐方式
css3中渐变色:linear-gradient(to right,#999 0,#222 100%)
盒模型
margin:100px;一个值代表四个方向;四个值代表:上,右,下,左;三个值:上,左右,下;两个值:上下,左右;
层模型
position:
（给元素设置position如果不写top：0；left：0；它的默认值是Auto）
1.absolute绝对定位//脱离原来位置进行定位;距离最近的父级有定位就相对于父级进行定位;如果父级没有定位,就相对于文档定位.
2.relative相对定位//保留原来位置进行定位;相对于自己原来的位置进行定位
▲用relative做参照物,用absolute定位;父相子绝
3.fixed绝对定位//可视区窗口进行固定定位
两个经典bug
1.margin塌陷:垂直方向margin父子元素高会结合在一起,只有取外边距最大值才可移动
可用BFC弥补;如何触发BFC:
①给盒子设置position:absolute;
②display:inline-block
③浮动float:left/right
④overflow:hidden溢出部分隐藏
2. margin合并问题
避免出现这种情况,不可为了改bug而增加无意义工作.
浮动模型
float可使元素站队排列
浮动元素产生的浮动流.所有产生浮动流的元素只有块级元素看不到他们,会覆盖掉,产生了bfc元素和文本类inline的元素能看到浮动元素.
p元素设置了border,clear属性,包裹住浮动元素
包裹浮动元素:凡是设置了position:absolute;float:left/right,它会从内部把元素转换为inline-block
清除浮动clear :left/right//both；能清除浮动必须是块级元素用伪元素三件套清除浮动
parent::after/::before{
content:"";
display:block;
clear:both;
}
文字溢出处理
1.单行文本溢出（用三件套）
①white-space：nowrap；//文字超出容器不换行
②overflow：hidden；//溢出部分隐藏
③text-overflow：ellipsis；//溢出部分用点展示…
2.多行文本溢出（作结段：算出容器高度和单位文本所占高度，填满后直接overflow：hidden）