CSS3学习记录

最新推荐文章于 2023-12-27 10:11:11 发布

原创最新推荐文章于 2023-12-27 10:11:11 发布 · 297 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#CSS3 #学习记录

CSS3 专栏收录该内容

1 篇文章

订阅专栏

一基础

1.选择器

选择器主要分为三种，元素选择器，id选择器，类选择器
< P class=“pre” id=“pid” >< /P>
元素选择器：p{}
id选择器：#id{}
类选择器：.pre{}
同时根据元素以及类来选择：p.pre{}

2.尺寸

值可以是百分比X%，也可以是像素Xpx

3.背景

backgroud-color:以颜色为背景
background-image:url(imagepath);以图片为背景
url(background.jpg);本地测试
background-repeat：背景重复
background-size: contain;背景平铺

4.文本

color：文字颜色
text-align：对齐
text-decoration：文本修饰
line-height：行间距
letter-spacing：字符间距
word-spacing：单词间距
text-indent：首行缩进
text-transform：大小写
white-space：空白格

5.字体

font-size：尺寸
font-style：风格
font-weight：粗细
font-family：字库
font：统一声明属性

6.鼠标样式

cursor：鼠标样式

7.表格布局

table-layout：automatic（单元格大小由内容决定）fixed（由设定的大小决定）
border-collapse：separate（不合并边框）collapse（合并边框）

8.边框

border-style:边框风格
border-color:边框颜色
border-width：边框宽度
border：合并属性
border-top：只有一个方向有边框
border-top，border-left：有交界的边都有边框
div：块级元素
span：内联元素

9.内边距

padding-left：左内边距
padding-right: 右内边距
padding-top: 上内边距
padding-bottom: 下内边距
padding: 上右下左

10.外边距

margin-left: 左外边距
margin-right: 右外边距
margin-top: 上外边距
margin-bottom: 下外边距

11.超链状态

link - 初始状态，从未被访问过
visited - 已访问过
hover - 鼠标悬停于超链的上方
active - 鼠标左键点击下去，但是尚未弹起的时候

12.隐藏

display:none; 隐藏一个元素，这个元素将不再占有原空间 “坑” 让出来了
visibility:hidden;隐藏一个元素，这个元素继续占有原空间，只是“看不见”

13.优先级

！important>内敛>内置>外置

二布局

1.绝对定位

属性：position
值： absolute
绝对定位相当于从原文档移除，不占用空间
绝对定位是基于最近的一个定位的父容器，如果没有就是基于body
绝对定位当两个组件重合时，谁的z-index越大谁放上面

2.相对定位

属性：position
值：relative
相对原来的位置进行移动

3.浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
属性：float
值： left,right

4.显示方式

display:none 隐藏
display:block 块级换行，可改变大小
display:inline 内联示例代码不换行，大小由内容决定
display:inline-block 内联-块级不换行，可改变大小
list-item 显示为列表
table 显示为表格
inline-table 显示为前后无换行的表格
table-cell 显示为单元格

5.水平居中

1 : 内容居中
2 : 元素居中
默认情况下div会占用100%的宽度,所以无法观察元素是否居中
设置本div的宽度，然后再使用样式 margin: 0 auto来使得元素居中
postion：absolute left ：0 right：0
span 是内联元素，无法设置宽度，所以不能通过margin:0 auto居中
span的居中可以通过放置在div中，然后让div text-align实现居中