1.清除浮动的三种方法
1、在父元素结尾处添加空的div标签，clear:both.
缺点：不少初学者不知道其原理，如果页面浮动布局多，就要增加很多空div，让人感觉很不爽;这种方法不推荐使用，这是以前的一种使用方式。
优点：浏览器支持好，在ie8以上的ie浏览器以及其他非ie浏览器都支持
必须定义width或者zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。
优点：代码少，简单，浏览器支持。缺点：不能配合position使用，因为超出部分被隐藏。
2.HTML引入样式的方法
在HTML中嵌入CSS样式有四种方式:
这个方式是直接在HTML的标签中插入 style="属性:属性值;..." 这个属性
一、w3c标准是:内容、样式、行为三者分开,这个嵌入方式不符合W3C规范,并且代码乱,不好维护
在html中的head中插入style标签 在<style type="text/css"></style>中间写CSS代码
这个方式解决了同一页面多个标签需要写多分style属性的问题
但是内嵌式无法实现在多个html都要使用这个css样式的功能
在html的head中插入<link rel="stylesheet" href="css文件路径" type="text/css">
四种插入方式的优先级
3.使用flex实现圣杯布局
页面从上到下为头部、中部、脚部；头部、脚部定高，不可伸缩；中部高度自适应。
<style type="text/css">
*{
box-sizing:content-box;/* 伸缩项目自动box-sizing:border-box，所以需调整为content-box */
margin:0;
padding:0;
}
body{
display:flex;
flex-direction:column;/* 头、中部、脚纵向显示 */
}
header,footer{
flex:0 0 50px;/* 头、脚尺寸固定，不放大、不缩小 */
background:#3f3f3f;
}
.main{
display:flex;
/*flex:1 == 1 1 auto：剩余空间放大比例(flex-grow) 空间不足缩小比例(flex-shrink) 分配多余空间之前项目占据的主轴空间(flex-basis)
flex:1指的是：中部区域自由伸缩
auto指的是项目本来大小，因未给main设置高度,main高度由子元素最高者决定，若子元素高度为0，则main高度为0
块级元素未主动设置高度或未被子元素撑起高度，浏览器默认为块级元素分配高度为0。
*/
flex:1;
}
.content{
background:red;
height:1000px;
/*
横向中间内容区自适应，即使未指定宽度，但会分配宽度
块级元素未主动设置宽度或未被子元素撑起宽度，浏览器默认为块级元素分配宽度为可使用的全部宽度，比如全屏宽。
*/
flex:1;
}
.left,.right{
height:800px;
background:blue;
flex:0 0 100px;/* 左右两列固定宽 */
}
.left{
order:-1;/* 让left居于左侧 */
}
html代码：
<body>
<header></header>
<div class="main">
<div class="content"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<footer></footer>
</body>4.CSS三大特性
5.input的几种文本属性
<input type="text/password" name=" "/>
name属性便于为后端做处理。 password密码框输入密码的显示是*
<input type="submit" value="提交" name=""/>
<input type="reset" value="重置" name=""/>
<input type="submit" value="提交" name=""/>
<input type="reset" value="重置" name=""/>
<option selected="selected"></option>
<textarea rows="行数" cols="列数"> 文本内容
6.flex强制换行与不换行
这个作为换行属性，如果当元素一行摆放不开了，我们需要选择如何换行？不换行还是换行，还是换行到第一行的上方呢？
7.外边距合并
所谓的外边距合并就是，当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。
使用margin时，会出现另一个bug，这里称为margin塌陷（就是垂直方向的margin不但会合并; 当父元素没有设置内边距或边框,以及触发BFC时,如果子元素的值大于父元素时，它会带着父元素一起偏移,此时子元素是相对除了它父级之外的离它最近的元素偏移的）。
可以通过给父元素添加边框或内边距.(不建议使用,会破坏布局)
margin四个属性的顺序
8.选择器
1.元素选择器( p{ ...; ...; })
2.class选择器( .Name { ...; ...; } )(类型选择器)-最常见最容易理解
绑定HTML元素上已经设置的class标签进行设置对应的css样式。
基本格式：以class前缀符+class名称： .Name {}
3.id选择器 （ #Name { ...; ...; } ）
该选择器通过绑定HTML元素上已经设置的唯一id标签进行设置对应的CSS样式。
基本格式：id选择符前缀#+id名称 #Name{ ...; ...; }
4.后代选择器（ .father .baby { ...; ;} ）
选中某几个父级对应的所有子级元素，并针对该子级设置CSS样式。
父级和子级之间可以存在多层级父级，并不局限在单一父子级之间，层级越深所设置的CSS样式优先级越高，从左到右逐级深入
5.子元素选择器 （ div > span ）
6.相邻选择器（相邻兄弟元素）：选中对应元素的下一个兄弟元素
9.CSS三大特性
- 说明
- 层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。
- 举例
下面代码，出现一个div 标签指定了相同样式不同值的情况，这就是样式冲突。
div{
color:red;
}
div{
color:blue;
注释：原则：通常出现样式冲突，会按CSS书写的顺序，以最后的样式为准。
某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。
<style>
div{color:pink;font-size:20px;}
</style>
<div>
<span>
我是什么颜色的？
</span>
合理使用继承可以简化代码，降低CSS样式的复杂性。对于字体、字号、颜色、行距等文本类属性具有继承性，都可以在body中统一设置，然后影响文档中所有文本。
但是，并不是所有的CSS属性都可以继承，如边框、外边距、内边距、背景、定位、元素高度等与块级元素相关的属性都不具有继承性
三、CSS优先级
1.==继承样式的权重为0。==也就是说，在嵌套结构中，无论父元素样式权重多大，子元素继承时，应用在子元素上的权重都为0，即子元素定义的样式会覆盖所有继承来的样式。
2.==行内样式优先。==应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
3.权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
4.CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。
10、绝对路径和相对路径
1、相对路径：就是相对于自己的目标文件的位置。（指以当前文件所处目录而言文件的位置）————以引用文件之间网页所在位置为参考基础，而建立出的目录路径。因此当保存于不同目录的网页引用同一个文件时，所使用的路径将不相同，故称之为相对。
2、绝对路径：是指文件在硬盘上真正存在的路径。（指对站点的根目录而言某文件的位置）————以web站点为根目录为参考基础的目录路径，之所以成为绝对，意指当所有网页引用同一文件时，所引用的路径都是一样的。
170
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
