CSS（2）常用元素属性

您所在的位置：网站首页 › margin和padding对元素的影响 › CSS（2）常用元素属性

CSS（2）常用元素属性

#CSS（2）常用元素属性| 来源: 网络整理| 查看: 265

1、字体属性

设置字体

2、文本属性：

RGB

文本颜色

文本对齐

文本装饰

文本缩进

行高

3、背景属性

4、圆角矩形

基本用法

5、边框

内边距

外边距

6、弹性布局

7、块级元素与行内元素：

1、字体属性设置字体

字体颜色： font-family

字体大小：font-size(注意带单位 px)

字体粗细：font-weight（可以使用100-900的数字表示粗细 700==bold）

字体倾斜：font-style：italic; 倾斜

font-style: normal; 取消倾斜

2、文本属性： RGB

RGB: 三原色的缩写，三原色可以搭配成各种各样的颜色出来。

计算机中针对R,G,B三个分量，分别使用一个字节表示（8个比特位，0-255）

数值越大，分量颜色越浓，255，255，255表示白色，0，0，0表示黑色。

文本颜色

color 属性值的写法:

预定义的颜色值(直接是单词)

[最常用] 十六进制形式

RGB 方式

color: red; color: #ff0000; color: rgb(255, 0, 0); 文本对齐

控制文字水平方向的对齐（也能控制图片等元素）

center: 居中对齐 left: 左对齐 right: 右对齐使用： text-align: right; 文本装饰

underline 下划线. [常用]

none 啥都没有. 可以给 a 标签去掉下划线.

overline 上划线. [不常用]

line-through 删除线 [不常用]

text-decoration: underline; text-decoration: none; 文本缩进

控制段落首行缩进（其他行不影响）

text-indent: 2em;

px: 绝对单位

em: 相对单位如果字体大小是16px,1em=16px.

字体大小是的多少，1em就是多少。

行高

顶线到顶线之间的距离。

line-height: 40px; 3、背景属性

背景颜色、背景图片、背景平铺、背景位置、背景尺寸

background-color: aqua; /* url 不要遗漏. url 可以是绝对路径, 也可以是相对路径 url 上可以加引号, 也可以不加. */ background-image: url("../day1/cat.jpg"); /*repeat: 平铺 no-repeat: 不平铺 repeat-x: 水平平铺 repeat-y: 垂直平铺 */ background-repeat: no-repeat; /* 1. 方位名词: (top, left, right, bottom) 2. 精确单位: 坐标或者百分比(以左上角为原点) 3. 混合单位: 同时包含方位名词和精确单位*/ background-position: center; /*length:可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px*/ /*percentage:也可以填百分比: 按照父元素的尺寸设置.*/ /*cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无*/ /*法显示在背景定位区域中。*/ /*contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.*/ background-size: cover; 4、圆角矩形基本用法

/* 生成圆角矩形 */ .four{ width:200px; height:100px; border:2px solid green; border-radius: 10px; } /* 生成圆形 */ .four{ width:200px; height:200px; border:2px solid green; border-radius: 100px; } 5、边框

粗细: border-width

样式: border-style, 默认没边框.

solid 实线边框 dashed 虚线边框 dotted 点线边框

颜色: border-color

边框会撑大盒子

可以使用 box-sizing: border-box; 使边框不再撑大盒子。

.one{ /* 可以是绝对值大小，也可以是相对（相对父元素）大小：80%）*/ width:500px; height:280px; border-weight:10px; border-style:solid; border-color:green; } .two{ border: 1px solid red; box-sizing:border-box; } 内边距

padding 设置内容和边框之间的距离.

可以给四个方向都加上边距

padding-top

padding-bottom

padding-left

padding-right

复合写法：

padding: 5px; 表示四个方向都是 5px

padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px

padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px

padding: 5px 10px 20px 30px; 表示上5px, 右10px, 下20px, 左30px (顺时针)

外边距

控制盒子和盒子之间的距离. 可以给四个方向都加上边距

margin-top

margin-bottom

margin-left

margin-right

复合写法：

margin: 10px; // 四个方向都设置margin: 10px 20px; // 上下为 10, 左右 20margin: 10px 20px 30px; // 上 10, 左右 20, 下 30margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40 6、弹性布局

flex 是 flexible box 的缩写. 意思为 "弹性盒子".

flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.

任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局

被设置为 display:flex 属性的元素, 称为 flex container

它的所有子元素立刻称为了该容器的成员, 称为 flex item

flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

当父元素设置为 display: flex 之后, 子元素的 float, clear, vertical-align 都会失效.

justify-content: 设置主轴上的子元素排列方式

/* 平分空间 */ justify-content:space-around; /* 先两边贴近边缘，再平分剩余空间 */ justify-content: space-between;

align-items:设置侧轴上的元素排列方式

/* 垂直居中只针对单行元素 */ align-items: center;

align-items 只能针对单行元素，如果多行元素，就需要用 item-contents

7、块级元素与行内元素：

块级元素=> 行内元素

display: inline

行内元素=> 块级元素

display: block

【本文地址】

CSS（2）常用元素属性

CSS（2）常用元素属性

今日新闻

推荐新闻