CSS设置精选版(框模型)

xiaoxiao2023-03-22  38

1、框模型概述:

注意:IE6 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。

 

2、padding和margin的四个属性顺序分别是 上 右 下 左,这些值不止做用于div中,还做用于table中。如果缺少下值,则取上值,如果缺少左值,则取右值

 

3、边框背景在浏览器中的区别:

CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义,不过一些较老的浏览器可能会有不同的表现。

 

4、设置边框线:border-style: 属性顺序依次为 上 右 下 左 ,边框属性应用于任何元素。

值描述none定义无边框。hidden与 "none" 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。dotted定义点状边框。在大多数浏览器中呈现为实线。dashed定义虚线。在大多数浏览器中呈现为实线。solid定义实线。double定义双线。双线的宽度等于 border-width 的值。groove定义 3D 凹槽边框。其效果取决于 border-color 的值。ridge定义 3D 垄状边框。其效果取决于 border-color 的值。inset定义 3D inset 边框。其效果取决于 border-color 的值。outset定义 3D outset 边框。其效果取决于 border-color 的值。

 

  4.1 分别设置边框属性:border-top-style  border-right-style  border-bottom-style  border-left-style

  4.2 边框宽度:border-width:

  4.4 边框颜色:border-color,属性顺序依次为 上 右 下 左

  4.4 分别设置边框颜色:border-top-color  border-right-color  border-bottom-color  border-left-color

  4.5 透明边框:border-color: transparent; 如:

        a:link, a:visited {          border-style: solid;          border-width: 5px;          border-color: transparent;        }        a:hover {border-color: gray;}

        注意:IE6不支持

 

5、对于span等行内框,如果要改变高度,需要设置line-height属性。

转载请注明原文地址: https://www.6miu.com/read-4987526.html

最新回复(0)