不常用
1.外墙法
在两个盒子中间添加一个额外的块级元素
在给这个额外添加的块级元素设置: clear : both;属性
注意点:
外墙法可以让第二个盒子使用margin-top
外墙法不可以第一个盒子使用margin-bottom
2.内墙法
外墙法可以让第二个盒子使用margin-top
外墙法可以第一个盒子使用margin-bottom
3.外墙法和内墙法的区别?
外墙法不能撑起盒子的高度,而内墙法可以撑起第一个盒子的高度
4.什么是伪元素选择器?
给指定标签的内容前面添加一个子元素,或者给指定标签的内容的后面添加一个子元素
给指定元素的内容的前面和后面添加内容
1 #div1::before{ 2 content: "jfdshsfjg"; 3 width: 50px; 4 height: 50px; 5 background-color: grey; 6 display:block; 7 } 8 #div1::after{
/*指定添加的子元素中的存储的内容*/ 9 content: "jfdshsfjg";
/*指定添加子元素的高度和宽度*/ 10 width: 50px; 11 height: 50px; 12 background-color: grey;
/*指定添加的子元素的显示模式*/ 13 display:block;
/*指定添加元素隐藏*/
visibility:hidden; 14 }
常用的方法:
1 #div1::after{ 2 /*子元素的内容为空 */ 3 content: "";
/*变成层级元素*/ 4 display: block; 5 /*!* 高度为0*!*/ 6 height: 0; 7 /* !*设置为隐藏*!*/ 8 visibility: hidden; 9 /*!*左右都没有浮动*!*/ 10 clear: both; 11 12 }
overflow:hidden作用:
超出标签范围内的文字去掉
清除浮动
注意:浏览器兼容,上面的清除方式,在谷歌浏览器里可以,但是在ie浏览器里不可以,所以需要加入
*zoom: 1;
#div1{ background-color: grey; overflow: hidden; margin-bottom: 10px; *zoom: 1; }