总结css(第二部分)

149 阅读2分钟

九、 外边距合并问题: 1.并列关系:只给一个元素加上外边距 2.嵌套关系: 1.给父元素加overflow:hidden;溢出隐藏 2.给父元素或子元素加绝对定位position:absolute 3.给父元素或子元素加浮动:float: ; 4.给父元素加边框border 十、 overflow 溢出 hidden 隐藏 scroll 滚动 overflow-y: overflow-x: 十一、 position 定位 relative 相对定位 相对于元素本身进行定位,定位后空间不会被释放 absolute 绝对定位 定位后空间会释放 相对于最近的已定位的祖先元素进行定位,如果祖先元素都没有定位的话,就相对于body进行定位 fixed 固定定位 定位后空间释放,相对于浏览器的窗口定位 元素定位以后可以修改 top left right bottom 元素可以只进行定位 不改变位置的值,但是一旦想改变位置的值必须要进行定位 z-index表示层级 元素只有定位以后才可以设置层级 z-index的值越大 元素越在上面 十二、 float 浮动 元素浮动以后空间会释放 left 按照html结构顺序 从左到右依次排列 right 按照html结构的顺序 从右到左依次排序 元素浮动后 造成的塌陷问题 1.给父元素设置高度 2.给父元素设置溢出隐藏overflow:hidden; 3.给父元素里的最后面加一个空的子元素(块级元素),并给这个子元素设置清除浮动 clear:both; 4.增加伪元素 设置clearfix .clearfix::after{ content:""; 设置内容 display:block;设置为块元素 clear:both;清除浮动 } 十三、 display 布局 none 隐藏 block 块级元素 inline 行级元素 inline-block 行级块元素 行级元素设置宽高 1.设置display 2.设置float 块级元素 1.单个元素占一行 2.可以设置宽高 行级元素 1.多个元素占一行 2.不可以设置宽高(被内容撑开) 行级块元素 1.多个元素占一行 2.可以设置宽高 十四、 同一元素的相同属性 优先级 id>class>标签 同一元素 不同选择器里的不同是属性 会合并 同一元素 选择器的优先级相同时 同一个属性 后面的会把前面的覆盖 选择器的权重 !important 最高的 内联样式 1000 id 100 class 10 伪类 10 标签 1 伪元素 1 十五、 行级元素 如span 居中:text-align: ; 块级元素 如p 居中:margin:0px auto; 十六、(做个会旋转的箭头) div{ width:0px; height:0px; margin:50px auto; border:50px solid transparent; border-top-color:pink; transition:all 10s ease; } div:hover{ transform:rotate(180deg); } 十七、 opacity 透明度 取值0~1 color:rgba(0,0,0,0.5); a是透明度 rgb(0,255,0) 三原色 十八、 选中最后一个ul>li:last-child>a