黑马程序员技术交流社区

标题: 技术贴 [打印本页]

---

作者: as951119772    时间: 2019-11-20 23:20
标题: 技术贴
经过这一个月的学习，我了解了HTML的骨架、标签与标签的关系。明白了css行内样式，内部样式，外部链接三种引入方式，选择器分为复合选择器（主要包含：后代选择器、子代选择器、并集选择器，伪类选择器，交集选择器（指定标签选择器））；后代选择器：后代选择器又称为包含选择器，可以选择父元素里面子元素。一个空格表示了后代关系；子元素选择器：只能选择嵌套关系的父子关系得到元素，也就是嵌套的第一层元素，一个大于号“>”表示选中子级; css三种布局：标准流、浮动、定位。学习了清除浮动的方法：额外标签法、父级加overflow属性法（移动端常用）、清除浮动之after伪元素（常用）、清除浮动之双伪元素（常用）。清除浮动之after伪元素代码（常用）：
/*声明清除浮动的样式*/
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            visibility: hidden;
            clear: both;
        }

        .clearfix {
            *zoom: 1;
            /*ie6,7 专门清除浮动的样式*/
        }

清楚浮动双伪元素代码（常用）：
/*声明清除浮动的样式*/
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
            /*ie6,7 专门清除浮动的样式*/
}
设置正圆border-radius: 50%;
设置胶囊形状 border-radius: 25px;
文字阴影text-shadow: 2px 2px 0px rgba(255, 0, 0, 1);
浮动的特性：元素脱离文档流（标准流），自己的位置空了，其他的元素会补上来；
漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；
特点：
1、浮动之后的盒子的显示模式会更改为行内块元素的特点；
2、浮动之后的元素之间的没有缝隙的，紧贴在一起；
3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2