再战css

1.盒模型的属性&＃xff1a;

　　1.padding

.box{width: 200px;height: 200px;background-color: red;/*顺时针 上右下左*/padding: 20px 30px 40px 50px;}

　　2.border

　　　　三要素&＃xff1a;线性的宽度、线性的样式、颜色

.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;/*选中一个属性进行设计&＃xff0c;也是顺时针*/border-width: 5px 10px;border-color: green yellow;border-style: solid double;}

　　　　制作圆角&＃xff1a;border-redius&＃xff1a;xx px;(就是相当于以xxpx为半径切下去一个1/4圆)

　　3.margin

　　　　　　在标准文档流下&＃xff1a;margin的水平不会出现任何问题&＃xff0c;但是垂直方向上margin会出现塌陷问题

　　　　　　在父盒子里有一个子盒子时&＃xff0c;设置子盒子的margin-top属性&＃xff0c;并不是他与父盒子之间的距离&＃xff0c;如果想做到和父盒子之间有距离&＃xff0c;需要将父盒子设置成浮动效果。

2.display显示

　　在标准文档流下

　　属性&＃xff1a;

　　　　block 块级标签

　　　　　　　　独占一行&＃xff0c;可以设置宽高&＃xff0c;如果不设置宽&＃xff0c;默认是父盒子宽度的100%

　　　　inline 行内标签

　　　　　　　　在一行显示&＃xff0c;不可以设置宽高&＃xff0c;根据内容来显示宽高

　　　　inline-block 行内块

　　　　　　　　在一行内显示&＃xff0c;可以设置宽高

　　　　none  不显示  隐藏  不在文档上占位置

　visibility&＃xff1a;hidden&＃xff1b;隐藏 在文档上占位置

3.浮动&＃xff1a;脱离了标准文档流

　　　　作用好处&＃xff1a;是元素实现并排&＃xff08;布局&＃xff09;&＃xff0c;就在页面上不占位置

　　　　浮动带来的问题&＃xff1a;子盒子浮动&＃xff0c;不在页面上占位置&＃xff0c;如果父盒子不设置高度&＃xff0c;那么撑不起父盒子的高度&＃xff0c;页面出现紊乱

　　　　清除浮动带来的问题&＃xff1a;

　　　　　　1.个父盒子设置固定的高度&＃xff08;但是后期不好维护&＃xff09;

　　　　　　2.clear:both;

　　　　　　　　　　给浮动元素的最后面&＃xff0c;加一个空的块级标签&＃xff08;标准文档流下的块级标签&＃xff09;

　　　　　　　　　　给当前这个标签设置一个clearfix类名&＃xff0c;设置该标签属性clear:both;&＃xff08;但是代码冗余&＃xff09;

         .clearfix{clear: both;}

123 

　　　　　　3.clearfix&＃xff1a;after{

　　　　　　　　content:".";

　　　　　　　　display:block;

　　　　　　　　height:0;

　　　　　　　　visibility:hidden;

　　　　　　　　clear:both;

}

　　　　　　4.overfow:hidden;

 1em&＃61;当前标签下的字体大小