<( < ) / >( > )
1,文本样式设置:
段落首行缩进text-indent
该属性是用于设置每个段落首行缩进数量值的属性,如果是用于中文布局,一般会使用“2em”的数值和单位来为每个段落的首行缩进“两个字符”。例如:
文本装饰性(下划线)text-decoration
文本字母大小写转text-transform
该属性有以下属性值:
none(默认):保持文本中英文单词的默认大小写
Capitalize:每个英文单词首字母为大写字母,其它为小写字母(大驼峰写法)
注意:除了首字母发生改变外,其他的字母原本是大写就是大写,原本是小写就是小写
Uppercase:将所有英文单词转换为大写字母
Lowercase:将所有英文单词转换为小写字母
文本的阴影text-shadow
该属性有4个值,具体如下:
水平方向阴影偏移(h-shadow):“0”表示维持原位,正数为向右偏移,负数为向左偏移。单位为像素“px”。
垂直方向阴影偏移(v-shadow):“0”表示维持原位,正数为向上偏移,负数为向下偏移。单位为像素“px”。
阴影模糊距离(blur):用正数表示阴影模糊的单位距离,距离越大模糊程度越高,单位为像素“px”。
阴影的颜色(color):支持Web技术中的常用颜色模式:“颜色英文单词”、“HEX”、“RGBa”、“HSLa”。
段落文本的行高line-height
单词的间距word-spacing
字符的间距letter-spacing
空格换行处理white-space
该属性设置如何处理元素内的空格符和换行符,它主要有以下值:
normal(默认):由浏览器处理空格和换行
Pre:段落里所有的空格符和换行符都会被保留(类似于
标签)
Nowrap:段落内的文本不会换行(类似于没有设置过换行的“notepad”)
pre-wrap:段落里所有的空格符序列和换行符序列都会被保留(除了在某些编码格式下和“pre”有所差距,大多数时候可以说它和“pre”这个值是等价的),这点类似于pre,但是它不会去更改浏览器的默认行为–当内容的宽度小于窗体的宽度时会出现滚动条的行为。
pre-line:多空格会合并成一个(浏览器的默认处理方式),但换行符会保留
如果你当前的内容是是没有空格分割的一连串英文,那么它会被浏览器当作是一个单词,不会让其换行,只会出现水平滚动条去适应它。
设置文本方向direction
ltr从左往右 (默认) / rtl 从右往左
文本的剪裁text-overflow
overflow常用值: auto / hidden / scroll…见下图:
Text-overfolw属性包含的常用值:
clip 裁剪文本(从属性意义不大,通过overflow:hidden可实现此效果)
ellipsis显示省略符号来代表被裁剪的文本
不过该属性不能单独使用,必须要配合文本换行处理属性“white-space”和内容溢出处理属性“overflow”来使用,否则会达不到所期望的效果。
显示省略号的流程见下图:
文本长度需要超出边界/不允许内容换行/设置超出就隐藏/设置文本末尾显示省略号
2,css盒子模型:
A,什么是盒子模型?就是将网页布局中的元素(能设置宽高的元素)进行拟物化的比喻,而一个盒子是由–内容indent(盒子内的物件)/ 内间距padding(物件与盒子之间的距离) / 边框border(盒子壁) / 外边距margin(盒子和其他物体之间的距离)等四个部分组成。
如下图所示:
B, IE盒子模型和W3C盒子模型
由于一些“客观”的原因,IE浏览器和标准的盒子模型有一定的差异。
标准的盒子模型
“width”和“height”== conent、padding和border;
IE浏览器盒子模型
“width”和“height == content
盒子模型的选择与转换
一方面为为了兼容IE浏览器,另一方面是IE的盒子模型在实际的布局中的确更容易控制。所以我们在实际的开发工作中,都是将标准的盒子模型转换为IE的盒子模型。
转换方式如下:
将CSS的样式属性“box-sizing”的值设为“border-box”转换成IE的 /“content-box”转换成W3C的。
当然,如果我们要将IE的盒子模型转化为标准的盒子模型也是可行的,即将“box-sizing”的值设置为“cotent-box”,不过业界并不推崇这样做。
C, 盒子的宽度 / 高度 / 内间距 / 边框 / 外边距
基本含义
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”属性的各个分支属性也能单独地对某个方向上的值进行设置。
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;
}
当为组合值时的含义:
一个值: 上右下左同时设置
两个值:上下,左右
三个值:上,左右,下
四个值:上右下左分别设置
Border设置
边框的三大属性
① border-width 设定边框的宽度。
② border-style 设置边框的类型,主要有以下可以设定的值
③ 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;
}
1.圆角的盒子“border-radius”
给每个角进行设置圆角
div {
border-top-left-radius: 5px;
border-bottom-right-radius: 10px;
}
给所有角进行设置圆角
div {
border-radius: 5px;
}
2.元素的轮廓“outline”
概述
① 该属性用于设置一个元素的轮廓线.(input点下会有蓝色边线,那就是轮廓)
② 和“border”不一样,“outline”无论在什么“盒子模型”下,都不会占据页面的空间
③ 并且它不能分别去设置各个方向的值,即不能对“top”、“right”、“bottom”和“left”方向的“outline”进行分别设置,只能进行统一给所有方向设置。(可以对某个分支属性进行设置)
④ 在使用“webkit内核或“blink内核的浏览器中,该属性会在表单元素在获得焦点后自动出现,本意是让用户获得更好的交互体验。
但该设定很多时候反而会影响我们对“Web”页面的风格设置,这个时候我们都是将它的值设置为“none”。
Webkit :
老版本Chrome浏览器、Safari浏览器以及iOS和Android系统自带浏览器
Blink :
以新版的Chrome浏览器和Opera浏览器为代表
⑤ 另外,“outline”属性并不受圆角属性“border-radius”的影响。和“border”属性大体一致
outline的分支属性
outline-width 设置轮廓线的宽度
outline-style 设置轮廓线的样式
outline-color 设置轮廓线的颜色
outline-offset设置轮廓线相对元素边框的距离
div {
width: 10rem;
height: 10rem;
margin: auto;
border: 0.05rem red solid;
outline: 1px solid blue; /* 组合值写法 */
outline-offset: 20px;
}