CSS学习笔记

最新推荐文章于 2026-01-04 19:06:32 发布
原创 最新推荐文章于 2026-01-04 19:06:32 发布 · 168 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css

本文详细介绍了CSS样式表的三种应用方式：内部样式表、外部样式表和行内样式表，并探讨了选择器的种类，包括标签选择器、类选择器、ID选择器和各种组合选择器。此外，还讨论了样式表的层叠性和继承性，以及元素的显示方式、盒子模型和布局技巧。内容涵盖了伪类选择器、属性选择器、颜色表示和文字样式。最后，提到了CSS在网页布局、浮动、定位和层叠等方面的实用知识。

样式表嵌入方式

  • 内部样式表：只对当前页面有效
  1. 行内样式表
    <td style="front-size:50px">测试</td>
  2. 嵌入样式表
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            color: #f00;
        }
    </style>
</head>
<body>
<span>新年好</span>
</body>
</html>
  • 外部样式表：可应用于所有的页面
  1. test.css
    @charset "utf-8";
.year2021 {
    font-size: 20px;
    color: red;
}
  2. test.html
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./static/css/test.css"/>
</head>
<body>
<span class="year2021">2021 新年好</span>
</body>
</html>

选择器

标签选择器
  • 语法
<style type="text/css">
	标签名 {
		属性: 值;
	}
</style>
  • 通用选择器：适用页面中的所有标签
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}
</style>
类选择器
  • 语法
<style type="text/css">
	.类名 {
		属性: 值;
	}
</style>
id选择器
  • 语法
<style type="text/css">
	#id名 {
		属性: 值;
	}
</style>
  • 注意
  1. 单个文件中id值要保持唯一
  2. 一个元素中只能设置一个id
组合选择器
  1. 分组/并集选择器
<style type="text/css">
	div, p { //div和p标签都将有这个样式
		属性: 值;
	}
</style>
  1. 交集选择器
<style type="text/css">
	div#id1.cls { //拥有id为id1、类名为cls的div标签将有次样式
		属性: 值;
	}
</style>
  1. 嵌套/后代选择器
<style type="text/css">
	div p { //div中的所有p标签都将被选中
		属性: 值;
	}
</style>

<div>
    <p>
    2021年
        <p>新年好</p>
    </p>
</div>
  1. 子代选择器
<style type="text/css">
	div > p { //div中的第一层p标签都将被选中
		属性: 值;
	}
</style>
  1. 兄弟选择器
<style type="text/css">
	div ~ p { //和div同级的p标签都将被选中
		属性: 值;
	}
</style>
  1. 相连选择器
<style type="text/css">
	div + p { //和div同级且直接相连的p标签将被选中
		属性: 值;
	}
</style>
伪类选择器
  • 概述
    使用单冒号，用于格式化DMO树以外的信息、以及不能被常规选择器获取到的信息
  • 示例

:first-letter：获取元素内容的第一个字母

   p:first-letter {
           font-size: 20px;
       }

   <p>2021 新年好</p>

:first-line：获取元素内容的第一行

p:first-line {
          font-size: 20px;
          color: red;
     }

   <p>
   2021<br/>
   新年好
   </p>

:first-child：作为父类的第一个子元素时
:last-child：作为父类的最后一个子元素时

li:first-child {
        font-size: 20px;
        color: red;
    }
li:last-child {
       font-size: 50px;
       color: red;
    }

<ul>
    <li>2021年</li>
    <li>新年好</li>
</ul>

:first-of-type：匹配到的父类的第一个子元素时
:last-of-type：匹配到的父类的最后一个子元素时

h1 {
            color: red;
        }
h1:first-of-type {
		    font-size: 20px;
		}
h1:last-of-type {
		    font-size: 50px;
		}

<div>
    <p>2021年</p>
    <h1>新年好</h1>
    <h1>哈哈哈</h1>
</div>

a:link：未访问过的链接
a:visited：访问过的链接
a:hover：鼠标悬停时的链接，此选择器可用于其它标签
a:active：鼠标按下时的链接

注意：代码顺序最好是如上，否则可能导致某个选择器失效
伪元素选择器
  • 概述
    使用双冒号，可以创建一些文档语言无法创建的虚拟元素
  • 示例

::before：前置伪元素
::after：后置伪元素

必须使用content属性

article > p::before {
    content: "2021年，";
}
article > p::after {
    content: "，哈哈哈。";
}

<article>
    <p>新年好</p>
</article>

::selection：匹配用户选中的元素

如，当用户选中时变红

article > p::selection {
    color: red;
}

<article>
    <p>新年好</p>
</article>
属性选择器
  • 通配选择器
*[title] {
    font-weight: bold;
    font-family: 仿宋;
    color: red;
}

<h1 title="happy new year">新年好</h1>
  • 指定元素
a[href] {
    color: skyblue;
}

<a href="http://www.baidu.com">百度一下，你就知道</a>
  • 指定多个属性
a[href][title] {
    color: skyblue;
}

<a href="http://www.baidu.com" title="baidu">百度一下，你就知道</a>
属性值选择器
  • 指定属性值
a[href="http://www.baidu.com"][title="baidu"] {
    color: skyblue;
}

<a href="http://www.baidu.com" title="baidu">百度一下，你就知道</a>
  • 指定部分属性值

用~符号，表示包含，如href属性值中包含baidu的a标签，注意baidu前后不能有其他字母，除空格外

a[href~="baidu"] {
    color: skyblue;
}

<a href="http://www. baidu .com" title="baidu">百度一下，你就知道</a>
  • 指定子串
/*以 http: 开头*/
a[href^="http:"] {
    color: skyblue;
}

/*以 com 结尾*/
a[href$="com"] {
    color: skyblue;
}

/*包含 baidu，和~=的区别在于，它允许value前后拥有任意字符*/
a[href*="com"] {
    color: skyblue;
}

<a href="http://www.baidu.com" title="baidu">百度一下，你就知道</a>
  • 特定属性：*[key|=“value”]

常用于匹配语言值：*[lang|=“en”]
表示获取等于en或者以en-开始的元素

*[lang|="en"] {
	color: "red";
}

<p lang="en">可以匹配到</p>
<p lang="en-us">可以匹配到</p>
<p lang="fr">无法匹配到</p>
<p lang="cy-en">无法匹配到</p>

颜色表示方式

  1. 英文单词关键字
    red、green、blue等
  2. rgb表示法
  1. 三基色：红绿蓝
  2. 语法：rgb(0, 0, 0)
  1. 三个数字分别为红绿蓝
  2. 数字取值范围为 0 ~ 255
  1. rgba表示法
    a表示透明度，0 ~ 1，0为完全透明
  2. 十六进制表示法
    如：#f00

样式的三大特性

一、继承性

指子类会自动继承父类的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            color: pink;
        }
    </style>
</head>
<body>
<div class="father">父类设置了颜色
    <div class="son">子类没有设置颜色，但是继承了父类的颜色> </div>
</div>
</body>
</html>

几个可继承的属性

  1. color
  2. font-*
    font-style、font-weight、font-size、font-family
  3. text-*
    text-indent、text-align
  4. line-height
  5. list-style

继承性的应用：去除ul的小圆点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>

继承的失效

  1. 默认的样式会覆盖父元素的样式

如a标签有默认颜色蓝色，此时设置的负元素颜色将被覆盖而失效

<div> 父元素 
<a>子元素</a>
</div>
  1. div的高度不能继承

未设置高度则高度为0，注宽度由继承的效果，因为是块级元素独占一行

  1. 一旦有自己的样式则覆盖父类相同属性的样式
二、层叠性

选择器相同时，给同一对象设置相同属性，后面的覆盖前面的

三、优先级
  • 样式嵌入方式

行内样式（style属性） > 嵌入样式（<style>标签） > 外部样式（.css文件）

  • 选择器

id选择器 > 类选择器 > 标签选择器

  • 权重计算方式

选择器的权重值表述为4各部分，用 0，0，0，0 表示

选择器权重权重值
通配符*0 0 0 00
标签选择器、伪元素选择器0 0 0 11
类选择器、伪类选择器、属性选择器0 0 1 010
id选择器0 1 0 0100
行内样式1 0 0 01000
!important∞最大

标签的三种显示方式

  • 块级元素
  1. 属性
    display: block;
  2. 代表
    div、h系列、p、ol、li、ul、dt、dd、dl、header、nav、footer、aside、article、section等
  3. 特点
    1. 独占一行
    2. 默认宽度为父标签的宽度
    3. 可以设置宽高
  4. 注意
    p标签不能嵌套块级元素
  • 行内元素
  1. 属性
    display: inline;
  2. 代表
    span、a、b、u、i、s、strong、ins、em、del
  3. 特点
    1. 一行可以显示多个，即不独占一行
    2. 宽度由内容决定
    3. 无法设置宽高
  • 行内块元素
  1. 属性
    display: inline-block;
  2. 代表
    input、img、textarea、select、button
  3. 特点
    1. 不独占一行
    2. 可以设置宽高
  • 三种类型的转换
  1. 转换成块级元素
    display: block;
  2. 转换成行内元素
    display: inline;
  3. 转换成行内块元素
    display: inline-block;

盒子模型

  • 概述

一种思维方式，将所有的标签都看成是一个盒子

  • 组成
  1. content：内容
  2. padding：内边框，即内容到边框的距离
  3. border：边框
  4. margin：外边框，即盒子和盒子之间的距离
  • 自动内减：不会撑大盒子的特殊情形

当一个大盒子包着一个小盒子，并且两个盒子都是块级元素，此时小盒子的宽度将继承大盒子，但是若是给小盒子添加上padding-left/right、border-left/right等属性时，小盒子的大小不变，即并不会撑大大盒子，此时看到的现象是自动内减（content）；注意如果left/right的距离超过父盒子宽度时则会撑大，另外垂直方向，即top/bottom也一样。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bigger {
            width: 100px;
            height: 100px;
            background-color: #f99;
        }
        .smaller {
            height: 100%;
            border-left: 10px solid skyblue;
        }
    </style>
</head>
<body>
<div class="bigger">
    <div class="smaller"></div>
</div>
</body>
</html>
  • 清除内外默认边距

很多标签默认都带有margin和padding，如：

  1. body：margin(8px)
  2. ul：padding(40px)、margin(16px 0px)

在布局之前通常会清除掉这些默认边距：

* {
    margin: 0px;
    padding: 0px;
}

版心设计

  • 概念

指宽度固定，水平居中的盒子；通常将所有这样的盒子抽取出一个通用的类，这样的类就称为版心

  • 水平居中的方法

对于文字、input、图片等，通过添加text-align: center;属性即可

对于div、p、h等块级元素，要使得它在浏览器中居中，可以给盒子设置属性margin: 0 auto;，要注意的是设置该属性的子盒子需要有width属性，否则其width将默认继承于父元素。

  • CSS常见初始化 & 版心设计
@charset "UTF-8";
/*清除默认的margin和padding*/
* {
    margin: 0;
    padding: 0;
}

/*去除ul的小圆点*/
ul {
    list-style: none;
}

/*去除a标签下划线*/
a {
    text-decoration: none;
}

/*双伪元素清除法：清除浮动与塌陷*/
/*before用于清除塌陷，after用于清除浮动*/
.clearfix::before,
.clearfix::after {
    content: "";
    display: table;
}
.clearfix::after {
    clear: both;
}
.clearfix {
    *zoom: 1; //用于兼容IE浏览器
}

/*抽取出公共部分的版心*/
.w {
    width: 1200px; //设置一个固定宽度
    margin: 0 auto; //版心通常是居中的
}

元素的层级和嵌套

  • 层级

标准流元素 < 浮动元素 < 定位元素

对于定位元素，绝对定位、固定定位、相对定位，三者根据书写顺序，默认是后面的覆盖前面的，也可以给其设置一个 ```z-index: 数值;```属性，数值大者层级高（未设置默认都是0）。
  • 嵌套

块级元素一般用于布局；行内元素则用于放置文字

元素之间的嵌套遵循以下原则

  1. 块级元素可以嵌套放置其他块级元素/行内元素，注意p标签中不能放div标签
  2. 行内元素中则一般只放置文字，也有少数放置其他行内元素，注意a标签不能互相嵌套，否则会被解析成多个a标签

精灵图

  • 作用

通过将很多的小图片放置在一起作为一张大图，客户端只需要请求一次服务器就能获取所有的小图片，而无需每张小图片都取请求一次，从而减少服务器的压力

  • 使用
  1. 创建一个盒子
  2. 通过PS等工具量取所需小图片的尺寸，并将其宽度直接设置为盒子宽度
  3. 将精灵图引用为盒子的背景图片
  4. 将所需小图片的坐标，取以负值，添加为盒子的 bg-position: x y;属性。

字体图标

  • 作用

由于图片在缩放时可能会导致失真，通过使用一些显示为图标，而本质为文字 的字体图标来避免此问题，并可以同文字般去任意更改其颜色、大小等。

  • 使用

推荐 阿里字库，使用方式见其其中的html说明文件，要注意的是，不要去修改font-family属性，且选择器最好是类选择器及以上，因为其内部使用的就是类选择器，选择标签选择器的话优先级不够无法生效。

  • unicode用法
  1. 引入字体文件

.eot, .woff, .woff2等

  1. 声明字体
@font-face {
    font-family: 'test';
    src... /*为了兼容，通常将所有字体罗列*/
}
  1. 使用字体
<p>&#xe920</p> <!--将字体对应的unicode引入-->
  1. 引用字体
p {
    font-family：'test';
}
  • 通过伪元素来使用
@font-face {
    font-family: 'test';
    src... /*为了兼容，通常将所有字体罗列*/
}
.dog::before {
    content: "\e920"; <!--这里要用\替换&#x-->
    font-family: 'test';
}

这种方式使用起来会比较方便，只需要在欲使用此字体图标的标签上添加上dog类即可

设置ICO图标

对于title图标的设置，只能使用ico格式的图片，通常会将此图片放置在根目录中，通过link标签来引用：

<link rel="shortcut icon" href=".../***.ico" />

BFC概述

  • 说明

block format context，指一个独立的块级渲染区域，即页面上的一个隔离于其他容器的独立容器，其特点是当他作为一个父盒子时，无论它的子盒子如何变动，都不会影响他原来的布局。

  • 作用
  1. 可以用于解决margin的塌陷问题
  2. 可以用于清除浮动
  • 触发BFC

通过给父盒子添加如下任一属性即可触发其BFC特性

  1. float的值不为none
  2. overflow的值不为visible
  3. display的值为table、table-cell、inline-block
  4. position的值不为relative和static

常见属性

字体属性
//字体风格
font-stay: normal;
/*
normal：正常
italic：斜体
 */

//字体粗细
font-weight: 400;
/*
400/normal：正常粗细
700/bold：加粗
 */

//字体大小
font-size: 10px;

//字体类型
font-family: '微软雅黑';
/*
'微软雅黑'：默认
电脑未安装该字体时，会使用默认的微软雅黑；
字体类型可以同时设置多个，以逗号相隔，浏览器从前往后，选择最先的已安装字体；
字体可以不用引号，但是当字体由多个单词构成时，则需要引用
 */
  • 连写形式
  1. 顺序
    font: style weight size family;
  2. 省略形式
    只有前两个style和weight可以省略
  3. 层叠性问题
    font-style: italic;
    font: 20px '宋体'
    后者相当于normal normal 20px 宋体，所以前者的style被覆盖不生效。
文本属性
//文本缩进
text-indent: 10px;
/*
值如果为负数则表示向左缩进
 */

//水平对其
text-align: left/center/right;
/*
设置的是文字在所处的标签中的水平位置；
适用的元素有：
1. 文字
2. 行内块元素 input、image 等
3. 行内元素 span a 等
 */

//文本修饰
text-indent: none;
/*
none：默认，常用于取消a标签的下划线
underline：下划线
line-through：删除线
 */
背景属性
//背景颜色
background-color: #f90;

//背景图片
background-image: url('图片存放路径');
/*
默认为平铺效果
 */

//背景图片展开方式
background-repeat: repeat;
/*
repeat：默认，平铺效果
no-repeat：不平铺。默认从左上角还是显示
repeat-x：沿水平方向平铺
repeat-y：沿垂直方向平铺
 */

//背景图片位置
background-position: center center;
/*
第一个值：x轴方向位置，可取 left、center、right
第二个值：y轴方向位置，可取 top、center、bottom
除了使用上述的关键字外，也可以使用具体的px像素点数值
 */
  • 连写形式
  1. 顺序（推荐）
    background: color image repeat position;
  2. 省略形式
    可以只省略颜色、可以只用颜色、当盒子大小和图片大小一样时可以只写一个url()
  3. 层叠性问题
    和字体属性不同的是，如果未设置的属性值，不会覆盖之前单独设置的属性值。
//背景图片尺寸
background-size: 宽 高;
/*
可以设置具体的px数值；
也可以设置一个相对于盒子大小的百分比。
 */
行高属性：line-height
  • 文字四线说明
  1. 顶线
    文字最上方
  2. 中线
    文字中间位置
  3. 基线
    英文单词最下方，如有 ay 此时基线就是 a 的最下方
  4. 底线
    文字最下方

行高：指两行文字的基线之间的距离

  • 使用行高进行垂直居中
  • 方式
    设置line-height等于盒子高度
  • 适用的元素
  1. 文字
  2. input、img(img需要另外添加属性vertical-aligh: middle)
  3. span、a
  • 行高和font连写
font: italic 700 16px/50px '宋体';

50px即为line-height属性，所以如果此时这样设置：

line-height: 50px;
font: italic bold 16px '宋体';

此时line-height不会生效，原理同文字属性连写形式时一样，被默认覆盖了

盒子属性
  • border：边框属性
/*边框粗细*/
border-width: 20px;

/*边框样式*/
border-style: solid;
/*
 solid：实线，默认
 dashed：虚线
 dotted：点线
 */

/*边框颜色*/
border-color: #f99;

/*连写形式*/
border: width style color;
  • 给单独方向设置边框
  1. border-top
  2. border-right
  3. border-bottom
  4. border-left

  • 边框圆角
  1. 赋值顺序

border-radius: 左上px 右上px 右下px 左下px //单位也可用百分比;

  1. 省略
/*一个值：四角共用*/
border-radius: 100px;

/*两个值：左上和右下第一个值，右上和左下第二个值*/
border-radius: 100px;

/*三个值：右上和左下第二个值*/
border-radius: 100px;
  1. 胶囊按钮

半径设置为高度的一半

  • 细线表格
/*仅在表格中使用*/
border-collapse: collapse;
  • box-sizing：border-box
    自动内减
  • padding：内边距属性
  • 赋值顺序

padding: top right bottom left;

  • 省略

同边框圆角

  • 单方向属性
  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left
  • margin：外边距属性

取值、省略形式、单方向属性 都同padding一样的形式

  • margin的两种现象
  • 合并
  1. 左右两个盒子的距离

等于左盒子的margin-right加上右盒子的margin-left

  1. 上下两个盒子的距离

等于上左盒子的margin-bottom和下盒子的margin-top的较大者

  1. margin可以为负数，借此可实现盒子的层叠
  • 塌陷
  • 现象

指两个嵌套的块级元素，当给子元素设置margin-top时，父元素也一起下移了。

  • 解决方案
  1. 可以给父元素设置一个border-top
  2. 可以给父元素设置一个padding-top
  3. 可以给父元素设置一个overflow: hidden，触发其BFC
  4. 可以给父元素设置一个float: left/right，触发其BFC
  5. 可以将父元素设置成一个行内块元素，display: inline-block
  6. 可以在父元素中，在子元素的上面再添加一个块级元素，并触发其BFC，如使用overflow: hidden，通常使用伪元素清除法
.father::before {
            content: "";
            display: block; /*设置为块级元素*/
            overflow: hidden; /*触发BFC*/
        }

上面的display和overflow 可以用 display:table 来取代，
该取值可以同时有设为块级元素并触发BFC的效果，所以可以提炼为：

.clearfix::before {
            content: "";
            display: table; /*设置为块级元素并处罚BFC*/
        }
  • float：浮动属性
  • 作用

解决上下盒子的水平布局问题

  • 取值
  1. left：左浮动，盒子将靠着页面左侧
  2. right：右浮动，盒子将靠着页面右侧
  • 特点
  • 标准流

指浏览器默认摆放盒子的顺序是从上往下，从左往右的

  • 脱标

值浮动的元素会脱离标准流，浮动于当前行，并将会漂浮于当前行标准流盒子之上，不再占有标准流的空间，进而其后的标准流进入其原有位置

  • 浮动找浮动，不浮动找不浮动
  • 浮动的位置依旧是当前行，所以浮动元素只会影响下面的元素，无法影响之前的元素
  • 浮动的元素有自己独特的显示效果，类似于行内块元素，不独占一行，并可设宽高
  • 浮动元素不能撑开父元素

如ul中的li是浮动的，即使给li设置了高度，但是父元素ul无高度，则此时li的高度依旧是0px

  • 浮动之后不能再水平居中
  • 浮动之后不能继承父元素的宽度

比如body中的一个块级元素，原本其宽度继承自body占满一行，给他设置了float之后，相当于变成了行内块元素，宽度为0，将由其内容撑开

  • 浮动元素依旧在父元素的content内容区中
  • 浮动有图文环绕效果，即浮动的图片盒子不会覆盖文字
  • 浮动元素只能覆盖标准流的块级元素，另外就是，它是无法覆盖文字的，即使文字在标准流的块级元素中（文字会溢出）
  • 清除浮动

常用于解决浮动元素无法撑开父元素的问题

  • 额外标签法
  1. 对父元素追加一个块级子元素
  2. 对该子元素添加属性：clear: both;
<div class="outer">
    <div class="inner"></div>
    <div class="额外添加的块级元素"></div>
</div>
  • 伪元素清除法

类似额外标签法，只不过将额外标签用伪元素替换

.outer::after {
    content: "";
    display: "block"; //设为块级元素
    clear: "both";
    height: 0; //额外属性，可不设
    line-height: 0;  //额外属性，可不设
    visibility: hidden; //额外属性，可不设
}
  • 可以给父元素添加属性：overflow: hidden;
  • 可以给父元素添加一个任意高度
  • 注意

对于浮动的应用，通常是用于将原本垂直布局的盒子变成水平布局，除此之外最好不用

  • 关于行内元素的 padding 和 margin
  1. margin
    可以使用 margin-left 和 margin-right
  2. padding
    可以使用 padding-left 和 padding-right，此外padding-bottom只是看着有效果，实质并不起作用
overflow属性
  • 作用

用于设置当盒子内容提供超出盒子大小时的展示效果

如：当一个设置了长宽的盒子，但是content中的文字过多时

  • 取值
  1. visible：可见，即超出也不进行剪裁，默认
  2. hidden：隐藏，即超出部分不显示
  3. scroll：显示滚动条，即在盒子中显示滚动条
  4. auto：根据具体情况作不同处理，即当超出盒子范围时出现滚动条，否则不出现
隐藏属性
  1. overflow: hidden;
    指隐藏盒子中超出范围的内容
  2. visibility: hidden;
    隐藏元素，页面中看不到元素，但是占用页面位置
  3. display: none;
    隐藏元素，页面中看不到元素，同时也不占用页面位置
定位属性
  • 作用

通常用于解决盒子之间的层叠问题

  • 方位属性
  1. top：上边
  2. right：右边
  3. bottom：下边
  4. left：左边

定位属性需要配合方位属性一起使用

right不能覆盖left；bottom不能覆盖top。
如果想覆盖，需先释放left/top，代码为left/top: auto;

  • 静态定位

position: static;

在标准流中的元素默认就是静态定位

  • 相对定位

position: relative;

指盒子相对于自己之前的位置的定位移动

div {
    position: relative;
    top: 100px;
    left: 100px;
}

上例的div盒子将较之前的位置，往下和右都移动了100px

相对定位依旧占有标准流位置，原位置不会被其他元素占据，即它并没有脱标

适用于小范围的定位，通常和绝对定位一起使用，即子绝父相

  • 绝对定位

position: absolute;

默认相对于浏览器的边框来定位，但是一旦父元素有定位属性（无论相对、绝对还是固定），则相对于父元素进行定位

绝对定位元素已脱标，不再占有位置

  • 固定定位

position: fixed;

固定定位始终相对于浏览器进行定位

固定定位已经脱标，使用时垂直方向上必须有一个方位属性，即top或者bottom必须有一个要有值

  • 子绝父相

因为相对定位未脱标，不会影响后面的元素，所以才有了父相

  • 子元素在父元素中的水平居中
  1. 使用 margin: 0 auto
  2. 使用定位
  1. 子绝父相
  2. 水平方位走父元素一半，再回退自身一半
.child {
    position: absolute;
    left: 50%; //父元素一半
    transform: translateX(-50%); //自身一半
}
  • 子元素在父元素中的垂直居中

同理水平居中

  • 子元素在父元素中水平和垂直居中

同理，但是要注意的是，此时transform要用连写形式

.child {
    position: absolute;
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%); //自身一半
}
  • z-index属性

用于设置定位盒子的优先级，数值大者浮在上面

垂直对齐属性：vertical-align
  • 取值
  1. top：顶线
  2. middle：中线
  3. baseline：基线，默认
  4. bottom：底线
  • 文本和img对齐

默认是文字的基线和图片的底线对齐，此时可以通过设置文本的对齐方式为底线，实现文本和图片的对齐

  • input[text] 和 input[button] 对齐

默认是不对齐的，需要对input设置vertical-align属性来实现对齐，不过通常会对这两个input设置一个一样的height，再以box-sizing: border-box;自动内减来消除默认的margin和padding

  • input和img对齐

二者默认也是不对齐的，可以通过对img设置vertical-align来实现对齐

  • div中放置的input无法靠顶

可以对input设置vertical-align: top;

  • img的垂直居中

除了设置line-height外，还需要对img设置vertical-align: middle;

  • div中的img撑起问题

img撑起div时，底部由于为文字基线对齐而额外多出了的文字基线部分，此时可以对img设置vertical-align: base-line;

offset系列属性
  • 作用

用于获取元素自身真实大小和位置

  • offsetWidth 和 offsetHeight
  1. 指盒子自身的宽高，都是只读属性
  2. 可以通过style来设置宽高，也可以通过style获取到宽高，但是只能获取到行内样式设置的宽高
  3. 获取的是真实宽度，即不仅仅有content，还包括了padding和border大小
  4. 返回值为纯数值，无px单位，方便于计算
  • offsetParent

指父元素中最近的有定位的元素，找不到则是body

  • offsetLeft 和 offsetTop
  1. offsetLeft
    指自身左侧到它的offsetParent左侧的距离
  2. offsetTop
    指自身顶部到它的offsetParent顶部的距离
  3. 也都是真实距离，和自读属性
  4. 获取的值只有整数部分，且不会四舍五入
scroll系列属性
  • 作用

用于获取盒子的内容，如文字的真实大小和位置

  • scrollWidth 和 scrollHeight
  1. scrollWidth
    指子元素内容撑开的宽度
  2. scrollHeight
    指子元素内容撑开的高度
  3. 如果内容为空或者未撑开盒子，则大小为盒子的content加上padding（不包含border）
  • 卷区距离：scrollTop 和 scrollLeft
  1. scrollTop
    垂直方向的卷区距离
  2. scrollLeft
    水平方向的卷区距离
  3. 卷区距离为0，辨识无滚动条或无卷区
  4. 存在兼容问题
  • 老版本

通过html的scrollTop、scrollLeft获取，或者通过body的scrollTop、scrollLeft获取

let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  • 新版本

通过window.pageYOffset、window.pageXOffset获取

  1. scrollTop的应用：获取页面级的卷区距离
window.onscroll = function() {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
}
client系列属性
  • 作用

用于获取盒子可视区（包括滚动条部分）的大小

  • clientWidth 和 clientHeight
  1. 相当于scrollWidth和scrollHeight未撑开时的大小
  2. 同样不包括border部分，即获取的是content加上padding的大小
  3. 获取页面可视区时，随页面缩放，大小也会随之改变
  4. 存在兼容性问题
  • 老版本

通过html或者是body的clientWidth获取

  • 新版本

通过window的innerWidth获取

  • clientTop 和 clientLeft
  1. clientTop
    获取距离上边框的大小
  2. clientLeft
    获取距离左边框的大小
  3. 如果上面或左边存有滚动条，会将滚动条的大小计算在内
input标签的两个属性
  • 去除显示变宽效果

border: none;

  • 去除点击变宽效果

outline-style: none;

textarea标签的几个属性
  1. 高度：height
  2. 宽度：width
  3. 去除右下角的自由缩放：resize：none
其他属性
  • 最小/大宽度

min-width、max-width

  • 光标属性

custor: default; //默认，箭头效果
custor: pointer; //小手效果
custor: text; //工字型效果

  • 换行属性

word-wrap: break-word; //允许长单词换行到下一行
word-break: break-all; //在恰当的断字点进行换行

  • box-shadow属性
  • 作用

用于给盒子添加阴影效果

  • 语法
box-shadow: h-shadow v-shadow blur spread color insert;
  1. h-shadow：必填，水平阴影位置
  2. v-shadow：必填，垂直阴影位置
  3. blur：可选，模糊距离
  4. spread：可选，阴影大小
  5. color：可选，阴影颜色
  6. insert：可选

练习

绘制一个三角形
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 0;
            margin: 0 auto;
            border-left: 180px solid hotpink;
            border-top: 90px solid transparent;
            border-bottom: 90px solid transparent;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>
css学习笔记学习笔记
12-19
CSS学习笔记涵盖了多个CSS基础知识点，包括标签选择器、类选择器、id选择器、通配符选择器，以及如何使用CSS绘制基本的盒子模型。以下是对这些知识点的详细阐述。 标签选择器是最基础的CSS选择器，它的作用是为特定...
精选资源
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
CSS学习笔记整理
bfbshs_ddd的博客
12-16 2036
整理过去的CSS学习笔记。CSS 即 层叠样式表/CSS样式表/级联样式表，也是标记语言， 用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距）以及版面的布局和外观显示样式
CSS 学习笔记
weixin_42098295的博客
05-06 1453
定位（Positioning）：static, relative, absolute, fixed, sticky。组成：内容(content)、内边距(padding)、边框(border)、外边距(margin)。媒体查询（Media Queries）：根据不同的屏幕尺寸或设备特性应用不同的样式。属性选择器：根据元素属性选择，如 [type="text"]。Grid：二维布局模型，提供网格系统，进行更复杂的布局设计。伪元素选择器：如 ::before, ::after。
尚硅谷CSS学习笔记
MissXu666的博客
10-10 1782
等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。③维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。我们在编码时，不用过于关注浏览器的私有前缀，不用去记忆，去查询，因为常用的css3 新特性，主流浏览器都是支持的，对于老版本浏览器，我们也可以借助现代构建工具，去帮我们添加私有前缀。
html&css学习笔记——CSS2基础
weixin_61182303的博客
11-03 1395
的位置，创建一个子元素（必须用 content 属性指定内容）。3.3选择器的优先级(权重)
CSS学习笔记[Web开发]
Jenlibein的博客
07-19 1223
CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。CSS指的是层叠样式表* (CascadingStyleSheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在CSS 文件中***：**也称级联样式表。一张 HTML 页面 可以有 多个样式下面是一张提供了四个不同样式表的 HTML 页面。
CSS学习笔记目录
wz_1992的博客
05-30 657
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
css学习笔记1
qq_42236791的博客
12-12 1166
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 3478
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
CSS学习笔记（详细）
jojo_oulaoula的博客
05-13 923
Cascading Style Sheet 级联样式表表现为HTML或XHTML文件样式的计算机语言 包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定若将HTML比做人的骨架，那么CSS就是皮肤，在骨架的架构上进行修饰美化。CSS文件后缀名就是.css。
精选资源
html + css 学习笔记整理.zip
11-08
HTML和CSS是构建和设计网页的基础技术。HTML（超文本标记语言）负责网页内容的结构，而CSS...这份学习笔记整理将为用户的学习之路提供明确的指引，帮助用户建立起系统的知识框架，最终实现从初学者到熟练开发者的转变。
深入理解CSS弹性布局：构建现代响应式网页的
HANhylyxy的博客
01-03 761
结论 弹性布局是现代CSS中最实用的布局工具之一。通过掌握弹性布局，你可以轻松解决传统布局中的难题，创建出灵活、响应式的界面。虽然它只是CSS布局生态系统的一部分（与网格布局、多列布局等并存），但在处理一维布局需求时，弹性布局通常是首选工具。 开始在你的项目中实践弹性布局吧！从简单的导航栏到复杂的卡片布局，你会发现许多曾经棘手的布局问题现在都能迎刃而解。
cssTab卡片式
weixin_73251435的博客
12-30 528
代码//顶部tab切换部分<div</div></div>//下方块数据部分</div></div>css部分.tab {&-item {&:before {left: 100%;
html\css\js（一）
gaxing4615的博客
01-04 216
事件发生以后，会作为一个参数传递给监听函数。
用FastAPI 后端 和 HTML/CSS/JavaScript 前端写一个博客系统 例
最新发布
PieroPc的博客
01-04 590
本文介绍了一个基于前后端分离架构的博客系统，采用HTML/CSS/JavaScript前端和FastAPI后端。系统结构清晰，分为backend和frontend目录，分别包含后端API和前端页面代码。后端使用FastAPI框架实现RESTful API，包含文章增删改查功能，采用Pydantic进行数据验证，并内置了示例数据。前端通过JavaScript调用API实现交互功能。系统支持跨域请求，提供了完整的博客管理功能，包括文章创建、查看、更新和删除等操作。该架构简洁高效，适合小型博客系统的开发需求。
什么是margin重叠，如何解决
yydsdaydayup的博客
12-30 472
摘要：Margin重叠是CSS中垂直方向上相邻块级元素的外边距合并现象，只发生在标准文档流的垂直方向。主要解决方法是创建BFC（块格式化上下文），推荐使用display:flow-root属性，这是最安全无副作用的方式。其他方案包括设置padding/border隔离、使用flex/grid布局等。理解margin重叠是CSS规范的一部分，仅在影响布局时才需要干预。
基础Web开发：HTML与CSS学习笔记详解
资源摘要信息:"html_css学习笔记_第一阶段.rar" HTML (HyperText Markup Language) 是构成网页内容的基础标记语言，它定义了网页的结构和内容。学习HTML是进入前端开发领域的第一步。CSS (Cascading Style Sheets) ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值