文本样式设置/盒子模型学习笔记

一、记单词、复习前一天的学习内容、讲解练习作业。
二、转义字符

http://tool.oschina.net/commons?type=2 （转义字符的链接）
三、文本样式设置
1、text-indent 用于段落首行缩进。如果用于中文布局，一般会使用2em作为单位，段落缩进的首行字符。
2、text-decoration 文本装饰线它的属性值有（none、line-through、overline、underli）
3、text-transform英文字母大小小转换它的属性值为（capitalize将每个英文单词首字母变为大写字母。 None默认、uppercase将所有英文字母转为大写字母、lowercase、将所有因为字母转为小写字母。）
4、text-shadow 文本的影阴
该属性的作用是给文本添加阴影效果。
该属性最初是在CSS2.0中被定义的，但在CSS 2.1被删除了，不知道是出于什么考虑，在CSS3.0中又重新被写进了规范。
目前除了IE9及之前版本不支持该属性外，其它主流浏览器钧支持该属性。
该属性有4个值，具体如下：
水平方向阴影偏移（h-shadow）
“0”表示维持原位，正数为向右偏移，负数为向左偏移。单位为像素“px”。
垂直方向阴影偏移（v-shadow）
“0”表示维持原位，正数为向上偏移，负数为向下偏移。单位为像素“px”。
阴影模糊距离（blur）
用正数表示阴影模糊的单位距离，距离越大模糊程度越高，单位为像素“px”。
阴影的颜色（color）
支持Web技术中的常用颜色模式：“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。“行内块元素”和“块元素”所用的“box-shadow”（以后会学习）有所不同，文本阴影的属性值里没有“inset”（设置为内阴影）和“spread”（阴影的扩展，单位像素“px”），以后在使用中需要加以区分。
5、line-height 行高
该属性是用于设置“行内元素”中文本元素在一行中所占据的高度，（可实现单行文本垂直居中的效果）
使用场景如：表格、导航按钮、自定义样式按钮、标题栏等
6、单词之间的间距（word-spacing）
7、单词的间距“word-spacing”
该属性用于设置英文单词之间的间距。
注意
他区分单词时是按照单词两边是否含有空格来判断的，所有如果你的内容是中文，
当你的文字间没有空格时，整体就会被当做一个单词。
当你的每个汉字两边都有空格时，每个汉字才会被当做是一个单词。
其值可以为负数，距离会减小
8、字符的间距“letter-spacing”
和“word-spacing”有所不同，该属性是用于控制字符间的间距。
一个字母，一个汉字，甚至一个空格都是一个字符。
注意：

在html中，多个空格最终会变为一个空格的。

其值可以为负数，距离会减小
9、空格换行处理“white-space”
该属性设置如何处理元素内的空格符和换行符，它主要有以下值：
normal（默认）
由浏览器处理空格和换行
pre
段落里所有的空格符和换行符都会被保留（类似于

标签）
nowrap
段落内的文本不会换行（类似于没有设置过换行的“notepad”）
pre-wrap
段落里所有的空格符序列和换行符序列都会被保留（除了在某些编码格式下和“pre”有所差距，大多数时候可以说它和“pre”这个值是等价的）这点类似于pre但他不会更改浏览器的默认值。当内容小于窗体宽度时会出现滚动条。
pre-line
多空格会合并成一个，但换行符会保留
注意：如果当前的内容是无空格的一连串的英文那么它会被浏览器当做是一个单词不会换行，只会出现滚动条去适应它。
9、decoration 设置文字的方向（rtl从右到左 ltf 从左到右）
10、overflow（它的值 hidden auto scroll ）文本溢出时的处理。
11、text-overflow
文本的裁切“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;
}

Css盒子模型
1、什么是盒子模型
所谓盒子模型，即是将网页布局中的元素（能设置宽高的元素）进行拟物化的比喻，一个盒子是由“内容–content”（盒子内的物件）、“内间距–padding”（物件和盒子的距离）、“边框–border”（盒子壁）、“外间距–margin”（盒子和其它物体的距离）组成，如下示例图：

IE盒子模型与W3c盒子模型
(1) 由于一些“客观”的原因，IE浏览器和标准的盒子模型有一定的差异。
(2) 标准的盒子模型
“width”和“height”== conent、padding和border；
IE浏览器盒子模型
“width”和“height == content
(3) 盒子模型的选择与转换
一方面为为了兼容IE浏览器，另一方面是IE的盒子模型在实际的布局中的确更容易控制。所以我们在实际的开发工作中，都是将标准的盒子模型转换为IE的盒子模型。转换方式如下：
是将CSS的样式属性样式：
“box-sizing”的值设为“border-box”IE盒子模型。
box-sizing”的值设为“border-conten”w3c盒子模型。
当然，如果我们要将IE的盒子模型转化为标准的盒子模型也是可行的，即将“box-sizing”的值设置为“cotent-box”，不过业界并不推崇这样做。
2、盒子宽度，盒子高度，内间距，边框，外边距
基本含义
width: 盒子宽度
Height：盒子高度
Padding：内边距：盒子内容与盒子边框的距离
Border：盒子边框
margin: 外边距：盒子边框与其他标签的边框的距离
组合值具体设置padding/margin
一个值: 上右下左（同时设置四个值分别设置）
两个值：上下，左右
三个值：上，左右，下
Border设置
border-width 设定边框的宽度。
border-style 设置边框的类型，主要有以下可以设定的值
none，无边框
solid，实现边框
dotted，点线边框
dashed，虚线边框
double，双线边框
groove，3D凹槽边框
ridge，3D凸槽边框
inset，内浮雕边框
outset，外浮雕边框
border-color
设置边框的颜色，
当然“border”属性的各个分支属性也能单独地对某个方向上的值进行设置
圆角的盒子“border-radius”
元素的轮廓“outline”
该属性用于设置一个元素的轮廓线，和“border”不一样，“outline”无论在什么“盒子模型”下，都不会占据页面的空间，并且它不能分别去设置各个方向的值，即不能对“top”、“right”、“bottom”和“left”方向的“outline”进行分别设置，只能进行统一设置。
在使用“webkit（老版本Chrome浏览器、Safari浏览器以及iOS和Android系统自带浏览器）”内核或“blink（以新版的Chrome浏览器和Opera浏览器为代表）”内核的浏览器中，该属性会在表单元素在获得焦点后自动出现，本意是让用户获得更好的交互体验，但该设定很多时候反而会影响我们对“Web”页面的风格设置，这个时候我们都是将它的值设置为“none”。
另外，“outline”属性并不受圆角属性“border-radius”的影响。和“border”属性大体一致，
“outline”有以下分支属性：
outline-width
设置轮廓线的宽度，能为Web技术中常用的度量单位，最常用的为像素“px”。
outline-style
设置轮廓线的样式，和“border-style”一致，这里就不在赘述。
outline-color
设置轮廓线的颜色，和“border-color”一样支持Web的四种“颜色模式”。
outline-offset
设置轮廓线相对元素边界的距离，通常以像素“px”为单位。

文本样式设置/盒子模型学习笔记相关推荐

cs字体样式和盒子模型学习1
CSS学习笔记3 文本样式2 1.文本颜色设置-属性:color 属性值:颜色的英文单词表示/HEX(三原色16进制)/RGBa(三原色十进制),该模式还支持对不透明度的设置a,他表示不透明度,取值区 ...
css样式如何设置边框，阴影，渐变等特效以及通过box-sizing属性设置盒子模型，背景区域设置等
今天,我继续来和大家聊聊css3. 在css3中,新增了很多样式,使得页面更加的美观,效果更加的优秀. 但是,同样要注意的是,很多css3提出的新样式没有得到浏览器的支持,也就意味着有一部分的css3 ...
文本分类模型学习笔记
文本分类模型学习笔记 TextCNN 模型结构 HAN 模型结构实验数据集预处理模型内容模型训练模型测试近年来,深度学习模型在计算机视觉和语音识别中取得了显著成果.在自然语言处理中,深度 ...
DMU-单性状重复力模型-学习笔记3
单性状重复力模型本次主要是演示如何使用DMU分析单性状重复力模型. 重复力模型和动物模型的区别: 不是所有的性状都可以分析重复力模型, 首先重复力模型是动物模型的拓展, 它适合一个个体多个观测值的情 ...
ARIMA模型学习笔记
ARIMA模型学习笔记目录 ARIMA模型学习笔记 ARIMA模型时间序列平稳性什么是平稳性严平稳弱平稳平稳性检验 ADF检验(Augmented Dickey-Fuller test) ...
概率图模型学习笔记：HMM、MEMM、CRF
作者:Scofield 链接:https://www.zhihu.com/question/35866596/answer/236886066 来源:知乎著作权归作者所有.商业转载请联系作者获得授权 ...
初识微信小程序文本样式设置
创建一个微信小程序,利用class属性设置文本样式,包括:文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等  <view class= ...
Heckman两阶段模型学习笔记
有近两周的时间都在学习Heckman两阶段模型.网上看了一些资料,在CSDN里找到了几篇珍贵的学习笔记,有一篇相当于带我入了门学习笔记 | Heckman两阶段法介绍_Claire_chen_jia的 ...
关于css设置盒子模型，设置像素与实际像素不同的问题
关于css设置盒子模型,设置像素和实际像素不同的问题写网页时,发现自己网页设置盒子像素和实际用ps量的像素不同.盒子模型的margin和padding也对,网页的缩放也时100%,但就是不同. 分析 ...

文本样式设置/盒子模型学习笔记

文本样式设置/盒子模型学习笔记相关推荐

最新文章

热门文章