HTML+CSS

[TOC]

复习重要知识点

HTML常用标签有哪些

• h1-h6 标题
• ul>li 无序列表
• ol>li 有序列表
• dl>dt dd 自定义列表
• div 区分大模块
• p 段落
• span 区分行内小模块
• strong 加粗，有强调作用
• b 加粗
• em 斜体，有强调作用
• i 斜体
• img 插入图片
  • src="图片的路径"
  • alt="描述图片"
• a 超链接、锚点
  • href="" 网址
• table 表格
  • tr 行
  • td 列
• input
  • type="text" 文本框
  • type="password" 密码框
  • type="checkbox" 多选
  • type="radio" 单选
    • name="ok"
  • type="button" 提交按钮
    • value="" 值
• label 用来描述表单功能的
• select 下拉框
• textarea 文本域
  • maxlength 最大长度
• sup 上标
• sub 下标

CSS引入方式--面试题

• 行内式
• 内嵌式
• 外链式
• 导入式

外链式和导入式的区别--3条

CSS选择器

语法：css选择器{css属性名:css属性值;} h1{color:red;}

CSS选择器的分类

标签选择器

权重：1

<style>
	h1{color:red;}
</style>
<h1>标题</h1>

类选择器

权重：10

<style>
	h1{color:red;}
	.box{color:yellow;}
</style>
<h1>标题</h1>
<h1 class="box">标题</h1>

ID选择器

权重：100

<style>
	h1{color:red;}
	#box{color:yellow;}
</style>
<h1>标题</h1>
<h1 id="box">标题</h1>
<h1 id="box1">标题</h1>

页面中只能出现一次ID名，id名不能重复，具有唯一性(配合JS来使用的)

通配符选择器

权重：0 < * < 1

*{margin:0;padding:0}

在项目中不使用的，了解一下而已

后代选择器

语法：祖辈选择器 后代选择器{} 权重：所有组合选择器之和

li{}
div li{}
div ul li{}
<div>
	<ul>
		<li></li>
	</ul>
</div>

子级选择器

语法：父级选择器>子级选择器{} 权重：所有选择器组合之和

li{}
div li{}
div ul li{}
div>ul>li{} 子级选择器
div>li{} 错误的，不能跨辈(父子是紧邻关系)
<div>
	<ul>
		<li></li>
	</ul>
</div>

分组选择器

权重：独立计算的，不会叠加

<style>
    .div1,p,h1{
        width:100px;
        height: 100px;
        background: red;
    }
</style>
<div class="div1"></div>
<p></p>
<h1></h1>

交集选择器

一个元素有两种选择器，可以用交集选择器来选择HTML元素 权重：所有组合选择器之和

<style>
    div.div1{}  交集选择器  最常用的写法
    div[title=zf]{}
    div[title]{}
    div#div2{}
</style>
<div class="div1" title="zf" id="div2"></div>

标签属性选择器

语法：[标签属性]{} [标签属性名=标签属性值]{} 权重：10

<style>
    [title=zf]{}
    [title]{}
    [class]{}
    [class=div1]{}
</style>
<div class="div1" title="zf"></div>

伪类选择器

给某个元素添加某种状态 例如：鼠标经过的状态...

最常用的状态**:hover**

<style>
	a{color:red;}
	a:hover{color:blue;}
</style>
<a>超链接</a>

#####伪元素 通过css代码向指定的元素内添加假的(html)中不存在的内容

:before 在....之前 :after 在....之后

常用来清除浮动带来的影响: :after

<style>
    .div5{
        color: red;
    }
    .div5:before{
        display: block;
        content: "";
    }
    .div5:after{
        display: block;
        content: "666666";
    }
</style>
<div class="div5">
    div555555
</div>

html元素的分类以及特点

块级元素

元素	描述
div	区分大模块
p	段落
h1-h6	标题
ol>li	有序列表
ul>li	无序列表
dl>dt dd	自定义列表
table>tr>td	表格 行 列

特点

• 独占一行，从上往下排布
• 可以设置CSS盒模型的所有属性(width/height/border/margin/padding)
• 在不设置宽高时，宽是继承父级的宽度，高是由本身内容决定的
• 可以嵌套其他元素
  • p元素不能嵌套块级元素(p也不能嵌套p)
  • dt,dd,h1-h6一般不会嵌套块级元素，最多行内元素：a,img...

行内元素

行内元素

元素	描述
span	区分行内小模块
strong	加粗
b	加粗
em	斜体
i	斜体
label	用来描述表单功能的
a	超链接、锚点
sup	上标
sub	下标

特点

• 在一行显示(从左到右排布)
• 不可以设置宽高
• 不设置宽高时，宽高是由内容决定的
• 在编辑代码时，行内元素与行内元素之间遇到空格或者换行会出现间隙
  • 给父元素或body设置font-size:0;
• 基线对齐问题
  • vertical-align:top/middle/bottom;
• 不可以嵌套块级元素

行内块级元素

元素	描述
img	插入图片
input	用来添加表单功能的
select	下拉框
textarea	文本域

特点

• 在一行显示(从左到右排布)
• 可以设置宽高
• 不设置宽高时，宽高是由内容决定的
• 在编辑代码时，行内元素与行内元素之间遇到空格或者换行会出现间隙
  • 给父元素或body设置font-size:0;
• 基线对齐问题
  • vertical-align:top/middle/bottom;
• 不可以嵌套块级元素

块级元素与行内元素的相互转换

display

• block 块、显示 --常用
• inline 行内
• inline-block 行内块 --常用
• none 隐藏、消失 --常用

盒子模型---面试题

width 宽度 height 高度 border 边框 margin 外边距 padding 内边距

padding 内边距 padding:1px 2px 3px 4px; 上 右 下 左 padding:2px 3px 4px;上 左右 下 padding:2px 2px; 上下 左右 padding:1px;设置了四个方向的值

padding-top:1px; 上内边距 padding-right:1px; 内右边距 padding-bottom:1px; 内下边距 padding-left:1px; 内左边距

margin外边距 margin:1px 2px 3px 4px; 上 右 下 左 margin:2px 3px 4px;上 左右 下 margin:2px 2px; 上下 左右 margin:1px;设置了四个方向的值

margin-top:1px; 上外边距 margin-right:1px; 外右边距 margin-bottom:1px; 外下边距 margin-left:1px; 外左边距

盒子与盒子(块级元素与块级元素)可以用margin来设置外边距 盒子的里面(行内元素与行内元素)可以用padding来设置内边距

margin兼容问题

• 两个是平级元素，给第一个元素设置margin-bottom值，给第二个元素设置margin-top值，间距取的是两个元素的最大值，而不是取两个元素距离之和
• 两个元素是包含关系时，当父元素没有设置border-top/padding-top时，给子元素设置margin-top值时，会出现子元素的margin-top值传递给父元素
  • 解决方法:
    • 1.给父元素设置 overflow: hidden;
    • 2.把子元素margin-top值去掉，改成给父元素设置padding-top值 --常用

border边框 border:1px solid red; ---常用 border-top:1px solid red; 上边框 border-bottom:1px solid red;下边框

border-width:1px;边框的宽度 border-width:1px 2px 3px 4px;上 右 下 左

border-style:solid;边框的样式 border-style:solid dashed solid dashed;上 右 下 左 border-style:solid dashed;上下 左右

border-color:red;边框的颜色 border-color:red yellow blue green; 上 右 下 左

border制作小三角

border-width来控制小三角的大小

<style>
    .div7{
        width:0;
        border-width: 10px 5px;
        border-style: solid;
        border-color: transparent transparent blue transparent;
        /*transparent 透明*/
    }
</style>
<div class="div7"></div>

盒模型计算公式 allWidth = width + 左右padding + 左右border 160 = 100 + 20+20 + 10+10

allHeight = height + 上下padding + 上下border 160 = 100 + 20+20 + 10+10

CSS属性值background

当使用雪碧图为背景图时，需要改变背景图片的位置，用background-position这个CSS属性，这个属性的值是为负值

background-color: yellow;!*背景颜色*!
background-image: url("logo.png");!*背景图片*!
background-repeat: no-repeat;!*改变背景图片的平铺方式*!
background-position:50px 40px;!*改变背景图片的位置*!
background-size:100% 100%;!*改变背景图片的大小*!*/
综合写法：background: yellow url("logo.png") no-repeat center;
/*背景颜色、背景图片、背景图片是否平铺、背景图片的位置*/
/*background-size: 50%;*/

CSS属性之float 浮动

值

• float:left; 左浮动，从左到右排布
• float:right;右浮动，从右到左排布
• float:none; 去掉浮动

特点

• 脱离文档流(父元素找不到子元素)
• 任何元素都可以设置这个CSS属性，比如：行内元素、行内块元素(a,img,strong,i...)
• 不设置宽高时，宽高是由内容绝定的
• 图文混编

清除浮动带来的影响(清除浮动)--面试题

• 给父元素设置高度，高度一定
• 给父元素设置CSS属性---overflow:hidden;
• 给所有浮动元素后面加一句<div style="clear:both;"></div>
• 利用伪元素来清除浮动

/**兼容低版本浏览器**/
.clear{
	*zoom:1;
}
/**兼容高版本浏览器**/
.clear:after{
	display:block;
	content:"";
	clear:both;
}

定位

相对定位position: relative;

特点

• 不脱离文档流
• 层级大于其他文档流内元素(盖在其他元素之上)
• 当改变定位位置时，原来的位置还在(被占用)
• 参照物是本身(自己)
• 给绝对定位当参照物来用
• 当同时设置left,right,top,bottom值时，left,top值生效

绝对定位position: absolute;

特点

• 脱离文档流
• 不设置参照物时，参照物是body
• 人为设置参照物时
  • 必须是这个绝对定位元素的父元素
  • 这个父元素必须带有定位属性(相对、绝对、固定)
• 当同时设置left,right,top,bottom值时，left,top值生效
• 当不设置四个方向值时，这个绝对定位元素前面有其他元素，默认会排在同级(平级)元素的后面
• 给绝对定位设置宽高为100%；继承是参照物的宽高
• 不设置宽高时，宽高是由本身内容绝对的

固定定位position: fixed;

• 参照物是浏览器的可视窗口

一般用在页面中侧边栏、辅导航的结构中

改变定位的层级关系 z-index

如果想改变定位的层级关系，一般都是父元素设置z-index值