css总结最全解！

最新推荐文章于 2024-05-26 15:41:02 发布

明月挽我心

最新推荐文章于 2024-05-26 15:41:02 发布

阅读量264

点赞数

分类专栏：前端文章标签： css html html5

本文链接：https://blog.csdn.net/xxxxxii/article/details/120201716

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

css的三种形式

内联样式

<h1 style="color: #000; margin-top: 5px;">123<h1>

内嵌样式

<head>
	<style>
		h2 {
          color: #000;
		}
	</style>
</head>

外联样式

<head>
	<link rel="stylesheet" href="01.css">
</head>

css选择器

基本选择器

1.通用选择器

* {
    color:red;
}

2.元素选择器

div {
    color:red;
}

3.id选择器

#main_title_happy {
    color:red;
}

4.class选择器

.btn {
       padding-left:20px;
       }

5.属性选择器

[name="imooc"] {
    color: red;
}

组合选择器

1.后代组合

只要是后代元素都可以（直接子元素和间接子元素都可以）
div span {
    color：red;
}

2.子组合

必须是直接子元素
div>p>span {
    color: red;
}

3.兄弟组合

(div的相邻兄弟p元素)（div后面紧挨着的p元素，div和p还必须是兄弟关系）
div+p {
    color: color;
}

全体兄弟组合(div后面的p元素，且div和p是兄弟关系)
div~p {
    color：red;
}

交集选择器

div元素且class值有one
div.class {
    color: red;
}
input[type="text"] {
    color:red;
}

并集选择器

所有div元素+所有class值有one的元素+所有title属性值等于test的元素（三个条件符合一个就可以 ）
div,.one,[title="test"] {
    color: red; 
}

伪类选择器

在基本选择器中添加关键字，指定匹配元素的特殊状态。
锚伪类

<style>
        /*未访问的链接*/
        a:link {
            color:red;
        }
        /*已访问的链接*/
        a:visited {
            color:green;
        }
        /*当鼠标移到链接上  ：hover用于用户鼠标悬停在链接文本内容上时的样式。*/
        a:hover {
            color:blue;
        }
        /*被激活的链接（当鼠标左键单击链接时，未松开）*/
        a:active {
            color:yellow;
        }
    </style>

:focus 获得焦点时

结构伪类

:nth-child(1) 父元素中的第一个子元素

是span元素，且这个span元素是第一个子元素
span:nth-child(1) {
    color:red;
}

:nth-last-child() 从后面往前数
:first-child :last-child
:nth-of-type()

是它父元素中第一个span类型的子元素 
span:nth-of-type(1) {
    color:red;
}

:nth-last-of-type()
:first-of-type :last-of-type :only-child 是自己父元素中惟一的子元素
:empty 代表里面完全空白的元素

否定伪类

:not(span) 除了span元素以外的其他元素

:not(#text) {
    color:red;
}
:not(.name) {
    color:red;
}

伪元素

::first-line 为首行文本设置属性

为div元素的第一行文本设置属性
div::first-line {
    color:red;
}

::first-letter 为首字母设置属性
::before ::after 在一个元素的内容之前或之后插入文字或图片

div::before {
    content:"666";
}
div::after {
	content: '';
	position: absolute;
    background: url("images/dot.png");
}

css颜色

RGB

color：#00ccff；

RGBA

color：rgba（255,0,0,0.5）
透明度alpha取值范围为0.0~1.0

css背景

background-image

用于设置元素的背景图片，会盖在background-color的上面；
如果设置了多张图片，设置的第一张图片将显示在最上面，其他图片按顺序叠在下面；
注意：设置背景图片必须设置他所在元素的宽高，否则无法显示；
背景图片宽高较大时，默认平铺展示。

h1 {
  background-img: url("imooc-logo.png");
}

background-repeat

设置背景图片是否要平铺（重复）
- repeat：平铺；
- repeat-x：只在水平方向平铺；
- repeat-y：只在垂直方向平铺；
- no-repeat：不平铺。
用于背景图片不是纯色的时候，在图片上截取一像素去平铺（滑动门技术【有圆角的】）

background-size

用于设置背景图片的大小（图片会缩放）
- 两个值的话，一个是宽度，一个是高度；
- background-size:contain/cover。

background-origin

规定背景图片的定位区域；
背景图片可以放置于 content-box、padding-box 或 border-box 区域。

在这里插入图片描述

background-origin:content-box;

background-position

用于设置背景图片在水平，垂直方向的具体位置；
background-posotion：60px 80px 表示背景图片水平向右60px 垂直向下80px；
水平方向还可以设置：left center right；
垂直方向还可以设置：top center bottom。

CSS sprite（精灵图技术）

一种css图像合成技术，将各种小图片合成到一张图片上，然后利用css的背景定位来显示对应的图片部分；
通过background-position来控制；
sprite图片制作：
（1）photoshop制作；
（2）sprite.

background-attachment

设置背景依附在什么地方:
- scroll：背景图片跟随元素一起滚动，但不随元素内容滚动（默认值）;
- local：背景图片跟随元素以及元素内容一起滚动；
- fixed：背景图片相对于浏览器窗口固定（经常和平铺背景搭配使用）

background

一系列背景相关属性的简写属性
- 常用格式：image position/size repeat attachment color

css文本

text-align

设置元素内容在元素里面的水平对齐方式（要设置某元素的水平对齐方式，应将css属性设置在它的父级标签上。）注意：块级元素和内联元素的区别
值：center left right justify

text-decoration

用于设置文字的装饰线；
none：无任何装饰线；
underline：下划线；
overline：上划线；
line-through：中划线（删除线）

line-height

设置行间距，line-height是指元素中每行文字占据的高度；
值：数字或者百分比。

letter-spacing

设置字符之间的间距；
值：数字或百分比

word-spacing

用于设置单词之间的间距。

text-transform

设置文字的大小写转换
capitalize：将每个单词的首字符变成大写；
uppercase：将每个单词的所有字符变成大写；
lowercase：将每个单词的所有字符变成小写；
none：没有任何影响；

text-indent

设置字体首行缩进
text-indent： 2em；（2个字符）

white-space

设置空白格；
normal 默认。多个空白格或者换行符会被合并成一个空白格
pre 有多少空白格，显示多少空白格，相当于pre标签
pre-wrap 有多少空白格，显示多少空白格，相当于pre标签,
nowrap 一直不换行，直到使用br。

text-shadow

给文字加阴影（和box-shadow一样）

h1 {
  text-shadow:-1px -3px 1px #red;   //red表示阴影颜色，-1px表示水平偏移量，正的表示向右偏移，-3px表示垂直偏移量，正的表示向下偏移。
  text-shadow:0 0 20px #green;//水平偏移量，垂直偏移量 模糊半径 颜色
}

word-wrap

允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分。

p {word-wrap:break-word;}//允许对长单词进行拆分，并换行到下一行：

vertical-align

用于设置内联元素在同一行显示的垂直方向的位置
常见设置
- baseline：基线对齐（默认情况下）
- top：顶部对齐
- bottom：底部对齐
- middle: 中间对齐

css字体

font-size

设置文字的大小
em和百分比都是基于父元素计算

font-family

设置文字的字体风格名称；
值：Times New Roman、 Arial、微软雅黑。

font-weight

设置文字的粗细；
100 200 300 400 500 600 700 800 900；
normal：400；bold：700；最好使用Normal和bold值。

font-style

设置文字的常规，斜体显示；
normal：常规显示；italic：字体的斜体显示；oblique：文本斜体显示。

@font-face

让网页支持网络字体，不再局限于系统自带的字体；
字体下载：http://font.chinaz.com/

<style>
        @font-face {
            src: url("fonts/mini.TTF");
            font-family:"中易隶书";
        }
    </style>

font-variant

影响小写字母的显示形式
normal：常规显示；small-caps：将小写字母替换为缩小过的大写字母。

css鼠标

cursor

设置鼠标样式（鼠标移动到元素上时显示的样子）
常见设置
- pointer：小手的样子；
- auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式；
- default：小箭头；
- text：一条竖线
- none：什么都没有了
- cursor还可以设置图片

cursor:url("images/2.png") 0 0 pointer;
/*0 0 表示图片的偏移量 pointer表示默认*/

css列表

list-style-type

设置li元素前面标记的样式，要去设置它的父元素ul（ol）元素；
disc（实心圆） circle（空心圆） square（实心方块）；
decimal（阿拉伯数字） lower—roman（小写罗马数字；
upper-roman（大写罗马数字）；
lower-alpha（小写英文字母） upper-alpha（大写英文字母）；
none ：无；
去掉li前的小黑点且消除ul内边距。
默认情况下小黑点的位置位于li盒子之外，且位于ul盒子之内，设置ul的padding为0即意味着li和ul两个盒子之间没有间隙了，小黑点就移动到了ul盒子之外。

ul {
    padding: 0px;//设置ul的内边距为0
    list-style-type: none;//去掉无序列表前的小圆点  //如果list-style-position:inside,设置padding为0就去不掉小黑点
}

list-style-position

设置li元素前面标记的位置，可以取outside和inside两个值

list-style-image

设置某张图片为li元素前面的标记，会覆盖list-style-type的设置；
list-style-image：url（“”）。

list-style

是list-style-type list-style-image list-style-position的缩写属性；
一般常用的属性是none，去掉li元素之前的默认标记。

css表格

table-layout

设置表格布局
值：automatic;单元格的大小由td的内容宽度决定
fixed; 单元格的大小由td上设置的宽度决定
注：只对连续的英文字母起作用，如果使用中文就看不到效果。

border-collapse

设置表格边框，可以合并单元格的边框
值：separate 边框分离
collapse 边框合并，可以用来合并单元格的边框

border

设置每一个单元格的边框
td {border： 1px solid #000；}

细边框的实现

table {
     /*合并单元格的边框*/
     border-collapse: collapse;
 }
td {
    /*设置每一个单元格的边框*/
    border:1px solid #000;
 }

css边框

border

 border-top: 5px solid green;//边框宽度 边框样式 边框颜色

border-width

border-top-width；border-right-width；border-bottom-width；border-left-width；
border-width是上面四个的简写。

border-style

solid：实线边框
none：没有边框
dashed：虚线边框
dotted：点线边框
double：双线边框

形状：

梯形边框：

 border-top: 5px solid green;
 border-right: 5px solid yellow;
 border-bottom: 5px solid purple;
 border-left: 5px solid blue；//上，右，下，左

三角形：

 width: 0px;
 height: 0px;
 border-top: 20px solid green;
 border-left: 20px solid transparent;

transform: rotate(45deg)；旋转45度
圆 border-radius：50%；

border-radius

设置边框圆角
border-top-left-radius；border-top-right-radius；border-bottom-left-radius；border-bottom-right-radius；
border-top-left-radius：40px 20px；
- 第一个值是水平半径；
- 第二个值是垂直半径；
- 定义的是四分之一椭圆半径。

box-shadow

用于向方框添加阴影。

0:水平方向的偏移，正数向右偏移 
15px：垂直方向的偏移，正数向下偏移
50px：模糊半径  
10px：延伸距离
rgba（255,0,0,0.5）：颜色及透明度
inset：外框阴影变成内框阴影
box-shadow: 0 15px 50px 10px rgba(255,0,0,0.5) inset;

border-image

将图片规定为包围 div 元素的边框。

border-image:url(border.png) 30 30 round;
//round 图像边框铺满 repeated 平铺 stretched  拉伸

css内边距

padding

指的是元素里面的内容与边框之间的距离
padding：10px 20px 30px 40px；（分别代表top right bottom left）
这是完整4个的
padding: 10 20 40 80
如果只有3个
padding: 10 20 40
那么left取right
padding: 10 20 40 = padding: 10 20 40 20
如果只有两个
padding: 10 20
那么bottom取top，left取right
padding: 10 20 = padding:10 20 10 20
如果只有一个
padding:10
那么right取top，bottom取top，left取top
padding:10 = padding:10 10 10 10

css外边距

margin

指的是元素边框与元素边框之间的距离
margin-right margin-left margin-top margin-bottom
margin和padding简写一样

盒子模型(修改！！！)

盒子模型

content是内容（元素内容）盒子模型默认情况width，height不包括padding和border；
内容到边框之间的距离为内边距padding，在盒子模型里，padding是在宽高的基础上在外围加20px；
蓝色框为边框border，在盒子模型里，border是在宽高及padding的基础上再加边框；
绿色框，是指边框与其他元素之间的距离，即为外边距margin；
一个元素的实际占用宽度=border-left+padding-left+width+padding-right+border-right。

box-sizing

用来控制width和height的含义；
content-box：（以内容开始算宽度）width，height不包括padding和border（盒子模型默认情况）；
border-box：（以border开始算宽度）width，height包括padding和border
- 一个元素的实际占用宽度width=border-left+padding-left+width+padding-right+border-right。

布局

css定位

标准流

默认情况下，元素都是按照标准流进行定位；
从上到下，从左到右按顺序排放好；
默认情况下，互相之间不存在层叠现象。

css相对定位

position:relative 相对定位（不脱离标准流，占坑）；
可以通过left,right,top,bottom进行精确定位**（参照对象是标签原来的位置）；
left：30px；意思是距离元素原来位置的左边是30px（原来占着的空间还在）。

css绝对定位

position: absolution 绝对定位(元素脱离标准流,相当于从原文档中被删除，不占坑)
- 可以通过left,right,top,bottom进行精确定位（参照的元素是最邻近的定位祖先元素）
- 定位元素：position值不为stastic的元素
- 如果找不到最邻近的定位祖先元素，参照对象就是视口。
- 适用于下拉的悬浮菜单或悬浮二维码以及悬浮在图片上的上标或下标（只要发现有层叠现象，即盖住一些东西，就是绝对定位）。
z-index
- 用来设置定位元素的层叠顺序（仅对定位元素有效）
- 比较原则
  - 如果是兄弟关系
    - z-index越大，层叠越在上面；
    - z-index相等，写在后面的那个元素层叠在上面；
  - 如果不是兄弟关系
    - 各自从元素自己以及祖先元素中，找出最邻近的2个定位元素进行比较；
    - 而且这2定位元素必须有设置z-index的具体数值。
绝对定位技巧
- 绝对定位元素要在自己的定位参照对象中水平垂直居中；

margin: auto;
left: 0;
right: 0;
top：0；
bottom: 0;

保证.box和.child宽高一致（绝对定位元素与自己的定位参照对象宽高一致）

left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0;

脱标元素的特点
- 可以随意设置宽高，宽高默认有内容决定
- 不再受标准流的约束
  - 不再严格按照从上到下，从左到右排布
  - 不再严格区分块级，行内级元素，块级行内级的很多特性也会消失
- 不再给父元素汇报宽高数据（不再占用空间，父元素需要清浮动）
- 脱标元素子元素默认还是按照标准流.

css固定定位

position:fixed 固定定位（元素脱离标准流）；
可以通过left,right,top,bottom进行定位（参照的对象是视口（浏览器窗口））视口不等于画布，画布是body，画布是可以产生滚动条的；
不随画布滚动；
适用于网页上滚动时始终悬浮不动的，如广告。

css粘性定位

position： sticky(css3新属性)；
元素不脱离标准流，仍然保留元素原本在文档流中的位置；
是position:relative和position:fixed的结合体；
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。即如果设置了top：50px，那么sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。（相当于此时fixed定位）；
元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于视口来计算元素的偏移量。

nav {
    position: sticky;
    top: 0;
}

适合导航的跟随定位效果，当距离上边缘0距离的时候，就固定在了上边缘。

overflow

用于控制内容溢出时的行为
- visible：溢出的内容照样可见；
- hidden：溢出的内容直接裁剪；
- scroll：会一直显示滚动条区域，滚动条占据的空间属于width，height；
- auto：自动根据内容是否溢出来决定是否提供滚动机制。

css浮动

在css中，有三种方法对元素进行定位、布局，分别是标准流、绝对定位和浮动
- 绝对定位和浮动都会让元素脱离标准流，以达到灵活布局的效果

float

让元素产生浮动效果，常用取值
- none : 不浮动
- left：向左浮动
- right：向右浮动
浮动规则
- 元素一旦浮动后：
  - 脱离标准流(不占坑)；
  - 朝着向左或者向右的方向移动，直到自己的边界紧贴着包含块（一般是父元素）或者其他浮动元素的边界为止。
- 定位元素会层叠在浮动元素上。
利用此特性，可实现文字环绕功能。
- 浮动元素之间不能层叠；
- 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴前一个浮动元素被推出。（左浮找上一个左浮元素，右浮找上一个右浮元素）；
- 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止。

clear（清除浮动）

一般只用在非浮动元素上，可以让非浮动元素与浮动元素不层叠;
clear的常用取值:
- left：要求元素的顶部低于之前生成的所有左浮动元素的底部（不允许浮动元素出现在左边）;
- right：要求元素的顶部低于之前生成的所有右浮动元素的底部（不允许浮动元素出现在右边）;
- both：要求元素的顶部低于之前生成的所有浮动元素的底部
- none：默认值

定位方案总结

垂直布局用标准流
层叠布局用绝对定位
水平布局用浮动

css显示方式

display

修改元素的显示类型
- block：让元素显示为块级元素
- inline：让元素显示为内联元素
- none：隐藏元素（元素占据的空间也被隐藏了，不占坑）
- inline-block：让元素显示为内联-块级元素，即让元素同时具备内联和块级元素的特征
  - 可以跟其他内联元素在同一行显示
  - 可以随意设置宽高
  - 常见用途：让内联元素（span a 等）能够任意设置宽高，让块级元素（div p等）可以跟其他元素在同一行显示。

css3 2D转换

transform

transform: translate(50px,100px);//元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 
transform: rotate(30deg);//元素顺时针旋转给定的角度。
transform: scale(2,4);//元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
transform: skew(30deg,20deg);//元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
transform:matrix(0.866,0.5,-0.5,0.866,0,0);//matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

额外

经验

前人总结的经验，避开的坑https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css
浏览器默认body有8px的margin。
color这个css属性是可以继承的。

before和after的使用

.container .rank::before {
    content: "";
    width: 15px;
    height: 15px;
    background-image: url(images/1.png);
    background-position: 0 -146px;
    display: inline-block;
    margin-right: 5px;
}

.container .rank:hover::before {
    background-position: -20px -146px;

}

::before和::after的content值不能缺少;
::before和::after的display值默认是inline，可以把::before和::after当做是span元素;
可以使用::before和::after来使用取代子元素;
由于::before和::after是css样式，所以可有可无的内容才使用::before和::after.

清除浮动

子元素浮动会脱离标准流，变成脱标元素，不再向父元素汇报高度，由此产生高度坍塌问题，要用清除浮动来解决。清除浮动要加在浮动元素的父元素上。
清浮动的方法(闭合浮动思想)
- 使用after伪元素清除浮动;
- 使用after before伪元素清除浮动。

.clearfloat:after,    //倒数第一个子元素
.clearfloat:before {   //第一个子元素
    content: "";
    display: block;
    clear: both;  //本质就是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来。
}
/*为了兼容IE浏览器*/
.container {
    *zoom: 1;
}
<body>
    <div class="container clearfloat">
        <div class="floatleft">
            <a href="#">首页</a>
        </div>
        <div class="floatright">
            <a href="#">我的订单</a>
        </div>
    </div>
</body>

outline

不占用空间
默认显示在border的外面
应用实例
- 去除a元素，input元素的focus轮廓效果（outline：none；）
- outline：0;

visibility

控制元素的可见性
- visible：显示元素
- hidden: 隐藏元素（保留元素的空间）

消除内联元素之间的间距

设置父元素的font-size为0，再设置元素自己的font-size。

明月挽我心

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css总结最全解！

css的三种形式内联样式<h1 style="color: #000; margin-top: 5px;">123<h1>内嵌样式<head> <style> h2 { color: #000; } </style></head>外联样式<head> <link rel="stylesheet" href="01.css"></head>css
复制链接

扫一扫