淘先锋技术网

首页 1 2 3 4 5 6 7

今天是学习前端的第六天,主要学习内容为:圆角边框、盒子阴影以及浮动。
圆角边框:我们可以使用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;}

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