css笔记黑马pink老师 B站视频有自己添加内容

最新推荐文章于 2024-06-23 20:25:44 发布

晗宝晗

最新推荐文章于 2024-06-23 20:25:44 发布

阅读量460

点赞数 11

分类专栏： html+css 文章标签： css html

本文链接：https://blog.csdn.net/weixin_56702300/article/details/128012263

版权

html+css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的选择器类型，包括基础选择器、复合选择器、伪类选择器等，以及CSS样式如颜色、字体、布局、定位等属性的使用。还探讨了浮动、定位、层叠性和继承性等关键概念，以及如何通过盒模型、浮动和定位来实现网页布局。此外，文章还讲解了元素显示模式、文本属性、背景属性、过渡和动画等，最后讨论了网页布局的常见方法和技巧，如子绝父相、清除浮动等。

摘要由CSDN通过智能技术生成

css 选择器

css 规则是由两个主要的部分构成，选择器以及一条或多条声明（属性，属性值）。

选择器分为基础选择器和复合选择器两大类

选择器是用于指定css 样式的HTML 标签，花括号内是对该对象设置的具体样式。

内部样式

所有样式都包含在< style >标签内，表示是样式表。

< style > 一般写到 < /head > 上方。

<head>
    <style>
        h4 {
            color: red;
        }
    </style>
</head>

基础选择器

分为标签选择器、类选择器、id选择器、通配符选择器

基础选择器	作用	特点	用法
标签选择器	设置所有相同标签的属性	不能差异化选择	p {color: red;}
类选择器	可以设置一个或多个标签	可以根据需求选择	.red {color: red;}
id选择器	一次只能设置一个,不可重复	一般用于页面唯一性的元素上，常和JavaScript搭配使用	#red {color: red;}
通配符选择器	设置所有标签	不需要调用，自动给所有标签的元素使用样式	* {color: red;}

类选择器

结构需要用class属性来调用

命名尽量用英文，要有意义

多类名使用：在标签class属性中可以写多个类名，必须用空格分开

<head>
    <style>
        .red {
            color: red;
        }
        .font20 {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="red font20">变红 字体20</div>
</body>

复合选择器

选择器	作用	特征	用法
后代选择器	用来选择后代元素	可以是子孙后代	符号是空格
子代选择器	选择最近的一级元素	只能是亲儿子	符号是 >
兄弟选择器	同一级别元素	只能是相邻弟弟	符号是 +
通用选择器	同一级别元素	所有弟弟	符号是 ~
指定选择器	选择具有某类名的某元素	具有某类名的某元素，并集关系	连写，不能有空格
并集、群组选择器	选择某些同样式的元素	可以用于集体声明	符号是，
链接伪类选择器	选择不同状态的链接	跟链接相关	符号是冒号（:）
:focus选择器	选择获得光标的表单	跟表单相关

指定选择器

<head>
    <style>
    	/*div与.red 之间不能有空格*/
        div.red{color: red}
    </style>
</head>
<body>
	<div class="box">
		<!-- 字体颜色变红的元素 div -->
    	<div class="red">被指定的元素</div>
    	<p class="red">哈哈</div>
    </div>
</body>

并集选择器

可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明.。

并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

例如：ul,div {color: red; }

元素1 和元素2 中间用逗号隔开

逗号可以理解为和的意思

链接伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，伪类选择器书写最大的特点是用冒号（:）表示

/* 鼠标触碰 .box，.box里面的 h3 变色 */
.box:hover h3{
			color: pink;
}

链接伪类选择器注意事项

为了确保生效，请按照 LVHA 的循顺序声明 :link（未点击时）－:visited（点击后访问过）－:hover（鼠标放上去时）－:active（鼠标按住不放时,激活）
记忆法：love hate 或者 lv 包包 hao 。
因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

:focus伪类选择器

focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况类表单元素才能获取，因此这个选择器也主要针对于表单元素来说。

例如：input :focus { background-color: yellow; }

css样式表分类

行内样式表（行内式）

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 css 样式。适用于修改简单样式。

<div style="width:200px;height:200px;background:red;"></div>

给谁加谁就有

但是并不是所有的 css 属性都可以写成 html 属性

但是所有的 css 属性都可以放在 style=“” 里定义，因为 style=“” 里面的属性属于是 css 属性

内部样式表（内嵌式）

内部样式表（内嵌样式表）是写到HTML页面内部，是将所有的css代码抽取出来，单独放到一个< style > 标签中。

< style >标签理论上可以放在HTML文档的任何地方，但一般放在 head 标签中。

外部样式表（链接式）

实际开发都是外部样式表，适合于样式比较多的情况。

核心是：样式单独写到css文件中，之后把css文件引入到HTML页面中使用。

css 文件里面可以直接书写 css语法，不支持标签写法

html 和 css 两个文件是相互独立的，需要通过以下标签进行引入：

外部样式引用方法一：
<link rel="stylesheet" href="xxx.css"> <!--href=""css文件的路径-->

rel 定义当前文档与链接文档之间的关系，在这里需要指定位stylesheet 表示被链接的文档是一个样式表文件。

href 定义所连接外部样式表文件的url。

外部样式引用方法二：
<style>
@import url(xxx.css);
</style>

方法区别：
1、本质不同 link 属于 html 方法，import 属于 css 方法
2、Iink 除了可以引用 css, 还可以做其他的事情
3、兼容问题，import IE5 以下不兼容, link都兼容
4、加载顺序 link 结构和样式同时加载, import先结构后样式
5、js 控制样式 link 属于可操作 DOM

元素显示模式

HTML 元素一般分为块元素和行内元素两种类型。

块元素

常见的块元素有< h1>~< h6>、< p>、< div>、< ul>、< ol>、< li>等，其中 < div> 标签是最典型的块元素。

块级元素的特点：

① 比较霸道，自己独占一行。

② 高度，宽度、外边距以及内边距都可以控制。

③ 宽度默认是容器（父级宽度）的100%。

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

注意：

文字类的元素内不能使用块级元素

< p > 标签主要用于存放文字，因此 < p > 里面不能放块级元素，特别是不能放< div >

同理， < h1>~< h6>等都是文字类块级标签，里面也不能放其他块级元素

行内元素

常见的行内元素有 < a>、< strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< span>（主要更改字节）等，其中 < span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

① 相邻行内元素在一行上，一行可以显示多个。

② 高、宽直接设置是无效的。

③ 默认宽度就是它本身内容的宽度。

④ 行内元素只能容纳文本或其他行内元素。

注意：

链接里面不能再放链接
特殊情况链接里面可以放块级元素，但是给转换成块级模式最安全
内联元素识别回车为空格，浮动后就没有了

行内块元素

在行内元素中有几个特殊的标签 —— < img />、< input />、< td>，它们同时具有块元素和行内元素的特点。

行内块元素的特点：

① 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙，回车识别为空格。一行可以显示多个（行内元素特点）。

② 默认宽度就是它本身内容的宽度（行内元素特点）。

③ 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

③ 多个行内块元素一行显示，默认基线对齐

display 元素模式的转换

转换为块元素：display: block;

转换为行内元素：display: inline;

转换为行内块：display: inline-block;

删除元素： display: none;

转换为单元格类型： display: table-cell;

列表类型：display: list-item;

css三大特性

层叠性

相同的选择器设置相同的样式，此时一个样式会被覆盖掉另一个冲突的样式，层叠性主要解决样式冲突的问题。

样式冲突，遵循的原则就是就近原则，那个样式离结构近，就执行那个样式

样式不冲突，不会层叠

继承性

子标签会继承父标签的某些样式，如文本的颜色和字号

恰当的使用继承性可以简化代码，降低css样式的复杂性

子元素可以继承父亲元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性）

所有不可继承属性的取值都可以设置inherit，一旦设置了inherit就可以继承了

float: inherit; 继承

行高的继承

body{
font：12px/1.5 microsoft yahei
}

行高可以跟单位也可以不跟单位

如果子元素没有设置行高，就会继承父亲元素的行高的1.5倍

此时子元素的行高是：当前子元素的文字大小的1.5

body行高1.5，这样写法最大的优势是你们的子元素可以根据自己文字的大小自动调整行高

权重优先级

选择器	选择器权重
继承或者通配符*	0,0,0,0
元素（标签）选择器	0,0,0,1
类选择器，伪类选择器，属性选择器	0,0,1,0
id选择器	0,1,0,0
行内样式 style=	1,0,0,0
！important重要的	无穷大

权重是有4位数字组成的但不会有进位

如果 css 属性和 html 属性相遇了，css 权重大

可以理解为类选择器大于元素选择器id选择器大于类选择器以此类推

继承的权重为是0，如果该元素没有直接被选中不管父元素的权重为多高，子元素的权重都是0

权重叠加

如果是复合选择器，则会有权重叠加，需要计算权重

例如：
div ul li 0,0,0,3
.nav ul li 0,0,1,2
a:hover 0,0,1,1
.nav a 0,0,1,1

css文本属性

注释

/* css注释 */

font-family 设置字体

p {
font-family: Arial,"Microsoft Yahei",tahoma,"Hiragino Sans GB";
}

各种字体之间必须用英文逗号隔开

有空格隔开的多个单词组成的字体，加引号

font-variant

font-variant: small-caps; 小型大写字母

text-transform 字母大小写

text-transform：；更改字母大小写
uppercase 大写
lowercase 小写
capitalize 首字母大写，后面的字母不负责更改
none 默认值

font-size 字号大小

Chrom 默认文字大小为16 px（像素）

Chrom 识别最小字号是12px

也可以取值 1-7

可以给body 指定整个页面的文字大小

font-weight 文字粗细

normal：默认值

bold、bolder：粗体

100—900： 400等价于normal，700等价于bold

font-style 文字倾斜

normal：浏览器默认值

italic：倾斜

字体复合属性

body {
font:font-style font-weight font-size/line-height font-family;
}

属性必须按照顺序写（倾斜、粗细、大小/行高、字体），不得更换，且属性间空格隔开

不需要设置的属性可以省略，但是必须保留 font-size 和 font-family

color 字体颜色

表示	属性值
预定义颜色值	red，等英文单词
十六进制	#XXXXXX ,f~0
RGB代码	rgb () ,255~0
hsl 颜色环	hsl() ，色相360~0

hsla(色相，饱和度，亮度，透明度)
0 红色,60 黄色,120 绿色,180 青色,240 蓝色,300 紫色
饱和度，亮度取值为百分数

text-align 文本对齐

left，right，center，justify

text-align: justify; 文本两端对齐

如果想要图片居中，需要给图片的父级盒子添加 text-align 属性，而不是给图片添加

给块级元素设置 text-align: center; 时，元素内的文字在此块级元素里居中，想要块级元素在它父级里居中，可以添加 margin: auto;

    <style>
        .box {
            width: 1376px;
            height: 354px;
            background-color: darkgrey;
            margin-left: 60px;
            margin-top: 30px;
        }
        h2 {
            width: 1200px;
            height: 46px;
            background-color: #00cfaa;
            font-size: 22px;
            line-height: 46px;
            font-weight: normal;
            color: white;
            text-align: center; 
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <h2>快乐的小青蛙</h2>
    </div>

text-decoration 文本修饰

属性值	描述
none	默认，没有装饰线
underline	下划线
overline	上划线
line-through	删除线

text-indent 缩进

可为负值

1em：是一个相对单位，一个文字大小

1px：属性值单位

常用 2em

取值可以为负数，隐藏文本的一种方式

letter-spacing 字间距

px：单位

word-spacing 词间距

词间距，识别单词，识别的是空格

vertical-align

垂直对齐方式

CSS 的 vertical-align 属性使用场景：经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

 vertical-align : baseline | top | middle | bottom ;

值	描述
baseline	默认，元素放在父元素的基线上
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐

line-height

行间距=上间距+下间距

px：单位

行高等于高度，单行文本文字垂直居中

行高不写单位，则行高是字体大小的倍数

单行文字垂直居中

CSS 没有给我们提供文字垂直居中的代码. 这里我们可以使用一个小技巧来实现.

解决方案: 让文字的行高 = 盒子的高度

简单理解: 行高的上空隙和下空隙把文字挤到中间了. 是如果行高小于盒子高度,文字会偏上,如果行高大于盒子高度,则文字偏下

表格属性

border-spacing

border-spacing 边框间隙

border-collapse 边框合并

表格专用 separate 默认值

border-collapse: collapse; 表示相邻边框合并在一起

border-collapse 属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。

empty-cells 空隐藏

empty-cells: hide/show;

无内容单元格显示、隐藏

识别，空标签。不识别，回车空格

table-layout 固定宽

table-layout: fixed/auto;不可继承

fixed固定表格布局宽度不再受内容影响，加载速度快，因为不需要等内容

auto自动表格布局受内容影响，加载速度慢，需要等内容加载完毕才能加载

表格单线的方法

table设置左上边框，td设置右下边框
table 背景色设置黑色，td背景色设置白色，边框间隙设置1像素
使用 border-collapse

background 背景属性

属性	作用	值
background-color	背景颜色	预定义的颜色值或十六进制或rgb代码（transparent 透明）
background-image	背景图片	url（图片路径）
background- repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background- position	背景位置	length（百分数、由浮点数字和单位标识符组成的长度值）
		position（top，center，bottom，left，right ）分别是x和y的坐标，只写一个方向，另一个方向默认居中
background- attachment	背景附着	scroll（背景滚动、默认）/fixed(背景固定)
background	简写	背景颜色背景图片地址 url（）
		背景平铺背景滚动背景位置背景半透明
		如果子属性和复合属性相遇，子属性往后面写，否则被覆盖。
背景颜色半透明	透明颜色	background: rgba(0,0,0,0.3)（最后一个参数的取值是0-1）

div {background: url(./images/bg.png) no-repeat 22px white;}

 /* 背景图,no-repeat不平铺,22px水平向右的坐标,垂直坐标不写默认center,
white是背景色背,景色和背景图都属于背景所以可以一起写 */

background-origin

background-origin: padding-box（默认值）/ border-box / content-box;

背景图起点位置

background-clip

background-clip: border-box（默认值）/ padding-box / content-box;

背景裁切，区域以外的部分

background-size

背景缩放

background-size: 背景图片宽度背景图片高度；

单位：长度、百分比(参照点是盒子)、 cover、contain;

cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景不变形。

cover 要完全覆盖div盒子，可能有部分背景图片显示不全

contain 把图像图像扩展至最大尺寸，以使其宽度或高度完全适应内容区域，背景不变形。

contain 高度和宽度等比例拉伸，当宽度或者高度铺满div盒子就不再进行拉伸了

背景多重

背景多重，后写的在下面

背景的所有子属性都可以多重

方法一
    background: url(./images/1.jpg) no-repeat top left,
    url(./images/2.jpg) no-repeat top right,
    url(./images/3.jpg) no-repeat right bottom,
    url(./images/4.jpg) no-repeat bottom left,
    url(./images/5.jpg) no-repeat center;
方法二
   background-image: url(./images/1.jpg),url(./images/2.jpg),url(./images/3.jpg),url(./images/4.jpg); 
   background-repeat: no-repeat;
   background-position: top left,top right,right bottom,bottom left;
   background-size: 50px 50px,100px 100px,100px 50px,50px 100px;

渐变

线向渐变

background-image: linear-gradient (方向，颜色，颜色)；

方向可以 to top, right, bottom, left ，还可以使用角度0deg（左下角为基点）

repeating-linear-gradient() 渐变的平铺

background-image: linear-gradient(to right bottom,#f00,#ff0);
background: linear-gradient(90deg,#000,#f00);
background: linear-gradient(90deg,
    #f00 0%,
    #ff0 9%,
    #ff0 89%,
    #0f0 100%);
background-image:repeating-linear-gradient(0deg,
    #000 0px,
    #000 1px,
    #eee 1px,
    #eee 20px   
    );

径向渐变

background-image: radial-gradient(半径 at 位置,#0f0,#ff0) ;

repeating-radial-gradient() 渐变的平铺

background-image: radial-gradient(100px at center,#0f0,#ff0);}
background-image: radial-gradient(100px（横向） 50px（纵向） at center,#0f0,#f0f);}
background-image: radial-gradient(circle at center,#0f0,#f0f);}
background-image: repeating-radial-gradient(circle,
#000 0px,
#000 20px,
#fff 20px,
#fff 40px)

透明

transparent 属性值，透明色

opacity: 0.5; 透明度为0.5

兼容IE的透明度
filter: alpha(opacity=60);
opacity: .6;

半透明色 color: rgba(xx,xx,xx,.5);

list-style

list-style: none; 清除列表符号

list-style-type:; 列表符号类型

list-style-image: url();

list-style-position: inside/outside; 列表符号在li内外

轮廓线 outline

给表单添加 outline: 0; 或者 outline: none;
样式之后，就可以去掉默认的蓝色边框

input {
     outline: none; 
   }

拖拽

draggable=“true” 可以拖拽

盒子模型

border 边框
content 内容
padding 内边距
margin 外边距

border

边框有三部分组成：边框宽度(粗细)、边框样式、边框颜色

border : border-width、border-style、border-color 没有顺序

边框会额外增加盒子的实际大小，注意盒子的 height/width 设置。

支持背景

border 不支持一二三四值法

border-style

边框样式 border-style 可以设置如下值：

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：双线至少3像素

边框分开写法：

border-top: 1px solid red; 只设定上边框，其余同理

楔形边框

边框楔形，相邻的两个颜色不一样就会出现楔形

解决方案，用盒子模拟边框

可利用此特性制作三角形

padding

值的个数	表示的意思
padding：5px	1个值，代表上下左右都有5px内边距
padding：5px 10px	2个值，代表上下内边距是5像素，左右内边距是10像素
padding：5px 10px 20px	3个值，代表上内边距是5像素，左右内边距是10像素，下内边距是20像素
padding：5px 10px 20px 30px	4个值，上是5像素，右是10像素，下是20像素，左是30像素，顺时针转

当我们给盒子指定 padding 值之后，发生了 2 件事情：

内容和边框有了距离，添加了内边距。
padding影响了盒子实际大小。

也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。

解决方案：

如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。

如果盒子本身没有指定width/height属性，继承于父盒子的宽和高，则此时padding不会撑开盒子大小。

margin

子盒子的width padding margin设置百分数的时候参照的都是父盒子的宽度，不分方向

auto 居中

外边距可以让块级盒子水平居中

① 盒子必须指定宽度（width）。

② 盒子左右的外边距都设置为 auto 。

常见的写法，以下三种都可以：

1.margin-left: auto; margin-right: auto;

2.margin: auto;

3.margin: 0 auto; 上下，左右

注意：以上方法是让块级元素水平居中，行内元素或者行内块元素水平居中，给其父元素添加 text-align:center ;即可。

外边距的合并、塌陷

使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并

主要有两种情况:

相邻块元素垂直外边距的合并
嵌套块元素垂直外边距的塌陷

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

当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和，是取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并。

解决方案：

尽量只给一个盒子添加 margin 值。

嵌套块元素垂直外边距的塌陷

子元素有 margin-top 属性时，父级元素影响，子元素可能会溢出

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。

解决方案：
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden

还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题

border-radius 圆角边框

border-radius: length; 用于设置元素的外边框圆角。

参数值可以为数值或百分比的形式

正圆：
宽高相等，border-radius：50%；

该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角

分开写：border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius

如果有border，border-radius 从 border 外开始计算

border-radius:200px 200px 0 0 ;

主次半径，水平方向是主半径，垂直方向是次半径
border-radius: 10px 100px 30px 100px/50px 60px 70px 100px;

box-shadow 盒子阴影

CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。

语法：box-shadow: h-shadow v-shadow blur spread color inset;

值	描述
h-shadow	必须，水平阴影的位置，允许负值
v-shadow	必须，垂直阴影的位置，允许负值
blur	可选，模糊的距离
spread	可选，阴影的尺寸
color	可选，阴影的颜色
inset	可选，外部阴影改为内部阴影

1.默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效

2.盒子阴影不占用空间，不会影响其他盒子排列。

3.阴影的颜色一般使用半透明色 rgba（）
或者opacity: 0.5;

多重阴影，一个盒子设置多个阴影，后写的在下面

 div {width: 200px;height: 200px;background: #0f0; border-radius: 20px;
      box-shadow:inset 0 10px 0 #f00,
      inset 0 -10px 0 #f0f,
       inset 10px 0 0 #00f,
       inset -10px 0 0 #ff0;}

text-shadow 文字阴影

我们可以使用 text-shadow 属性将阴影应用于文本

text-shadow: h-shadow v-shadow blur color;

清除内、外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。

*{
padding: 0; 清除内边距
margin: 0; 清除外边距
}

注意：行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和行内块元素就可以了。

传统网页布局的3种方式

网页布局的本质：用 css来摆放盒子，把盒子摆到相应位置。

网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

标准流

标准流（普通流/文档流）

所谓的标准流: 就是标签按照规定好默认方式排列.

块级元素会独占一行，从上向下顺序排列。

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

常用元素：span、a、i、em 等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

浮动

浮动可以改变元素标签默认的排列方式

浮动最典型的应用：可以让多个块级元素一行内，排列显示。

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法：

选择器 {
float: 属性值（left / right / none）;
}

文字围绕浮动元素

浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围

所以我们可以通过浮动来设置文字环绕图片的效果

浮动产生的本质是做文字围绕效果的

可以将文字用盒子套住，方便操作

浮动的特性

浮动元素会脱离标准流(脱标)
浮动的元素会一行内显示并且元素顶部对齐
浮动的元素会具有行内块元素的特性.

设置了浮动（float）的元素最重要特性：

脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标）
浮动的盒子不再保留原先的位置
如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

注意：浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

浮动元素会具有行内块元素特性

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定

为了约束浮动元素位置, 我们网页布局一般采取的策略是:

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧.

浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

       .box {
            width: 776px;
            height: 187px;
            background-color: blanchedalmond;
            float: left;
            margin-top: 28px;
            margin-left: 28px;
        }
        img {
            float: left;
        }
        h1 {
            font-size: 22px;
            margin-top: 30px;
        }
        .box:hover {
            background-color: skyblue;
        }

        .box:hover h1 {
            color: white;
        }
        /* 文字居中展示 给父级设置宽高和文字居中*/
        .xk {
            width: 513px;
            height: 45px;
            float: right;
            text-align: center;
        }
    </style>
</head>

<body>
        <div class="box">
            <img src="images2/pic2.png" alt="">
            <div class="xk"><h1>顺丰航空第72架全货机正式上班了             </h1></div>
        </div>
</body>

为什么需要清除浮动

① 父级没高度。
② 子盒子浮动了。
③ 影响下面布局了，我们就应该清除浮动了

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为 0 时，就会影响下面的标准流盒子。浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响。

如果父盒子本身有高度，则不需要清除浮动

清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了.

清除浮动方法

语法：
选择器
{
clear:属性值（left / right / both）;
}

我们实际工作中，几乎只用 clear: both;

清除浮动的方式	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写方便	添加了许多无意义的标签，结构化差
父级overflower：hidden	书写简单	溢出隐藏
父级after伪元素	结构语义化正确	兼容性问题，照顾低版本浏览器
父级双伪元素	结构语义化正确	兼容性问题，照顾低版本浏览器

清除浮动本质是?

清除浮动的本质是清除浮动元素脱离标准流造成的影响
清除浮动策略是?

闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.

额外标签法

额外标签法：隔墙法, 就是在最后一个浮动的子元素后面添加一个额外标签, 添加清除浮动样式.

额外标签法会在浮动元素末尾添加一个空的标签

例如

，或者其他标签（如
等）。

注意：要求这个新的空标签必须是块级元素。

父级添加 overflow 属性

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

父级添加 after 伪元素法

:after 方式是额外标签法的升级版。也是给父元素添加

 .clearfix::after {   
   content: "";  必须写
   display: block;  必须写
   height: 0;  
   clear: both;  必须写
   visibility: hidden;   
 }  
 .clearfix {  
   *zoom: 1;  （IE6、7 专有）
 }

代表网站：百度、淘宝网、网易等

父级添加双伪元素

也是给父元素添加

 .clearfix::before,.clearfix::after { 
   content:""; 
   display:table;  //表格 转化为块级元素，并在一行显示
 } 
 .clearfix::after { 
   clear:both; 
 } 
 .clearfix { 
    *zoom:1; 
 }

代表网站：小米、腾讯等

定位

为什么需要定位

某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.
当我们滚动窗口的时候，盒子是固定屏幕某个位置的。

以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。

所以：

浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。

定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位 = 定位模式 + 边偏移

定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。

定位模式

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个：

定位模式	是否脱标	移动位置
static静态定位	否	不能使用边偏移
relative相对定位	否（占有位置）	相对于自身的位置移动
absolute绝对定位	是（不占有位置）	带有定位的父级
fixed固定定位	是（不占有位置）	浏览区可视区
sticky	否（占有位置）	浏览区可视区

边偏移就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

边偏移值属性	示例	描述
top	top：80px	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	bottom：80px	底部偏移量，定义元素相对于其父元素下边线的距离
left	left：80px	左侧偏移量，定义元素相对于其父元素左边线的距离
right	right：80px	右侧偏移量，定义元素相对于其父元素右边线的距离

静态定位 static

静态定位是元素的默认定位方式，无定位的意思

语法：
选择器 {
position: static;
}

静态定位按照标准流特性摆放位置，它没有边偏移

静态定位在布局时很少用到

相对定位 relative

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）。

语法：
选择器
{
position: relative;
}

相对定位的特点：

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。
因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。

绝对定位 absolute

绝对定位的盒子参照包含块定位，包含块是距离自己最近的定位的盒子

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。

需要加 top 和 left 属性

语法：
选择器 {
position: absolute;
}

绝对定位的特点：

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
绝对定位不再占有原先的位置。（脱标）
元素会具有行内块元素的特性.

子绝父相

子级是绝对定位的话，父级要用相对定位。

① 子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。
② 父盒子需要加定位限制子盒子在父盒子内显示。
③ 父盒子布局时，需要占有位置，因此父亲只能是相对定位。

这就是子绝父相的由来，所以相对定位经常用来作为绝对定位的父级。

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。
当然，子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

固定定位 fixed

固定定位是元素固定于浏览器可视区的位置。

主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

语法：
选择器 {
position: fixed;
}

固定定位的特点：（务必记住）

以浏览器的可视窗口为参照点移动元素。
跟父元素没有任何关系
不随滚动条滚动。
固定定位不在占有原先的位置。
固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。
元素会具有行内块元素的特性.

定位元素居中

固定在版心水平居中位置

小算法：

固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。
（1）让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置就可以让固定定位的盒子贴着版心右侧对齐了

（2）transform: translate(-50%,-50%);

巧用 margin 水平居中

div{position: fixed/absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;}

粘性定位 sticky

粘性定位可以被认为是相对定位和固定定位的混合。 Sticky 粘性的

语法：
选择器 {
position: sticky;

top: 10px; // 距离 top 10px 时，吸住
}

粘性定位的特点：

以浏览器的可视窗口为参照点移动元素（固定定位特点）
粘性定位占有原先的位置（相对定位特点）
必须添加 top 、left、right、bottom 其中一个才有效跟页面滚动搭配使用。
兼容性较差，IE 不支持。

不常用，一般用 js 编辑效果。

定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

语法：
选择器 {
z-index: 1;
}

数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上

如果属性值相同，则按照书写顺序，后来居上

数字后面不能加单位

只有定位的盒子才有 z-index 属性

定位的拓展

绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中。
① left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。
② margin-left: -100px;：让盒子向左移动自身宽度的一半

定位特殊特性
绝对定位和固定定位也和浮动类似。

行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。

脱标的盒子不会触发外边距塌陷
浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。

绝对定位（固定定位）会完全压住盒子

绝对定位（固定定位）会压住下面标准流所有的内容。
浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）
浮动之所以不会压住文字，因为浮动产生的最初目的是为了做文字环绕效果的，文字会围绕浮动元素。

网页布局总结

通过盒子模型，清楚知道大部分html标签是一个盒子。

标准流
可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
浮动
可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局。
定位
定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

元素的显示与隐藏

display 显示隐藏元素但是不保留位置
visibility 显示隐藏元素但是保留原来的位置
overflow 溢出显示隐藏但是只是对于溢出的部分处理

display 显示隐藏

display 属性用于设置一个元素应如何显示。

display: none ；隐藏对象删除

display：block ；除了转换为块级元素之外，同时还有显示元素的意思

display 隐藏元素后，不再占有原来的位置

visibility 显示隐藏

visibility 可见性

visibility 属性用于指定一个元素应可见还是隐藏。

visibility：visible ; 元素可视

visibility：hidden; 元素隐藏

visibility 隐藏元素后，继续占有原来的位置。

如果隐藏元素想要原来位置，就用 visibility：hidden

如果隐藏元素不想要原来位置，就用 display：none (用处更多重点）

overflow 溢出显示隐藏

overflow 溢出

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow: hidden; 因为它会隐藏多余的部分

overflow-x: hidden; 针对x轴

overflow-y: hidden; 针对y轴

属性值	描述
visible	不剪切内容也不添加滚动条，溢出显示，默认
hidden	不显示超过的对象尺寸的内容，超出的部分隐藏掉
scroll	不管超出的内容否，总是显示滚动条
auto	超出自动显示的滚动条，不超出不显示滚动条
inherit	继承父盒子

页面图标

页面图标引用方法：

<link rel="shortcut icon" href="../favicon.ico">  
//favicon.ico 名字不能改变

精灵图

利用背景图的坐标调整显示区域

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

使用精灵图核心：

精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
这个大图片也称为 sprites 精灵图或者雪碧图
移动背景图片位置，此时可以使用 background-position 。
移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
因为一般情况下都是往上往左移动，所以数值是负值。
使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

使用精灵图核心总结：

精灵图主要针对于小的背景图片使用。
主要借助于背景位置来实现—background-position 。
一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

精灵图是有诸多优点的，但是缺点很明显。

图片文件还是比较大的。
图片本身放大和缩小会失真。
一旦图片制作完毕想要更换非常复杂。

iconfont 字体图标

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。

字体图标的优点

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实是文字，具有矢量性，放大不失帧，可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

如果遇到一些结构和样式比较简单的小图标，就用字体图标。
如果遇到一些结构和样式复杂一点的小图片，就用精灵图

字体图标的引入

 <style>
        /* 声明图标字体 */
        @font-face {
            font-family: 'iconfont';
            /* 定义了字体的名字 */
            src: url('font/iconfont.ttf?t=1666926831317') format('truetype');
            /* 字体的路径，需要改正确的路径 */
        }
        .iconfont {
            font-family: "iconfont" !important;
            /* 定义字体 */
            /* 字号可以删除 */
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    </style>
</head>
<body>
    <ul><li><a href="#"><span class="iconfont">&#xe660;</span>首页</a></li></ul>
</body>

css三角,界面样式

就是将盒子的宽和高设置为0，只给盒子的边框设置宽度例如

左三角
div { 
     width: 0; 
     height: 0; 
     line-height: 0;  为了照顾兼容性
     font-size: 0;    为了照顾兼容性   
     border: 50px solid transparent; 
     border-left-color: pink; 
 }

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。
更改用户的鼠标样式
表单轮廓
防止表单域拖拽

css三角巧应用

 直角三角    
 div { 
      width: 0; 
      height: 0; 
      line-height: 0; 
      font-size: 0;    
      border-top: 100px solid transparent; 
      border-left: 50px solid skyblue; 
      /* border-bottom: 50px solid gray;  */
      /* border-right: 50px solid green;  */
  }

图片水平居中

方法一：

图片水平居中

图片的父盒子{text-align:center;}

方法二：

图片转化为块级元素

margin: auto;

图片垂直居中

方法一：

给父盒子设置行高等于高度

（行高等于你需要的高度）

给图片设置 vertical-align: middle;

方法二：

span 作为参照物

img {vertical-align: middle;}

span {vertical-align: middle; display: inline-block; width: 0; height: 100%;}

不定宽导航水平居中

ul {text-align: center;}

li {display: inline-block;}

单行居中，多行靠左：

.all {text-align: center;}

.all div {text-align: left; display: inline-block;}

鼠标样式 cursor

li {
  cursor: pointer; 
}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值	描述
default	小白，默认
pointer	小手
move	移动
text	文本
not-allowed	静止

防止拖拽文本域 resize

文本域可以随意变大变小可能会影响其他页面的布局
实际开发中，我们文本域右下角是不可以拖拽的

 textarea{ 
    resize: none;
 }
HTML 中 <textarea> 和 </textarea> 之间不要有空隙

解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。
主要解决方法有两种：

给图片添加 vertical-align: middle | top| bottom 等。（提倡使用的）
把图片转换为块级元素 display: block;
给父盒子设置字号为0。

溢出的文字省略号显示

单行文本溢出显示省略号–必须满足三个条件

先强制一行内显示文本
white-space: nowrap; （默认 normal 自动换行）
超出的部分隐藏
overflow: hidden;
文字用省略号替代超出的部分
text-overflow: ellipsis;

（text-overflow: clip; 裁剪）
固定宽

多行文本溢出显示省略号

overflow: hidden; 
text-overflow: ellipsis;
display: -webkit-box;  弹性伸缩盒子模型显示 
-webkit-line-clamp: 2;  限制在一个块元素显示的文本的行数 （第2行显示...）
-webkit-box-orient: vertical;  设置或检索伸缩盒对象的子元素的排列方式（子元素垂直居中）

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核）

布局技巧—margin负值运用

1.盒子设置 border 后，如果相邻盒子边框出现x2效果，可以让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框。

2.鼠标经过某个盒子的时，想要边框变色完整出现，提高当前盒子的层级即可
（a.如果没有有定位，则加相对定位（保留位置），
b.如果有定位，则加z-index）

宽高自适应

1、宽度自适应窗口

设置百分数

子盒子的width padding margin参照点都是父盒子的宽，不分方向；

2、高度自适应窗口

html,body{height: 100%;}

3、宽度自适应内容

给盒子设置

display: inline-block;

float: left;

position: absolute;

4、高度自适应内容

div{height: auto;}

5、宽高

min-height 超出自适应，不足保持
max-height 不足自适应，超出保持
min-width 超出自适应，不足保持s
max-width 不足自适应，超出保持

min-width max-width 需要结合宽度自适应内容使用，也就是说需要加浮动、定位、inline-block

BFC 块级格式化上下文

BFC是一个独立的区域，随便子盒子怎么翻江倒海翻云覆雨，对外界都不造成任何影响。

可以触发BFC的属性：

overflow: hidden/auto/scroll;
float: left/right;
position: absolute/fixed;
display: inline-block/table-cell/table-caption/flex;

可以触发BFC的标签：html
BFC 应用

左边固定右边弹性

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

.right{overflow: hidden;}

css 初始化

京东

       * {margin: 0;padding: 0}
        em,i {font-style: normal}
        li {list-style: none}
        img { /* 照顾低版本浏览器 */
            border: 0;
            /* 解决图片底部默认空白缝隙 */
            vertical-align: middle}
        button {cursor: pointer}
        a {color: #666;
        text-decoration: none}
        a:hover {color: #c81623}
        button,input {
            font-family: Microsoft YaHei, Heiti SC, tahoma, arial, 
            Hiragino Sans GB, "\5B8B\4F53"(宋体), sans-serif}
        body {/* 文字放大会有锯齿，抗锯齿性 */
            -webkit-font-smoothing: antialiased;
            background-color: #fff;
            font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial,
             Hiragino Sans GB, "\5B8B\4F53", sans-serif;
            color: #666 }
        .clearfix:after {visibility: hidden;clear: both;
            display: block;content: ".";height: 0 }
        .clearfix {*zoom: 1 }

千锋

/* =====================样式重置=================== */

/* ================第一步：清间距 清样式================*/
body,h1,h2,h3,h4,h5,h6,p,a,img,ul,li,input{padding: 0;margin: 0;}/* 便于页面优化 */
ul{list-style: none;}/* 清除列表符号 */
img{ display: block;} /*清除图片默认间隙 */
input{ outline: none;}/* 清除表单的外轮廓 */

/*===================第二步：定义文本三属性=================*/
body{font-size: 12px; color: #333; font-family: '微软雅黑';}

/*====================第三步：定义超链接样式=================*/
a{text-decoration: none; color: gray;}
a:hover{text-decoration: underline; color: orangered;}


/* ===================公共样式====================== */
.l{float: left;}/* 左浮动 */
.r{float: right;}/* 右浮动 */
.w{width: ; margin: 0 auto;}/* 版心 */

CSS属性书写顺序(重点)

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …