CSS学习笔记

最新推荐文章于 2024-06-16 22:45:39 发布

oNightfall

最新推荐文章于 2024-06-16 22:45:39 发布

阅读量78

点赞数

分类专栏： front-end 文章标签： css

本文链接：https://blog.csdn.net/oNightfall/article/details/113791283

版权

front-end 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

样式表嵌入方式

内部样式表：只对当前页面有效

行内样式表

<td style="front-size:50px">测试</td>

嵌入样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            color: #f00;
        }
    </style>
</head>
<body>
<span>新年好</span>
</body>
</html>

外部样式表：可应用于所有的页面

test.css

@charset "utf-8";
.year2021 {
    font-size: 20px;
    color: red;
}

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>

注意

单个文件中id值要保持唯一
一个元素中只能设置一个id

组合选择器

分组/并集选择器

<style type="text/css">
	div, p { //div和p标签都将有这个样式
		属性: 值;
	}
</style>

交集选择器

<style type="text/css">
	div#id1.cls { //拥有id为id1、类名为cls的div标签将有次样式
		属性: 值;
	}
</style>

嵌套/后代选择器

<style type="text/css">
	div p { //div中的所有p标签都将被选中
		属性: 值;
	}
</style>

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

子代选择器

<style type="text/css">
	div > p { //div中的第一层p标签都将被选中
		属性: 值;
	}
</style>

兄弟选择器

<style type="text/css">
	div ~ p { //和div同级的p标签都将被选中
		属性: 值;
	}
</style>

相连选择器

<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>

颜色表示方式

英文单词关键字
red、green、blue等
rgb表示法

三基色：红绿蓝
语法：rgb(0, 0, 0)

三个数字分别为红绿蓝
数字取值范围为 0 ~ 255

rgba表示法
a表示透明度，0 ~ 1，0为完全透明
十六进制表示法
如：#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>

几个可继承的属性

color
font-*
font-style、font-weight、font-size、font-family
text-*
text-indent、text-align
line-height
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>

继承的失效

默认的样式会覆盖父元素的样式
如a标签有默认颜色蓝色，此时设置的负元素颜色将被覆盖而失效
<div> 父元素 
<a>子元素</a>
</div>
div的高度不能继承

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

一旦有自己的样式则覆盖父类相同属性的样式

二、层叠性

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

三、优先级

样式嵌入方式

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

选择器

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

权重计算方式

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

选择器	权重	权重值
通配符*	0 0 0 0	0
标签选择器、伪元素选择器	0 0 0 1	1
类选择器、伪类选择器、属性选择器	0 0 1 0	10
id选择器	0 1 0 0	100
行内样式	1 0 0 0	1000
!important	∞	最大

标签的三种显示方式

块级元素

属性
display: block;
代表
div、h系列、p、ol、li、ul、dt、dd、dl、header、nav、footer、aside、article、section等
特点
独占一行
默认宽度为父标签的宽度
可以设置宽高

注意
p标签不能嵌套块级元素

行内元素

属性
display: inline;
代表
span、a、b、u、i、s、strong、ins、em、del
特点
一行可以显示多个，即不独占一行
宽度由内容决定
无法设置宽高

行内块元素

属性
display: inline-block;
代表
input、img、textarea、select、button
特点
不独占一行
可以设置宽高

三种类型的转换

转换成块级元素
display: block;
转换成行内元素
display: inline;
转换成行内块元素
display: inline-block;

盒子模型

概述

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

组成

content：内容
padding：内边框，即内容到边框的距离
border：边框
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，如：

body：margin(8px)
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）。

嵌套

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

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

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

精灵图

作用

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

使用

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

字体图标

作用

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

使用

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

unicode用法

引入字体文件

.eot, .woff, .woff2等

声明字体

@font-face {
    font-family: 'test';
    src... /*为了兼容，通常将所有字体罗列*/
}

使用字体

<p>&#xe920</p> <!--将字体对应的unicode引入-->

引用字体

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

作用

可以用于解决margin的塌陷问题
可以用于清除浮动

触发BFC

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

float的值不为none
overflow的值不为visible
display的值为table、table-cell、inline-block
position的值不为relative和static

常见属性

字体属性

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

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

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

//字体类型
font-family: '微软雅黑';
/*
'微软雅黑'：默认
电脑未安装该字体时，会使用默认的微软雅黑；
字体类型可以同时设置多个，以逗号相隔，浏览器从前往后，选择最先的已安装字体；
字体可以不用引号，但是当字体由多个单词构成时，则需要引用
 */

连写形式

顺序
font: style weight size family;
省略形式
只有前两个style和weight可以省略
层叠性问题
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像素点数值
 */

连写形式

顺序（推荐）
background: color image repeat position;
省略形式
可以只省略颜色、可以只用颜色、当盒子大小和图片大小一样时可以只写一个url()
层叠性问题
和字体属性不同的是，如果未设置的属性值，不会覆盖之前单独设置的属性值。

//背景图片尺寸
background-size: 宽 高;
/*
可以设置具体的px数值；
也可以设置一个相对于盒子大小的百分比。
 */

行高属性：line-height

文字四线说明

顶线
文字最上方
中线
文字中间位置
基线
英文单词最下方，如有 ay 此时基线就是 a 的最下方
底线
文字最下方

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

使用行高进行垂直居中

方式
设置line-height等于盒子高度
适用的元素

文字
input、img(img需要另外添加属性vertical-aligh: middle)
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;
给单独方向设置边框

border-top
border-right
border-bottom
border-left

边框圆角

赋值顺序

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

省略
/*一个值：四角共用*/
border-radius: 100px;
/*两个值：左上和右下第一个值，右上和左下第二个值*/
border-radius: 100px;
/*三个值：右上和左下第二个值*/
border-radius: 100px;
胶囊按钮

半径设置为高度的一半

细线表格
/*仅在表格中使用*/
border-collapse: collapse;

box-sizing：border-box
自动内减

padding：内边距属性

赋值顺序

padding: top right bottom left;

省略

同边框圆角

单方向属性

padding-top
padding-right
padding-bottom
padding-left

margin：外边距属性

取值、省略形式、单方向属性都同padding一样的形式
margin的两种现象

合并

左右两个盒子的距离

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

上下两个盒子的距离

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

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

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

解决方案

可以给父元素设置一个border-top
可以给父元素设置一个padding-top
可以给父元素设置一个overflow: hidden，触发其BFC
可以给父元素设置一个float: left/right，触发其BFC
可以将父元素设置成一个行内块元素，display: inline-block
可以在父元素中，在子元素的上面再添加一个块级元素，并触发其BFC，如使用overflow: hidden，通常使用伪元素清除法
.father::before {
            content: "";
            display: block; /*设置为块级元素*/
            overflow: hidden; /*触发BFC*/
        }
上面的display和overflow 可以用 display:table 来取代，
该取值可以同时有设为块级元素并触发BFC的效果，所以可以提炼为：
.clearfix::before {
            content: "";
            display: table; /*设置为块级元素并处罚BFC*/
        }

float：浮动属性
作用

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

取值

left：左浮动，盒子将靠着页面左侧
right：右浮动，盒子将靠着页面右侧

特点

标准流

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

脱标

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

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

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

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

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

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

清除浮动
常用于解决浮动元素无法撑开父元素的问题
额外标签法

对父元素追加一个块级子元素
对该子元素添加属性：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

margin
可以使用 margin-left 和 margin-right
padding
可以使用 padding-left 和 padding-right，此外padding-bottom只是看着有效果，实质并不起作用

overflow属性

作用

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

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

取值

visible：可见，即超出也不进行剪裁，默认
hidden：隐藏，即超出部分不显示
scroll：显示滚动条，即在盒子中显示滚动条
auto：根据具体情况作不同处理，即当超出盒子范围时出现滚动条，否则不出现

隐藏属性

overflow: hidden;
指隐藏盒子中超出范围的内容
visibility: hidden;
隐藏元素，页面中看不到元素，但是占用页面位置
display: none;
隐藏元素，页面中看不到元素，同时也不占用页面位置

定位属性

作用

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

方位属性

top：上边
right：右边
bottom：下边
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必须有一个要有值

子绝父相

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

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

同理水平居中
子元素在父元素中水平和垂直居中
同理，但是要注意的是，此时transform要用连写形式
.child {
    position: absolute;
    left: 50%; 
    top: 50%;
    transform: translate(-50%, -50%); //自身一半
}

z-index属性

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

垂直对齐属性：vertical-align

取值

top：顶线
middle：中线
baseline：基线，默认
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

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

offsetParent

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

offsetLeft 和 offsetTop

offsetLeft
指自身左侧到它的offsetParent左侧的距离
offsetTop
指自身顶部到它的offsetParent顶部的距离
也都是真实距离，和自读属性
获取的值只有整数部分，且不会四舍五入

scroll系列属性

作用

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

scrollWidth 和 scrollHeight

scrollWidth
指子元素内容撑开的宽度
scrollHeight
指子元素内容撑开的高度
如果内容为空或者未撑开盒子，则大小为盒子的content加上padding（不包含border）

卷区距离：scrollTop 和 scrollLeft

scrollTop
垂直方向的卷区距离
scrollLeft
水平方向的卷区距离
卷区距离为0，辨识无滚动条或无卷区
存在兼容问题
老版本
通过html的scrollTop、scrollLeft获取，或者通过body的scrollTop、scrollLeft获取
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
新版本

通过window.pageYOffset、window.pageXOffset获取
scrollTop的应用：获取页面级的卷区距离
window.onscroll = function() {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
}

client系列属性

作用

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

clientWidth 和 clientHeight

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

老版本

通过html或者是body的clientWidth获取

新版本

通过window的innerWidth获取

clientTop 和 clientLeft

clientTop
获取距离上边框的大小
clientLeft
获取距离左边框的大小
如果上面或左边存有滚动条，会将滚动条的大小计算在内

input标签的两个属性

去除显示变宽效果

border: none;

去除点击变宽效果

outline-style: none;

textarea标签的几个属性

高度：height
宽度：width
去除右下角的自由缩放：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;
h-shadow：必填，水平阴影位置
v-shadow：必填，垂直阴影位置
blur：可选，模糊距离
spread：可选，阴影大小
color：可选，阴影颜色
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>

oNightfall

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记

样式表嵌入方式内部样式表：只对当前页面有效行内样式表<td style="front-size:50px">测试</td>嵌入样式表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> span {
复制链接

扫一扫