首页 > 代码库 > HTML 二
HTML 二
【复合选择器】
1，继承选择器（后代选择器）----用空格（注意：是一个空格）隔开
2，并列选择器---用逗号来隔开的（英文状态下面的逗号）
3，指定式选择器----标签后面直接写类或者id
【边框属性】
border：1px solid #ff0000；----边框的简写方式----上下左右都是1px 的大小
solid---实线
dashed---虚线
border-bottom:1px dashed #CCCCCC;----下边框
【css的两个性质】：
（1）.层叠性： 后写的css属性会覆盖先写的css属性优先生效； 后写的css样式条会覆盖先写的css样式条 前 *****提权重相同的情况下；
（2）.继承性； 某些css的属性会通过父级标签继承给后代标签，这种性质叫做css的继承性， *****注意：不 是所有的css属性都能够继承的；
****经验：文字控制属性都具有继承性
【背景图】
授之以于鱼不如授之予渔
1，background：
url（相对路径）
平铺方式： repeat--重复 no-repeat---不重复
对齐方式： 第一个值代表左右，第二个值代表上下
（特殊值 水平--》left、center、right。）
（特殊值 垂直--》top、center、bottom。）
***如果是一张小图就会层叠
background:url(bg.gif) no-repeat 100px 500px;
【行高】
line-height：
*****行高有一个最重要的应用，让一段文字在一个指定的容器内垂直居中）---》高度写多少行高就写多少
一般行高都是在20左右----控制我们行与行之间举例。常用的值 22--24
水平 垂直
*****特殊值可以颠倒位置 第一个值确实代表左右 第二值代表上下
background-color:#EEE;-------背景色
background-image:url(bg4.jpg); ----背景图
background-position: 100px 200px;---背景图定位
background-repeat:no-repeat;-----背景图平铺方式
background-attachment:fixed;----背景图固定
【文本修饰属性】
text-decoration：
（1）下划线：underline；
（2）上划线：overline；
（3）贯穿线：line-through；
（4）.取消文本修饰 ： none；
【超链接的四个状态---伪类
】
a:link 未访问的链接时的状态
a:visited 已访问的链接时的状态
a:hover 鼠标经过链接时的状态
a:active 鼠标点击链接时的状态
a:link,a:visited连在一起书写经常用来表示超链接的默认
*****display:inline-block;----行内块元素
【盒子模型组成】
1，width宽height高
2，margin---外边距 盒子的外面距离都叫做margin（top、bottom、left、right分别代表上下左右）
3，padding--内边距 盒子里面的距离都叫做padding（top、bottom、left、right分别代表上下左右）
4，border---边框
【padding：值】
1，padding：10px;代表的是上下左右都是10px
2，padding：20px 50px； 第一个值代表上下 第二个值代表左右
3，padding:20px 50px 100px; 第一个值代表上 第二个值代表左右 第三个值代表下
4，padding:20px 50px 100px 200px; 分别代表 上 右 下 左
同理：
1，margin：10px;代表的是上下左右都是10px
2，margin：20px 50px； 第一个值代表上下 第二个值代表左右
3，margin:20px 50px 100px; 第一个值代表上 第二个值代表左右 第三个值代表下
4，margin:20px 50px 100px 200px; 分别代表 上 右 下 左
要求：盒子内边距 上下 10px 左右20px
数学题：
边框是占位置、像素
内边距也是占位置的
1，简单：宽300px height 200px border：3px solid #000；最后宽高是多少？
width和height是最稳定的，然后就是我们的内边距，最后选择外边距
*****能用宽高就不用边距，能用内边距就不用外边距，实在没办法可以用外边距
【外边距塌陷】
定义:垂直两个盒子紧挨在一起会出现合并现象，它会以最大的外边距来算---这是一个正常现象每个浏览器都会这么算
嵌套两个盒子出现问题bug 解决办法： 1，给外面的父盒子加边框 2，overflow:hidden;--溢出隐藏
【行内元素的内外边距问题】
1，行内元素margin和padding的垂直是不起作用，只有水平起作用。
*****行内元素的的垂直效果只受行高的控制
【盒子的居中】
margin：0 auto；----块居中
list-style:none;-----去除无序列表前面的点
【浮动】
float：浮动(left、right分别代表左右)
****如果没有宽高内边距不需要减值
【label标签--用户体验】
<label for="in">搜索一下:</label><input type="text" class="ipt" id="in"/>---点击文字光标定位
【标准流】
1，块级元素垂直排列，行内元素水平排列。
【浮动流】
float：浮动（left、right）
一旦浮动就脱离了标准流，那么后面的块级元素就会升上来。
排版方式：我们优先选择标准流，它是最稳定的。其次会选中浮动，最后会选中定位
但是：如果你的网页里面既有标准流又有浮动流那么就会出现谁压着谁的问题
【浮动和标准流层叠的解决方法】
1，清除浮动clear:both;----》清除两端浮动
【溢出隐藏】
1，overflow:hidden;-----溢出隐藏相当于裁剪
2，overflow:auto;------隐藏出现滚动条
【溢出隐藏的作用】
1，它可以测试出我们div块的高度、可以撑开我们高度自动的盒子。
2，height:auto----高度自动会根据里面的盒子的高度来撑开
【导航做法】
1，在线的导航它都是ul li 里面包含<a href="http://www.mamicode.com/#">文字</a> 假链接，黑链
2，以后我们的导航都是ul li
3，repeat-x 水平平铺
【定位】
1，position:relative;相对定位-----占位、相对于它自身、自己来定位
2，position:absolute;绝对定位------不占位、完全脱离标准流、相对于body来定位、他是相对于整个页面
【去除图片链接的边框】
img{ border:none;}-----公用样式
*****如果有定位内边距是不起任何作用
绝配：父相子绝
特殊：父绝子绝
cursor:pointer;---鼠标小手
【上合网站】
建立站点：站点名称都是英文的名字
1）images----图片文件夹
2) css----样式文件夹
3) js、javascript----样式文件夹
4）flash-----动画文件
导入站点：
1）菜单栏---站点----新建站点
删除站点：站点---管理站点
首页----index.html
2）窗口---文件----快捷键F8
【上合网】
width:100%;---通栏
窗口---层---网页层--可以选择所有切片一起删除
窗口---层---优化----改格式
【隐藏代码的快捷键】
ctrl+shift+j----隐藏代码
*****定位盒子如何居中
如果一个盒子你加了定位，margin：0 auto;就不起作用了?
解决办法：给浮动加left:50%, margin-left:负值
【清除浮动的4种方法】------外边距塌陷-----父亲没有高度儿子加了浮动，兄弟就会挨着它
1，溢出隐藏解决法：overflow:hidden;
优点：简单好记，缺点：裁剪多余的部分，有定位就别用它了
<style type="text/css">
.faher{ width:600px; height:auto; border:1px solid #000; overflow:hidden;}
.left{ width:200px; height:300px; float:left; background-color:#990;}
.right{ width:200px; height:300px; float:right; background-color:#F90;}
.borth{width:600px; height:300px; background-color:#99F;}
</style>
</head>
<body>
<div class="faher">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="borth"></div>
2，额外标签法
万事万物都有始有终， 恐龙 灭绝 人类 1-2亿年
优点：除了简单没别的优点了，缺点：盒子太多
<style type="text/css">
.faher{ width:600px; height:auto; border:1px solid #000; }
.left{ width:200px; height:300px; float:left; background-color:#990;}
.right{ width:200px; height:300px; float:right; background-color:#F90;}
.borth{width:600px; height:300px; background-color:#99F;}
.clear{ clear:both;}
</style>
</head>
<body>
<div class="faher">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="borth"></div>
3，clearfix:after 伪类清除法 很难
<style type="text/css">
.faher{ width:600px; height:auto; border:1px solid #000; }
.left{ width:200px; height:300px; float:left; background-color:#990;}
.right{ width:200px; height:300px; float:right; background-color:#F90;}
.borth{width:600px; height:300px; background-color:#99F;}
.clearfix:after{
content:".";/*内容、内容里面有的时候会有个点可以省略*/
visibility:hidden;/*隐藏对象*/
height:0; /*高度0*/
display:block; /*转换为块元素*/
clear:both; /*清除两端浮动*/
}
.clearfix{
zoom:1;/*给IE6用的*/
}
</style>
</head>
<body>
<div class="faher clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="borth"></div>
4，clearfix:before,clearfix:after-----伪类新版法
<style type="text/css">
.faher{ width:600px; height:auto; border:1px solid #000; }
.left{ width:200px; height:300px; float:left; background-color:#990;}
.right{ width:200px; height:300px; float:right; background-color:#F90;}
.borth{width:600px; height:300px; background-color:#99F;}
.clearfix:before,.clearfix:after{
content:"";
display:table;/*转换为table、css3新加属性*/
}
.clearfix:after{
clear:both;
}
.clearfix{
zoom:1;/*给IE6用的*/
}
</style>
</head>
<body>
<div class="faher clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="borth"></div>
外边距合并或者清除浮动 这4种方法都能解决
无单位：font-weight:500; zoom:1
HTML 二