目录
垂直外边距的重叠
兄弟元素
(1)如果两个都是正值,谁大听谁的;
(2)如果两个都是负值,绝对值谁大听谁的;
(3)如果一正一负,两者相加,听最终结果。
兄弟元素的外边距重叠,对我们开发来讲,一般是有利,所以不用做特殊调整 。
父子元素
父子外边距重叠,它会影响页面其他元素,所以必须要调整。
如何调整
(1)不用margin-top,给父元素用padding-top,同时减小父元素的高度;
(2)在父子之间用边框隔开;
(3)开启元素的BFC(隐含属性 overflow:hidden;)。
行内元素的盒子模型
(1)内容区:不能设置宽高,是被内容撑开;
(2)内边距:可以设置,但垂直方向不会改变页面的布局,也就是不会挤别人;
(3)边框:可以设置,但垂直方向不会改变页面的布局,不会挤别人;
(4)外边距:垂直方向不能设置外边距,水平方向可以设置,而且水平方向外边距不会重叠。
display 用来设置元素显示的类型
display 可选值:
(1)inline 将元素设置为行内元素;
(2)block 将元素设置为块元素;
(3)inline-block 行内块块元素(即可以设置宽高,又不会独占一行);
(4)table 将元素设置为一个表格;
(5)none 元素不在页面中显示(隐藏一个元素)。
visibility 用来设置元素的显示状态
visibility 可选值:
(1)visible 默认值 元素在页面中正常显示;
(2)hidden 元素不在页面中显示(隐藏一个元素),位置依然保留。
面试题:隐藏元素有几种方式,几者区别是什么?
(1)display:none; 删除了元素,元素位置不保留;
(2)visibility:hidden; 元素位置保留;
(3)将元素变为透明 元素位置保留。
默认样式
浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果,所以为很多的元素都设置了一些默认的margin和padding等等,而它的这些默认样式,正常情况下我们是不需要使用的。所以我们往往在编写样式之前需要将浏览器中的默认样式都去除。
默认样式去除方式
(1)清除浏览器的默认样式,手写,这种方式只适用于结构简单,小的练习;
(2)引入重置样式表。
盒子的大小
默认情况下:盒子可见框的大小由内容区,内边距,边框共同决定。
box-sizing 用来设置盒子尺寸的计算方式 width/height 指的是谁
box-sizing 可选值:
(1)content-box 内容区 默认值;
(2)border-box 宽度和高度用来设置整个盒子可见框的大小,包括边框,padding,内容区。
阴影和圆角
box-shadow用来设置元素的阴影效果,不会影响到页面布局
第一个值:水平偏移量 正->左 负->右 ,必选;
第二个值:垂直偏移量 正->下 负->上 ,必选;
第三个值:模糊半径 默认0px,可选;
第四个值:颜色 默认是黑色,可选。
border-radius 用来设置圆角
border-radius: 50%; 设置圆形。