三、尺寸和单位
- 定义宽度`width`和高度`height`可以使用长度单位:px,pt,rem,em,%等等
- 一般 pc 端网页使用 px 像素(屏幕小点)(配合%) (笔记本;台式机)
- 移动端使用rem,vw,vh 等响应式单位 (手机;pad;)
- 最大宽度最小宽度,最大高度和最大宽度(在响应式部分进行讲解)
- `max-width`最大宽度,`max-height`最大高度
- `min-width`最小宽度,`min-height`最小高度
- 不允许出现负值,最小不满足时出现横向或竖向拖动条
四、颜色
1.英文颜色
- 常用 red,green,blue,yellow,orange,pink,purple,gold
- transparent 透明色
2.十六进制颜色
- `#rrggbb`#必须写 #ffffff; #fff;
- 1、2 位代表红色范围
- 3、4 位代表绿色范围
- 5、6 位代表蓝色范围
- 十六进制颜色范围是 0-9,a-f
- 如果三组都是相同的值,可以简写
- 企业标注图一般都使用十六进制颜色(需要大家认识标注图)
3.rgb 颜色
- `rgb()`函数,三个参数,用逗号分隔
- r 代表红色色值,g 代表绿色色值,b 代表蓝色色值
- 取值范围 0~255 之间的 256 个数
- `rgba()`a 代表透明度,取值 0~1 之间的数字,0 代表完全透明
【练习】
> 使用三种颜色赋值方式分别给元素赋值
> 给 p 标签加一个半透明背景颜色
div { width: 200px; height: 200px; /* 英文颜色 */ background-color: red; /* 透明色 */ background-color: transparent; /* 十六进制颜色 */ background-color: #f00d19; /* rgb颜色 0~255*/ background-color: rgb(10, 210, 30); /* rgba 最后一个a是透明度 */ /* background-color: rgba(0,0,0,0.5); */ } p { width: 100px; height: 100px; /* 最后一个值0-1之间 */ background-color: rgba(21, 95, 83, 0.39); } |
五、边框
1.边框的属性
- `border-width`边框宽(线厚)度
- `border-style`边框样式,solid 实线,dashed 虚线,dotted 点点
- `border-color`边框颜色
2.边框的位置
- `border-bottom`下边框
- `border-top`上边框
- `border-left`左边框
- `border-right`右边框
3.边框都简写方式
`border:30px solid green;` 三个位置分别可以写边框宽度、边框样式边框颜色,没有严格要求书值都写顺序。
p { font-size: 100px; /* 简写方式 四个位置(上下左右)*/ border: 30px solid green; /* 单向边框简写 */ border-bottom: 30px solid red; } |
4.三角形
.sjx { /* 宽度必须要写0 */ width: 0; height: 0; /* 以下书写顺序不能改变 */ border: 100px solid transparent; border-bottom-color: black; } |
六、元素的分类
1.元素的显示属性
`display`元素以什么方式显示(以下为常用显示方式)!!!!
- `display: block;`以块级元素方式显示
- `display: inline;`以内联(行内级)元素方式显示
- `display: inline-block;`属于行内元素,但以块级显示,俗称行内块
- `display: none;`不显示
- `display: table;`以 table 方式显示(不是重点)
2.内联元素
- 内联元素也可以叫行内元素
- 设置宽度、高度无效(行内块级显示元素除外)
- 和其他内联元素横向从左向右排列
- 设置上下内、外边距无效
- 常见的行内元素`span a`等
3.inline-block
- 它是行内元素的一种
- 不自占一行横向从左向右排列
- 可以设置宽度、高度以及内外边距
- 常见的行内块级显示元素`img button input`
- 会出现幽灵空白节点
- 把 img 标签变成块级元素 `display: block;`
- 父级元素`font-size: 0;`去掉空白节点
div { width: 300px; background-color: red; /* 去掉幽灵 */ font-size: 0; } img { /* 就是和父元素一样宽 */ width: 100%; display: block; } |
4.块级元素
- 每个元素都自占一行,后面的元素也只能另起一行
- 元素的宽度、高度以及内外边距都可以设定
- 块级元素宽度不设定,为父级元素宽度
- 高度不设定为内容高度,如果没有内容,高度为 0
- 常见的块级元素`div,p,h1,ul,li,table`
【练习】
> 将块级元素变成内联元素
> 将内联元素变成块级元素
> 让元素消失
> 将 a 标签变为行内块级显示
div { width: 100px; height: 100px; background-color: gold; /* 内联元素显示 */ display: inline; } span { width: 100px; height: 100px; /* 块级元素显示 */ display: block; background-color: yellowgreen; } p { width: 100px; height: 100px; background-color: blue; /* 不显示 */ display: none; } a { width: 50px; height: 50px; padding: 30px; background-color: orange; /* 行内块级显示 */ display: inline-block; } |
七、显示和隐藏属性
1. display:none
- `display:none;`使元素消失,脱离文档流的消失
- `display:block;`使元素出现,元素显示为块级元素
2. visibility: hidden
- `visibility: visible;`元素显示
- `visibility: hidden;`元素隐藏,占据自身位置
3. opacity: 0;
- opacity 属性代表元素的透明度,取值范围是 0-1 之间的数字,0 代表完全透明,1 代表不透明
- 缺点是,元素内的一切都会随着透明度改变
八、文本格式化
1. 字体属性
(1)字体大小
字体大小可以使用不同的单位,如 px、pt、em、rem、vw 等等,不允许负值像素,尽量不出现小数。pt 是 ui 经常会用的单位,dpi: 直接来说就是一英寸多少个像素点,可以理解为像素密度,pt = px \* dpi / 72 ,遇到 pt 的设计图怎么处理,pc 端页面使用 px,移动端可以使用 em,rem 以及 vw
- `font-size: 30px;`字体号属性
- 取值,如 px、pt、em、rem、vw 等等,不允许负值像素,尽量不出现小数。
- px 像素
- pt 磅
- em 父级元素的倍数
- rem 根标签的倍数
- vw 视窗尺寸
用户的浏览器默认渲染的文字大小是“16px”(大多数浏览器)“em”是一个相对的大小,相对的是"父级元素"的字体大小,我们可以这样来设置 1em,0.5em,1.5em。
(2)字体系列
在选择字体之前,一定要按照产品要求赋值,要确定用户有该字体,或者可能有该字体。字体不要只写中文,最好英文中文一起加入,并把该字体的英文描述写在前面。
- `font-family`属性设置所需要的字体
- 一个单词的可以之际使用,多个单词组成词组的用引号括起来,中文尽量用引号括起来
- 多个字体列表按照顺序从前往后查找执行
需要字体库的支持,用户字库中含有的字体。在 word 中查看当前电脑的字体库。一般情况下直接放在 html 标签下应用因为字体是继承的。
很多字体商用是收费的,因此在使用字体之前,需要参照公司,或者产品提供的字库列表,如果没有特别说明需要自己提问,这样显得更加专业。企业会指定字库,要考虑版权,商用和非商用的字体方案。
推荐字体序列
移动端项目:
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self; |
pc端(含Mac)项目:
font-family:Tahoma,Arial,"Helvetica Neue","Hiragino Sans GB",Simsun,sans-self; |
移动和pc端项目:
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self; |
(3)字体字重
字体字重就是字体粗细,但根据浏览器的不同可能展现的粗细表现也不同,因此有些值的差别看不出来,尤其是移动端,要提醒 ui 不要太细,不要太粗,显得更专业
- `font-weight`字体的字重,字的粗细
- 于 1 和 1000 之间的数字类型值,必须要是 100 的倍数。
- 常用关键词:normal(400 默认)、bold(700)、lighter(300)
- 浏览器不同展现效果不同,需要注意
(4)字体样式
在一般情况下,因为部分标签带有自己的样式,所以一些公司在 css 样式重置的时候会先把所有的字体样式搞成统一的,比如具有斜体的`<i>`标签,会先把它变成默认样式再进行操作。
【注意】加粗的标签也会变成默认粗细。不建议使用标签做斜体
- `font-style`字体样式属性
- `font-style: normal;` 默认正常
- `font-style: italic;` 斜体
(6)字体的简写方式
- `font:italic 400 40px chiller;`
- 顺序:字体样式 字重 字号 字体系列,不可改变顺序
- 最简方式 `font:40px chiller; `字号和字体系列,不能再减少
2. 文本属性
(1)字体颜色
注意:不同终端展示颜色可能不同,尽量使用 web 安全色,或者沟通颜色的要求
- color:颜色的色值
- 取值:英文,十六进制,rgba(),其他
(2)文本的水平对齐方式
- `text-align`针对块级元素中的内联元素,它需要写在父级(块级元素)中,不能写在子元素中(文字本身和内联元素)
- 取值
- `left`默认,左对齐
- `center`居中对齐
- `right`右对齐
- 内联元素(单个)与文字(单行)在父级水平居中的方式:是对块级元素中的文字,或对块级元素的内联元素水平居中,这个元素需要给父级(块元素),块级元素的水平居中不能使用该属性。
div { width: 500px; height: 200px; text-align: center; /* 适用于div内部的文字和内联元素 */ } |
(3) 文本的行高
- `line-height`属性可以设置文本的行间距,可使用长度单位 px,或使用无单位的倍数如 1,1.5,2
- 文本的行高包括文字上下间距+文本高度,文本居中上下行间距相等
- 使行间距等于元素高度,则“单行文本”垂直显示在元素中
- 常用场景
- 行元素在块元素里上下左右居中(行高等于父级元素高度)
- 增加元素的文字行间距(在父元素设置,子元素也会生效)
(4) 文本的线条修饰
在使用 a 标签的时候有一个默认下划线,有时不需要,在 css reset 中将 a 标签的默认下划线去掉
- `text-decoration: none;`无线条
- `text-decoration: underline;`下划线
- `text-decoration: overline;`上划线
- `text-decoration: line-through;` 删除线
(5)首行缩进
- `text-indent`指定块容器中第一行文本的缩进
- `text-indent:2em`两倍的字体大小,相当于空两格
(6)文本的换行
- 文本换行的原因
- 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的`white-space:normal`,当定义的宽度之后自动换行。
- 对于连续的英文字符和阿拉伯数字不能换行,这是因为 div 中,英文字母之间没有空格的话,它会默认认为这是一个英文单词,所以单词就一次输出不换行
- 换行属性
- `white-space: nowrap;`不换行
- `word-wrap:break-word;`强制换行
(7)文本溢出
各浏览器对`text-overflow:ellipsis`支持都不统一,特别是表现形式上,因此它的兼容性并不好。
/* 出现省略标记 */ .d1 { background-color: turquoise; width: 150px; /* 超出部分隐藏(后面会学) */ overflow: hidden; /* 当对象内文本溢出时显示省略标记(...) */ text-overflow: ellipsis; /* 强制不换行 */ white-space: nowrap; } |
(8)文字阴影
文字阴影和盒子阴影类似,都需要具有关键的内容,但没有内阴影
- `text-shadow`为文字添加阴影。
- 可以添加多个阴影,阴影值之间用逗号隔开。
- 参数:
- 第一个值和第二个值代表: x 轴上的偏移量 和 y 轴上的偏移量,长度单位,可以为负值。
- 第三个值代表:模糊半径的大小(羽化)。【可选】
- 第四个值代表:颜色值。【可选】
/* x轴偏移 | y轴偏移 | 模糊半径 | 颜色 */ text-shadow: 1px 1px 2px black; |
九、垂直对齐方式
1.vertical-align 属性
- `vertical-align`是用来设置内联元素对齐方式的,针对的并不是自身的文字
- 常用关键字值:
- `vertical-align: middle;`
- `vertical-align: top;`
- `vertical-align: bottom;`
- `vertical-align: baseline;`img 的默认对齐值为基线对齐
input { height: 100px; vertical-align: top; /* 在前后加入内联元素或文字【改bottom、middle】 */ } <span>前一段文字</span> <input type="text"> <a href="#">后一段文字</a> |
2. 文本元素基线
- 针对img元素vertical-align: baseline; /*不写就是默认值*/
- 文字的基线不同的文字会有不同的展现
【练习】
> 要求布局只有一个图片和一个名字标签
> 完成图示效果
<style> img { vertical-align: middle; } </style> <div> <img src="./img/垂直对齐头像.jpeg" alt="" /> <span>幔帐中的林黛玉</span> </div> |
day09重点
1.前端使用的单位
(1)长度单位
px(绝对单位)、pt(磅)、%(针对父元素的)
(2)移动端em、rem、vw、vh
(3)s、ms、deg
2.长度值中的最大和最小
3.颜色
十六进制#rrggbb 0-9 a-f
rgb(x,x,x)范围0-255之间
rgba()a代表透明度0-1 之间1完全不透明
4.元素特性
(1)元素只要有文字就会有高度,高度是文字的高度
(2)元素的宽度,块级元素默认宽度是父元素宽度的100%
(3)内联元素没有文字的支撑不会呈现宽度和高度,有文字支撑的时候宽高是文字的宽度高度(特殊内联除外如img、input、button)
(4)块级元素不管设置的宽度是多少,默认自占一行,在父级空间。高度设置,设置了多高就是多高
(5)普通的内联元素只依靠文字内容撑开,宽度高度的设置均无效(特殊内联除外如img、input、button)
(6)块级元素的默认排列方式(文档流)从上往下顺序排列
(7)内联元素的默认排列方式(文档流)从左向右排列,如宽度不够时,换行继续从左向右排列
(8)inline-block 行内块,他是内联的一种特性为可以设置宽度高度等,但仍然从左向右排列。(不推荐座布局,因为幽灵空白节点)
5.幽灵空白节点
存在于行内块中,因此需要去掉时可使用以下方法
(1)把行内块变成,块级元素
(2)父级中去掉所有节点的像素值font-size:0(只针对于img使用)
6.元素消失与显示(区别一定要知道)
(1)display: none;彻底消失不占据页面中的任何位置,元素因none而消失的情况需要同样的属性display: block;来让元素重新显示
(2)visibility: hidden;隐藏属性,可以让元素不显示,但仍然占据原位置,isibility: visible;属性可以恢复之前的显示状态
(3) opacity: 0;代表元素透明,opacity: 1;代表元素完全不透明
7.rem和em
(1)em参照的是父级字号的比例,1em代表父级字号*1,2em代表父级字号*2
(2)rem参照html跟标签的指定字体大小的倍数
8.text-align属性
(1)文本在元素中(块级元素和某些特殊内联)水平对齐(左,右,中)
(2)当文本被内联元素包裹时,视为该内联元素与文字一体,都作为文本,因此该水平对齐方式给其内联元素的父级块元素
9.行高,行间距
(1)如果父级没有高度,文字给了行高,那么父级的高会被行高+文字一起撑高(注意是单行文字)
(2)单行文字在父元素(有高的)垂直居中,行高为父元素的高度即可
10.标题省略
div {
/* 限制宽度 */
width: 200px;
/* 强制不换行 */
white-space: nowrap;
/* 多余部分不显示 溢出部分隐藏*/
overflow: hidden;
/* 文本溢出显示 (兼容不是很好)*/
text-overflow: ellipsis;
}
作业:
1.写tmooc作业
2.复习(尤其是元素特性)
3.预习5-6