CSS属性操作/下
CSS属性操作/下
1.伪类
anchor伪类
跟<a>/</a>有关：专用于控制链接的显示效果
a:link（没有接触过的链接），用于定义了链接的常规状态。
a:hover（鼠标放在链接上的状态），用于产生视觉效果。
a:active（在链接上按下鼠标时的状态），用于表现鼠标按下时的链接状态。
伪类选择器：伪类值得是标签的不同状态：
a ===》点过状态 没有点过的状态 鼠标悬浮状态 激活状态
<style> a:link{ #未访问的链接 color: #2459a2; } a:visited{ #已访问的链接 color: #FF0000; } a:hover{ #鼠标移动到链接上 color: antiquewhite; } a:active{ #选定的链接 格式：标签：伪类名称{css代码} color: violet; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .top{ background-color: rebeccapurple; width: 100px; height: 100px; } .bottom{ background-color: green; width: 100px; height: 100px; } .outer:hover .bottom{ background-color: yellow; } 注意:一定是outer:hover 控制outer里某一个标签,否则无效 .top:hover .bottom{ background-color: yellow; } </style> </head> <body> <div class="outer"> <div class="top">top</div> <div class="bottom">bottom</div> </div> </body> </html>
before after伪类
：before p:before 在每个<p>元素之前插入内容
：after p:after 在每个<p>元素之后插入内容
.item{
width: 50px;
height: 50px;
background-color: #99cc99;
}
p :after{
content: "hi";
display: block;
color: #FF0000;
}
<div class="outer">
<div class="top"></div>
<div class="bottom"></div>
<p>hello</p>
</div>
2.line-height 行高
.item{
width: 300px;
height: 300px;
background-color: #2459a2;
/*overflow: scroll; #滚动条*/
overflow:hidden; #超出部分隐藏
line-height: 10px;
}
3.外边距（margin）和内边距（padding）
margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding：用于控制内容与边框之间的距离。
Border(边框)：围绕在内边距和内容外的边框
Content：盒子的内容，显示文本和图像
margin（外边距）
单边外边距属性：
margin：改变位置，不影响元素大小
padding：会改变元素大小
*{
margin: 0;
}
.item{
width: 200px;
height: 200px;
background-color: #2459a2;
/*padding: 20px;*/
margin-bottom: 50px;
padding: 50px;
}
.item1{
width: 200px;
height: 200px;
background-color: #99cc99;
padding: 20px;
/*margin-top: 60px;*/
/*padding: 20px;*/
}
<div class="item">div1</div>
<div class="item1">div2</div>
margin:10px 20px 20px 10px；
上边距为10px
右边距为20px
下边距为20px
左边距为10px
margin:10px 20px 10px;
上边距为10px
左右边距为20px
下边距为10px
margin:10px 20px;
上下边距为10px
左右边距为20px
margin:25px;
所有的4个边距都是25px
居中应用：margin：0 auto
padding（内边距）
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变一切都改变。设置同margin。
思考1：body的外边距
边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有HTML），在默认情况下，body距离html会有若干像素的margin，具体数据因各个浏览器不尽相同，所有body中的盒子不会紧贴浏览器窗口的边框了，为了验证这一点，加上：
body{
border: 1px solid;
background-color: cadetblue;
}
>>>解决方法：
body{
margin: 0;
}
思考2：margin collapse（边界塌陷或者边界重叠）塌陷只限上下塌陷
1、 兄弟div：
上面div的margin—bottom和下面div的margin—top会塌陷，也就是会取上下两者margin里最大作为显示值
2、 父子div：
if 父集div中没有border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline，content中的其中一个，然后按此div进行margin；
*{
margin: 0;
}
.outer{
width: 300px;
height: 300px;
background-color: #99cc99;
/*margin: 100px 100px;*/
/*border: 1px solid red;*/
overflow: hidden; 在父集里面增加overflow：hidden
}
.c1{
width: 100px;
height: 100px;
background-color: #2459a2;
margin: 100px 100px;
}
>>>解决方法：
overflow：hidden；
4.float属性
1.所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流失排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
float：
会判断上一个元素是否浮动，如果浮动，紧贴上一个元素。
否则，与上一个元素保持垂直距离不变
2.清除浮动（推荐）
clear语法：
clear：none| left | right | both
取值：
none：默认值。允许两边都可以有浮动对象
left：不允许左右有浮动现象
right：不允许右边有浮动现象
both：不允许有浮动对象
但是需要注意的是：clear属性只会对自身起作用，而不会印象其他元素，如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
''' .clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容； content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。 display: block; <----加入的这个元素转换为块级元素。 clear: both; <----清除左右两边浮动。 visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。 visibility:hidden;仍然占据空间，只是看不到而已； line-height: 0; <----行高为0； height: 0; <----高度为0； font-size:0; <----字体大小为0； } .clearfix { *zoom:1;} <----这是针对于IE6的，因为IE6不支持:after伪类，这个神 奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。 整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。 之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。 <div class="head clearfix"></div> '''
3.overflow：hidden
overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。
4.塌陷问题
container{
width: 200px;
height: 200px;
}
.box1{
width: 200px;
height: 200px;
background-color: aquamarine;
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color:chartreuse ;
float: left;
}
.footer{
width: 300px;
height: 100px;
background-color: #2459a2;
}
.clearerfix:after{
content: "";
clear: both; #清除浮动
}
<div class="container clearerfix">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>
<div class="footer">footer</div>
5.position
static
static默认值、无定位，不能当做绝对定位的参照物，并且设置标签对象left、top等值是不起作用的
position：relative 相对定位
1.参照物是元素之前文档流中的位置，即以自己原始位置为参照物
2.元素不脱离文档流（之前的空间位置依然存在）
3.然后Top、Right、Bottom、Left用百分比宽度表示。
注意：position：relative的一个主要用法：方便绝对定位找到参照物
position：absolute 绝对定位
1. 参照物是最近已定位祖先元素，如果元素没有定位，那么就是（body元素）
2.元素脱离文档流（之前的空间位置依然存在）
父元素：position：relative
定位的子元素：position absolute
position：fixed 脱离文档流
1.属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
注意：一个元素若设置了position：absolute /fixed；则该元素就不能设置float。
因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是relative却可以。因为它原本所占的空间仍然占据文档流。
脱离文档流的：float position：absolute position:fixed
