【博学谷学习记录】超强总结,用心分享|前端开发基础知识总结(css基础中)

不同选择器的优先级公式:继承＜通配符选择器＜标签选择器＜类选择器＜行内样式`        ＜!import(!import不能提升继承的优先级)

盒子模块的组成部分:内容,内边距,外边距,边框

盒子实际大小的组成部分:左border+左padding+内容的宽度+右padding+右border

css3盒模型的代码:box-sizing:boder-box

盒子水平居中:margin: 0 auto;

文本水平居中:text-align:center;

盒子塌陷:1.父布局添加overflow:hidden

                2.父布局添加boder-top或者padding-top

                3.转换为行内块元素

                4.设置浮动

盒子模型:

        内容content

         border:border-width:粗细

                   border-style:样式(实线solid,虚线dash,点线dotted)

                   border-color:边框的颜色

        内边距padding:上右下左,顺时针,如果没有赋值,看对面的值

                   盒子的大小:content+border+padding

        外边距margin:盒子与盒子之间的距离 上右下左

                    去除默认标签:margin0;padding0;

margin合并现象:垂直布局的盒子,上下margin会合并.

margin塌陷现象:互相嵌套的块级元素父子元素的margin-top会被合并作用到父元素上,导致父元素下移

浮动:1.文字环绕 2.改变垂直的盒子布局,变成水平布局

       特点:1.脱标,在标准流中不占位置

                2.浮动的元素层级比标准流层级高出半个级别,可以覆盖标准流元素

                3.浮动找浮动,下一个浮动的元素会在上一个浮动元素的后面进行左右浮动

                4.浮动元素会受到上方元素边界的影响

                5.浮动可以一行显示多个,可以设置宽高

        清除浮动:

                1.父元素:overflow:hidden

                2.额外标签法:多一个字标签添加clear:both

                3.单伪元素清除法

                4.双伪元素清除法

                5.给父元素设置高度

 结构伪类选择器

        找到第几个li标签:li:nth-child(n){}:2n/even(偶数)  2n+1/odd(奇数)

        匹配父元素中同类型子元素的重的第n个:E:nth-of-type(n){}

伪元素:非主体内容使用,由css模拟出来的标签效果

                ::before;::after-->必加元素content,默认行内元素