只因小黑子的HTML5和CSS3入土复习过程第四章

HTML5+CSS3第四章

4.1 visibility:hidden 不占位置的隐藏

visibility:hidden与display:none的区别，前者是不占位置的隐藏，后者是占位置的隐藏

display:none

	<style>	
		.box1{
			width: 100px;
			height: 100px;
			background: yellow;
			display: none;
		}
		.box2{
			width: 100px;
			height: 100px;
			background: red;
		}		
	 </style>
	<div class="box1"></div> 
	<div class="box2"></div> 

—>

visibility:hidden

	<style>	
		.box1{
			width: 100px;
			height: 100px;
			background: yellow;
			visibility: hidden;
		}
		.box2{
			width: 100px;
			height: 100px;
			background: red;
		}		
	 </style>
	<div class="box1"></div> 
	<div class="box2"></div> 

—>

4.2 窗口自适应

4.3 两栏布局

实现效果：

4.3.1 方案一 浮动间隔法

	<style>	
		.box1{
			width: 200px;
			height: 100%;
			background: yellow;
			float: left;
		}
		.box2{
			
			height: 100%;
			background: red;
			margin-left: 200px; /*与box1间隔，防止自身文字被覆盖*/
		}

		*{
			margin: 0;
			padding: 0;
		}
		
		html,body{
			height: 100%;
		}
	 </style>
	<div class="box1"></div> 
	<div class="box2"></div> 

4.3.1 方案二 浮动+calc()函数法

calc()函数的使用：
-calc()函数:用于动态计算长度值。
   需要注意的是，运算符前后都情要保留一个空格， 
           例如:  width:calc(100% - 10px); 
   任何长度值都可以使用calc(函数进行计算;
   calc()函数支持"+","*","-", "/"运算;
   calc()函数使用标准的数学运算优先级规则;

左

	<style>	
		.box1{
			width: 200px;
			height: 100%;
			background: yellow;
			float: left;
		}
		.box2{
			width: calc(100% - 200px);
			height: 100%;
			background: red;
			float: left;
		}

		*{
			margin: 0;
			padding: 0;
		}
		
		html,body{
			height: 100%;
		}
	 </style>
	<div class="box1"></div> 
	<div class="box2"></div> 

右

      <style>
		.box1{
			
			height: 100%;
			background: yellow;
			width: calc(100% - 200px);
			float: left;
		}
		.box2{
			width: 200px;
			height: 100%;
			background: red;
			float: left;
		}

		*{
			margin: 0;
			padding: 0;
		}
		
		html,body{
			height: 100%;
		}
	 </style>
	<div class="box1"></div> 
	<div class="box2"></div> 

4.4 三栏布局

效果一：左中右

实现效果：

4.4.1 方案一 顺序浮动间隔法

左块浮动，再到右块浮动，中心块不浮动对左对右设置间隔，则产生效果

	<style>	
	    html,body{
			height: 100%;
		}
		.left{
			width: 200px;
			height: 100%;
			background: yellow;
			float: left;
		}
		.center{
			height: 100%;
			background: blue;
			margin-left: 200px;
			margin-right: 200px;
			
		}
		.right{
			width: 200px;
			height: 100%;
			background: red;
			float: right;
		}

	 </style>
	<div class="left"></div> 
	<div class="right"></div> 
	<!-- 让右块先浮动就可以对中心块产生影响 -->
	<div class="center"></div> 
	<!-- 如果右块在中心块后面再浮动,则不会产生在同一水平线的效果 -->

4.4.2 方案二 全浮动+calc()计算法

全块浮动，中心块用calc(100% - 右块和左块的宽度之和)，则可以达到效果

	<style>	
	    html,body{
			height: 100%;
		}
		.left{
			width: 200px;
			height: 100%;
			background: yellow;
			float: left;
		}
		.center{
			width: calc(100% - 400px);
			height: 100%;
			background: blue;
			float: left;
		}
		.right{
			width: 200px;
			height: 100%;
			background: red;
			float: right;
		}
	 </style>

效果二：上中下

实现：

	<style>	
	    html,body{
			height: 100%;
		}
		.top,.bottom{
			width: 100%;
			height: 50px;
			background: red;
		}

		.middle{
			height: calc(100% - 100px);
			background: blue;
		}
	 </style>
	<div class="top"></div> 
	<div class="middle"></div> 
	<div class="bottom"></div> 

—>

4.5 input type=" radio"圆点选框

案例：

	<div>
		<input type="radio" name="aaa" id="bbb" checked>
		<label for="bbb">非常满意</label>
	</div>
	<div>
		<input type="radio" name="aaa" id="ccc">
		<label for="ccc">满意</label>
	</div>
	<div>
		<input type="radio" name="aaa" id="ddd">
		<label for="ddd">一般</label>
	</div>
	<div>
		<input type="radio" name="aaa" id="eee">
		<label for="eee">不满意</label>
	</div>

4.5.1 name="设置名字"作用于单选

4.5.2 label for=" 名字"input type=" radio id="名字 "作用于点击文字时也能选择

4.5.2 checked 作用于默认选上

4.5.3 value=" " 带给后端的信息

4.5.4disabled 禁用

	<input type="radio" disabled>不满意

4.5.5 readon 只读

无法修改

	<input type="text" readonly value="2333333">

4.5.6 placeholder: 选框中的提示文字

4.6 input type=" checkbox"方块复选框

	<div>
		<input type="checkbox" name="aaa" id="bbb" checked>
		<label for="bbb">非常满意</label>
	</div>

4.7 input type=" file"上传文件

4.8 input type=" submit" 提交按钮

4.9 select:下拉菜单和option:下拉选项

	<select>
		<option>a</option>
		<option>b</option>
		<option>c</option>
	</select>

4.9.1 select属性size: 显示几个

	<select size="3">
		<option>a</option>
		<option>b</option>
		<option>c</option>
	</select>

4.9.2 select属性multiple: 选择多个

	<select size="3" multiple>
		<option>a</option>
		<option>b</option>
		<option>c</option>
	</select>

按shift键才可以多选

4.10 textarea 多行文本输入框(文本域)

默认情况下

	<textarea name="" id="" cols="30" rows="10"></textarea>

4.10.1 textarea的css属性resize：可以让用户重新调节大小

一 、resize：vertical 表示只能设置垂直方向

二 、resize：horizontal 表示只能设置水平方向

三、 resize：both 表示能设置水平和垂直方向(默认状态)

四、 resize：none 表示不能设置方向

4.11 fieldset 字段集小分组

默认状态

<fieldset></fieldset>

4.11.1 legend标签：用于打开左上方缺口

	<fieldset>
		<legend></legend>
	</fieldset>

案例：

	<style>	
        fieldset{
			height: 200px;
			width: 200px;
		}

	    legend{
			border: 1px solid red;
			text-align: center;
			padding: 30px;
		}
	 </style>
	<fieldset>
		<legend>性别</legend>
		<input type="radio" name="a">男
		<br>
		<input type="radio" name="a">女
	</fieldset>

4.12 html5语法

4.13 html5新增语义化标签

语义化：指看到标签就明白是干什么的意思

4.14 html5新增音频标签

4.15 增强表单-type

4.15.1 Type= "color” 生成一 个颜色选择的表单

	<form action="">
		<input type="color" name="color">
	</form>

4.15.1 Type= "tel” 唤起拨号盘表单但只能在手机端起到效果

4.15.1 Type= "search” 产生一个搜索意义的表单

4.15.1 Type= "range” 产生一个滑动条表单

	<form action="">
		<input type="range" min="100" max="200" value="100" step="10">
		<!-- min、max表示滑动条最小的值是100，最大的值是200 -->
		<!-- value表示滑块从那里开始 -->
		<!-- step表示滑动进度 -->
		<input type="submit">
	</form>

4.15.1 Type= “number” 产生一个数值表单

4.15.1 Type= “email” 限制用户必须输入email类型

	<form action="">
		<input type="email" name="email">
		<input type="submit">
	</form>

4.15.1 Type= "url” 限制用户必须输入url网址类型

像是https://www.baidu.com/类型才可以，www.baidu.com则不行

	<form action="">
		<input type="url" name="url">
		<input type="url">
	</form>

4.15.1 Type= "date” 限制用户必须输入日期

4.15.1 Type= "month” 限制用户必须输入月类型

4.15.1 Type= "week” 限制用户必须输入周类型

4.15.1 Type= "time” 限制用户必须输入时间类型

在这里插入图片描述

4.15.1 Type= “datetime-local” 选取本地时间

4.16 增强表单-选项列表datalist

案例：

	<datalist id="a">
		<option value="手机"></option>
		<option value="手镯"></option>
		<option value="手环"></option>
		<option value="手表"></option>
	</datalist>
	<input type="text" list="a">

—>

4.17 增强表单-属性

4.17.1 autofocus属性:给文本框、选择框、或者按钮控件加上该属性，当打开页面时，该控件自动获得国标焦点, 一个页面只能有一个

	<form action="">
		<div>
			用户名:<input type="text" autofocus>
		</div>
		<div>
			邮箱:<input type="email" name="email">
		</div>
		<input type="submit">
	</form>

4.17.2 required属性: 验证输入不能为空

验证输入不能为空，如果为空则无法提交到后端

4.17.3 Multiple属性:可以输入一个或多个值，每个值之间用逗号分开，还可以应用于file

例:

4.17.4 pattern属性:将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定格式

例: <input pattern = "[0-9][A-Z]{3}” title= “输入内容: 一个数与三个大写字母” placeholder=输入内容: 一个数与三个大写字母’>

4.18 CSS3基础

4.19 层级选择器

+ 当前元素的后面第一个兄弟
~ 当前元素的后面所有的（同级）亲兄弟，兄弟的孩子则不行

4.20 属性选择器

attr可以是class,id等选择器
1、E[attr]: 只使用属性名，但没有确定任何属性值;
2、E[attr=“value”]: 指定属性名,并指定了该属性的属性值;
3、E[attr~= “value”]:指定属性名，并且具有属性值,此属性值是-个词列表,并且以空格隔开，其中词列表中包含了一个value词,而且等号前面的“~”不能不写
扩展知识
4、E[attr ^=“value”]: 指定了属性名,并且有属性值,属性值是以value开头的;
5、E[attr $=“value”]: 指定了属性名，并且有属性值，而且属性值是以value结束的
6、E[attr*=“value”]: 指定了属性名，并且有属性值,而且属值中包含了value;

4.21 结构伪类选择器

X:first- child匹配子集的第一个元素。 1E7就可以支持

X:last- child匹配父元素中最后-个X元素

X:nth- child(n)用于匹配索引值为n的子元素。索引值从1开始
     奇数写法odd或2n+1
     偶数写法even或2n

X:only- child这个伪类-般用的比较少, 比如.上述代码匹配的是div下的有且仅有一个的p,也就是说，如果div内有多个p,将不匹配。

X:root匹配文档的根元素。在HTML (标准通用标记语言下的一个应用)中，根元素永远是HTML

X:empty匹配没有任何子元素(包括包含文本、空格)的元素X

4.22 目标伪类选择器

E:target选择匹配E的所有元素，且匹配元素被相关URL指向

4.22.1 手风琴实现原理

点击锚点才会出现内容，利用元素:targert实现

<style>	
        div.content{
			display: none;
		}
		div.content:target{
			display: block;
		}
	</style>
    <div>
		<a href="#aaa">aaa</a>
		<div id="aaa" class="content">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias eius dolorum, veritatis harum sed nesciunt blanditiis labore officia neque nulla tempora molestiae quae maiores tenetur pariatur consequuntur, facere doloremque laborum!
		</div>
	</div>
    <div>
		<a href="#bbb">bbb</a>
		<div id="bbb" class="content">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias eius dolorum, veritatis harum sed nesciunt blanditiis labore officia neque nulla tempora molestiae quae maiores tenetur pariatur consequuntur, facere doloremque laborum!
		</div>
	</div>
    <div>
		<a href="#ccc">ccc</a>
		<div id="ccc" class="content">
			Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias eius dolorum, veritatis harum sed nesciunt blanditiis labore officia neque nulla tempora molestiae quae maiores tenetur pariatur consequuntur, facere doloremque laborum!
		</div>
	</div>

—>

切换b锚点

4.23 UI元素状态选择器

4.23.1 E:enabled匹配所有用户界面(form表单) 中处于可用状态的E元素

	<style>	
        input:enabled{
			background: red;
		}
	</style>
    <form action="">
		用户名：<input type="text"><br>
		密码：<input type="password"><br>
		记住用户名：<input type="checkbox"><br>
		<input type="submit" disabled><br>
	</form>

4.23.2 E:disabled匹配所有用户界面(form表单)中处于不可用状态的E元素

上方style添加E:disabled

	<style>	
        input:enabled{
			background: red;
		}
        input:disabled{
			background: yellow;
		}
	</style>

4.23.3 E:focus匹配用户界面(form表单)中处于被点击后状态的元素E

	<style>	
		input:focus{
			background: orange;
		}
	</style>

4.23.4 E:checked匹配所有用户界面(form表单)中处于选中状态的元素E

	<style>	

        input:disabled{
			background: yellow;
		}

		input[type=checkbox]{
			/* 去掉默认样式 */
			appearance: none;
			width: 15px;
			height: 15px;
			border: 1px solid black;
		}
		input:checked{
			background: red;
		}
	</style>
    <form action="">
		用户名：<input type="text"><br>
		密码：<input type="password"><br>
		记住用户名：<input type="checkbox"><br>
		<input type="submit" disabled><br>
	</form>

点击后

4.23.5 E:selection匹配E元素中被用户选中或处于高亮状态的部分

按鼠标左键选择时的默认状态

可以用E:selection修改

	<style>	
       div::selection{
		background-color: yellow;
		color: red;
	   } 
	</style>
    <div>
		Lorem ipsum dolor sit, amet consectetur adipisicing elit. A nemo soluta ex neque quam eos harum natus quibusdam quia facilis esse excepturi minus necessitatibus recusandae dolorem perspiciatis, voluptatem labore error.
	</div>

4.24 否定伪类选择器

E:not(s) (IE6-8浏览器不支持:not0选择器。 )
匹配所有不匹配简单选择符s的元素E
案例：
原本没有:not()时

加了之后，否定了设置的奇数类，选择了偶数类

	<style>	
	li:not(:nth-child(odd)){
		background: yellow;
	}
	</style>
    <ul>
		<li>11111</li>
		<li>22222</li>
		<li>33333</li>
		<li>44444</li>
		<li>55555</li>
	</ul>

4.25 动态伪类选择器

E:link
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上

E:visited
链接伪类选择器
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上

E:active
用户行为选择器
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上

E:hover
用户行为选择器
选择匹配的E元素，且用户鼠标停留在元素E上. IE6及以 下浏览器仅支持a:hover

5.1 text-shadow 文本阴影

	<style>	
	div{
		text-shadow: 0px -10px 2px red,0px 10px 2px red;
	}
	/* 第一个值 水平方向的位移 */
	/* 第二个值 垂直平方向的位移 */
	/* 第三个值 模糊程度 */
	/* 颜色逗号之后，再写可以起到叠加效果 */
	</style>
    <div>hello</div>

4.26 box-shadow 盒子阴影

属性值:

第一个值   水平阴影的位置。允许负值
第二个值   垂直阴影的位置。允许负值
第三个值   模糊程度
第四个值   阴影的大小
color     阴影的颜色。
inset     从外层的阴影(开始时)改变阴影内侧阴影

	<style>	
	div{
		width: 100px;
		height: 100px;
		background-color: yellow;
		margin: 0 auto;
		box-shadow: -10px -10px 10px 10px red inset;
	}
	</style>
    <div></div>

4.27 border-radius 圆角边框

border-radius：px或者百分比
一个值   调节四个角一样
两个值     左上右下，左下右上一致
三个值   左上，左下右上 ，右下
四个值   顺时针

单独调节方向圆角：
border- top-Left-radius:      左上
border- top-right-radius:     右上
border- bottom-Left-radius:   左下
border- bottom-right-radius :  右下

4.28 @font-face 字体引入

@font face是CSS3中的一一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体(@font face这个功能早在IE4就支持)

@font-face的语法规则:
例子：
@font-face {
font family: <YourWebFontName>; 
src: url(<source>);
}

@font- face语法说明:

1. YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font family.如"font -family:" YourWebFontName";"
2. 
2、source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;

4.29 box-sizing 怪异盒模型

属性: box-sizing
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。

含义:更改原有布局盒子模型的计算方式通过box-sizing属性的取值进行更改

属性值: content-box（标准盒子）
这是由CSS2.1规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

属性值: border-box （怪异盒子）
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。