盒样式相关

Posted 2020-08-28 随风而至

盒的基本类型，在css中使用display属性来定义盒的类型。liline型 block型，liline-block型。:
1：liline型元素的宽度只等于其中内容的宽度，每一行可以占据多个liline型元素。
block型元素的宽度为整个浏览器的宽度，每一行只能有一个block型元素。
liline-block型元素属于block型盒子，但同时具有inline型盒子的特点。，能指定元素的宽高。
2：使用inline-block可以实现分列显示，默认情况下使用inline-block型时并列显示的元素的对齐方式为底部对齐，未来改变对齐方式为顶部对齐可以在
元素的样式中加入vertical-align属性。如果需要去除两个元素中间的空隙，还需要消除换行符。
3：使用inline-block类型来显示水平菜单。在css2.1之前，水平菜单的实现需要使用浮动。使用ul li 来实现。
但是使用liline-block同样能实现水平菜单， 同时可以除去li的点号。
设置padding的上下值也能使元素居中、
怎样改变liline-block元素之间的距离？
4：inline-table类型： 因为table元素是block类型，所以不能和其他元素处于同一行，但是将table元素修改为inline-table类型就可以使表格和其他元素处于同一行了，但在不同浏览器
中对齐方式不同，可以使用inline-table 来改变对齐方式。
5：liline-item ：将元素的display属性改为inline-item可以使元素作为列表来显示，同时可以设置列表的标记。
list-style-type可以设置列表的标记。
6：run-in类型与compact类型：将元素设置为这两种类型，如果后面还有block类型的元素，run-in类型的就会被包含在block元素的内部。
compact类型的元素就会在block类型元素的左边。
对于盒中容纳不下的内容的显示。
指定了盒子的宽高，有时会出现容纳不下的情况，可以使用overflow属性来指定如何显示容纳不下的内容
hidden隐藏，scroll出现固定的水平滚动条与垂直滚动条，visible原样输出。
overflow-x 与overflow-y可以单独设置水平方向上与垂直方向上的显示方法。
text-overflow属性设置为hidden可以将盒中内容隐藏起来，并且在后面会有省略号，但是只能在水平方向上有效；

对盒使用阴影
1：box-shadow：length length length color 前面三个length表示阴影离元素的横方向的距离、 阴影离元素的纵方向距离与阴影的模糊半径，模糊颜色。
盒内阴影：box-shadow：inset length length length length color 前两个length表示水平偏移量，垂直偏移量，展开半径，模糊半径 颜色。
可以对盒内元素使用阴影：只要在盒内的标签中加入阴影属性。
对第一个文字或者第一行使用阴影：使用first-letter选择器或者first-line选择器来只让第一个字 或者第一行产生阴影效果。

指定针对元素的宽度与高度的计算方法
在css中使用width与height来指定元素的宽高，但使用box-sizing可以指定宽高是否包括内部补白区域和边框宽度。
box-sizing指定的属性值有 content-box和border-box，content-box不包括内部补白区域和边框宽高，border-box包括。在没有使用box-sizing时默认使用content-box。
在火狐浏览器中还可以指定box-sizing的属性值为padding-box，意思是指定宽度与高度包括内容的宽高，和内部补白区域的宽高，但不包括边框的宽高。
为什么使用box-sizing属性，是为了对元素的总宽度进行一个控制，如果不使用该属性，则默认使用的是content-box，这个属性值只是对内容物的宽高进行设置没有对元素整体的宽高进行设置
，有时候使用box-sizing可以使布局更加方便。