前端学习第六天

今天是学习前端的第六天，主要学习内容为：圆角边框、盒子阴影以及浮动。
圆角边框：我们可以使用border-radius属性来设置元素的外边框圆角，其语法为：border-radius:length;参数可以为数值或是百分比的形式，该语法为复写形式，其后可跟一个值（四个圆角相同）、两个值（左上角和右下角为第一个值，右上角和左下角是第二个值）、三个值（左上角为第一个值，右上角和左下角为第二个值，右下角为第三个值）或是四个值（左上角、右上角、左下角、右下角）。也可以四个角分开写，但对顺序有要求，需先上下后左右，例如:border-top-left-radius:length;。如果盒子是一个正方形，那么可以通过将数值改为高度或者宽度的一半，或直接写为50%的方式将边框设置成圆。其过程可以理解为将圆与边框的四个角分别内切，然后裁剪。
盒子阴影：我们可以使用box-shadow属性来为盒子添加阴影，其语法为：box-shadow:h-shadow v-shadow blur spread color inset;其中有两个必需属性:h-shadow（控制阴影水平方向的位置）和v-shadow（控制阴影垂直方向的位置），四个可选属性:blur（模糊距离）、spread（阴影的尺寸）、color（阴影的颜色）以及inset（将外阴影改为内阴影）。需要注意的是：1.默认的阴影是外阴影（outset），但是不能写这个单词，否则阴影无效，因此使用外阴影时不写单词，使用内阴影时写上inset；2.盒子阴影不占用空间，不会影响其他盒子的排列。
浮动：传统css的三种布局机制为标准流、浮动和定位，浮动可以改变元素标签默认的排列方式，让多个块级元素一行无缝显示，其语法为：选择器{float:属性值;}。属性值包括：none（默认值，不浮动）、left（元素向左浮动，直到左边缘触及包含快或另一个浮动框的边缘）和right（元素向右浮动，直到右边缘触及包含快或另一个浮动框的边缘）。浮动具有以下特性：1.浮动的元素找相邻带有浮动的元素顶部对齐，要浮动都浮动；2.浮动的元素脱离标准流，在页面中不占据位置；3.浮动的元素只会影响到下面的元素；4.浮动的元素不会超过父元素的padding值，在父元素内部进行浮动；5.浮动的显示方式基本和行内块元素显示方式相同；6.浮动的元素压不住文字和图片；7.浮动的元素不能被text-align：center；或margin：auto；等属性居中。
清除浮动：在开发过程中有时不方便给父盒子指定高度，子盒子浮动后将不再占有原来的位置，导致父盒子高度为0，就会影响到下方的盒子，此时我们就需要清除浮动。清除浮动的本质是清除浮动元素造成的影响，清除后父盒子就会根据浮动的子盒子自动检测高度，在父盒子有了高度后就不会影响下面的盒子。清除浮动的方法有四种：1.额外标签法。2.给父元素添加overflow属性法。3.:after伪元素法。4.双伪元素法。
额外标签法：在浮动元素末尾添加一个空的标签，其语法为：选择器（空标签）{clear:属性值;}。属性值包括：left（清除左侧浮动的影响）、right（清除右侧浮动的影响）以及both（清除两侧浮动的影响）。这种方法通俗易懂，书写方便，但是会添加许多无意义的标签，结构化比较差。
给父元素添加overflow属性法：给父元素添加overflow属性，将其属性设置为hidden、auto、scroll都可以，一般设置为：overflow:hidden;。其优点是代码简洁，但是存在无法显示溢出部分的缺点。
:after伪元素法：给父盒子添加类名（clearfix），并在css中写下如下代码：.clearfix:after { content: "", display: block; height: 0; visibility: hidden; clear:both;}。其优点是结构语义正确，但存在低版本浏览器不兼容问题。
双伪元素法：给父盒子添加类名（clearfix），并在css中写下如下代码：

.clearfix::before,
.clearfix::after {content: ''; display: table;} .clearfix::after {clear: both;}

。其优点是结构语义正确，但存在低版本浏览器不兼容问题。