day6文本属性盒模型

颜色的取值：

    1）关键字 red  yellow

    2）十六进制  包含0-9 a-f  黑色：#000000简写#000 白色#ffffff

    3)三原色 rgb(0,0,0) 黑色 rgb(255,255,255) 白色 取值0-255  （扣扣截图有）

    4）rgba()  a:透明度  取值0-1 0：完全透明 1：不透明  o.5简写.5

字体属性

字体属性具有继承性

• 1）字体颜色

color：属性值；

• 2）字体大小

font-size:属性值；浏览器支持的最小字体为12px

• 3）字体是否加粗

font-weight：normal/bold/100-900(整百的数 没有单位);

400=normal

700=bold

• 4)字体是否倾斜

font-style:normal/italic;

• 5)字体

font-family：字体1，字体2，字体3；浏览器默认是宋体；(从前往后依次尝试,不支持第一个，

就是第二个，不支持第二个就是第3个，都不支持就是默认的宋体)

eg: font-family:幼圆, 楷体; 不支持幼圆，所以是楷体。

注意：如果字体名称包含空格（字体由多个单词组成），它必须加上引号 没有空格加不加引号都可以

eg:font-family:"Microsoft YaHei","Simsun","SimHei";

文本属性

文本属性具有继承性

1）元素内容的水平对齐方式 (元素内容在这个元素的空间里面的水平位置,并不是元素本身)

text-align:left/center/right;

2）文本装饰

text-decoration:underline/none/line-through（删除线）/overline(上划线);

3）英文字母大小写转换

text-transform:uppercase(大写)/lowercase（小写）/capitalize( 每个单词首字母大写);

4）首行缩进

text-indent:;  取值 px  em 

px  绝对单位  像素

em  相对单位  相对于当前字体大小  

当当前字体是16px   那么1em=16px 那么2em=32px；

当当前字体是20px   那么1em=20px  那么2em=40px;

所以em是相对于当前的字体大小来说的  没有确定的1em=多少

rem  相对单位

其他字符格式

1.字符之间的距离  

letter-spacing: 10px;  取值可以取负值

2.行高   指定行与行之间的空间

line-height:100px;

3.设置元素文本方向

direction: rtl;

4.增加单词之间的空白距离 

word-spacing: 30px;

5.指定元素内的空白怎么处理

white-space:;

取值： normal  默认 空白会被浏览器忽略

      pre 空白会被浏览器保留

      nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br>标签为止

在元素内禁止元素环绕（不允许换行）white-space: nowrap;

6.设置一个元素的垂直对齐方式 

1)在td中

td内容的垂直对齐方式

2）离开td

容器中元素和内容的垂直对齐方式

7.带阴影的文本 

text-shadow: 2px 2px #FF0000;

盒子模型：

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

在css中，"box model"这一术语是用来设计和布局时使用。

css盒模型本质是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

eg:content是你网购的杯子  那么padding就是填充的泡沫  border是你的快递盒

而margin是你的快递和别人的快递的距离

盒模型允许我们在其他元素和周围元素边框之间的空间放置元素。

不同部分是说明：

Margin(外边距)：清除边框外的区域，外边距是透明的。

Border(边框)：围绕在内边距和内容外的边框。

Padding(内边距)：清除内容周围的区域，内边距是透明的。

Content(内容)：盒子的内容，显示文本和图像。

标准盒模型(w3c盒模型)--浏览器默认

1）组成部分：

content+padding+border+margin

  内容   内边距   边框   外边距

2）实际宽度

width+padding+border+margin

3）content 内容区域

width:;  取值px  %(相对于父元素)

height:;   取值px  %(相对于父元素)

min-width:;最小宽度

max-widtg:;最大宽度

min-height:;最小高度

max-height:;最大高度

4)边框样式：border 边框

border-style:solid/dashed/dotted/double/none;  //属性用来定义边框的样式

              实线   虚线   点线  双实线  不显示

必须属性，默认为黑色 3px

当取值是double时，最小宽度为3px哦

border-color:; 默认是黑色  //属性 用来设置边框的颜色

border-width:;   //属性为边框指定宽度

可以简写成  border：5px solid green;

单边属性：(简写) 

border-top:1px solid red;

border-bottom:1px solid red;

border-left:1px solid red;

border-right:1px solid red;

  注意：边框背景颜色可以到达