圆角边框：

border-radius:length;

单位可以为像素，也可以为百分比

如果是正方形 想设置一个圆，把数值修改为高度或者宽度的一半即可，或者直接写50% 

如果是矩形 设置高度的一半，就可以实现两边为圆角的边框

盒子阴影：

box-shadow: h-shadow v-shadow blur spread color inset;

box-shadow: 10px 10px 10px 4px rgba(159, 154, 145, .5) ;

注意：

1. 默认的是外阴影（outset）但是不可以写这个单词，否则导致阴影无效
2. 盒子阴影不赞用空间，不会影响其他盒子排列

文字阴影：

text-shodow: h-shadow v-shadow blur color;

 box-shadow: 10px 10px 10px rgba(159, 154, 145, .5) ;

float浮动：

• 普通留（普通留/文档流）

        按照标签规定好默认方式排列 块级元素独占一行 行内元素按照顺序，从左到右排列，碰到父元素边缘则自动换行

• 浮动

        多个块级元素纵向排列找标准留，多个块级元素横向排列找浮动

        float属性属于常见浮动框，将其移动到一边，直到左边缘或者右边缘触及包含块或另一个浮动框的边缘

浮动的特性：

1. 浮动元素会脱离标准流（脱标）        
2. 浮动的元素会一行显示并且元素顶部对齐
3. 浮动的元素会具有行内块元素的特性

浮动布局注意点

•     浮动标准流的父盒子搭配

          先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

• 一个元素浮动了，理论上其余兄弟元素也要浮动。

        一个盒子里有多个盒子，如果其中一个盒子浮动了，那么其他兄弟盒子也应该浮动，以防引起问题

        浮动的盒子只会影响浮动盒子后边的标准流，不会影响前面的标准流

• 定位

清除浮动

由于浮动元素不再占用原标准流的位置，所以它会对后边的元素排版产生影响

清除浮动本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身就有高度，则不需要清除浮动
• 清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下边的标准流了

语法:

选择器{clear:属性值;}

额外标签法：

        额外标签法会在浮动元素末尾加上一个空的标签。例如

或其他标签（br或块级元素）

优点：通俗易懂，书写方便 

缺点：添加许多无意义的标签，结构化交差

父级添加overflow

     可以给父级添加overflow属性，将其属性值设置为hidden、auto或scroll   

优点：代码简洁

缺点：无法显示代码溢出的部分

after伪元素：

        :after方式是额外标签法的升级版。也是给父元素添加

 .clearfix:after {    content: "";    display: block;    height: 0;    clear: both;    visibility: hidden;}.clearfix {/* IE6、7专有*/    *zoom: 1;}

优点：没有新增加标签，结构更加简单

缺点：照顾低版本浏览器

CSS定位

定位的组成

        定位：将盒子定在某一个位置，所以定位也是在拜访盒子，按照定位的方式移动盒子。定位 = 定位模式 + 边偏移

        定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。

定位模式

• 定位模式决定该元素的定位方式，它通过CSS的positive属性来设置，其值可以分为四个

属性	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移

• 边偏移就是定位的盒子移动到最终的位置，有top、bottom、left、right四个属性。

静态定位（static）

        静态定位是默认元素定位方式，无定位的意思。

语法：

        选择器 { position: static; }

• 静态定位按照标准流特性来摆放位置，他没有边偏移
• 静态定位在布局中很少用到

相对定位 （relative）（重要）

        相对定位是元素在移动位置的时候，是相对于它原来的位置来说的

语法：

        选择器 {position: relative; }

相对定位特点：（务必记住）

• 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）
• 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它（不脱标，继续保留原来位置）

绝对定位（absolute）（重要）

        绝对定位是元素在移动位置的时候，是相对于他的祖先元素来说的

语法：

        选择器 {position: absolute; }

绝对定位特点（务必记住）

• 如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document文档）
• 如果祖先元素有定位（相对、决对、固定定位）则以最近一级的有定位的祖先元素为参考点移动位置。
• 绝对定位不占有原来的位置（脱标）

子元素用绝对定位，父元素要用相对定位

固定定位 fixed（重要）

        固定定位是元素固定于浏览器可视区的位置，主要使用场景可以在浏览器页面滚动时元素的位置不会改变

语法：

        选择器 {position: fixed; }

固定定位的特点：（务必记住）

• 以浏览器的可视窗口为参照点移动元素

        跟父元素没有任何关系

        不随滚动条滚动

• 固定定位不占有原先位置

         固定定位也是脱标的，其实固定定位可以看作时一种特殊的绝对定位

固定定位小技巧：固定在版心右侧位置

小算法：

1. 让固定定位的盒子left:50%走到浏览器可视区（也可以看作版心）的一半位置
2. 让固定定位的盒子margin-left:版心宽度的一半距离，多走版心宽度的一半位置就可以让固定定位的盒子贴着版心对齐了

粘性定位sticky（了解）

粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的

语法：

        选择器 {position: sticky; top: 10px; }

粘性定位的特点：

• 以浏览器的可视窗口为参照点移动元素（固定定位特点）
• 粘性定位占有原先的位置（相对定位特点）
• 必须添加top、left、right、bottom其中一个才有效

                跟页面滚动搭配使用。兼容性较差，IE不支持

定位叠放次序 z-index

        在使用定位布局时，可能会出现盒子重叠的情况，可以使用z-index来控制盒子的前后次序（z轴）

语法：

        选择器 { z-index: 1; }

• 数值可以是证书，负整数或0，默认时auto，数值越大，盒子越靠上
• 如果属性相同，则按照书写顺序，后来居上
• 数值后面不能加单位
• 只有定位的盒子才有z-index属性

定位的特殊性：

绝对定位和固定定位也和浮动类似

• 行内元素添加绝对或者固定定位，可以直接设置高度和宽度
• 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容大小
• 脱标的盒子不会触发外边距塌陷
  • 浮动元素、绝对定位（固定定位）元素都不会触发外边距合并问题
• 绝对定位（固定定位会完全压住盒子）
  • 浮动元素不通，只会压住它下边标准流的盒子，但是不会压住下面标准流盒子里面的文字、图片
  • 但是绝对定位（固定定位）会压住下面标准流所有的内容

元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新加载页面，会重新出现

本质：让一个元素在页面中隐藏或显示出来

1.         display 显示隐藏
2.         visibility 显示隐藏
3.          overflow 溢出显示隐藏

Display属性

• display：none ；隐藏对象
• display：block ；除了转换为块级元素之外，同时还有显示块级元素的意思
  • display隐藏元素后，不再占用原来的位置

visibility可见性

visibility属性用于指定一个元素应可见还是隐藏

• visibility：visible；元素可视
• visibility：hidden；元素隐藏
  • visibility隐藏元素后，继续占有原来的位置
    • 如果隐藏元素想要原来的位置，就用visibility：hidden
    • 如果隐藏元素不想要原来的位置，就用display：none（用处更多  重点）

overflow溢出

           一般情况下，我们都不想让溢出的内容显示出来，因为溢出部分会影响布局。但是如果有定位盒子，请慎用overflow：hidden 因为会隐藏多余部分