CSS03-盒子模型、显示、定位
2021-05-02 11:28
阅读：439
YPE html>
标签：高度 outline fir relative 外边距 cross Fix html ssh
显示里有显示与隐藏、裁剪元素、溢出、改变鼠标形状处理相对应的属性。
盒子模型、显示、定位 在上例中，margin部分为蓝色，数值为10%；border部分为黑色，宽度为1em；padding部分为黄色，数值为3em。盒子模型:盒子的实际宽度为width(内容宽度)+padding*2(左右内边距)+border*2(左右边框)+margin*2(左右外边距)；实际高度为height(内容高度)+padding*2(上下内边距)+border*2(上下边框)+margin*2(上下外边距)。与盒子相关的属性
- margin
- padding
- border
与显示相关的属性
- display
- visibility
- 裁剪元素
- 溢出处理
- 改变光标
定位
遇到的问题
- 两个div(垂直排列的)之间出现了间隙
显示(display):设置一个元素如何显示
- 进行块内元素和内联元素的转换
- display:inline;块内元素转内联元素
- display:block;内联元素转块内元素
- 隐藏元素：display:none;元素不占用空间
可见(visibility):性指定一个元素可见还是隐藏
- 隐藏元素01：visibility:hidden;元素占用空间
- 隐藏元素02：visibility:collapse;table相关元素不占空间(firefox),占用空间(chrome),元素显示(IE)
margin
- 格式
- 单边描述：margin-top、margin-bottom、margin-right、margin-left
- 简写(margin: ;),规则同边框设置单边规则b
- 取值
- auto
- 长度值(px、em、pt)
- 百分比
padding
      规则同margin,注意取值没有auto边框
- 边框样式(border-style)
- border-style:none;无边框
- border-style:dotted;点线边框
- border-style:dashed;虚线边框
- border-style:solid;实线边框
- border-style:double;双边框，两条边框宽度和border-width的值相同
- border-style:groove;3D沟槽边框
- border-style:ridge;3D脊边框
- border-style:inset;3D嵌入边框
- border-style:outset;3D突出边框
- 边框宽度(border-width),可选定长或关键字(thick\medium(默认)\thin)作为值
- 边框颜色(border-color),值可为颜色名称、RGB、16进制值;需先设置border-style才能设置该属性
- 单独设置各边的两种方法(style、color、width均适用)
-
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
- border-style:上 右 下 左
- 只有三个值时为：上 左右 下
- 只有两个值时为：上下 左右
- 只有一个值时为：上下左右
-
- 简写：border:width style(required) color;
轮廓(outline),位于边框边缘外围，不占空间
- outline
- outline-color
- outline-style
垂直div出现间隙的两种解决方法
- 下方div中第一个组件的margin-top设置为0px
- 上方(下方)div添加属性：“margin-bottom(top):-xpx;”,不建议该方法
五种定位(position)方式
- static
- 静态定位。默认值，没有定位，不受top、bottom、right影响
- fixed
- 元素位置相对于浏览器窗口固定
- 该定位使元素位置与文档流无关，不占空间
- 使用该定位的元素和其他元素重叠
- relative
- 相对其正常位置进行移动
- absolute
- 绝对定位。相对于最近的父元素，若没有则相对于html(fixed灵活版)
- 该定位使元素位置与文档流无关，不占空间
- 使用该定位的元素和其他元素重叠
- sticky
- 粘性定位。在跨越特定阈值之前相对定位，后固定定位
注意：当元素重叠时，可用z-index属性指定堆叠顺序。若未指定，则按照代码顺序堆叠
裁剪元素
- clip:rect(y1,x1,y0,x0); y1x1为图片右上角位置，y0x0为图片左下角位置。
溢出处理(overflow)
- overflow:scroll;添加水平和竖直方向的滚动条
- overflow:hidden;超出部分不显示，无滚动条
- overflow:auto;若超出，添加竖直方向的滚动条
- overflow:visible;默认，超出部分在区域外继续显示
- overflow:inherit;在父元素继承该属性的值
改变光标(cursor)
- cursor:auto;
- cursor:crosshair;
- cursor:default;
- cursor:e-resize;
- cursor:help;
- cursor:move;
- cursor:n-resize;
- cursor:nw-resize;
- cursor:pointer;
- cursor:progress;
- cursor:s-resize;
- cursor:se-resize;
- cursor:sw-resize;
- cursor:text;
- cursor:w-resize;
- cursor:wait;
对应的css文件
a{
text-decoration: none;
}
a#Po:link{
color: black;
}
a#Po:hover{
color: blue;
}
a#Po:visited{
color: darkblue;
}
#Above{
height: 2em;
background-color: brown;
border-style: outset;
border-color: gray;
/*margin-bottom: -30px;*/
}
#CFB{
/*margin-top: -75px;*/
border: 0;
background-color: deepskyblue;
}
#BoxModel{
margin: 0 10%;
border: 1em solid black;
padding: 3em;
background-color: yellow;
color: brown;
text-align: center;
}
CSS03-盒子模型、显示、定位
标签：高度 outline fir relative 外边距 cross Fix html ssh
原文地址：https://www.cnblogs.com/C-bj/p/12128630.html
评论
亲，登录后才可以留言！