桐——前端004（盒子模型，圆角边框，阴影，背景）

————————————————————————————————————

盒子模型

盒子模型的组成

所有的HTML元素都可以看做盒子

• content
  • 内容，可以是文本，图像等。
  • css中设置width和height，就只是内容的宽与高。
• padding
  • 内边距，边框与内容之间的距离。padding不能为负值。
  • padding只能设置大小，不能设置颜色。
  • padding的简写

padding:1px;/*上下左右四个位置的边框都是1px*/
padding:10px 30px;/*上下为10px，左右为30px*/
padding:10px 20px 30px;/*上内边距为10px，左右为20px，下内边距为30px*/
padding:10px 20px 30px 40px;/*上10px，右20px，下30px，左40px*/

也可以单独设立

padding-top||padding-right||padding-bottom||padding-left

width，height，为100px，padding为30px，则盒子大小为160px*160px

当不给盒子的宽度，只给padding时，此种情况适合：一行多组文字，但每组文字都不一样多，但又想让每一组的间隔相同。

• border
  • 边框，围绕元素内容的一条或者多条线，边框会影响盒子的大小。
  • 属性，单独写每一种属性。

border-width:19px;
border-style:solid; /dashed||dotted/
border-color:red;

• 可以简写为：

border:10px solid red;  /*不分先后顺序*/

表格的细线边框border-collspace
dorder-collspace:collspace;
表示相邻的边框和在一起

当一个盒子给了width,height都为100px。再定义边框为10px，那么盒子的大小为120px.

• 透明边框的应用：防止盒子抖动。

input{
	border:1px solid transparent;
}

• margin
  • 外边距，盒子与盒子之间的距离。用法和padding一致。
  • 可以让块级盒子水平居中，但要满足以下两个条件：
    1）盒子必须指定了width
    2）盒子的左右外边距都设为auto
    margin:auto;||margin:0 auto;||margin-left:auto:margin-right:auto;

让行内元素或者行内块元素水平居中，可以给其父元素添加 text-align：center;

• 如让div中的span内放的文字处于span的水平中间位置，可以让div设置 text-align：center；

• 清除内外边距

  网页元素很多有默认的内外边距，而且不同浏览器的默认值也不一样，因此，我们要清除网页元素的内外边距。

这是我们css的第一句话！！！
*{
	padding:0;
	margin:0;
}

行内元素不要设置上下的内外边距。如果想设置，可以转变为块级元素或者行内块元素。

margin的合并

发生条件：

• 两个块级元素
• 位置是上下，不包括左右
• 只发生在普通文档流中竖直方向上

• 合并的几种情况
  1）父子元素之间
  

解决方法：

• 为父元素定义，上边框
• 为父元素定义，上内边距
• 为父元素添加 overflow:hidden;

还有其他方法，比如浮动，固定，绝对定位的盒子不会有塌陷问题。

2）兄弟元素之间

3）一个空元素，没有边框和填充
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，他们会发生合并：

单行文字水平居中

让文字的行高等于盒子的高度

css背景

• 背景颜色
  • background-color: transparent;||red||rgba(0,0,0,0.5)
• 背景图片
  • background-image:url(images/beijing.jpg);
    优点：好控制，适用于超大的图片或者极小的图片，如图标。
• 背景平铺
  • background-repeat:repeat||no-repeat||repeat-x（让背景沿着x轴方向平铺）||repeat-y（让背景沿着y轴方向平铺）;
• 背景位置
  • background-position:x y;
  • 参数可以是方位名词，或者精确单位
  • `background-position:right center;

  • 参数是方位名词

    • 如果指定两个值都是方位名词，那么两个值的先后顺序无关，left center和center left一致。
    • 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

  • 参数是精确单位

    • background-position:20px 50px;两个值的前后顺序有关。
    • 只指定了一个值一个值，一定是横坐标，Y轴方向默认水平居中。

  • 参数是混合单位

    • 两个值，第一个一定是x轴，第二个一定是y轴。

• 背景图像固定
  • background-attachment:scrol(图像随内容滚动)||fixed(图像固定)；
• 背景属性复合写法
  • background:颜色 图片地址 背景平铺 图像滚动 位置（不计顺序，空格隔开）；
  • background:transparent url(tupian.jpg) repeat fixed top center ;
• 背景颜色半透明
  • background:rgba(0,0,0,0.3);
  • 最后一个参数是透明度，取值范围在0-1之间，数值越小越透明。

圆角边框

• border-radius:10px;
• 参数值可以是百分比或者数值。
• 如果是正方形的盒子，想要设置成一个圆，把数值设置为高度或者宽度的一半即可。或者写50%。
• 如果是矩形，设置为高度的一半，可以将矩形的宽变成半圆。
• 该属性是一个简写属性，可以跟四个值，分别为左上角，右上角，右下角，左下角。

盒子阴影

• box-shadow:h-shadow v-shadow blur spread color inset;

属性值	解释
h-shadow	必需，水平阴影的位置，允许为负值 10px
v-shadow	必需，垂直阴影的位置，允许为负值 10px
blur	可选，模糊距离，即阴影的虚实 10px
spread	可选，阴影的尺寸，大小 10px
color	可选，阴影的颜色 red
inset	可选，将默认的外部阴影改为内部。不可写outset ，只可以改为inset

文字的阴影

• text-shadow:h-shadow v-shadow blur color;
• 参数值参照盒子阴影。