回炉重造八

勿

夜

border属性:

border-top/border-right/border-bottom/border-left

连写方式:

border:1px solid red;

上右下左的方式

border-width:1px 5px 6px 8px;

border-style:solid/dashed;(常用的两种,虚线和实线)

border-color:red;

注意点:

这三个属性的取值省略时的规律

上 右 下 左 > 上 右 下 > 左边的取值和右边的一样

上 右 下 左 > 上 右 > 左边的取值和右边的一样 下边的取值和上边一样

上 右 下 左 > 上 > 右下左边取值和上边一样

同一个选择器中如果设置了多个边框属性, 后面的会覆盖前面的

内边距属性(padding):

书写格式与上面一样,注意点:

给标签设置内边距之后, 标签占有的

给标签设置内边距之后,

省略规律和border属性一样

外边距属性(margin):

书写格式与上面一样,注意点:

给标签设置外边距之后, 标签占有的

给标签设置外边距之后,

省略规律和border属性一样

外边距合并现象

默认布局的垂直方向上外边距是不会叠加的, 会出现合并现象, 谁的外边距比较大就听谁的

快捷书写格式:

span.box$*3

我是span

我是span

我是span

span标签一开始是没有外边距的,看上去有外边距是因为字符实体的原因,打了回车或者多个空格,造成有一定的位置

内容宽高指的是就是通过width/height属性设置的宽度和高度

元素的宽高

宽度 = 左边框 + 左内边距 + width + 右内边距 + 右边框

高度 同理可证

元素空间的宽高指的是元素的宽高加上外边距的宽度和高度

box-sizing属性(重要)

CSS3中新增了一个box-sizing属性, 这个属性可以保证我们给盒子新增padding和border之后, 盒子元素的宽度和高度不变

box-sizing取值

content-box

元素的宽高 = 边框 + 内边距 + 内容宽高

border-box

元素的宽高 = width/height的宽高

增加padding和border之后要想保证盒子元素的宽高不变, 系统会自动减去一部分内容的宽度和高度

box-sizing中加了margin一样是换行的,所以说box-sizing不能保证元素空间的,能保证的是,元素的宽高和width/height一样

注意点：

如果两个盒子是嵌套关系，那么设置了里面一个盒子的顶部

的外边距看，外面的一个盒子也会被顶下来。

2.如果外面的盒子的盒子不想被一起定下来，那么可以给

外面的盒子添加边框属性。

3.在企业开发中，一般情况下如果需要控制嵌套关系盒子之间的距离，

应该首先考虑padding，其次在考虑margin，

margin本质上是用于控制兄弟关系之间的间隙的

在嵌套关系的盒子中，我们可以利用margin：0 auto；的方式来让里面的盒子在外面的盒子水平居中

2.margin：0 auto；只对水平方向有效，对垂直方向无效。

text-align:center;和margin:0 auto;区别、

text-alian只是设置文字和图片水平居中。

margin:0 auto;让盒子自己居中。

为什么要清空默认边距（外边距和内边距）

在企业开发中为了更好的控制盒子的宽度和计算盒子的宽高等等。

格式：

第一种方法

*{

margin:0;

padding0;

}

注意点

通配符选择器会找到当前界面中所有的标签，所以性能不好

在企业开发中可以从这个网址中拷贝

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td

行高和盒子高度不同！

--line-height:行高；height：盒子高；

行高：line-height：

默认情况下，文字在行高中默认垂直居中，

行高会撑高盒子，

在企业开发中，经常将 只要行高和盒子高一样，文字就会垂直居中。

--盒子中有多行文字，不能使用设置行高等于盒子高度，让文字垂直居中，只能通过padding来设置。

--前端经验：盒子中存储的文字，一般已盒子左边内边距为基准，不会已右边距为基准，右边距有误差，文字左边距是准确的，右边距一般不准。因为右边如果放不下一个文字，文字就会换行显示，所以文字和内边距间距离就会有误差。

顶部的内边距并不是边框到文字顶部的距离,而是边框到行高顶部的距离

网页布局方式：排版，浏览器对页面元素的排版。

排版方式：

1.标准流（文档流、普通流）流动式排版方式

css元素分为三类：块级，行内，行内块级；

块级元素就会垂直排版，行内元素和行内块级元素会水平排版

浮动流是一种“半”脱离标准流的排版方式。

浮动流只有一种排版方式(水平排版)，它只能设置某个元素左对齐或者右对齐。

浮动于父元素的左边/右边.

注意：

1、浮动流中没有居中对齐，也就是没有center这个取值。

2、在浮动流中，是不可以使用martin:0 auto;来是元素居中的。

特点：

1、在浮动流中是不区分块级元素/行内元素/行内块元素的。无论是哪种，都可以水平排版。

2、在浮动流中，无论是块级元素/行内元素/行内块元素都可以设置宽和高。

3、综上所述，浮动流中的元素和标准流中的行内块元素很像，既可以水平排版又可以设置宽和高。