CSS基础知识（三）

目录

一、盒子样式

1.圆角边框

2.盒子阴影

3.文字阴影

4.总效果展示

二、浮动

1.标注流（普通流/文档流）

2.浮动

3.清除浮动

---

一、盒子样式

1.圆角边框

⑴语法

        border-radius: length;

        

⑵注意

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

       •如果想要设置一个圆，可以先设置一个正方形的盒子，再将数值修改为盒子边长的一般，或者直接写为50%

       •如果想设置一个圆角矩形，将数值设置为高度的一半就可以

       •该属性是一个简写属性，可以跟四个值，分别代表左上角（border-top-left-radius）、右上角(border-top-right-radius)、右下角(border-bottom-right-radius)、左下角(border-left-radius)

2.盒子阴影

⑴语法

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

值	描述
h-shadow	必填。水平阴影的位置，允许负值（负值向左正值向右）。
v-shadow	必填。垂直阴影的位置，允许负值（负值向上正值向下）。
blur	选填。模糊距离。
spread	选填。阴影尺寸。
color	选填。阴影颜色。
inset	选填。将外部阴影（outset）改为内部阴影。

⑵注意

       •默认的是外阴影（outset），无需写上这个单词，否则会导致阴影无效

       •盒子阴影不占空间，不影响其他盒子排列

 

3.文字阴影

⑴语法

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

值	描述
h-shadow	必填。水平阴影的位置，允许负值（负值向左正值向右）
v-shadow	必填。垂直阴影的位置，允许负值（负值向上正值向下）
blur	选填。模糊的距离。
color	选填。阴影的颜色。

 4.总效果展示

二、浮动

1.标注流（普通流/文档流）

⑴概念

       标注流：指标签盒子在页面中默认的排布规则(从左至右,自上而下)

⑵排布方式

       ①块级元素会独占一行，从上向下顺序排列。

         •常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

       ②行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行。

         •常用元素：span、a、i、em等

2.浮动

⑴概念

       浮动：可以改变元素标签默认的排列方式

⑵应用

       可以让多个块级元素一行内排列显示，float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

⑶语法

       选择器{ float：属性值；}

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

⑷特性

       ①脱离标注普通流的控制（浮）移动到指定位置（动）（俗称脱标）

       ②浮动的盒子不再保留原先的位置

       ③如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列

       ④浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

       ⑤浮动元素会具有行内块元素特性。

        •任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

        •如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

        •浮动的盒子中间是没有缝隙的，是紧挨着一起的

        •行内元素同理

⑸使用过程

       为了约束浮动元素位置，我们网页布局一般采取的策略是先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

⑹注意

       一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他盒子也应该浮动，以防盒子的位置出现问题。浮动的盒子只会影响盒子后面的标注流，不会影响前面的标注流。

3.清除浮动

⑴为什么要清除浮动

       由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占用位置，最后父级盒子高度为0时，就会影响到下面的标注流盒子。

⑵语法

       选择器{ clear：属性值；}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动元素（清除右侧浮动的影响）
both	同时清除左右两侧浮动的影响

       实际工作中，几乎只用clear：both；

       清除浮动的策略是：闭合浮动。

⑶额外标签法（隔墙法）

       在浮动元素末尾添加一个空的标签，例如<div style=”clear:both”></div>，或者其他标签（必须是块级元素）

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

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

⑷父级添加overflow

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

       •优点：代码简洁

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

⑸:after伪元素法

       给父元素添加

       .clearfix: after {

       content: ””

       display: block;

       height: 0;

       clear: both;

       visibility: hidden;

        }

.clearfix { /*IE6、7专有*/

       *zoom: 1;

        }

        •优点：没有添加标签，结构更简单

        •缺点：要照顾低版本浏览器

⑹双伪元素法

       给父元素添加

       .clearfix: before, .clearfix:after {

       content: “”;

       display: table;

        }

        .clearfix: after {

       clear: both;

        }

        .clearfix {

       *zoom: 1;

        }

        •优点：代码更简洁

        •缺点：照顾低版本浏览器

⑺总结

       清除浮动的情况：

       ①父级没高度。

        ②子盒子浮动了。

        ③影响下面布局了。

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加许多无意义的标签，结构化较差
父级overflow:hidden;	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	IE6-7不支持：after，兼容性问题
父级双伪元素	结构语义化正确	IE6-7不支持：after，兼容性问题