css学习

百科大全

更新时间：2025-10-06 06:24:1132

admin管理员组
文章数量:1794759

css学习

css

css学习笔记（根据菜鸟教程）
- css使用方法
- - id和class选择器
  - 嵌套选择器
  - 组合选择符
  - 补充：CSS3选择器
  - css的插入方式
  - 样式优先级
  - 伪类/伪元素
- css基础
- - 块元素和内联元素
  - 背景，文本，字体
- 位置
- - disply 属性
  - - 块和内联元素
  - position 定位
  - overflow
- 对齐
- - 填充（padding，margin）对齐
  - 位置对齐
- 布局！！
- - box-sizing属性
  - float 浮动（待学
  - - ?清除浮动
  - 盒子模型（边框设置）
  - - border边框
    - margin外边距与padding内边距
  - 网格布局
  - - 创建网格属性：
    - grid-template-columns/rows属性
    - grid-gap属性
    - 设置网格横跨行/列
    - 关于网格线的定义
    - 进阶
  - 弹性布局（css3）
  - - 位置属性：
    - justify-content 属性
    - align-items 属性
    - align-content 属性
    - align/justify-self属性
    - ？flex属性
    - flex-direction
    - flex-wrap
    - flex-flow 属性
    - flex-grow 属性
    - flex-shrink 属性
  - 推荐文章
- 响应式设计
- end

css学习笔记（根据菜鸟教程） css使用方法 id和class选择器

id

#chan{...} id="chan"

class

.chan{...} class="chan"

tip:类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

嵌套选择器

p{ }: 为所有 p 元素指定一个样式。 .chan{ }: 为所有 class=“chan” 的元素指定一个样式。
.chan p{ }: 为所有 class=“chan” 元素内的 p 元素指定一个样式。
p.chan{ }: 为所有 class=“chan” 的 p 元素指定一个样式。

组合选择符

后代选择器(以空格分隔) 选取该元素的后代，非该元素的后代不会被选择 eg：div p

div p { background-color:yellow; }

子元素选择器(以大于 > 号分隔）只能选取直接子元素，孙子等不能被选择 eg：div>p
相邻兄弟选择器（以加号 + 分隔）紧接在另一个元素后的兄弟元素，而且二者有相同的父元素 eg：div+p
普通兄弟选择器（以波浪号～分隔）接在另一个元素后的所有兄弟元素 eg:div~p

补充：CSS3选择器

参考链接

p:nth-child：表示被选择的元素是p标签且为该父元素的第二个子元素

p:nth-of-type：表示被选择的元素是p标签且为该父元素的第二个p元素

css的插入方式

插入样式表的方法有三种:

外部样式表(External style sheet) 每个页面使用 <link> 标签链接到样式表（可以多次应用到不同页面，适用性广）

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

内部样式表(Internal style sheet) 可以使用 <style> 标签在文档头部定义内部样式表（当单个文档需要特殊样式时）

<head> <style> p{text-align:center;} </style> </head>

内联样式(Inline style) 需要在相关的标签内使用样式（style）属性(仅用于一个标签，适用性小一般不采用）

<body> <p style="text-align:center;"> </body> 样式优先级

内联样式> 内部样式>外部样式> 浏览器默认样式

伪类/伪元素

CSS伪类是用来添加一些选择器的特殊效果。

p > i:first-child 取所有<p>元素的第一个 <i> 元素

css基础块元素和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子： <h1> <p> <div>

内联元素只需要必要的宽度，不强制换行。内联元素的例子： <span> <a>

背景，文本，字体

background

background-color:red;
background-image:url(‘图片地址’);
background-repeat:no-repeat; 背景图像是否及如何重复
background-attachment:fixed; 背景是否固定
background-position:right top;

/*也可以缩写，但需要严格按照上述顺序*/ {background:#ffffff url('img_tree.png') no-repeat right top;}

text tip：在次只介绍较为常用的方法，具体请查看菜鸟教程

text-align 文本对齐方式 justify：可以让除最后一行之外的文字两端对齐，即每行的左右两端都紧贴行的边缘 center：居中 left/right：靠左/右 eg:text-align:center;
text-decoration 设置或删除文本的装饰（其实主要是用来删除链接的下划线） eg：text-decoration:none;
text-indent首行缩进 eg：text-indent:48px;

font

font-family 设置文本的字体系列 eg：font-family："宋体"
font-size 字体大小 tip:单位转换px/16=em eg:font-size:1em/16px/100%;
font-weight 字体粗细(normal/lighter/bold) egfont-weight:900/bold
更多见菜鸟教程

位置 disply 属性

隐藏元素 display属性设置为"none"，或把visibility属性设置为"hidden"可以隐藏一个元素（但visibility会影响布局，而display不会）

块和内联元素

display属性可以可以更改内联元素(“inline”)和块元素(“block”)

block（块级元素）：独占一行，占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整。常用的块状元素 <div>、<p>、<h1>、<ol>、<ul>、<dl>、<table>、<form>
inline（行内元素）：不独占一行，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。常用的内联元素 <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>
？内联块状元素： <img>、<input>
其他属性见布局(flex,grid…)

position 定位

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法

static 静态定位的元素不会受到 top, bottom, left, right影响,换句话说，它没有定位
fixed 不随窗口滚动
absolute 绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
relative 相对定位元素的定位是相对其正常位置。移动相对定位元素，但它原本所占的空间不会改变。相对定位元素经常被用来作为绝对定位元素的容器块。
sticky 正常情况下它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed，会固定在目标位置。

overflow

overflow 属性用于控制内容溢出元素框时显示的方式

visible 默认情况下，overflow 的值为 visible，多出的内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，溢出内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 从父元素继承 overflow 属性的值。注意:overflow 属性只工作于指定高度的块元素上

对齐填充（padding，margin）对齐

文本文本在元素内居中对齐，可以使用 text-align: center;
图片要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中: eg

img { display: block; margin: auto; width: 40%; }

对齐元素要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;

位置对齐

position: absolute; 属性对齐元素该方法并不是直接通过position定位，而是position设置定位方式，通过right，left，top等属性定位

.right { position: absolute; right: 0px; width: 300px; }

使用 float 属性来对齐元素:

.left{ float: left; width: 300px; }

注意：如果子元素的高度大于父元素，且子元素设置了浮动，那么子元素将溢出，这时候你可以使用 overflow:auto来解决该问题。

布局！！ box-sizing属性

1.W3C标准盒模型（content-box），border、padding 的设置会破坏元素宽高，必须得重新计算，非常麻烦（除了在IE浏览器，默认就是标准盒模型，所以可以用 box-sizing 来转换）；

2.IE（怪异）盒模型（border-box），border、padding 的设置不会影响元素的宽高，这非常实用（且因为IE盒模型不是标准，所以才有 box-sizing 这个标准属性来设置，将它标准化）【IE6/5 是怪异模型，IE7开始是标准盒模型】

属性值border-box 设置的宽度或高度就是实际的宽度，不被padding等属性影响例：

* { box-sizing: border-box; } #example1 { width: 300px; padding: 40px; border: 15px solid blue; } #example2 { width: 300px; padding: 10px; border: 2px solid red; }

如图：

属性值 content-box 默认值，高度和宽度只应用于元素的内容，会被padding等元素影响例：

* { box-sizing: content-box; } #example1 { width: 300px; padding: 40px; border: 15px solid blue; } #example2 { width: 300px; padding: 10px; border: 2px solid red; }

如图：

float 浮动（待学

一个浮动元素会尽量向该方向移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

?清除浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素

盒子模型（边框设置） border边框

border-width属性：边框宽度
border-style属性：定义边框的样式 eg：

/*border-style可以有1-4个值*/ /*该值的书写顺序具有普适性*/ border-style:dotted solid double dashed; /*上下左右*/ border-style:dotted solid double; /*上左右下*/ border-style:dotted solid; /*上下左右*/ border-style:dotted; /*上下左右*/

border-color属性：边框颜色也可以缩写，但要按照以上顺序 eg：

border:5px solid red;

更多见菜鸟教程

margin外边距与padding内边距

margin与padding属性可以有一到四个值

padding: 24px 24px 24px 24px;

上右左下

padding: 24px 24px 24px;

上左右下

padding: 24px 24px;

上下左右

padding: 24px;

上下左右

网格布局

我们使用**display:grid;**属性将父类设置为网格容器，该容器的所有直系子元素将成为网格元素

例：

.grid-container { display: grid; grid-template-columns: auto auto auto; //设置有几列 background-color: gray; } .grid-item { background-color: blue; border: 1px solid black; padding: 20px; } <div class="grid-container"> <div class="grid-item">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-item">4</div> </div>

如图

创建网格属性： grid-template-columns/rows属性

用来创建网格行和列，都写在父css样式中

grid-template-columns：在网格容器中创建列
grid-template-rows：在网格容器中设置行的高度
fr(单位）：可以自动根据网格容器的宽度来计算列的宽度

例：

.grid-container { display: grid; grid-template-columns: 1fr 2fr; grid-gap: 10px; background-color: blue; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px; } <div class="grid-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>

如图：

grid-gap属性

用于设置网格间距，在父css样式中

grid-column-gap 属性来设置列之间的网格间距：
grid-row-gap 属性来设置行之间的网格间距：
grid-gap 属性是 grid-row-gap 和 the grid-column-gap 属性的简写，可以一次设置俩

例：

.grid-container { display: grid; grid-gap: 4px 48px; //4px为行距 48px为列距 //若只写一个则同时为行距和列距 grid-template-columns: auto auto auto; background-color: blue; }

如图：

设置网格横跨行/列

用来创建横跨行或列的网格，在子css样式中

横跨行
grid-column-start: grid-column-end: 例：

.item1 { grid-column-start: 1; grid-column-end: 3; padding:20px; background-color: rgba(255, 255, 255, 0.8); }

横跨列
grid-row-start: grid-row-end: 例：

.item1 { grid-column-start: 2; grid-column-end: 4; padding:20px; background-color: rgba(255, 255, 255, 0.8); }

如图：？为什么5不在原来的位置，而是跑去了左边可以用 grid-area来解决

grid-area横跨行和列 grid-area:1 / 2 / 4 / 3; 从第一行第二列起，到第四行第三列为止 grid-area:1 / 2 / span 4/span 2; 从第一行第二列横跨四行两列

.grid-container { display: grid; grid-template-columns: auto auto auto; grid-gap: 10px; background-color: #2196F3; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px 0; font-size: 30px; } .item1 { grid-area:1 / 1 / span 1/span 2; } .item5 { grid-area:2 / 2 / 4 / 3; }

缩写属性设置横跨列，可以缩写为grid-row 属性设置横跨行,可以缩写为grid-column: grid-area是上述的再进一步缩写
写法： grid-column:1/3

grid-column:1/span 3

其中span关键词后的数值，表示合并单元格的数量

关于网格线的定义

列与列，行与行之间的交接处就是网格线。

Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。

例如下面这个三列两行的网格中，就拥有四条纵向的网格线（灰色圆圈标记），以及三条横向的网格线（黑色圆圈标记）。

进阶

弹性布局（css3） display:flex; 位置属性： justify-content 属性

用于设置或检索弹性盒子元素在横轴方向上的对齐方式。设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

属性值：（适用于弹性布局的四种属性）

/* 对齐方式 */ justify-content: center; /* 居中排列 */ justify-content: start; /* 从行首开始排列 */ justify-content: end; /* 从行尾开始排列 */ justify-content: flex-start; /* 从行首起始位置开始排列 */ justify-content: flex-end; /* 从行尾位置开始排列 */ justify-content: left; /* 一个挨一个在对齐容器得左边缘 */ justify-content: right; /* 元素以容器右边缘为基准，一个挨着一个对齐, */ /* 分配弹性元素方式 */ justify-content: space-between; /* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */ justify-content: space-around; /* 均匀排列每个元素每个元素周围分配相同的空间 */ justify-content: space-evenly; /* 均匀排列每个元素每个元素之间的间隔相等 */ justify-content: stretch; /* 均匀排列每个元素 'auto'-sized 的元素会被拉伸以适应容器的大小 */

示例

#main { width: 220px; height: 300px; border: 1px solid black; display: flex; justify-content: center; } #main div { height:50px; } <div id="main"> <div style="background-color:coral;">RED</div> <div style="background-color:lightblue;">BLUE</div> <div style="background-color:lightgreen;">Green</div> </div>

align-items 属性

align-items 属性定义flex子项在flex容器的当前行的纵轴方向上的对齐方式。

示例

#main { width: 220px; height: 300px; border: 1px solid black; display: flex; align-items: center; } #main div { height:50px; }

align-content 属性

用于设置垂直方向上的网格元素在容器中的对齐方式。（对于行的排列设置）示例

.grid-container { display: grid; height: 400px; align-content: space-between; grid-template-columns: auto auto auto; grid-gap: 10px; background-color: #2196F3; padding: 10px; } .grid-container > div { background-color: rgba(255, 255, 255, 0.8); text-align: center; padding: 20px; font-size: 30px; }

如图

align/justify-self属性

align-self：定义flex子项单独在纵轴方向上的对齐方式，用于子css样式
justify-self定义flex子项单独在横轴方向上的对齐方式，用于子css样式

示例

#main { width: 220px; height: 300px; border: 1px solid black; display: flex; align-items: flex-start; } #main div { flex: 1; } #myBlueDiv { align-self: center; } <div id="main"> <div style="background-color:coral;">红色</div> <div style="background-color:lightblue;" id="myBlueDiv">蓝色</div> <div style="background-color:lightgreen;">绿色 div</div> </div>

如图

？flex属性

？flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。？flex：1 让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容以下属性都是要在弹性布局display:flex;中才起作用

flex-direction

弹性盒元素的排列方向属性值：

属性值 row （默认值）水平显示 row-reverse 与 row 相同，但是以相反的顺序。 column 垂直显示 column-reverse 与 column 相同，但是以相反的顺序。

例：

#main { display: flex; flex-direction:row; } #main div { width: 40px; height: 40px; } <div id="main"> <div style="background-color:coral;">A</div> <div style="background-color:lightblue;">B</div> <div style="background-color:khaki;">C</div> </div>

如图：

flex-wrap

属性规定在必要的时候拆行或拆列

属性值 nowrap （默认值）规定项目不拆行或不拆列。 wrap 规定项目在必要的时候拆行或拆列。 wrap-reverse 规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

例子：

在这里插入代码片#main { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-wrap: nowrap; } #main div { width: 50px; height: 50px; } <div id="main"> <div style="background-color:coral;">A</div> <div style="background-color:lightblue;">B</div> <div style="background-color:khaki;">C</div> <div style="background-color:pink;">D</div> <div style="background-color:lightgrey;">E</div> <div style="background-color:lightgreen;">F</div> </div>

wrap拆行使得元素不会被压缩

在这里插入代码片#main { width: 200px; height: 200px; border: 1px solid #c3c3c3; display: flex; flex-wrap: wrap; } #main div { width: 50px; height: 50px; } <div id="main"> <div style="background-color:coral;">A</div> <div style="background-color:lightblue;">B</div> <div style="background-color:khaki;">C</div> <div style="background-color:pink;">D</div> <div style="background-color:lightgrey;">E</div> <div style="background-color:lightgreen;">F</div> </div>

flex-flow 属性

是 flex-direction 和 flex-wrap 属性的复合属性。语法： flex-flow: flex-direction flex-wrap;

flex-grow 属性

扩展元素的宽度（有点类似于grid-area？

示例：

#main { width: 350px; height: 100px; border: 1px solid #c3c3c3; display: flex; } #main div:nth-of-type(1) {flex-grow: 1;} #main div:nth-of-type(2) {flex-grow: 3;} #main div:nth-of-type(3) {flex-grow: 1;} #main div:nth-of-type(4) {flex-grow: 1;} #main div:nth-of-type(5) {flex-grow: 1;} <div id="main"> <div style="background-color:coral;"></div> <div style="background-color:lightblue;"></div> <div style="background-color:khaki;"></div> <div style="background-color:pink;"></div> <div style="background-color:lightgrey;"></div> </div>

如图

flex-shrink 属性

flex-shrink 属性指定了 flex 元素的收缩规则。

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。例：

#content { display: flex; width: 300px; } #content div { flex-basis: 100px; border: 3px solid rgba(0,0,0,.2); } .box { flex-shrink: 1; } .box1 { flex-shrink: 2; } .box2 { flex-shrink: 3; } <div class="box" style="background-color:yellow;">A</div> <div class="box" style="background-color:lightblue;">B</div> <div class="box1" style="background-color:grey;">D</div> <div class="box2" style="background-color:lightgreen;">E</div>

如图：