css样式和盒子模型手记

css样式

• checkbox 设置width和height设置：auto;恢复初始状态。

• text-indent缩进

该属性是用于“行内元素”设置每个段落首行缩进数量值的属性，
CSS字体大小（font-size）可以设置的数值和单位在该属性的值中都可以使用（除了百分比）。
如果是用于中文布局，一般会使用“2em”的数值和单位来为每个段落的首行缩进“两个字符”。

 p{
    text-indent: 2em;
    }
    默认的是pb标签的大小，默认状态的rem也可以。

• 文本装饰线“text-decoration”
  该属性是为文本上添加一根装饰线，带"href"属性的标签默认会带有一根下划线，就是由该属性的值“underline”设置的。

“text-decoration”属性有以下值：

none（默认）不显示任何装饰线

underline 在文本下方显示装饰线

overline 在文本上方显示装饰线

line-through在文本中间显示装饰线，相当于删除线

• 英文字母大小写转“text-transform”

该属性能将“行内元素”中的英文文本进行大小写转换，以满足网站对规范性的要求。

该属性有以下属性值：

1. none（默认）保持文本中英文单词的默认大小写
   

2. capitalize将每个英文单词首字母为大写字母（不论原本是大写还是小写），其它为小写字母（大驼峰写法）
   

3. uppercase将所有英文单词转换为大写字母
   

4. lowercase将所有英文单词转换为小写字母
   

• 文本的阴影“text-shadow”

该属性的作用是给文本添加阴影效果。

该属性有4个值，具体如下：

1.   水平方向阴影偏移（h-shadow）
   

“0”表示维持原位，正数为向右偏移，负数为向左偏移。单位为像素“px”。

2. 垂直方向阴影偏移（v-shadow）
   

“0”表示维持原位，正数为向上偏移，负数为向下偏移。单位为像素“px”。

3.  阴影模糊距离（blur）
   

用正数表示阴影模糊的单位距离，距离越大模糊程度越高，单位为像素“px”。

4.  阴影的颜色（color）
   

支持Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。
和“行内块元素”和“块元素”所用的“box-shadow”（以后会学习）有所不同，文本阴影的属性值里没有“inset”（设置为内阴影）和“spread”（阴影的扩展，单位像素“px”），以后在使用中需要加以区分。

• 段落文本行高“line-height”

该属性是用于设置“行内元素”中文本元素在一行中所占据的高度，（可实现单行文本垂直居中的效果）
使用场景如：表格、导航按钮、自定义样式按钮、标题栏等。

• 单词的间距“word-spacing”

该属性用于设置英文单词之间的间距。
注意
他区分单词时是按照单词两边是否含有空格来判断的，所有如果你的内容是中文，

1.当你的文字间没有空格时，整体就会被当做一个单词。

2.当你的每个汉字两边都有空格时，每个汉字才会被当做是一个单词。
3.其值可以为负数，距离会减小

• 字符的间距“letter-spacing
  

和“word-spacing”有所不同，该属性是用于控制字符间的间距。

一个字母，一个汉字，甚至一个空格都是一个字符。

注意：
1.在html中，多个空格最终会变为一个空格的。
2.其值可以为负数，距离会减小

• 空格换行处理“white-space”
  

该属性设置如何处理元素内的空格符和换行符，它主要有以下值

1. normal（默认）由浏览器处理空格和换行

2. pre段落里所有的空格符和换行符都会被保留（类似于<pre>标签）

3. nowrap段落内的文本不会换行（类似于没有设置过换行的“notepad”）

4. pre-wrap段落里所有的空格符序列和换行符序列都会被保留，这点类似于pre

5.但是他不会去更改浏览器的默认行为（当内容的宽度小于了窗体的宽度时会出现滚动条的行为）

6. pre-line保留换行符，但是多个空格还是会按照浏览器的默认行为处理（多个合并为一个）

注意：
如果你当前的内容是无空格分隔的一连串的英文，那么他会被浏览器当作是一个单词，不会让他换行，只会出现水平滚动条去适应他。

• 设置文本方向“direction”

ltr 默认值,文本方向从左到右
rtl 文本方向从右向左

•  设置文本溢出时的处理“overflow
  

  overflow : hidden,scroll,auto

•  文本的裁切“text-overflow”
  

• clip裁剪文本（从属性意义不大，通过overflow：hidden可实现此效果）

• ellipsis显示省略符号来代表被裁剪的文本，不过该属性不能单独使用，必须要配合“white-space”和“overflow”来使用

举例
div {
width: 5rem;
height: 5rem;
border: 0.1rem solid red;

white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}

盒子模型

一个盒子是由四个部分组成

1. “内容–content”（盒子内的物件）、
2. “内间距–padding”（物件和盒子的距离）、
3. “边框–border”（盒子壁）、
4. 外间距–margin”（盒子和其它物体的距离）

IE浏览器盒子模型：
“width”和“height == content
标准的盒子模型：
“width”和“height”== conent、padding和border；

我们在实际的开发工作中，都是将标准的盒子模型转换为IE的盒子模型。转换方式如下：

是将CSS的样式属性“box-sizing”的值设为“border-box”。

盒子宽度，盒子高度，内间距，边框，外边距

基本含义:

属性	基本含义
width	盒子高度
padding	内边距：盒子内容与盒子边框的距离
border	盒子边框
margin	外边距：盒子边框与其他标签的边框的距离

•  padding/margin设置
  

四个方向单独进行控制

div {
margin-left: 1rem;
margin-right: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;

padding-left: 1rem;
padding-right: 1rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
组合值控制
div {
margin: 1rem;
padding: 1rem;
}

组合值控制

div {
margin: 1rem;
padding: 1rem;
}

当为组合值时的含义：

一个值: 上右下左同时设置
两个值：上下，左右
三个值：上，左右，下
四个值：上右下左分别设置

• Border设置
  

边框的三大属性

边框的三大属性

1. border-width 设定边框的宽度。
2. border-style 设置边框的类型，主要有以下可以设定的值
3. border-color 设置边框的颜色.

单独设置各属性（所有方向）

div {
border-color: #4b8fca;
border-style: solid;
border-width: 2rem;
}

只设置某个方向上的border，单独控制

div {
border-right-color: #4b8fca;
border-right-style: solid;
border-right-width: 2rem;
}

边框可选类型如下：

• none，无边框
• solid，实现边框
• dotted，点线边框
• dashed，虚线边框
• double，双线边框
• groove，3D凹槽边框
• ridge，3D凸槽边框
• inset，内浮雕边框
• outset，外浮雕边框

组合值

用组合值设置各属性（所有方向）
div {
  border: 0.05rem red solid; 
}

 各个属性的位置可以调整改变

只设置某个方向上的border，组合值控制

div {
  border-right:1rem solid red;
}

• 圆角的盒子“border-radius”
  

给每个角进行设置圆角

div {
   border-top-left-radius: 5px;
   border-bottom-right-radius: 10px;
}

给所有角进行设置圆角

div {
border-radius: 5px;
}

• 元素的轮廓“outline”

outline的分支属性

1. outline-width 设置轮廓线的宽度
2. outline-style 设置轮廓线的样式
3. outline-color 设置轮廓线的颜色
4. outline-offset设置轮廓线相对元素边框的距离

div {
width: 10rem;
height: 10rem;
margin: auto;
border: 0.05rem red solid;

outline: 1px solid blue; /* 组合值写法 */
outline-offset: 20px; /* 这个值只能单独写 */

div {
width: 10rem;
height: 10rem;
margin: auto;
border: 0.05rem red solid;

outline: 1px solid blue; /* 组合值写法 */
outline-offset: 20px; /* 这个值只能单独写 */

• 可调整元素大小的“resize”
  

(1)默认情况textarea能够进行元素标签大小的调整

(2)resize的使用

resize这个属性就是用来专门定义这种大小调整的行为的，使用方式如下：

1)resize应该配合overflow这个css属性进行使用,
然后overflow值一般为下者之一即可：hidden/auto/scroll

2)resize应该使用到块级元素与行内块元素上。【通过display属性修改的也算】

3)resize主要有三个值
①　允许垂直改变大小：vertical
②　允许水平改变大小：horizontal
③　允许垂直水平同时改变大小：both

4)resize属性在大部分ie系列里面的浏览器中都是无效的。

resize使用示例
div {
/* 设置div的大小和边框 */
border: 0.1rem solid red;
width: 3rem;
height: 3rem;
/* 设置以下样式，让此元素大小可变 */
resize:both;
overflow:hidden;

5)<textarea>默认能够改变大小，就是默认设置了值为both,如果我们想让他只能水平改变大小或者垂直改变大小，或者不能改变大小，我们直接使用设置相应的resize值就可以了，并且无需显示的去设置“overflow”属性。

• 元素的阴影“box-shadow”
  

基本值
h-skewing（必要）
阴影在水平方向的偏移，负数是向左偏移，正数是向右偏移，单位为“px”。
v-skewing（必要）
阴影在垂直方向的偏移，负数是向上偏移，正数是向下偏移，单位为“px”。
blur（可选）
阴影的“模糊距离”或“模糊程度”，单位为“px”。
color（可选）
阴影的颜色，支持Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。

和文本阴影的不同（多了两个值）
inset（可选）
将默认向外的阴影方向改为向内，然后inset一般是放在阴影颜色的后面。

spread（可选）
阴影的扩展范围,值为数值，其单位可以使用常用单位。rem,em,px.
它应该放在阴影颜色的前面

给某个元素设置margin-top时，如果他上方元素含有“margin-bottom”，则这两个值会重叠，并且取较大值作为间距值。如果为水平方向都设置margin则相加。