关于盒模型的盒子模型、浮动、定位以及高级选择器的使用

时间：2019-12-09 01:29:27 阅读：104 评论：0 收藏：0 [点我收藏+]

盒模型的基本组成包括：外边距（margin）内边距(padding) 边框（border）元素(element,content)

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。都会合并成父元素的外边距，内盒子与大盒子之间不显示小盒子的外边距。

解决方案：可以为父元素定义1px的上边框。可以为父元素定义1px上内边距。可以为父元素添加 overflow: hidden

box-sizing: content-box 盒子大小为 width + padding + border content-box:此值为其默认值，其让元素维持W3C的标准Box Mode
box-sizing: border-box 盒子大小为 width 就是说 padding 和 border 是包含到width里面的
注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的
高级选择器的写法以及其中的意思：通配符选择器为所有包含的html进行设置（*）在html中字体的最小是12px，
选择器分组;div,p{},p在div外后代选择器 div a｛｝ a链接在div里边，如果在div外有个p标签，p标签下有个a链接是不生效的，a但是如果p与a标签都在div里，那就可以生效；
div>a{} div下有P，a不生效
div+p｛｝相邻元素设置p标签生效，如果中间有个a标签，那p标签就不生效
伪类选择器a:hover｛｝鼠标移动到哪，设置的啥颜色就是啥，移开恢复原来颜色

原文地址：https://www.cnblogs.com/mmore123/p/12008658.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行

关于盒模型的 盒子模型 、 浮动 、 定位以及高级选择器的使用