cs字体样式和盒子模型学习1

CSS学习笔记3
文本样式2
1.文本颜色设置-属性：color
属性值：颜色的英文单词表示/HEX（三原色16进制）/RGBa（三原色十进制），该模式还支持对不透明度的设置a，他表示不透明度，取值区间0-1，可保留两位小数
2.文本的居中方式text-align该属性用于控制“行内块元素”或“块元素”内“行内元素”（文本元素）的居中方式的，包含三个值：left（默认）文本左对齐center文本居中对齐right文本右对齐
3. 段落首行缩进 text-indent 中文布局，使用“2em”作为首行缩进“两个字符”4. 文本装饰线 text-decoration None（默认）无装饰线Underline在文本下方显示 a超链接标签默认带有Overline 在上方显示line-through 在文本中间显示 相当于删除线5. 英文字母大小写转换 text-transform None （默认）保持原来不变Capitalize 将每个单词首字母大写，不管其他字母Lowercase 将所有英文字母转为小写Uppercase 将所有英文字母转为大写6. 文本阴影 text-shadow 给文本添加阴影效果（— — — —）四个值分别代表：水平方向阴影偏移、垂直方向阴影偏移、阴影模糊距离、阴影的颜色7. 段落文本的行高 line-height该属性是用于设置“行内元素”中文本元素在一行中所占据的高度，（可实现单行文本垂直居中的效果）使用场景如：表格、导航按钮、自定义样式按钮、标题栏等。8. 单词的间距 word-spacing 设置英语单词的间距当你的文字间没有空格时，整体就会被当做一个单词。当你的每个汉字两边都有空格时，每个汉字才会被当做是一个单词。其值可以为负数，距离会减小9. 字符的间距 letter-spacing10. 该属性是用于控制字符间的间距。11. 一个字母，一个汉字，甚至一个空格都是一个字符。12. 在html中，多个空格最终会变为一个空格的。其值可以为负数，距离会减小13. 空格换行处理 white-space设置如何处理元素内的空格符和换行符14. Normal （默认）由浏览器处理空格和换行15. pre段落中所有空格符和换行符都会被保留，类似pre标签16. Nowrap 段落内的文本不会换行pre-wrap段落里所有的空格符序列和换行符序列都会被保留，这点类似于pre，但是他不会去更改浏览器的默认行为（当内容的宽度小于了窗体的宽度时会出现滚动条的行为）17. pre-line18. 保留换行符，但是多个空格还是会按照浏览器的默认行为处理（多个合并为一个）19. 20. 注意：21. 如果你当前的内容是无空格分隔的一连串的英文，那么他会被浏览器当作是一个单词，不会让他换行，只会出现水平滚动条去适应他。22. 设置文本方向 direction23. Ltr默认24. Rtl从右往左25. 设置文本溢出来时的处理 overflow26. 文本的裁切 text-overflow27. clip 裁剪文本（从属性意义不大，通过overflow：hidden可实现此效果）ellipsis显示省略符号来代表被裁剪的文本不过该属性不能单独使用，必须要配合“white-space”和“overflow”来使用，否则会达不到所期望的效果。盒子模型1.盒子的组成a. Content内容b. padding内间距c. border边框d. margin外间距 2.标准的盒子模型最终盒子的width”和“height == content3.IE浏览器盒子模型最终盒子的“width”和“height”== conent、padding和border；
4. 盒子模型的转换，CSS的样式属性“box-sizing”的值设为“border-box”–》IE盒子模型（推荐）“box-sizing”的值设为“content-box”–》W3C盒子模型4.盒子的几个属性Width盒子宽度Height盒子高度Padding内边距：盒子内容与盒子边框的距离Border盒子边框Margin：外边距：盒子边框和其他边框的距离1. Padding和margin的控制四个方向单独控制margin-left: 1rem;margin-right: 1rem;margin-top: 1rem;margin-bottom: 1rem; padding-left: 1rem;padding-right: 1rem;padding-top: 1rem;padding-bottom: 1rem;当为组合之值的含义：一个值：上下，左右三个值：上，左右，下四个值：上下左右分别设置6.Border设置边框的三大属性border-width 设定边框的宽度。border-style 设置边框的类型，主要有以下可以设定的值 None,solid（实线边框），dotted（点线边框），double（双线边框），dashed（虚线边框）等等，，，border-color 设置边框的颜色，盒子模型的转换，CSS的样式属性“box-sizing”的值设为“border-box”–》IE盒子模型（推荐）“box-sizing”的值设为“content-box”–》W3C盒子模型4.盒子的几个属性Width盒子宽度Height盒子高度Padding内边距：盒子内容与盒子边框的距离Border盒子边框Margin：外边距：盒子边框和其他边框的距离1. Padding和margin的控制四个方向单独控制margin-left: 1rem;margin-right: 1rem;margin-top: 1rem;margin-bottom: 1rem; padding-left: 1rem;padding-right: 1rem;padding-top: 1rem;padding-bottom: 1rem;当为组合之值的含义：一个值：上下，左右三个值：上，左右，下四个值：上下左右分别设置
6.Border设置边框的三大属性border-width 设定边框的宽度。border-style 设置边框的类型，主要有以下可以设定的值 None,solid（实线边框），dotted（点线边框），double（双线边框），dashed（虚线边框）等等，，，border-color 设置边框的颜色，6.Border设置边框的三大属性border-width 设定边框的宽度。border-style 设置边框的类型，主要有以下可以设定的值 None,solid（实线边框），dotted（点线边框），double（双线边框），dashed（虚线边框）等等，，，border-color 设置边框的颜色，
6. 7圆角的盒子 border-radius8.元素的轮廓 outline （不会占据页面空间）7圆角的盒子 border-radius
7. 8.元素的轮廓 outline （不会占据页面空间）8.元素的轮廓 outline （不会占据页面空间）