前言:今天学习了一些较为重要的前端知识,在经历了两年的计算机学业生活,我终于开始写下第一篇博客。大一整年和大二上学期的学习方法不够正确,只是学了知识,却没有真正理解,隔了一段时间就会模糊,久而久之就消失殆尽了。新学期我将通过博客来记录我一天的学习经验。仅个人经验,若有错误还请大佬指出!感激不尽!
今天学习的是前端的知识,大概内容为盒子模型、浮动、高度塌陷及其解决方法、页面布局等。
一、盒子模型
盒子模型在此处就不多说,今天学到的是盒子模型的尺寸。
盒子模型的尺寸是由内容区,内边距和边框决定的。通常情况下我们在设置盒子的边距时总是要调整内容区域的大小。盒子模型中默认调整的width和height都是针对于内容区而言的。CSS中可以通过box-sizing属性来对内容区进行设置:
默认值:content-box 即宽高针对内容区;
可选值:border-box 即针对整个盒子的大小(以此为值则整个盒子的宽高固定 不受其他的影响)
二、几个盒子布局的属性
阴影 box-shadow
阴影属性不影响盒子的大小 ,只作于显示作用。默认在盒子的下方并且和盒子的宽高相同。
经过偏移量可以产生如下的效果:
该属性分别有四个值可供设置:
水平 垂直(正右下负左上) 模糊半径(越大越模糊) 颜色
效果如下:
轮廓 outline
轮廓设置的是元素的轮廓线,作用和border相同,但轮廓只作为显示用,不影响盒子的实际大小。常用法:鼠标悬停时显示轮廓表示区域。
圆角 border-radius
常见盒子模型的边框都是直角,通过该属性可以将直角换成圆角或者椭圆;
该属性支持单独设置四个方向的单独圆角: top bottom left right
值选的越大,圆角越圆;
原理时是根据你设置的像素值在角的两边取对应的像素值画圆相切;
在给值的时候,若提供两个不同的值即可形成椭圆;
三、浮动
以小白而言,浮动这个东西确实挺好用的。不太了解实际工作中的情景,用浮动确实可以很好的解决很多布局上的问题。
浮动 float
可选值: none(default)、left or right
通过浮动可以让一个子元素在父元素的左右侧移动
tips:若设置元素为浮动之后,无需满足3左3右宽的等式(即元素从文档流中脱离)
特点:
1、 浮动元素脱离文档流,不占据文档流中的位置
2、设置浮动后元素向左右移动,并且不会从父元素中移出
3、每个浮动元素独自占位,下一个浮动元素只能排在后面
作用:利用浮动制作水平方向的布局;
另外
1、浮动元素不会盖住另一个标签中的文字,文字会环绕于浮动元素
利用浮动,用来设置图片文字的布局;
2、设置为浮动元素,块元素不在独占页面一行,并且块元素的宽高
都将被内容撑开。 如下图所示
3、对于行内元素,令其浮动之后可以让它去除属性,变成块元素。
拥有块元素的特点,可设置宽高,并且默认被内容撑开;
简而言之,设置浮动之后就脱离文档流,脱离了文档流之后无需区分块元素和行内元素
四、浮动带来的高度塌陷及其解决办法
来由:浮动是子元素在父元素中左右移动。父元素的高度(没有设置)默认是被子元素撑开的,但在子元素设置浮动属性之后完全脱离了文档流,造成父元素高度丢失;而其底部的元素将会顶上去,进而造成页面混乱。
如下图:
最最根本的问题:就是父元素没有设置高度的时候默认是由子元素的内容撑开的,但是现在子元素已经是浮动元素了,它自然就不在这个区域内了,也就是说父元素中没有内容了,那么它的高度就没有了(这边的边框是为了显示作用)
解决方法:
1、将父元素的高度提前定好(不太符合内容的自适应,如东西少空白多,东西多要溢出)
2、BFC(Block Formatting Context) 块级模式化环境;BFC是一个隐藏属性,需要手动开启。在元素开启BFC后,它将独立于其他区域,自己成为一个区域。
BFC特点:
元素开启BFC后,将不再被浮动元素覆盖
元素开启BFC后的子元素不会和父元素共享外边距
元素开启BFC后可以包含浮动的子元素(重中之重)
开启方式:
1、对浮动子元素的父元素设置浮动属性即可开启父元素的BFC;
2、将父元素设为行内块元素;
-- 此类方法是见间接开启,有副作用,脱离文档流后,高度不塌陷了但是宽度消失了--
3、将overflow设置一个非visible(default)的值 如auto、hidden;
运用:对父元素开启BFC,即可利用浮动元素布局。虽然但是,这种方法也只是暂时的解决方法。
终极绝招:
首先先介绍一个属性 清除 clear
这个属性的作用是将元素受到的来自于其他浮动元素的影响清楚,实际原理是只能浏览器为我们的盒子加上了一个边距,使他脱离那个位置,回到它应在的那个区域。这种手段只是影响当前元素而不影响浮动元素,因此副作用最小。
可选值: left or right or both 分别清楚左侧右侧,两侧中最大的造成的影响。
通过查找前辈们的顶级操作:
使用伪类after来给盒子最后创造出一个 ‘ 莫须有 ’ 的盒子,将该盒子收到的影响清除,它本身也是在父元素下,它没有内容,但它实实在在就在浮动元素下面,因此父元素就可以共享该虚拟盒子的高度。
完美解决高度塌陷问题~~
小小地分享一下今天的一些练习成果
网页布局练习:
通过浮动来仿作w3school的导航栏
网易新闻的军事栏 (3月5日修改,因图片违规!但这其实是我自己模范着做的!)
今天的经验分享就结束了。学的不是很多,花点时间整理总结一下,给自己的大脑一个回顾记忆的机会。以后也会坚持发自己的学习经验博客!为自己的技术打下基础!走过路过的大佬们还请不要吝惜自己的建议!感激不尽!
生命不是无止境的,但学习是!