圆角边框

border-radius属性用于设置元素的外边框圆角。

语法：

border-radius: length;

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果。

.参数值可以为数值或百分比的形式

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

.如果是个矩形，设置为高度的一半即可

.该属性是一个简写属性，可以跟4个值，分别代表左上角、右上角、右下角、左下角

.分开写：border-top-left-radius、border-top-right-radius、bordor-bottom-right-radius和border-bottom-left-radius

盒子阴影

可以使用box-shadow属性为盒子添加阴影

注意：

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

1.定位

1.1 为什么需要定位？

1. 浮动可以让多个块级盒子一行没有缝隙的显示，经常用于横向排列盒子。

2. 定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置，并且可以压住其它盒子。

1.2定位组成

定位：将盒子定在某一个位置，所以定位也是在摆盒子，按照定位的方式移动盒子。

定位=定位模式+边偏移

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

定位模式

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

| 值 | 语义 |

| static | 静态定位 |

| relative| 相对定位

| absolute| 绝对定位 |

| fixed | 固定定位

边偏移

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

相对定位

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

语法：

选择器 { position: relative; }

相对定位的特点：

1. 它是相对于自己原来的位置来移动的

2. 原来在标准流的位置继续被占有，后面的盒子仍以标准流的方式对待它。（不脱标，继续保留原来的位置）

绝对定位absolute

绝对定位是元素在定位的时候，是相对于他的祖先元素来说的（拼爹型）。

语法： 选择器 { position: absolute; }

绝对定位的特点：

1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位。

2.如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

3.绝对定位不再占有原来的位置（脱标）。

子绝父相的由来

“子级是绝对定位的话，父级要用相对定位“

1. 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

2. 父盒子需要加定位限制子盒子在父盒子内显示。

3. 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

当然子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

固定位置fixed

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

语法：

选择器 { position: fixed; }

固定定位的特点：

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

2. 跟父元素没有任何关系。

3. 不随滚动条滚动。

4. 固定位置不再占有原来的位置。

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

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

小算法：

1. 让固定定位的盒子Left：50%，走到浏览器可视区（也可以看做版心）的一半的位置。

2. 让固定定位的盒子margin-left: 版心宽度的一半距离。就可以让固定定位的盒子贴着版心右侧对齐了。

粘性定位sticky

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

语法：

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

粘性定位的特点：

1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）。

2. 粘性定位占有原来的位置（相对定位特点）。

3. 必须添加top、left、right、bottom其中一个才有效。

定位叠放次序z-index

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

语法：

选择器 { z-index: 1; }

注意：

1. 数值可以是正整数、负整数或是0，默认是auto,数值越大，盒子越靠上。
2. 如果属性值相同，则按照书写顺序，后来居上。
3. 数字后面不能加单位。
4. 只有定位的盒子才有z-index属性。

定位的拓展

1.绝对定位的盒子水平垂直居中

加了绝对定位的盒子不能通过margin: 0 auto;来水平居中，但是可以通过以下计算实现水平和垂直居中。

1.left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。 2.margin-left: -100px;：让盒子向左移动自身宽度的一半。

例如：

定位的特殊性

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

1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。

2. 块级元素添加绝对或者固定定位，如果不给宽度和高度，默认大小是内容的大小。

3. 脱标的盒子不会触发外边距塌陷 浮动元素、绝对定位、固定定位元素都不会触发外边距合并的问题。

绝对定位（固定定位）会完全压住盒子

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位）会压住下面标准流所有的内容

元素的显示和隐藏

类似网站广告。当我们点击关闭就不见了，当往我们重新刷新页面时，就会重新出现。

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

1. dispaly显示隐藏

2.visibility显示隐藏

3.overflow溢出显示隐藏

display属性

display属性用于设置一个元素如何显示。

. display: none; 隐藏对象

. display: block; 除了转换为块级元素之外，同时还有显示元素的意思。

display隐藏元素后，不再占有原来的位置。

后面应用极其广泛，搭配JS可以做很多网页特效。

visibility可见性

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

. visibility: visible; 元素可视

. visibility: hidden; 元素隐藏

visibility隐藏元素后，继续占有原来的位置。

overflow溢出显示隐藏

overflow属性指定了如果内容溢出元素的框（超出其指定高度和宽度）时，会发生什么。

注意：

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow:hidden, 因为它会隐藏多余的部分。