CSS知识梳理

Ther19

已于 2022-12-10 18:55:19 修改

阅读量1k

点赞数

文章标签： css 前端 html

于 2022-12-10 18:27:00 首次发布

本文链接：https://blog.csdn.net/weixin_68915174/article/details/128253375

版权

概念

用于设置版面布局和外观显示样式，由选择符和声明（属性和属性值）组成

引入css样式表（书写位置）

一、行内式（内联样式）

<标签名 style="属性1;属性2;">内容</标签名>

style就是标签的属性
- 属性和值之间用“:”，属性值之间用“；”
- 只能控制当前的标签以及嵌套在其中的字标签
- 缺点：没有实现样式和结构相分离

二、内部样式表（内嵌样式表）

将css代码集中卸载head头部标签中，用style标签定义

<head>
    <style type="text/css">
        选择器{
            属性:属性值;
        }
    </style>
</head>

可以放在html任何地方
- type="text/css"在HTML5中额可以省略
- 只能控制当前页面
- 缺点：没有彻底分离

三、外部样式（外链式/链入式）

将所有样式放在一起一个或多个css外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中

<head>
    <link rel="stylesheet" type="text/css" href="css文件路径">
</head>

link标签属性

rel	定义当前文档与被链接文档之间的关系，在这里需要制定为“stylesheet”，表示被链接文档是样式表文件
type	定义所链接文档类型，“text/css”表示外部文件为css
href	url，可相对可绝对

样式选择器、属性名、属性值关键字全部使用小写字母，属性字符串允许使用大小写

四、样式表优先级

!important>行内式>内部样式>外部样式

div{
    color:yellow !important;
}

CSS选择器

找到特定的HTML页面元素（标签），不使用无具体语义定义的标签选择器（div/span）

1.标签选择器（元素选择器）

能快速为页面中同类型的标签统一样式，但不能设计差异化样式

2.class类选择器（.{}）

（可重复使用）

/html
<p class="类名">..</p>

//特殊用法：多类名
<p class="类名1 类名2">...</p>

/css
.类名{
    属性:属性值;
}

一个标签只能有一个class，可指定多个类名

3.id选择器（#{}）

（不可重复使用，是唯一的）

/html
<p id="类名">...</p>

/css
#类名{
    属性:属性值;
}

4.通配符选择器（*{}）

匹配页面所有元素

*{
    属性:属性值;
}

5.后代选择器（包含选择器）

//html
<div class="box">
    <h3></h3>
</div>
//css
.box h3{...}

6.子元素选择器（>）

只选择某元素子元素（最近）的元素

//html
<div class="box">
    <h3></h3>
</div>
//css
.box>h3{..}

7.交集选择器

用于集体申明

//html
<p class="box"></p>
//css
p.box{...} //类名为box的段落标签

8.并集选择器（任何形式的选择器都可以并）

//html
<p></p>
<span></span>
//css
p,
span{...}

9.链接伪类选择器（:类名{}）

a:link	未访问的链接
a:visited	已访问的链接
a:hover	鼠标移动到链接上
a:active	选定的链接

按照lvha顺序来写

a链接浏览器具有默认样式，故需要给链接单独指定样式

//html
<div class="nav">
    <a href="#">..</a>
</div>

//css
.nav a{
    color:#333;
    text-decoration:none; //清除样式
}
.nav a :hover {
    color:#ccc;
}

10.标签属性选择器（E[att]{}）

选择符
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att且属性值为val的E元素
E[att^="val"]	匹配具有att属性且属性值以val开头的E
E[att$="val"]	匹配具有att、且值以val结尾的E
E[att*="val"]	匹配具有att、且值喊val 的E

<button disabled="disabled"></button>

button[disabled]{}

类选择器、属性选择器、伪类选择器，权重为10，故button[disable]{}>button{}

11.结构伪类选择器（E:first-child{}）

E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中最后一个E
E:nth-child(n)	匹配父中第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E 的第n个

n：可以是数字，可以是关键词（even偶，odd奇），可以是公式（从n=0开始，如不存在0则忽略）

12.伪元素选择器（::）

::before	在元素内部前面插入元素
::after	在元素内部后面插入元素

（1）before和after内必须有content属性

（2）before和after 创建一个行内元素

（3）因为在dom里面看不见，所以称为伪元素

（4）和标签选择器一样，权重为1

CSS选择器三大特性

一、层叠性

后面定义的会覆盖前面定义的（css解决冲突的原则：就近原则）

二、继承性

子标签会继承父标签的样式（text-，font-，line-开头和color属性可以继承）

三、优先级

选择器相同，执行层叠性，选择器不同，会出现优先级

1.权重计算公式（CSS Specificity）

继承或*	0000
每个元素（标签选择器）	0001
类、伪类选择器	0010
id选择器	0100
行内样式style=“”（内联样式）	1000
!important	无穷

数位之间无精致，级别之间不可超越

2.权重叠加

当使用符合选择器时，会出现权重叠加

3.继承的权重为0

要看该标签有没有被选中，如果选中了，计算权重，未选择，权重为0

//html
<body>
<div class="box">
    <p>aa</p>
</div>

//css
div{
    color:red;
}
p{
    color:blue;
}
.box{
    color:green;
}
//p选择器和box选择器因为没有选中，所以父类无法影响，继承权重为0，所以结果aa的颜色为blue
.box p{
    color:green;
}
//因为选中体现了继承，所以最后的结果aa为green

css文本属性

font-size	字体大小	单位px，谷歌默认16px，不要选默认，要定义，因为浏览器不同，要给body指定大小
font-family	字体	当字体是中文字体或者是英文字体中存在空格时，需要添加引号，多个字体中庸“；”隔开
color	颜色
font-weight	粗细	font-weight:normal（默认值，不加粗）\| bolder（更粗）\| bold（加粗）\| 100~900（400默认，700bold，不跟单位）
font-style	字体风格	font-style:normal（标准）\| italic（斜体）\| oblique（倾斜的文字）;
text-align	文本水平对齐方式	text-align:left \| right \| center \| justify（水平两端对齐，但只对多行起作用）
line-height	行高	行高等于高度，可以实现单行文本垂直居中，行高大于高度会偏下（px\|em\|%）一般情况下，行距比字号大7.8像素左右
text-indent	首行缩进	text-indent可以取负值，只对第一行起作用
letter-spacing	字间距	控制文字和文字之间的距离
text-decoration	文本装饰	text-decoration:none（取消下划线）\| underline（下划线）\| overline（上划线）\| line-through（贯穿线）
font	文字简写	font：font-style font-weight font-size/line-height font-family; 顺序不能变，前两项可省略

列表属性

list-style-type	定义列表符合样式	list-style-type:disc（实心圆）\| circle（空心圆）\| square（实心方块）\| none（去掉符号）
list-style-image	将图片设置为列表符合样式	list-style-image:url();
list-style-position	设置列表项标记的放置位置	list-style-position:outside（列表的外面，默认值）\| inside（列表的里面）
list-style	简写	list-style:none;去除列表符号

背景属性

background-color	背景颜色	默认transparent透明的
background-image	背景图片	background-image:none\|url(); 不提倡加引号
background-repeat	背景平铺	background-repeat:repeat（平铺）\| no-repeat（不平铺）\| repeat-x（水平平铺）\| repeat-y（垂直平铺）;
background-position	背景位置	background-position:length length;（百分数，前x后y，可与方位名词混用）background-position:position position;（top\|center\|bottom\|left\|right方位名词，前后位置无所谓）
background-attachment	背景附着	background-attachment:scroll（滚动的）\| fixed（固定的）;
background	简写	background: （背景颜色）背景图片地址背景平铺背景滚动背景位置;（无顺序要求）
	背景透明	background:rgba(0, 0, 0, 0.3)也可以写作rgba(0, 0, 0, .3) 背景半透明,alpha透明度，取值0~1

盒子模型(box-sizing)

一、盒子边框（border）

border: border-width（粗细）| border-style（样式）| border-color（颜色）;

none	无边框
solid	边框为实单线
dashed	虚线
dotted	点线

1.上下左右边框：border-top|border-bottom|border-left|border_left|border_right: ;

2.表格的细线边框：table (tr,td){border-collapse:collapse;} //相邻的边框合并起来

二、盒子内边距（padding）

padding: 0px 0px 0px 0px ;（上右下左）

padding: 0px 0px 0px;（上左右下）

padding: 0px 0px;（上下左右）

三、盒子外边距（margin）

默认左对齐

margin|margin-top|margin-left|margin-bottom|margin-right: ;

四、内盒尺寸计算（元素实际大小）

实际大小=内容宽度高度+内边距+边框

如果没有宽度，padding不会撑开盒子，要想撑开盒子，只能改变内容的高宽

五、块级盒子水平居中

盒子必须有宽度

margin: 0 auto;

六、插入图片和背景图片的区别

（1）插入图片用的最多，比如产品展示类，移动位置只能靠盒子模型的padding和margin

（2）背景图片一般用于图标背景或超大背景图片，只能通过background-position来移动位置

七、清除元素内外边距

*{

margin:0;

padding:0;

}

为了照顾兼容性，尽量只设置左右内外边距

八、外边距合并

1.相邻块元素垂直外边距合并

取两个值中较大值（尽量定义一个外边距）

2.嵌套块元素垂直外边距的合并

如果父级没有上内边距以及边框，父元素的上外边距会与子元素的上外边距合并，合并后取较大者

3.外边距塌陷

父亲盒子里给标准流盒子margin会出现外边距塌陷，解决办法：

（1）给父元素定义上边框（border）

（2）给父元素定义上内边距（padding）

（3）给父元素添加overflow：hidden

（4）改成浮动和定位的盒子不会出现外边距合并外边距塌陷

九、盒子模型布局稳定性

width>padding>margin

十、盒子模型（box-sizing）

box-sizing:content-box（传统盒子）| border-box（怪异盒子）

1.传统（标准）盒子

盒子自身尺寸=content+border+padding

盒子在页面中的尺寸=content+border+padding+margin

标准盒子添加padding、margin、border都会撑开盒子

2.怪异（IE）盒子

盒子自身尺寸=content（包括border和padding）

盒子在页面中的尺寸=content（包括border和padding）+margin

怪异盒子设置padding和border并不会撑开盒子，只会缩小content的区域大小

标签显示模式（display）

一、块级元素（block_level）

常见块级元素：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>

                 特点：

                        1.独占一行

                        2.高、宽、内外边距均可控制

                        3.高度默认是容器（父级宽度）的100

                        4.是一个容器及盒子，里面可以放行内或块级元素

p里面不能放div，h1~h6、dt、p里面尽量不要放块级元素

二、行内元素（inline-level）

常见行内元素：<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>

特点：

1.相邻元素在一行，一行多个，碰到父元素边缘自动换行

2.高、宽直接设置无效

3.默认宽度为它本身内容宽度

4.行内元素只能容纳文本或其他行内元素

a里面不能包含a，特殊情况下a可以包块

三、行内块元素（inline-block）

行内元素中<img/>,<input/>,<td>可以设置宽高和对齐属性

特点：

1.显示在一行，但之间有空白缝隙（超级难去除）

2.默认宽度为本身宽度

3.高度、行高、外边距、内边距均可控制

四、标签显示模式转换（display）

1.块转行内：display:inline;

2.行内转块：display:block;

3.块、行内元素转化为行内块：display:inline-block;

浮动

一、CSS布局的三种机制

1.普通流（标准流）：块级元素、行内元素

2.浮动：元素脱离标准普通流的控制移动到指定位置

3.定位：将盒子定在某一个位置，兹有的漂浮在其他的盒子上面

二、浮动

float：left|right|none; 左浮，右浮，不浮动

float属性会改变元素display属性，任何元素都可以浮动，浮动元素会生成一个块级框，没有缝隙，超出父级宽度的会另起一行

三、清除浮动

用来解决父级元素因为自己元素浮动引起的内部高度为0的问题

clear：noneleft|right|both；允许有浮动/不允许左边有浮动/不允许右边有浮动/不允许有浮动

（1）额外标签法（隔墙法）

在浮动元素末尾添加一个空标签，不设置宽高，clear:both

//html
<div class="one">
    <div class="A"></div>
    <div class="B"></div>
    <div class="clear"></div>
</div>
//css
.clear{
    clear:both;
}

（2）在父级添加overflow属性方法

overflow:hidden（隐藏）| auto（垂直滚条）| scroll（水平和垂直滚条）;

（3）使用after伪元素清除浮动

父元素调用clearfix选择器

.clearfix:after {
    content:"";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}
.clearfix {
    *zoom:1; //*ie6.7专门清除福鼎的样式
}

（4）使用双伪元素清除浮动

父元素调用clearfix选择器

.clearfix:before,
.clearfix:after{
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
}
.clearfix{
    *zoom:1;
}

四、版块超出致使换行问题

1.给父宽度大于子；2.多出来的overflow:hidden;

.body{
    width:1200px;
}
.box li{
    float:left;
    width:228px;
    margin-right:15px; //右外边距使整体li超出版心1200px，致使换行
}
.box{
    width:1215px; //给box添加超过版心的宽度
}

定位（position）

定位=定位模式+边偏移

1、边偏移：

top|bottom|left|right：；

2、定位模式（position）

子绝父相

选择器{

position:属性值;

left: 偏移量;

top: 偏移量;

}

属性值	说明	偏移参照物
static	静态定位（默认定位方式）	无定位无偏移
relative	相对定位	元素相对于它本身的初始位置	不脱标
absolute	绝对定位	无父或父无定位，以浏览器为准移动，父有定位时，以父为准	完全脱标
fixed	固定定位	跟父元素无关，只认浏览器可视窗口，不随滚动条滚动	完全脱标
sticky	粘性定位	可以做吸顶效果，是css3.0新增的，兼容不好

3、绝对定位的盒子居中对齐

先移动父亲宽高度的一半，在移动盒子自己宽高度的一半

box{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-width;
    margin-top:-height;
}

4、堆叠顺序（z-index）

标准<浮动<定位

加了定位的盒子，默认后来者居上，后盒会压住前盒

z-index: 负整数|0|正整数;（无单位）

默认为0，数值越大，盒子越靠上

5、定位会改变display属性

绝对定位和固定定位默认转换为行内块（inline-block、float也转为行内块）

1. 如果一个盒子添加了浮动、固定定位、绝对定位，就可以直接给盒子设置宽和高

2.通栏的盒子： width:100%;

3.浮动和绝对定位、固定定位元素都不会触发外边距合并问题

flex弹性盒子

用来为盒子提供最大的灵活性，任何一个容器都可以指定为flex布局

通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

display:flex;

当父盒子设为flex后，子元素的float、clear和vertical-align都失效
伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

1.对父元素设置

（1）flex-direction 设置主轴方向（项目排列方式）

row	从左到右（默认）
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

（2）justify-content 设置主轴上子元素排列方式

定义了项目在主轴上的对齐方式，要先设置主轴方向

flex-start	从头部开始（默认）
flex-end	从尾部开始
center	在主轴居中对齐
space-around	评分剩余空间
space-between	先两边贴边，在平分生于空间

（3）flex-wrap 设置子元素是否换行

默认不换行，按一条轴线排列，装不下去会缩短子元素宽度

nowrap	不换行
wrap	换行

（4）align-items 设置侧轴上子元素的排列方式（单行）

flex-start	从上到下（默认）
flex-end	从下到上
center	垂直居中
stretch	拉伸

（5）align-content 设置侧轴上子元素的排列方式（多行）

flex-start	从侧轴头部开始（默认）
flex-end	从尾部开始
center	侧轴中间
space-around	侧评分剩余空间
space-between	先分布在两头，再平分
streth	设置子高平分父高

（6）flex-flow

是flex-direction和flex-wrap的复合属性

flex-flow:row wrap;

2.对子元素设置

（1）flex 定义子项目分配剩余空间

flex:number; （number表示占的份数，默认0）

（2）align-self 控制子项自己在侧轴上的排列方式

允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

align-self:flex-end;

默认auto，继承父align-items，若无父元素，则等同于stretch

（3）order定义项目的排列顺序

数值越小，排列越靠前，默认0

元素的显示和隐藏

1、display显示

display:none（隐藏元素不保留位置）| block（转换为块级元素，显示元素）;

2、visibility可见性

visibility:

visible（不剪切内容也不添加滚动条，默认）|

hidden（超出部分隐藏）|

scroll（始终显示滚动条，不管超不超出）|

auto（超出显滚，不超不显）;

3、overflow溢出

overflow：

        visible（默认值，溢出的内容会显示在元素之外）|

        hidden（溢出内容隐藏）|

        scroll（滚动，溢出内容以滚动方式显示）|

        auto（一旦溢出就添加滚动条）|

        inherit（滚定应该遵从父元素继承overflow属性的值；）|

        overflow-x（X轴溢出）|

        overflow-y（Y轴溢出）;

4、空余空间

white-space用来设置如何处理元素内的空白

white-space:normal|nowrap|pre|pre-wrap|pre-line|inherit

normal：默认值，空白会被浏览器忽略

nowrap：文本不会换行，直到遇到<br/>标签为止

5、溢出的文字省略号显示

//强制一行显示
white-space:normal | nowrap;
//超出部分隐藏
overflow:hidden;
//clip裁切（默认），ellipsis省略号标记 
text-overflow:clip | ellipsis;

6.避免显示滚动条

overflow:auto;

CSS精灵技术（sprite）

1.精灵技术使用的核心

（1）精确测量每个小背景图片的大小和位置

（2）背景定位基本为负

2.制作：排列整齐，留有空隙

不同方向的文本（writing-mode）

writing-mode:horizontal-tb | vertical-rl | vertical-lr ;

//html
<div class="box">
    <h1>helloword!</h1>
    <p>this is a message</p>
</div>

1.horizontal-tb

块流向从上至下。对应的文本方向是横向的。

    <style type="text/css">
        .box {
            background-color: black;
            color: #fff;
            writing-mode: horizontal-tb;
        }
    </style>

2.vertical-rl

块流向从右向左。对应的文本方向是纵向的。

    <style type="text/css">
        .box {
            background-color: black;
            color: #fff;
            writing-mode: vertical-rl;
        }
    </style>

3.vertical-lr

块流向从左向右。对应的文本方向是纵向的。

    <style type="text/css">
        .box {
            background-color: black;
            color: #fff;
            writing-mode: vertical-lr;
        }
    </style>

调整图像大小

图像会以盒子的左上角为基点对齐，大的部分溢出，小的部分空白

1.当图像大图盒子大小的时候

（1）给图像<img>添加max-width:100%，可以使图像整个都存在于盒子中

（2）先使图像大小等于盒子大小，这时图像会被平铺，给img添加object-fit:cover（覆盖，多余的裁掉）|contain（自适应）

2.强制图像拉伸：

给img添加width:100%;height:100%;

网站ico图标

1.使用icon图标

（1）将favicon.ico图标放在根目录下

（2）在head之间引入代码（type可以省略）

<link rel="shortcut icon" href="favicon.icon" type="image/x-icon"/>

2.制作icon图标

http:://www/bitbug.net/ 图片转icon图标网站

网站优化三大标签

1.title

标题长度：Google（70kb），35个中文；Baidu（56kb），28个中文

关键字分布：最先出现的权重越高

关键字词频：主关键词出现3词，辅一次

网站名（产品名）-网站介绍

2.Description网站说明

<meta name="description" content=".."/>

content中包括空格不得超过120个汉字

3.keywords关键字

<meta name="keywords" content="...,..."/>

6-8个，用英文逗号隔开

字体图标

可做图可做文字，有兼容性，移动端设备必备

阿里巴巴字体库：www.iconfont.cn

icomoon字库： http://icomoon.io

1.将fonts文件夹放在根目录

2.html标签内添加结构

<span>□<span>

3.样式里声明字体：

@font-face{
    font-family:'icomoon';//字体名称
    src:url('fonts/icomoon.eot?7kkyc2');
    src:url('fonts/icomoon.eot?7kkyc2#iefix')
        format('embedded-opentype'),
        url('fonts/icomoon.ttf?7kkyc2')
        format('tretype'),
        url('fonts/icomoon.woff?7kkyc2')
        format('woff'),
        url('fonts/icomoon.svg?7kkyc2')
        format('svg');
    font-weight:normal;
    font-style:normal;
}

4.添加css样式

span{
    font-family:'icomoon';
}

5.追求字体图标importIcons进压缩包中selection.json

logo优化

<div class="logo">
    <h1>
        <a href="index.html" title="..">..</a>
    </h1>
</div>
<style type="text/css">
    .logo{
        width: ;
        height: ;
    }
    .logo a{
        display:block;
        width: ;
        height: ;
        background:url();
        font-size:0;
    }
</style>

（1）在logo里放h1是为了提权

（2）h1里面放链接可以返回首页，给链接一个大小和logo一样的背景图

（3）链接里面放文字（网页名称），文字不要显示出来

①用text-indent移到盒子外面（text-indent:99999px;），然后overflow:hidden

②font-size:0;

（4）给链接一个title

2D转换

常用

1.鼠标样式（cursor）

default	小白（默认）
text	文本
pointer	小手
not-allowed	禁止
move	移动

2.轮廓线（outline）

outline:outline-color | outline-style | outline-width;

一般都是直接去掉轮廓线： outline:0 | none;

3.防止拖拽文本域（resize）

resize:none;

4.vertical-align垂直居中对齐

vertical-align:baseline（基线，默认）| top | middle | bottom;

只针对行内块元素和行内元素

5.去除图片底侧空白缝隙

因为要预留基线位置，所以会有空白缝隙（行内块元素底线会和父级盒子的基线对齐）

解决办法：

1.给img添加 vertical-align:midlle|top|bottom;

2.将img改为块级元素（vertical-align不针对块级元素）

6.如何使img在一行内显示

1.修改img显示模式为行内块（display:inline-block;）
2.使img不换行：给img父盒子添加 white-space:nowrap;

7.消除img之间的缝隙方法

因为img为行内块，彼此之间有空隙

1.修改显示模式display：block|flex;

2.给父级元素添加：font-size:0;

8.滑动门

通过宽度的撑开实现滑动门样式

    <!-- 因为导航栏都是链接所以a包含span -->
    <a href="#">
        <span></span>
    </a>

    <style type="text/css">
        /* a设置左侧（左门） */
        a {
            display: inline-block;
            height: 33px;
            background: url(#) no-repeat;
        }
        /* span设置右侧（右门） */
        a span {
            display: inline-block;
            height: 33px;
            /* 右对齐 */
            background: url(#) no-repeat right top;
            /* padding撑开合适宽度，剩下的由文字撑开宽度 */
            padding-right: ;
        }
    </style>

9.浮动的盒子紧贴在一起（中间的线变细）

margin-left:-1px;（使用负值，原理是后面的盒子压住前面的盒子）

    <div class="box1"></div>
    <div class="box2"></div>

    <style type="text/css">
        .box1,
        .box2 {
            float: left;
            width: 50px;
            height: 50px;
        }
        
        .box1 {
            border: 1px solid pink;
        }
        
        .box2 {
            border: 1px solid greenyellow;
            margin-left: -1px;
        }
    </style>

10.三角形

    <div class="box1"></div>

    <style type="text/css">
        .box1 {
            width: 0;
            height: 0;
            border-style: solid;
            /* 三角形大小 */
            border-width: 50px;
            /* 三角形颜色，只需要将需要的方向的三角形颜色写上，其他的transparent */
            border-color: black red blue pink;
            /* 照顾兼容性 */
            font-size: 0;
            line-height: 0;
        }
    </style>

11.小竖线 |

（1）用“|”

（2）用盒子：

.spacer{
    width:1px;
    height:12px;
    background-color:#666;
}

Ther19

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS知识梳理

（number表示占的份数，默认0）数值越小，排列越靠前，默认0。
复制链接

扫一扫