黑马程序员技术交流社区

标题: 技术贴 [打印本页]

作者: gitvvvvvv 时间: 2019-3-18 16:28
标题: 技术贴
<h1 >CSS样式表：</h1>
<h3>1、行内式样式表:</h3>
在标签中输入样式<br />
<h1 style="color: pink; font-size: 100px;" >行内样式表</h1>
缺点：并未实现结构与样式分离。
<h3>2、内部样式表</h3>
在head标签之中放入样式；理论上是可以放在html之中的任何地方<br />
type="text/css"在HTML5之前可以省略<br />
《style》<br />
p {<br />
color: pink;<br />
font-size: 160px<br />
}<br />
《/style》<br />
部分实现结构样式分离
<p >内部样式表</p>
只对当前的页面生效，并没实现结构样式完全分离
<h3>3、外部样式表</h3>
新建一个.css文件<br />
在需要样式的.html页面的《head》标签中添加<br />
《link rel="stylesheet" type="text/css" href=".css文件地址"》<br />
type="text/css"在HTML5之前可以省略<br />
<h4>外部样式表</h4>
彻底实现结构与样式分离，可以节约代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css高级技巧</title>
<style type="text/css">
body {
height: 3000px;
}
text
input {
outline: none;
}
.box {
position: relative;
width: 220px;
height: 220px;
}
.die {
display: none;
position: absolute;
top: 0;
left: 0;
width: 220px;
height: 220px;
background: rgba(0,0,0,.3) url(images/arr.png) no-repeat center center;
}
a:hover .die {
display: block;
}
.fen {
display: none;
}
.box2 a:hover .fen{
display: block;
}
textarea  {
width: 60px;
height: 60px;
resize: none;
vertical-align: middle;
}
.shenglv {
width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border: 1px solid #f0f;
}
</style>
</head>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS布局</title>
<style type="text/css">
*  {
font-size: 20px;
}
h2 {
font-size: 25px;
}
h1 {
font-size: 30px;
}
.one {
width: 100px;
height: 100px;
background-color: orange;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: skyblue;
}
.c {
width: 400px;
height: 400px;
}
.ca,
.cb {
width: 200px;
height: 200px;
float: left;
background-color: skyblue;
}
.im {
font-weight: 700;
font-size: 20px;
}
.box {
width: 300px;
height: 300px;
background-color: skyblue;
}
.a1 {
width: 200px;
height: 200px;
background: orange;
margin: 30px;
position: relative;
top: 40px;
left: 40px;
}
.a2 {
width: 200px;
height: 200px;
background-color: orange;
}
.a3 {
background-color: skyblue;
position: relative;
top: 100px;
left: 100px;
}
.b1 {
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute;
top: 100px;
left: 100px;
}
.dwbox {
width: 400px;
height: 400px;
background-color: orange;
position: relative;
}
.d {
position: fixed;
top: 300px;
right: 0;
width: 30px;
height: 30px;
background-color: green;
}
.dwbox2 {
position: relative;
width: 400px;
height: 400px;
background-color: skyblue;
}
.tuo1 {
position: relative;
width: 200px;
height: 200px;
background-color: orange;
}
.tuo2 {
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
margin-top: -25px;
margin-left: -25px;
background-color: skyblue;
}
.t1 {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100px;
height: 100px;
background-color: skyblue;
}
.t2 {
position: absolute;
left: 50px;
top: 50px;
z-index: 1;
width: 100px;
height: 100px;
background-color: red;
}
.t3 {
position: absolute;
left: 100px;
top: 100px;
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<h1>CSS布局</h1>
<ol>
<li>
<h2>CSS布局的三种机制</h2>
<ol>
<li>
<h2>普通流</h2>
块元素独占一行，自上而下<br />
行内元素一行多个，从左到右
</li>
<li>
<h2>浮动</h2>
<ol>
<li>1.脱离标准普通流的控制</li>
<li>2.移动到指定位置</li>
</ol>
folat:left（左对齐）、right（右对齐）<br />
<ol>
<li>可以实现左、右对齐</li>
<li>实现图片文字环绕</li>
<li>大撒旦</li>
</ol>
ps:凡是浮动的元素，文字都会环绕。<br />
<h3>folat（浮漏特）</h3>
<ol>
<li>
<h2>浮漏特之浮</h2>
设置了浮动的元素，会脱离标准流，漂浮在普通流上面，不占字符。<br />
<div class="one"></div>
<div class="two"></div>
</li>
<li>
<h2>浮漏特之漏</h2>
浮动的元素脱离标准流并且在标准流中不再占有位置
</li>
<li>
<h2>浮漏特之特</h2>
float属性会改变元素的display属性。<br />
任何元素都可以浮动。浮动元素会变成类似于行内块元素<br />
浮动的子元素只能参考父元素的内容区（border和pandding内部）对齐；<br />
<div class="c">
<div class="ca">folat</div>
<div class="cb">folat</div>
</div>
浮动只能影响后面的标准流元素
</li>
<li>
<h2>清除浮动</h2>
书写方式：clear:值；<br />
left：清除左对齐浮动；<br />
right：清除右对齐浮动；<br />
both：同时清除所有对齐浮动。<br />
<ol>
<li>
额外标签法<br />
在最后一个浮动的标签后面添加一个空标签，<br />
.空标签 {<br />
clear:both;<br />
}<br />
ps：不推荐！！！！
</li>
<li>
为父级元素添加overflow:hidden;即可实现。
</li>
<li>
after伪元素；<br />
.clearfix:after {<br />
content:"";<br />
display:bolck;<br />
height:0;<br />
clear:both;<br />
visitility:hidden;
}<br />
.clearfix {<br />
*zoom:1;<br />
}
</li>
<li>
双伪元素清除浮动<br />
.clearfix:before<br />
.clearfix:after {<br />
content:"";<br />
display:table;<br />
}<br />
.clearfix:after {<br />
clear:both;<br />
}<br />
clearfix {<br />
*zoom:1;<br />
}
</li>
</ol>
</ol>
</li>
<li>
<h2>定位</h2>
将盒子定位到某一个位置；<br />
布局高度：定位>浮动>标准流；<br />
定位=定位模式+边偏移<br />
边偏移：通过方位名词来进行移动；<br />
定位的盒子有了边偏移才有了价值。
<ol>
定位模式：
<li><h2>static:静态定位</h2>
取消定位
</li>
<li><h2>relative:相对定位</h2>
相对于自己原本的位置进行移动；
<div class="box">
<div class="a1"></div>
</div>
移动以后元素原来的位置仍旧占有
<div class="a2"></div>
<div class="a2 a3"></div>
<div class="a2"></div>
</li>
<li><h2>absolute:绝对定位</h2>
如果父元素没有定位以浏览器进行定位。
<div class="box">
<div class="b1"></div>
</div>
如果父元素有定位，以父元素的进行移动。
<div class="dwbox">
<div class="b1"></div>
</div>
移动以后元素原来的位置不会占有位置，完全托标。
<div class="dwbox2">
<div class="a2"></div>
<div class="a2 b1"></div>
<div class="a2"></div>
</div>
ps:绝对定位若上一级没有定位，则会查看上一级有无有定位。再以具有定位的元素来进行定位<br />
绝对定位口诀：子绝父相
</li>
<li><h2>fixed:固定定位</h2>
完全脱标，只认浏览器可视窗口。（完全不占位置，）
<div class="d"></div>
</li>
</ol>
</li>
</ol>
</li>
<li><h2>拓展</h2></li>
<ol>
<li>
<h2>定位居中</h2>
使用过绝对定位、固定定位无法使用margin进行自动居中。<br />
绝对定位的水平垂直居中<br />
position:absolute;<br />
left:50%;(50%的父元素宽度)<br />
margin-left:负子元素的50%宽度;<br />
<div class="tuo1">
<div class="tuo2"></div>
</div>
</li>
<li>
<h2>堆叠顺序：z-index</h2>
只有使用过相对定位、绝对定位、固定定位才能使用Z-index。<br />
z-index:值（正负整数）值越大，优先级越高。
<div class="tuo1">
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"></div>
</div>
</li>
<li><h2>绝对定位和固定定位</h2>
使用绝对定位和固定定位也可以改变元素的display属性，变成类似于行内块元素。
设置绝对定位和固定定位、浮动的元素，都不是引发外边距的合并。
</li>
</ol>

</ol>
<h1>总结</h1>
<img src="zongjie.png">
<img src="123.png"><br />
布局顺序：
<ol class="im">
<li>先分析结构确定版心宽度初始化页面的CSS默认样式</li>
<li>先分析行模块再分析列模块</li>
<li>书写结构和样式代码</li>
</ol>
</body>
</html>
<body>
<h1>css高级技巧</h1>
<ol>
<li>
<h2>元素的显示与隐藏</h2>
<ol>
<li>
<h2>display</h2>
none:隐藏元素；（不再占有位置）
bolck：显示元素；
<div class="box">
<a href="#">
<div class="die"></div>
<img src="images/3.jpg" alt=""></a>
</div>
<div class="box2">
<ul>
<li>
<a href="#">首页
<ul class="fen">
<li >1123</li>
<li>1123</li>
<li>1123</li>
</ul>
</a>
</li>
<li>123</li>
<li>14123</li>
<li>12312</li>
</ul>
</div>
</li>
<li>
<h2>visibility</h2>
visible:显示元素；
hidden:隐藏元素；（仍占有位置）
</li>
<li>
<h2>overflow</h2>
hidden:超出元素部分隐藏；
visible：不隐藏超出元素；
</li>

</ol>
</li>
<li>
<h2>css界面样式</h2>
<ol>
<li>
<h2>cursor:鼠标样式</h2>
1.default:默认小白鼠标；<br />
2.pointer:变成人手图标;<br />
3.move：十字移动图标；<br />
4.text：文本默认图标；<br />
5.not-allowed:禁止图标。
</li>
<li>
<h2>outline：轮廓线</h2>
平时直接取消轮廓线<br />
书写方式：<br />
input ｛<br />
outline：none;<br />
｝
</li>
<li>
<h2>resize:防止拖拽文本域</h2>
取消拖拽功能；
书写方式：
textarea {
resize:none;
}
</li>
</ol>
</li>
<li>
<h2>vertical-align垂直对齐</h2>
只能设置给行内元素和行内块元素；<br />
无法给块级元素设置。<br />
baseline:基线对齐（默认）；<br />
middle：中线对齐（居中垂直对齐）；<br />
top：顶线对齐（上对齐）；<br />
bottom:底线对齐（下对齐）<br />
<textarea></textarea>dasdsadsa
取消图片下方的留空：<br />
1.只要用除了baseline以外的vertical-align属性就可以取消了<br />
2或者使用display：block  将图片转成块元素也可以取消留空。
</li>
<li>
<h2>溢出文字省略号代替显示</h2>
white-space：normal（自动换行，默认属性）、nowrap（强制一行内显示所有文本）<br />
text-overflow: clip(自动裁剪，默认属性)、ellipsis(超出部分的文字以省略号替代)<br />
书写方式：<br />
｛<br />
white-space:nowrap;<br />
overflow:hidden;<br />
text-overflow:ellipsis;<br />
｝<br />
<div class="shenglv">你好骚哦，为什么穿着品如的衣服</div>
</li>
<li>
<h2>精灵图技术（sprite）</h2>
为了有效的减少服务器的接受次数和发送请求次数，提高网站效率。
</li>
</ol>
</body>
</html>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2