科协前端日常1"/>
天理科协前端日常1
又是学习的一天,盒模型是个好东西,box-sizing=content-box是默认的,mdn有道思考题:box-sizing=border-box,怎样玩转盒模型?经过多天多夜的努力,弄明白了
*总宽度*=width+padding+border。(其中width为默认的content-box)。
*总高度*=width+padding+border。(其中width为默认的content-box)。
盒模型:content(内容)+padding(填充)+border(边框)+margin(外边框)。
margin并不计入盒子的长宽,而影响的是盒子外部的空间,盒子的范围是从content到border。
px是像素 em是相对大小 举个例子:有一个父元素6px,则3em=3*6px=18px。
margin :auto
让浏览器自己选择一个合适的外边距。有时,在一些特殊情况下,该值可以使元素居中。
margin :0 自然就是无边框了。
text-align:center 是文本居中的意思。
margin, border 和 padding感觉差不多,有很多共同之处。
overflow:hidden 是超出边框的内容就隐藏 。
overflow:visible 是超出边框的内容继续显示。
overflow:scroll 是超出边框的内容以滚轴列表的形式显示,是overflow-x+overflow-y的简写。
浮动是个好东西float,float:left,float:right,float:none;
可以让块元素均匀排满父元素,但是在只有一行的情况下,父元素的高度变为0,所以为了解决这个问题,要学会清除浮动,overflow:hidden,:after等等借助伪元素让父元素成功的与子元素的高度保持一致
这是那三个问题,我的看法。
时间好紧啊,赶紧学习去了,我才学到盒模型,浮动刚刚学完,后面还没学完,不说了,学习去喽,明天又是快乐的一天,啦啦啦啦啦......
更多推荐
天理科协前端日常1
发布评论