CSS中级
CSS中级
定位position
语法：定位模式+边偏移（盒子移动的最终位置）top bottom left right
position 属性规定应用于元素的定位方法的类型（static、relative、fixed、absolute 或 sticky）
position: static; 的元素不会以任何特殊方式定位；它始终根据页面的正常流进行定位： 标准流，较少使用
fixed元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动： 固定到某一个版心旁边
relative 定位；相对定位元素的定位是相对其正常位置（原来位置），原来位置仍然保留
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
absolute 定位将子元素约束在父亲盒子里
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于<html>:
absolute 定位的元素和其他元素重叠。
不占有原来位置
h2
{
position:absolute;
left:100px;
top:150px;
}
子绝父相 父亲需要占有位置，而子元素不需要占有位置
sticky
它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。
元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。
这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
重叠元素叠放顺序
在对元素进行定位时，它们可以与其他元素重叠。只有定位的盒子才有这个属性。
z-index 属性指定元素的堆栈顺序（哪个元素应放置在其他元素的前面或后面）。如果值相同，后来者居上
元素可以设置正或负的堆叠顺序：
具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。
注意：如果两个定位的元素重叠而未指定 z-index，则位于 HTML 代码中最后的元素将显示在顶部。
定位的特性
盒子添加了绝对定位或相对定位、浮动、固定，可以直接设置高度和宽度了，若不设置，默认为内容大小
浮动元素不会压住盒子，但会压住文字的，但绝对定位和固定定位会。
浮动是做文字环绕效果的，不会压住文字
绝对定位盒子水平居中小算法
阴影
盒子阴影
box-shadow：h-shadow v-shadow blur spread color inset;
水平阴影位置，竖直阴影位置，模糊距离，阴影尺寸，阴影颜色，内部阴影
box-shadow: 10 px 10 px 10px -4px black(rgba(0,0,0,.3)) 默认外阴影不能写
阴影不占空间
鼠标悬停添加阴影：div:hover{box-shadow:~;}
文字阴影
text-shadow:h-shadow v-shadow blur color;
同盒子阴影
text-shadow：5px 5px 6px rgba(0,0,0,.3);
浮动
传统网页布局三种方式：标准流、浮动、定位
标准流：标签按规定好的排列方式排列
行内块元素间有空隙，难以控制，浮动可以改变元素默认排列方式
多个元素纵向排列找标准流，横向排列找浮动
语法：选择器{float：属性值；}
float属性创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘
属性值有：none（不浮）left right
浮动特性
- 浮动元素会脱离标准流（脱标）不再保留原来的位置 标准流会占有其原来位置 浮动元素在其上
- 浮动元素一行显示 若显示不了会自动换行 ，沿上端对齐
- 行内块元素特性 可以设置高度和宽度 若未设置宽度，则为内容的宽度
浮动经常搭配标准流父亲使用
浮动的盒子只影响其后的标准流，不会对前面的标准流有影响
清除浮动
为什么要清除？
父盒子在很多情况下不方便给高度，但子盒子浮动又不占有位置，最后父盒子高度变为0，会影响下面的标准盒子。
清除浮动元素的影响
选择器{clear：属性值；}
属性值：left both right
方法：
- 额外标签法，浮动元素末尾添加标签 找到最后一个浮动的元素，在后面添加一个标签只能是块级元素
.clear{clear:both;}
<div class='clear'></div>
- 父亲添加overflow属性，将其属性值设置为hidden或auto
-: after伪元素法 在父级那添加clearfix类
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
- 双伪元素清楚浮动 给父元素添加类clearfix
content:'';
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}
隐藏元素
h1.hidden {visibility:hidden;} visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
h1.hidden {display:none;}display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。 display:block;显示或转为块级
效果不一样
Overflow
visible: 默认值。内容不会被修剪，会呈现在元素框之外。
hidden: 内容会被修剪，并且其余内容是不可见的。 若有定位的盒子，不能添加这个属性
scroll: 不管有无内容溢出，浏览器会显示滚动条以便查看其余的内容。
auto: 如果内容溢出，则浏览器会显示滚动条以便查看其余的内容，否则不显示。
inherit: 规定应该从父元素继承 overflow 属性的值。
div {
width: 200px;
height: 50px;
background-color: #eee;
overflow: visible;
}
PS切图
- 图层切图 右键图层，快速导出为png
- 切片切图 切片工具手动 导出存储为web所用格式jepg 选中的切片 透明效果隐藏背景
- ps插件切图 cutterman
CSS 属性书写顺序
布局定位属性：display、position、float、clear、visibility
自身属性：width、height、margin、padding、border、background
文本属性：color、font、
其他属性（css3）
扫一扫
1193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
