登录免费注册



CSS属性

首页  思维导图  详情



CSS属性

2023-07-27 23:32:19   0  举报





AI智能生成

CSS属性

系统架构

模版推荐

作者其他创作

大纲/内容

一.移入效果

hover

当前属性+hover

鼠标移入.box2内容背景颜色，和文字颜色等，都会改变

eg：.box2:hover

二.定位

定位position

位置

说明

top

距离上面的位置

bottom

距离下面的位置

left

距离左边的位置

right

距离右边的位置

1.相对位置

relative

eg：position+relative;

2.绝对位置

absolute

一般在子绝父相使用

eg：position+absolute

3.固定定位

fixed

eg：position+fixed

相对于浏览器，固定一个位置

三、flex布局

1.前言，或特点

2009年，W3C提出。可以简便、完整、响应式地实现各种页面布局

2.何为flex布局

A.弹性布局，用来为盒状模型提供最大的灵活性

B.任何一个容器都可以制定为flex布局

3.使用flex

父盒子box 设置display：flex

使box里面指定为flex布局

4.flex

设置子盒子为响应式

eg：flex:1或者其它数字

四、容器的属性

1.相对X轴 justify-content

flex-star 默认

center 移动到父盒子中间

flex-end 移动到父盒子左边

2.相对Y轴 align-items

flex-star 移动到父盒子上方

center 移动到父盒子中间

flex-end 移动到父盒子下方

1.字体属性

font-size

字体大小

eg:20px

font-weight

字体粗细

eg:400

font-family

设置字体

eg:仿宋

属性

作用

例子

2.文本属性

line-height

行高

行之间的高度

text-align

水平对齐

取值：left、center、right

属性

含义

说明

3.颜色

color

文本颜色

eg:red红色、yellow黄色

background-color

背景颜色

eg:red红色、yellow黄色

属性

含义

说明

4.盒子模型

属性

含义

单位

width

宽度

px

height

高度

px

border

设置边框

px

padding

内边距

px

margin

外边距

px

border-radius

设置边框四个角

px 如果设置为50%当前盒子变成圆○

5.盒子上下左右

属性

方向

上

top

下

bottom

左

left

右

right

盒子居中

margin:0 auto

6.清除自带的网页内外边距

padding : 0px

margin：0px

7.补充点

行内块

作用

div

布局

span

包裹需要的内容，但不能设置宽高

 Collect

Get Started

CSS

 Collect

Get Started

手机属性

 Collect

Get Started

productIn属性

 Collect

Get Started

新增属性映射













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document