边框及浮动布局

目录

边框

border-radius

盒子阴影

文本阴影

浮动布局

使用方法：

特点     

  为什么需要浮动  

清除浮动

---

边框

        边框在css里的属性名为border，常用的是border：1px solid；设置一个边框为1px，实线型的样式。除此之外，border-style有很多的样式，列举如下：

        border-style：none：定义无边框；

        border-style：solid：定义实线；

        border-style：double:定义双实线；

        border-style：dashed：定义虚线；

        border-style：dotted：定义点状线；

        border-style：groove：定义3D凹槽效果；

        border-style：ridge：定义3D隆起效果；

        除了常用的border-style样式之外，border-width：边框粗细默认为是3px；border-color：边框的颜色默认是黑色（2D）/灰色（3D）。

---

border-radius

        border-radius： 圆角，我们在做静态网页时，对于按钮之类的有时候会用到圆角使其变得更加美观。一般border-radius后面有四个值：   分别控制四个角的圆角。

        一个值:四个角的圆角。

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

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

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

---

盒子阴影

        box-shadow，与圆角相同，也有四个值，但是其最后一个值与圆角不一样：

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

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

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

        第四个值：阴影的颜色；

        可以给一个元素同时添加多个阴影，值之间以逗号隔开。如box-shadow: inset 5px 5px 5px #cfc,5px 5px 5px #cfc;

---

文本阴影

        text-shadow，与盒子阴影的值相同：

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

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

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

        第四个值：阴影的颜色；

---

浮动布局

        什么是浮动：浮动最开始出现是为了让文本环绕图片，但是发现浮动元素可以设置宽高或内联排列，是介于inline和biock之间的一个特别存在。 浮动元素直到遇到父级元素或者同级浮动元素的边沿时停下，多个浮动元素相遇会按照内联的排列方式进行排列。

        元素在设置了浮动布局之后，会脱离原有的文档流，参与浮动文档流；在浮动文档流中，块元素也是横向排列，而且宽度不在自动继承父元素的100%。

---

使用方法：

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

        他的值有：

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

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

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

        首先先写一个列表：

        <ul id="web-list" class="clear-fix">
            <li>HTML</li>
            <li>css</li>
            <li>js</li>
            <li>web</li>
            <li>vue</li>
       

        </ul>

        然后再给此列表加上浮动，并且加上圆角，间隔以及背景颜色后的代码如下图：

            float: left;
            background-color: blanchedalmond;
            margin: 0 30px;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;

         运行效果如下图

---

特点     

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

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

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

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

---

  为什么需要浮动  

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

                为什么要清除浮动：

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

                    多个浮动元素相遇会按照内联的排列方式进行排列，会覆盖页面中正常的文档流中的内容。

---

清除浮动

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

        清除浮动的方法：

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

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

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

        .clear-fix::after{
            content: "";
            display: block;
            clear: both;
        }

          清除浮动后效果图：

 

---