1.盒模型的属性:
1.padding
.box{width: 200px;height: 200px;background-color: red;/*顺时针 上右下左*/padding: 20px 30px 40px 50px;}
2.border
三要素:线性的宽度、线性的样式、颜色
.box{width: 200px;height: 200px;background-color: red;/*周围设置*/border: 5px solid green;/*分别对每个边进行设置*/border-left: 5px solid green;border-right: 1px dotted yellow;border-top: 5px double purple;border-bottom: 1px dashed purple;/*选中一个边设置属性*/border-left-style: solid;border-left-width: 1px;border-left-color: green;/*选中一个属性进行设计,也是顺时针*/border-width: 5px 10px;border-color: green yellow;border-style: solid double;}
制作圆角:border-redius:xx px;(就是相当于以xxpx为半径切下去一个1/4圆)
3.margin
在标准文档流下:margin的水平不会出现任何问题,但是垂直方向上margin会出现塌陷问题
在父盒子里有一个子盒子时,设置子盒子的margin-top属性,并不是他与父盒子之间的距离,如果想做到和父盒子之间有距离,需要将父盒子设置成浮动效果。
2.display显示
在标准文档流下
属性:
block 块级标签
独占一行,可以设置宽高,如果不设置宽,默认是父盒子宽度的100%
inline 行内标签
在一行显示,不可以设置宽高,根据内容来显示宽高
inline-block 行内块
在一行内显示,可以设置宽高
none 不显示 隐藏 不在文档上占位置
visibility:hidden;隐藏 在文档上占位置
3.浮动:脱离了标准文档流
作用好处:是元素实现并排(布局),就在页面上不占位置
浮动带来的问题:子盒子浮动,不在页面上占位置,如果父盒子不设置高度,那么撑不起父盒子的高度,页面出现紊乱
清除浮动带来的问题:
1.个父盒子设置固定的高度(但是后期不好维护)
2.clear:both;
给浮动元素的最后面,加一个空的块级标签(标准文档流下的块级标签)
给当前这个标签设置一个clearfix类名,设置该标签属性clear:both;(但是代码冗余)
.clearfix{clear: both;}
3.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
4.overfow:hidden;
1em=当前标签下的字体大小