网站建设上传图片不显示,电商网站 网站服务内容,山东省城乡与住房建设厅网站,电子商务网站体系结构有哪些?盒子模型
CSS三大特性
继承性、层叠性、优先级
优先级比较
继承 通配符选择器 标签选择器 类选择器 id选择器 行内样式 !important
注意#xff1a;!important不能提升继承的优先级#xff0c;只要是继承优先级最低
复合选择器权重叠加计…盒子模型
CSS三大特性
继承性、层叠性、优先级
优先级比较
继承 通配符选择器 标签选择器 类选择器 id选择器 行内样式 !important
注意!important不能提升继承的优先级只要是继承优先级最低
复合选择器权重叠加计算公式
每一级之间不存在进位 比较规则 先比较第一级数字如果比较出来了之后的统统不看 如果第一级数字相同此时再去比较第二级数字如果比较出来了之后的统统不看 …… 如果最终所有数字都相同表示优先级相同则比较层叠性
注意点!important如果不是继承则权重最高
外边距折叠现象 – ① 合并现象
场景垂直布局的块级元素上下的margin会合并
结果最终两者距离为margin的最大值
解决方法只给其中一个盒子设置margin即可
外边距折叠现象 – ② 塌陷现象
场景互相嵌套的块级元素子元素的margin-top会作用在父元素上
结果导致父元素一起往下移动
解决方法 给父元素设置border-top 或者 padding-top分隔父子元素的margin-top 给父元素设置overflowhidden 转换成行内块元素 设置浮动
行内元素的margin和padding无效情况
场景给行内元素设置margin和padding时
结果
水平方向的margin和padding布局中有效垂直方向的margin和padding布局中无效
