作者: 她不美却常驻我心
博客地址: https://blog.csdn.net/qq_39506551
微信公众号:老王的前端分享
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正。转载请附带作者信息及出处。
从零开始学前端 - 5. CSS 常用属性
一、CSS 常用单位
1. 绝对长度单位
1.1 px
px,即“pixel”(像素)。是显示屏上显示的每一个小点,为显示的最小单位。是我们在 PC 端网页中最常使用的单位。
1.2 pt
pt,即 “point”(点),是印刷行业常用单位,等于1/72英寸。是一个自然界标准的长度单位。
2. 相对长度单位
2.1 em
em 表示元素的 font-size 属性的计算值,如果用于 font-size 属性本身,相对于父元素的 font-size ;若用于其他属性,相对于本身元素的 font-size 。
例:
div{font-size:16px;text-ident:2em};
div p{font-size:1.5em}
我们将 div 的字体大小设置为 16 像素,并且设置它的文本向后缩进 2em = 2*16px
的距离,而子元素 p 的字体大小设置为 2em = 1.5*16px
。
2.2 rem
rem 是相对于根元素 html 的 font-size 属性的计算值。
例:
html{font-size:20px;}
div{width:2rem;}
div 的宽度是 40px。2rem = 2*20px
。
2.3 vh、vw
我们将浏览器窗口的宽高各自平分为 100 份,vh 表示窗口高度的 1/100,vw 表示窗口宽度的 1/100。
二、基本属性-常用属性
1. 基本属性
1.1 宽度 width
语法:width:value + unit
实例:width:50%
作用:将元素的宽度设置为父元素宽度的50%
1.2 高度 height
语法:height:value + unit
实例:height:50%
作用:将元素的高度设置为父元素高度的50%
1.3 min-width | min-height
作用:设置元素的最小宽度和最小高度,元素的大小可以大于设置的数值,但不会小于设置的数值
1.4 max-width | max-height
作用:设置元素的最大宽度和最大高度,元素的大小可以小于设置的数值,但不会大于设置的数值
1.5 颜色 color
语法:color:color
实例:color:#f00
。
作用:设置文字的颜色。
- color 可以是英文名字,如
red
、black
等; - color 可以是十六进制值的背景颜色,如
#f00
,#000
等; - color 可以是 rgb 代表的背景颜色,如
rgb(255, 0, 0)
,rgb(0,0,0)
等;
2. 文本属性 font
语法:font:style weight size/line-height family
实例:font:italic bold 16px/24px "Microsoft YaHei"
作用:设置字体样式为 斜体 加粗 16像素字号 / 24像素行高 “Microsoft YaHei”(微软雅黑)字体。
同时,该属性可以拆分为以下五个属性,也是文字的核心属性:
2.1 字体样式 font-style
语法:font-style: normal(正常)|italic(斜体)|oblique(倾斜)|inherit(继承父级)
实例:font-style:italic
作用:设置字体样式为斜体
2.2 字体粗细 font-weight
语法:font-weight:normal | bold(加粗) | bolder(更粗) | lighter (更细) | 100-900 (加粗程度) | inherit
实例:font-weight:bold
作用:设置文字为粗体
font-weight:400
等同于font-weight:normal
;font-weight:700
等同于font-weight:bold
;
2.3 字体大小 font-size
语法:font-size:value + unit
实例:font-size:14px
作用:设置字体大小为 14px
- 通常以 px 或 em 为单位设置为一个固定值;
- 浏览器默认字体大小为16px,最小显示 12px 的大小;
- 字体一般设置偶数不设置奇数;
- 实际上设置的是字体中字符框的高度;实际的字符字形可能比这些框高或矮(通常会矮),所以说 字号大小就是字体的高度。
2.4 行高 line-height
语法:line-height:value + unit
语法:line-height:24px
作用:设置行高(行间距)。
- 默认行高通常为 font-size / 0.75 , 即 设置字号为 12px 时,默认行高为 16px ,遵循四舍五入原则;
- 不允许设置负值,只写数值不加单位时,按照字体大小的倍数设置行高;
2.5 字体类型 font-family
语法:font-family : "字体1","字体2","字体3"
;
语法:font-family : Serif , "Microsoft YaHei"
;
作用:设置元素的字体。
- 字体可以设置多个,用逗号分隔。如果浏览器不支持,则向后依次寻找;
- 中文字体要加双引号,英文字体由多个单词组成也要加双引号
- 浏览器会尝试使用设置的字体,如果找不到,识别字体2,如果都找不到,采用浏览器默认字体
- 是否可以使用设置的字体,取决于用户电脑上该字体是否存在;
3. 文本类属性
3.1 文本水平对齐 text-align
语法:text-align:left(左对齐) | center(居中对齐) | right(右对齐) | justify(两端对齐)
实例:text-align:center
作用:设置文本文字在元素内居中显示
3.2 文本修饰 text-decoration
语法:text-decoration:none | underline(下划线) | overline(上划线) | line-through(删除线)
实例:text-decoration:underline
作用:设置文本文字拥有下划线
3.3 首行缩进 text-indent
语法:text-indent:value + unit
实例:text-indent:2em
作用:设置文本文字首行缩进两个文字的距离
3.4 字间距 letter-spacing
语法:letter-spacing:value + unit
实例:letter-spacing:2em
作用:设置文本文字之间的字间距为两个字节的距离
3.5 词间距 word-spacing
语法:word-spacing:value + unit
实例:word-spacing:2em
作用:设置英文单词的字间距为两个字节的距离
3.6 英文大小写转换 text-transform
语法:text-transform:none(默认值) | capitalize(首字母大写) | uppercase(全部大写) | lowercase(全部小写)
实例:text-transform:uppercase
作用:将文字内容全部转换为大写,只对英文起效
3.6 文字强制一行显示: white-space
语法:white-space:normal(默认值) | nowrap(不换行,强制在一行显示)
实例:white-space:nowrap
作用:将文字内容强制显示在一行
4 background
语法:background: color url repeat attachment position / size
实例:background: #000 url("../images/banner.jpg") no-repeat fixed center / cover
作用:设置背景颜色为黑色,背景图片为 banner.jpg 背景图不平铺 固定背景图 背景图位置居中 / 背景图完全覆盖背景区域
4.1 background-color
语法:background-color:color
实例:background-color:#f00
。
作用:设置背景颜色。
- color 可以是英文名字,如
red
、black
等; - color 可以是十六进制值的背景颜色,如
#f00
,#000
等; - color 可以是 rgb 代表的背景颜色,如
rgb(255, 0, 0)
,rgb(0,0,0)
等; - color 设置为 transparent 表示透明无色;
4.2 background-images
语法:background-image:url("URL") | none
实例:background-image:url("../images/banner.jpg")
作用:设置背景图片。
4.3 background-repeat
语法:background-repeat:repeat(x轴y轴平铺) | repeat-x(x轴平铺) | repeat-y(y轴平铺) | no-repeat(不平铺)
实例:background-repeat:repeat
作用:设置背景图片沿x 轴 y 轴进行平铺。
- 背景图默认向 x 轴和 y 轴无限平铺;
4.4 background-attachment
语法:background-attachment:scroll(滚动) | fixed (固定) | inherit
实例:background-attachment:fixed
作用:设置背景图像不随着页面的其余部分滚动,我们一般不使用这个属性,而是通过固定元素标签来实现。
4.5 background-position
语法:background-position: x y
实例:background-position:10px -20px
作用:设置背景图从容器的左上角为原点,向右移动 10px,向上移动 20px。
- 当 x 和 y 相同时,可以省略 y;
- 可以使用方位词 left | right | center | top | bottom 来代替具体数值;
- x 向右为正,向左为负; y 向下为正,向右为负;
4.6 background-size
语法:background-size:cover
实例:background-size:cover
作用:把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,CSS3 新增属性,后续详解。
5. 列表相关属性 list-style
语法:list-style:type | position | image
实例:list-style:square inside url('../images/index.jpg')
作用:设置列表中的标记样式为自定义图片 index.jpg 并且位于文本内部。
5.1 list-style-type
语法:list-style-type:disc(实心圆) | circle(空心圆) | square(方块) | decimal(数字) | none(去掉列表符号样式)
实例:list-style-type:none
作用:清除列表样式,我们通常会删除列表的默认样式,需要的效果用其他方式来实现。
5.2 list-style-position
语法:list-style-position:inside(文本内) | outside (默认文本外) | inherit
实例:list-style-position:inside
作用:将列表样式设置在列表内部。
5.3 list-style-image
语法:list-style-image:url
实例:list-style-image:url('../images/index.jpg')
作用:使用图像来替换列表中的标记样式,使用该属性之后,list-style-type
会失效。
6. 边框 border
语法:border: width style color
实例:border: 1px solid #000;
作用:设置边框为 1px 的黑色实线。
按边框样式拆分成以下三个属性
6.1 边框宽度 border-width
语法:border-width: value + unit
实例:border-width: 1px
作用:设置边框宽度为 1px。
6.2 边框样式 border-style
语法:border-style: solid(实线) | dashed(虚线)
实例:border-style: solid
作用:设置边框样式为 实线。工作中一般只用到了这两种线条,更多的线条请翻阅 CSS 手册
6.3 边框颜色 border-color
语法:border-color: color
实例:border-color: #000
作用:设置边框颜色为 黑色
- 按边框方向拆分四条 : border-top | border-bottom | border-left | border-right
- 将样式和方向结合,又多出了 border-top-width | border-top-style | border-top-color 等;
7. 外边距 margin
语法:margin:top right bottom left
实例:margin:5px 10px 15px 20px
作用:设置元素外边距为上方 5px 右方 10px 下方 15px 左方 20px
- margin的四个值按照 上、右、下、左的书写顺序;
- margin的三个值按照 上、左右、下的书写顺序,例
margin:10px 20px 15px
上方 10px 右方 15px 下方 20px 左方 15px; - margin的两个值按照 上下、左右的书写顺序,例
margin:10px 20px
上方下方为 10px 右方左方为 20px; - margin的一个值表示 上下左右外边距相等;
- margin设置为百分比的时候,是根据父级的宽度进行计算的。
- margin的颜色是透明的。
8. 内边距 padding
语法:padding:top right bottom left
实例:padding:5px 10px 15px 20px
作用:设置元素内边距为上方 5px 右方 10px 下方 15px 左方 20px
- padding 与 margin语法相同
- padding 也是透明的,但可以显示背景图或背景颜色;
9. 浮动 float
语法:float: left | right | none | inherit
实例:float:left
作用:设置元素向左进行浮动
10 定位 position
语法:position: absolute(绝对定位) | fixed(固定定位) | relative(相对定位) | static(无) | inherit
实例:position:fixed
作用:设置元素为固定定位
- 通过 top、bottom、left、right来设置元素移动的位置
- 通过 z-index 属性设置元素的层级关系
10.1 固定定位 position:fixed
语法:position: fixed
实例:position: fixed;top:0;left:0
作用:将元素固定在左上角,无论页面如何滚动都会一直固定在左上角的位置。
10.2 相对定位 position:relative
语法:position: relative
实例:position: relative;top:10px;left:20px
作用:将元素从它本来的位置上,以左上角为原点,向下移动 10px ,向右移动 20px 。
10.3 绝对定位 position:absolute
语法:position: absolute
实例:position: absolute;top:10px;left:20px
作用:拥有该元素的属性,将逐级向上查找是否含有 position
属性,如果含有,则以该元素左上角为原点,向下移动 10px ,向右移动 20px,如果没找到,则以 html 元素左上角为原点。
11 display
值 | 效果 |
---|---|
none | 隐藏元素 |
block | 转换为块级元素 |
inline | 转换为行内元素 |
inline-block | 转换为行内块级元素 |
更多属性请 点击这里查看更多。
种一棵树,最好的时间是十年前,其次是现在。人的一生,总的来时就是不断学习的一生。
蚕吐丝,蜂酿蜜。人不学,不如物。与其纠结学不学,学了有没有用,不如学了再说。
等你学会了之后,你才拥有资格说“啊,这个东西学了没用。”
每篇文章纯属个人经验观点,如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!
请大家关注我的微信公众号,我会定期更新前端的相关技术文章,欢迎大家前来讨论学习。
都看到这里了,三连一下呗~~~。点个收藏,少个 Bug 。