前端基础知识---CSS

时间：2023-03-31 00:21:50 CSS

1.盒模型宽度计算答：IE浏览器默认的盒模型是border-box，其他浏览器默认的盒模型是content-box。元素的实际模型宽度和高度为offsetWidth和offsetHeight。border-box的offsetWidth=width，content-box的offsetWidth=width+padding+border。2.margin垂直重叠问题答：垂直排列的元素的margin-top和margin-bottom会重叠，重叠后取最大值。解决方法：设置值时，只设置margin-top或margin-bottom；使用填充。3、如果在父子元素中子元素上设置了margin-top，那么父元素会去掉对应的margin-top值。答：⑴。给父元素添加一个大儿子，大儿子必须是table。

⑵使用CSS3伪元素::在向父元素添加内容之前。d2::before{内容：“”；display:table;}4.margin的负值答：在默认定位的元素中设置margin-top和margin-left负值，元素向上，向左移动；设置margin-right为负值，同层右侧的元素会向左移动，不受自身影响；设置margin-bottom为负值，同层以下的元素会向上移动，不受自身影响。在绝对定位元素中设置top为0，margin-top为负值，元素向上移动；设置bottom为0，margin-bottom为负值，元素向下移动；设置left为0，margin-left为负值，元素向左移动；将right设置为0并将margin-right设置为负值，元素将向右移动。5.什么是BFC？答：BFC是BlockFormattingContexts（块级格式化上下文）。具有BFC特性的元素可以看作是相互隔离的独立容器，容器内部的元素在布局时不会影响外部元素。只要元素满足以下任一条件，就可以触发BFC特性：浮动元素：floatvalue除none之外thanvisible(hidden,auto,scroll)6.手写clearfix.clearfix:after{content:"",display:table;clear:both;}7.相对和绝对的依据是什么？答：Relative是根据自己定位的。absolute是根据上层找到的最近层的定位元素来定位的。（定位元素有absolute、relative、fixed，没有则根据body定位）8、如何让一个div水平和垂直居中

1.div.parent{display:flex;证明内容：居中；对齐项目：中心；}2.div.parent{位置：相对；}div.child{位置：绝对；顶部：50%；左：50%；转换：翻译（-50%，-50%）；}/*或*/div.child{width:50px;高度：10px；位置：绝对；顶部：50%；左：50%；保证金-left:-25px;margin-top:-5px;}/*or*/div.child{width:50px;高度：10px；位置：绝对；左：0；顶部：0；右：0；底部：0；margin:auto;}3.div.parent{display:grid;}div.child{justify-self:center;align-self:center;}4.div.parent{font-size:0;文本对齐：居中；&::之前{内容：“”；显示：内联块；宽度：0；高度：100%；lign：中间；}}div.child{显示：内联块；垂直对齐：中间；}