html+css学习第七天（边框、圆角、阴影、浮动布局）

一、边框border

边框：

        border-style: 边框样式；

                值：

                    none：定义无边框；

                    solid：定义实线；

                    double：定义双实线；

                    dashed：定义虚线；

                    dotted：定义点状线；

                    groove：定义3D凹槽效果；

                    ridge：定义3D隆起效果；

        border-width: 边框粗细默认是3px；

        border-color: 边框的颜色默认是黑色(2D)/灰色(3D)。

二、圆角radius

圆角：border-radius:

        可控制四个角的圆角；

                一个值：四个角的圆角；

                两个值：分别代表左上角和右下角、右上角和左下角；

                三个值：分别代表左上角、右上角和左下角、右下角；

                四个值：分别代表左上角、右上角、右下角、左下角；

        单角设置：

                border-top-left-radius: 20px;

                border-top-right-radius: 30px;

                border-bottom-left-radius: 40px;

                border-bottom-right-radius: 50px;

圆角半径可以设置为百分比，正方形的元素设置为50%，可以显示为圆形；

                圆角仅仅设置边框和背景为圆形，元素内容还是原来的矩形。

三、阴影shadow

1.盒子阴影：

eg：

        box-shadow: inset 5px 5px 5px #cfc,5px 5px 5px #cfc;

            值：

                inset：内阴影。             不选直接取值为外阴影。

                第一个值：阴影距离盒子的左右距离，正值往右，负值往左，0盒子正下方。

                第二个值：阴影距离盒子的上下距离，正值往下，负值往上，0盒子正下方。

                第三个值：阴影的清晰度(值不能为负)，阴影值越大会以渐变的形式呈椭圆形往外扩散。

                第四个值：阴影的颜色；

            注意：可以一个元素同时添加多个阴影，值之间以逗号隔开。

2.文本阴影：

eg：

        text-shadow: 5px 5px 5px #cfc;

            值：

                第一个值：阴影距离文本的左右距离，正值往右，负值往左，0文本正下方。

                第二个值：阴影距离文本的上下距离，正值往下，负值往上，0文本正下方。

                第三个值：阴影的清晰度(值不能为负)，阴影值越大会以渐变的形式呈椭圆形往外扩散。

                第四个值：阴影的颜色；

            注意：可以一个元素同时添加多个阴影，值之间以逗号隔开。

四、浮动布局float

1.什么是浮动：

        浮动最开始出现是为了让文本环绕图片，但是发现浮动元素可以设置宽高或内联排列，是介于inline和block之间的一个特别存在。

        地方元素直到遇到父级元素或者同级浮动元素的边沿是停下，多个浮动元素相遇会按照内联的排列方式进行排列。

        使用方法：

                给元素直接添加：float: left/none/right;

                值：

                        none：默认值，元素不浮动，并会显示在其文档流中出现的位置。

                        left：向左浮动，会在页面或者父级元素的左侧。

                        right：向右浮动，会在页面或者父级元素的右侧。

                特点：

                        1.元素使用浮动后会在页面/父元素的左边或者右边停留；

                        2.元素使用浮动元素之后会脱离文档流，参与浮动文档流；

                        3.文本和浮动元素相遇，会在其周围停下来；

                        4.多个浮动元素相遇会按照内联的排列方式进行排列。 

                        5.在浮动文档流中，块元素也是横向排列，而且宽度不再继承父元素的100%。

注意：

        使用浮动布局，必须在最后一个浮动元素结束的地方清除浮动，否则会影响后续页面，也会导致父元素不能根据内容显示高度。

2.为什么需要浮动：

            可以用来创建网页布局，比如左右两端布局栏。

3.为什么需要清除浮动：

            当子元素设置了float属性之后，且父元素没有设置高度，而是由子元素撑出，则导致父元素高度塌陷；

            多个浮动元素内联排列，会覆盖页面中正常的文档流中的内容。

4.清除浮动方法：

            1.加高法：给父元素添加高度，值等于大于浮动子元素的高度，把浮动元素关在有高度的盒子之内；

            2.clear: both;给浮动元素添加，添加后可以控制当前元素不以内联排列的方式去找其他浮动元素；

            3.隔墙法：给浮动元素之间添加clear: both;让两个浮动元素之间添加一堵墙隔开。

（1）最基本的清除浮动的方法：

                    是在在最后一个浮动元素的后面添加一个元素，设置这个元素clear: both;

eg：

.clear{

            clear: both;

        }

（2）在不添加新元素的情况下清除浮动：（最常用的方法）

            浮动元素都会有一个共同的父元素，可以为这个父元素添加一个后缀伪元素，在后缀中清除浮动。

eg：（clear-fix为类标签选择器名）

        .clear-fix::after{

            content: "";

            display: block;

            clear: both;

        }

多学一招：

鼠标指针设置为超衔接：

                cursor: pointer;