提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
代码如下(示例):
import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import ssl
ssl._create_default_https_context = ssl._create_unverified_context
代码如下(示例):
data = pd.read_csv(
'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())
该处使用的url网络请求的数据。
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。# css简介
主要使用场景就是美化网页,布局网页的
css是一种标记语言,称为css样式表或级联样式表
css可以设置HTML页面的文本内容(大小、字体、对齐方式等)、图片的外形(宽度、边框样式、边距等)以及版面的布局和外观显示样式
css语法规范:两部分组成:选择器以及一条或多条声明。
<style>
/*选择器{样式}*/
p {
color: red;
}
style>
css代码风格
color: red;
font-size: 50px;
每一个属性放在一行上。推荐使用
样式应小写(不区分大小写)
空格规范
属性值前,冒号后,保留一个空格
color: red;
选择器(标签)和大括号中间保留空格
选择标签用的
选择器分为基础选择器和复合选择器
基础选择器是由单个选择器组成的
包括:标签选择器、类选择器、id选择器和通配符选择器
标签名作为选择器
基本语法
标签名 {
属性1:属性值1;
...
}
优点:将所有同样标签改为一个样式
缺点:同样标签不能改别的样式
基本语法
.类 {
属性1:属性值1;
...
}
注意:“.”(英文标识),后面紧跟类名(自定义类名,不能用关键词作类名)
不能使用纯数字、中文等命名,尽量使用英文字母表示
多类名使用:多个类名用空格隔开,标签可以具有这些类名的样式
<div class="red green">div>
基本语法
/*id选择器*/
#pink {
color: pink;
}
id只能是唯一的,只能被一个标签调用
*定义:它表示选取页面中所有元素(标签)
基本语法
* {
属性1: 属性值1;
...
}
通配符选择器不需要调用,自动就给所有元素使用样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wVgb5U2L-1642940919649)(D:\A_study\html-css\study_image\css_基本选择器总结.jpg)]
font-family属性定义文本的字体系列
基本语句
h2 {
font-family: 'Microsoft YaHei UI';
}
各种字体之间必须使用英文状态下的逗号隔开,一般使用默认字体,用空格隔开多个单词组成的的字体,加引号
font-size属性定义字体大小;px(像素)是网页的常用单位
谷歌浏览器默认的文字大小为16px
基本语句
p {
font-size: 16px;
}
一般给body指定一个文字大小,不要浏览器默认
font-weight属性设置文字粗细,实际开发中提倡使用文字来设置文字粗细
normal | 默认值。定义标准的字符。 |
---|---|
bold | 定义粗体字符。 |
bolder | 定义更粗的字符。 |
lighter | 定义更细的字符。 |
100;200;300;400;500;600;700;800;900 | 定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。 |
inherit | 规定应该从父元素继承字体的粗细。 |
基本语句
font-weight: normal;
font-style属性设置文本风格
normal | 默认值。浏览器显示一个标准的字体样式。 |
---|---|
italic | 浏览器会显示一个斜体的字体样式。 |
oblique | 浏览器会显示一个倾斜的字体样式。 |
inherit | 规定应该从父元素继承字体样式。 |
基本语句
p {
font-style:normal;
}
/*复合属性写法*/
/*font: font-style font-weight font-size/line-height font-family;*/
font: intalic 700 16px 'Microsoft yahei';
IDEA不能实现
font | 简写属性。在一条声明中设置所有字体属性。 |
---|---|
font-family | 规定文本的字体系列(字体族)。 |
font-size | 规定文本的字体大小。 |
font-style | 规定文本的字体样式。 |
font-variant | 规定是否以小型大写字母的字体显示文本。 |
font-weight | 规定字体的粗细。 |
CSS Text(文本)属性定义文本的外观,比如文本颜色、对其文本、装饰文本、文本缩进、行间距等
color属性定义文本颜色(开发中一般使用十六进制)
color_name(颜色) | 规定颜色值为颜色名称的颜色(比如 red)。 |
---|---|
hex_number(十六进制) | 规定颜色值为十六进制值的颜色(比如 #ff0000)。 |
rgb_number(RGB代码) | 规定颜色值为 rgb 代码的颜色(比如 rgb(255,0,0))。 |
inherit | 规定应该从父元素继承颜色。 |
基本语句
p {
color: rgb(111, 92, 92);
}
text-align属性规定元素中的文本的水平对齐方式。
值 | 描述 |
---|---|
left | 把文本排列到左边。默认值:由浏览器决定。 |
right | 把文本排列到右边。 |
center | 把文本排列到中间。 |
justify | 实现两端对齐文本效果。 |
inherit | 规定应该从父元素继承 text-align 属性的值。 |
text-decoration属性规定添加到文本的修饰。
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
blink | 定义闪烁的文本。 |
inherit | 规定应该从父元素继承 text-decoration 属性的值。 |
text-indent属性规定文本块中首行文本的缩进。
注释:允许使用负值。如果使用负值,那么首行会被缩进到左边
值 | 描述 |
---|---|
length | 定义固定的缩进。默认值:0。 |
% | 定义基于父元素宽度的百分比的缩进。 |
inherit | 规定应该从父元素继承 text-indent 属性的值。 |
line-height属性设置行间的距离(行高)
值 | 描述 |
---|---|
normal | 默认。设置合理的行间距。 |
number | 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。 |
length | 设置固定的行间距。 |
% | 基于当前字体尺寸的百分比行间距。 |
inherit | 规定应该从父元素继承 line-height 属性的值。 |
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7rnfnZ0b-1642940919651)(D:\A_study\html-css\study_image\css_文本属性总结.jpg)]
行内样式表(行内式)、内部样式表(嵌入式)和外部样式表(链接式)
把style标签写在body标签内,此种方式可以控制当前整个页面元素样式设置
代码结构清晰,但没有实现结构样式完全分离
表示
<p style="color: red">行内样式表p>
样式单独写在CSS文件中,之后把CSS文件引入html中
基本语法
<link rel="stylesheet" href="css文件路径">
注意:中间都不能有空格!
div*3
ul>li
div+p
.nav
p#one /*创建p标签id为one*/
.demo$*5
.demo{你好}*5
/*ta:c*/
text-align: center;
/*ti*/
text-indent: 2em;
IDEA:ctrl+alt+L
是由两个或多个基础选择器,通过不同的方式组合而成的
包括:后代选择器,子选择器,并集选择器,伪类选择器等
语法:
元素1 元素2 {
样式声明
}
元素1,元素2必须用空格隔开,元素1必须是元素2的父类
元素2可以是儿子或者孙子等
子选择器只能选择作为某元素的最近一级子元素,亲儿子。
语法
元素1 > 元素2 { 样式说明 }
元素1和元素2中间用大于号隔开,元素1是父类,元素2是子类
选择一定选择亲儿子
并集选择器可以选择多组标签名,同时为他们定义相同样式
语法:
元素1, 元素2 { 样式声明 }
元素1元素2通过逗号隔开,通常用于集体声明
用于向某些选择器添加特殊效果,比如给链接添加效果,或选择第1个,第n个元素
用冒号(:)表示,比如:hover,:first-child
选择器 | 例子 | 例子描述 |
---|---|---|
a:visited | a:visited | 选择所有已访问的链接。 |
a:hover | a:hover | 选择鼠标悬停其上的链接。 |
a:active | a:active | 选择活动的链接。(鼠标按下未弹起的链接) |
a:link | a:link | 选择所有未被访问的链接。 |
/*选择所有未被访问的链接。*/
a:link {
color: #300;
text-decoration: none;
}
/*选择所有已访问的链接。*/
a:visited {
color: orange;
}
/*选择鼠标悬停其上的链接。*/
a:hover {
color: skyblue;
}
/*选择活动的链接。(鼠标按下未弹起的链接)*/
a:active {
color: green;
}
为确保生效:按顺序LVHA,先link-visited-hover-active
:focus 伪类选择器用于获取焦点表单元素(焦点就是光标)
语法
input:focus {
background-color: #369;
}
选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
---|---|---|---|---|
后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格 .nav a |
子代选择器 | 选择 最近一级元素 | 只选亲儿子 | 较少 | 符号是**>** .nav>p |
交集选择器 | 选择两个标签交集的部分 | 既是 又是 | 较少 | 没有符号 p.one |
并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav, .header |
链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住 a{} 和 a:hover 实际开发的写法 | |
:focus 选择器 | 选择获得光标的表单 | 跟表 单相关 | 较少 | input:focus记住这个写法 |
元素(标签)以什么方式进行显示,了解他们特点可以更好的布局我们的网页
在css中可分为以下三种模式,分别为:块元素
、行内元素
、行内块元素
。
<h1> ~ <h6>、<div>、<p>、<ul>、<ol>、<li> 等等,其中<div>是最典型的块元素
① 比较霸道,自己独占一行
② 高度、宽度、外边距以及内边距都可以控制
③ 宽度默认是容器(父级宽度)的100%
④ 是一个容器或者是一个盒子,里面可以放行内或块级元素
① 文字类的元素内不能存放块级元素
②
标签主要用于存放文字,因此
里面不能放块级元素,特别是不能放
③ 同理,
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等等,
其中<span>是最典型的行内元素。
① 相邻行内元素在一行上,一行可以显示多个
② 宽度、高度直接设置是无效
③ 默认宽度就是它本身内容的宽度
④ 行内元素只能容纳文本或其他行内元素
① 链接里面不能再放链接
② 特殊情况链接可以存放块级元素,但是给转换一下块级模式最安全
它们同时具有块元素和行内元素的特点,因此有些资料称它们为:行内块元素
<img />、<input />、<td>
① 和相邻行内元素(行内块元素)在一行上,但是他们之间会有空白间隙。一行可以显示多个(行内元素的特点)
② 默认宽度就是它本身内容的宽度(行内元素的特点)
③ 高度、行高、外边距、内边距都可以控制(块级元素的特点)
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
---|---|---|---|---|
块级元素 | 一行只能放一个块级元素 | 可以设置宽度与高度 | 容器的100% | 容器级可以包含任何标签 |
行内元素 | 一行可以放多个块级元素 | 不可以直接设置宽度与高度 | 它本身内容的宽度 | 容纳文本或其他行内元素 |
行内块元素 | 一行可以放多个行内块元素 | 可以设置宽度与高度 | 它本身内容的宽度 |
简单来说:一种模式的元素需要另一种模式元素的特性,这个时候就需要进行模式的转换
① 转换为块元素:display:block
② 转换为行内元素:display:inline
③ 转换为行内块元素:display:inline-block
让文字行高等于盒子的高度就可以让文字在当前盒子居中
行高等于上空隙 + 文字本身高度 + 下空隙
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等
background-color属性设置元素背景颜色
基本语法:
background-color: 颜色值;
一般境况下默认颜色值为:transparent(透明的)
background-image属性:描述元素的背景图像。优点是非常便于控制位置
默认情况下,图像会重复,以覆盖整个元素。
基本语法:
background-image: none | url(图片地址);
参数:
值 | 描述 |
---|---|
url(‘URL’) | 指向图像的路径。 |
none | 默认值。不显示背景图像。 |
background-repeat 属性:设置是否及如何重复背景图像。
默认地,背景图像在水平和垂直方向上重复。
基本语法
background-repeat: repeat;
属性:
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
background-attachment 属性:设置背景图像是否固定或者随着页面的其余部分滚动。
基本语法:
background-attachment: scroll;
属性:
值 | 描述 |
---|---|
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时,背景图像不会移动。 |
background-position 属性设置背景图像的起始位置。
基本语法
background-position: x y;
属性:
top left top center top right center left center center center right bottom left bottom center bottom right | 如果您仅规定了一个关键词,那么第二个值将是"center"。默认值:0% 0%。 |
---|---|
x% y% | 第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。 |
xpos ypos | 第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。您可以混合使用 % 和 position 值。 |
如果省略第一(二)个值,那么第一(二)个值居中显示
如果指定的两个值是精确单位和方位名词混合使用的,第一个是x坐标,第二个是y坐标
基本语法:
background: black url("王者.jpg") repeat-y fixed top;
基本语法
background: rgba(0, 0, 0, 0.3);
最后一个参数alpha透明度,取值范围在0-1之间
属性 | 作用 | 值 |
---|---|---|
background-color | 背景颜色 | 与定义的颜色值/十六进制/RGB代码 |
background-image | 背景图片 | url(图片背景) |
background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
background-position | 背景位置 | length/position 分别是x和y坐标 |
background-attachment | 背景附着 | scroll(背景滚动)/fixed(背景固定) |
背景简写 | 书写更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 |
背景色半透明 | 背景颜色半透明 | background:rgba(0,0,0,0.3);后面必须是4个值 |
css有三个重要的特性:层叠性,继承性,优先级
css中的继承:子标签会继承父标签的某些样式,如:文字颜色和字号。
body {
/*12px:字号,1.5:行高,1.5是当前元素文字大小的1.5倍*/
font: 12px/1.5 "Microsoft YaHei UI";
}
当同一个元素指定多个选择器,就会有优先级的产生
内联样式,如: style="…" | 权值为1000 |
---|---|
ID选择器,如:#content | 权值为0100 |
类,伪类、属性选择器、子选择器、相邻选择器,如.content > + | 权值为0010 |
元素选择器 如p {} | 权值为0001 |
继承,通配符*的样式没有权值 | 权值为0000 |
!important 重要性 | ∞无穷大 |
注意点:
权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重
页面布局学习三大核心,盒子模型、浮动和定位。
网页布局过程:
网页布局的核心本质:利用CSS摆盒子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n4BJMThg-1642940919652)(D:\A_study\html-css\study_image\css_盒子模型.png)]
p {
border:5px solid red;
}
值 | 描述 |
---|---|
border-width | 规定边框的宽度。 |
border-style | 规定边框的样式。 |
border-color | 规定边框的颜色。 |
值 | 描述 |
---|---|
none | 定义无边框。 |
*solid | 定义实线。 |
*dotted | 定义点状边框。在大多数浏览器中呈现为实线。 |
*dashed | 定义虚线。在大多数浏览器中呈现为实线。 |
border-top: 1px solid red;
值 | 描述 |
---|---|
separate | 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 |
collapse | 如果可能,边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
边框会把盒子实际大小变大
解决方案:
值 | 描述 |
---|---|
auto | 浏览器计算内边距。 |
length | 规定以具体单位计的内边距值,比如像素、厘米等。默认值是 0px。 |
% | 规定基于父元素的宽度的百分比的内边距。 |
padding:10px 5px 15px 20px;
4个值顺时针:上、右、下、左
3个值:上、左右、下
2个值:上下、左右
1个值:上下左右
盒子给定padding值后,会发生两件事
解决方案:
如果保证盒子跟效果图大小保持一致,则宽高手动减去即可
如果盒子本身没有指定width/height属性,那么padding不会撑开盒子大小
值 | 描述 |
---|---|
auto | 浏览器计算外边距。 |
length | 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。 |
% | 以包含元素宽度的百分比指定外边距。 |
margin:10px 5px 15px 20px;
4个值顺时针:上、右、下、左
3个值:上、左右、下
2个值:上下、左右
1个值:上下左右
外边距可以让块级盒子水平居中,必须满足两个条件:
width: 300px;
margin: 0 auto;
常用形式
margin: auto;
margin: 0 auto;
给其父元素添加text-align: center;即可
相邻块元素垂直外边距合并
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ms6ZuvGb-1642940919652)(D:\A_study\html-css\study_image\css_外边距合并.png)]
解决方案:尽量给一个盒子添加margin值
嵌套块元素垂直外边距塌陷
当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hu7uFvuk-1642940919653)(D:\A_study\html-css\study_image\css_外边距塌陷.png)]
解决方案:
浮动的盒子没有外边距合并的问题
* {
margin: 0;
padding: 0;
}
网页美工大部分效果图都是利用ps来做的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H5Wj7f4C-1642940919653)(D:\A_study\html-css\study_image\css_PS.jpg)]
语法:
li {
list-style: none;
}
border-radius:length;
值 | 描述 |
---|---|
length | 定义圆角的形状。 |
% | 以百分比定义圆角的形状。 |
box-shadow: h-shadow v-shadow blur spread color inset;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊距离。 |
spread | 可选。阴影的尺寸。 |
color | 可选。阴影的颜色。请参阅 CSS 颜色值。 |
text-shadow: h-shadow v-shadow blur color;
值 | 描述 |
---|---|
h-shadow | 必需。水平阴影的位置。允许负值。 |
v-shadow | 必需。垂直阴影的位置。允许负值。 |
blur | 可选。模糊的距离。 |
color | 可选。阴影的颜色。参阅 CSS 颜色值。 |
浮动应用:可以让多个块级元素一行内排列显示。
网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素纵向排列找浮动
选择器 { float:属性值; }
值 | 描述 |
---|---|
left | 元素向左浮动。 |
right | 元素向右浮动。 |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
inherit | 规定应该从父元素继承 float 属性的值。 |
需要掌握
浮动特性
浮动元素一行显示
如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对齐排列。
浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子, 多出的盒子会另起一行对齐。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oAZCbYvo-1642940919654)(D:\A_study\html-css\study_image\css_单列布局.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-00VXgXlQ-1642940919654)(D:\A_study\html-css\study_image\css_两列布局.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rwKYAz73-1642940919655)(D:\A_study\html-css\study_image\css_三列布局.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-591Xxt6d-1642940919655)(D:\A_study\html-css\study_image\css_混合布局.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ui9wO0hK-1642940919656)(D:\A_study\html-css\study_image\css_网页布局.jpg)]
代码如下:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见网页布局title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.top {
height: 50px;
background-color: gray;
margin-bottom: 20px;
}
.banner {
width: 980px;
height: 150px;
background-color: gray;
margin: 0 auto 20px;
}
.box {
width: 980px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
.box li {
float: left;
width: 237px;
height: 300px;
background-color: gray;
margin-right: 10px;
}
.box .last {
margin-right: 0;
}
.footer {
height: 200px;
background-color: gray;
margin-top: 20px;
}
style>
head>
<body>
<div class="top">topdiv>
<div class="banner">bannerdiv>
<div class="box">
<ul>
<li>1li>
<li>2li>
<li>3li>
<li class="last">4li>
ul>
div>
<div class="footer">footerdiv>
body>
html>
浮动与标准流父元素搭配
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
一个元素浮动了,理论上其余兄弟元素也要浮动
一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟也应该浮动,以防止引起问题
浮动只会影响浮动盒子后面的标准流,不会影响前面的标准流
为什么清除浮动
由于父级盒子很多情况下,不方便给高度,但是子盒子又不占有位置,最后父级盒子高度为0时,就会影响下面标准盒子
由于浮动元素不再占有原文档流位置,所以它会对后面的元素排版产生影响
清除浮动本质
清除浮动的本质是清楚浮动元素造成的影响,如果父盒子本身有高度,则不需要清除浮动
清除浮动之后,父级就会根据浮动的子盒子检测高度,有了高度就不会影响标准流了
语法
选择器 { clear:属性值; }
值 | 描述 |
---|---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |
实际开发中,几乎只用clear: both;
clear:both:本质就是闭合浮动, 就是让父盒子闭合出口和入口,不让子盒子出来
清楚浮动方法
额外标签法(在最后一个浮动标签后,新加一个标签,给其设置clear:both;)
优点:通俗易懂,方便
缺点:添加无意义标签,语义化差
注意:添加的标签不能是行内标签
父级添加overflow属性(父元素添加overflow:hidden)(不推荐)
优点:代码简洁
缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素
使用after伪元素清除浮动(推荐使用)
/*1*/
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
/*2*/
.clearfloat::after{
content: "";
display: block;
clear: both;
}
优点:符合闭合浮动思想,结构语义化正确
缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout
使用before和after双伪元素清除浮动
/*给父元素添加*/
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
/*照顾IE6/7*/
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}
优点:代码更简洁
缺点:用*zoom:1触发hasLayout
为什么清除浮动
①父级元素没有高度(内容需要从后台获取时,不确定内容多少,此时父级元素不设置高度)
②子盒子浮动了。
③影响下面布局了,我们就应该清除浮动了
清除浮动四种方法
清除浮动的方式 | 优点 | 缺点 |
---|---|---|
额外标签法(隔墙法) | 通俗易懂,书写方便 | 添加许多无意义的标签,结构化较差。 |
父级添加overflow:hidden;属性 | 书写简单 | 溢出隐藏 |
父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after,兼容性问题 |
父级双伪元素 | 结构语义化正确 | 由于IE6-7不支持:after,兼容性问题 |
所以:
定位:将盒子定在某一个位置,也是在摆盒子,按照定位的位置移动盒子
定位 = 定位模式 + 边偏移
定位模式:用于指定一个元素在文档中的定位方式。边偏移则是决定了该元素的位置
通过CSS的position属性来设置的
属性
值 | 描述 |
---|---|
absolute | 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。(绝对定位) |
fixed | 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。(固定定位) |
relative | 生成相对定位的元素,相对于其正常位置进行定位。因此,“left:20” 会向元素的 LEFT 位置添加 20 像素。(相对定位) |
static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。(静态定位) |
边偏移是定位的盒子移动到最终位置,有top、bottom、left、和right4个属性
静态定位是元素的默认定位方式,无定位的意思
语法:
选择器 { position:static; }
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的
语法:
选择器 { position:relative; }
特点(务必牢记):
绝对定位:是元素在移动位置的时候,是相对于它祖先元素来说的
语法:
选择器 { position:absolute; }
特点(务必牢记):
固定定位是元素固定于浏览器可视区的位置。
主要使用场景:可以在浏览器页面滚动时元素的位置不会改变
语法:
选择器 { position:fixed; }
特点(务必牢记):
固定在版心右侧位置小技巧:
粘性定位可以认为是相对定位和固定定位混合。
语法:
选择器 { position:sticky;top:10px; }
特点(务必牢记):
跟页面滚动搭配使用,兼容性较差,IE不支持
定位模式 | 是否脱标占有位置 | 是否可以使用边偏移 | 移动位置基准 |
---|---|---|---|
静态static | 不脱标,占有位置 | 不可以 | 正常模式 |
相对定位relative | 不脱标,占有位置 | 可以 | 相对自身位置移动 |
绝对定位absolute | 完全脱标,不占有位置 | 可以 | 相对于定位父级移动位置 |
固定定位fixed | 完全脱标,不占有位置 | 可以 | 相对于浏览器移动位置 |
Z-index可被用于将在一个元素放置于另一元素之后。
语法:
选择器 { z-index: 1; }
语法:
div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
绝对定位和固定定位也和浮动类似
通过盒子模型,清楚知道大部分html标签是一个盒子
通过css浮动、定位可以让每个排列成为网页
一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己的专门用法
可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局
可以让多个块级元素一行显示或者左右对其盒子,多个块级盒子水平显示就用浮动布局
定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用来定位布局
类似网站广告,当我们点击关闭就不见了,但是我们重新刷新页面,会重新出现
本质:让一个元素在页面中隐藏或者显示出来
display隐藏元素后,不再占有原来的位置
后面应用其广泛,搭配JS可以做很多的网页特效
属性(*为重点)
值 | 描述 |
---|---|
*none | 此元素不会被显示。 |
*block | 此元素将显示为块级元素,此元素前后会带有换行符。 |
*inline | 默认。此元素会被显示为内联元素,元素前后没有换行符。 |
*inline-block | 行内块元素。(CSS2.1 新增的值) |
visibility 属性规定元素是否可见。提示:即使不可见的元素也会占据页面上的空间
属性
值 | 描述 |
---|---|
visible | 默认值。元素是可见的。 |
hidden | 元素是不可见的。 |
collapse | 当在表格元素中使用时,此值可删除一行或一列,但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 “hidden”。 |
overflow 属性规定当内容溢出元素框时发生的事情。
属性
值 | 描述 |
---|---|
*visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
*hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto | 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>土豆案例title>
<style>
.tudou {
position: relative;
width: 444px;
height: 320px;
background-color: pink;
margin: 100px auto;
}
.tudou img{
width: 100%;
height: 100%;
}
.tudou .mask {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.3) url("播放.webp") no-repeat center;
background-size: 50px 50px;
}
.tudou:hover .mask {
display: block;
}
style>
head>
<body>
<div class="tudou">
<div class="mask">div>
<img src="../王者.jpg" alt="">
div>
body>
html>
伪类选择器后一个空格隔开再加一个空格是表示选择其后代:.tudou:hover .mask
图片格式 | 说明 | 优点 | 缺点 | 应用 |
---|---|---|---|---|
jpg(jpeg) | 不支持透明 | 色彩丰富,文件小 | 有损压缩,反复保存,会降低图片质量 | 网页中的大图、高清图 |
gif | 支持透明、不透明、动画 | 文件较小,支持透明,没有兼容问题 | 色彩简单,只支持256种颜色 | 色彩较为单一的小图标,动画图片 |
png | 支持透明、不透明、半透明 | 无损压缩,简单图片尺寸较小。png8——基本透明,色彩简单;png24——色彩丰富,对透明层的支持更丰富,细节显示较好 | 色彩丰富的图片尺寸较大。png24 IE6不支持 | 层次较多的透明图片,色彩丰富的图标,细节要求较高的高清大图等 |
webp | 支持透明、不透明、半透明、动画 | 文件小,但是可以达到与jpg格式相同的图片质量;支持有损压缩和无损压缩;支持动画,支持透明 | 有兼容问题 | 支持webp格式的APP和webview |
PSD | Photoshop进行平面设计的一张"草稿图" | 在Photoshop所支持的各种图像格式中,PSD的存取速度比其它格式快很多,功能也很强大 | PSD是ps自己的格式 |
ps有很多切图方式:图层切图、切片切图、ps插件切图等。
利用切片选中图片
利用切片工具手动划出
导出选中的图片
文件菜单->导出->存储为web设备所用格式->选择我们要的图片格式->存储
1. Cutterman是一款运行在PS中的插件,能够自动将你需要的图曾经进行输出
2. 官网:www.cutterman.cn/zh/cutterman
3. 注意:Cutterman插件要求ps必须是完整版
为了提高页面制作的效率,布局时通常有以下的整体思路:
这个页面的版心是1200像素,每个版心都要水平居中对齐,可以定义版心为公共类
.w {
width: 1200px;
margin: 0 auto;
}
导航栏(nav):实际开发中不会直接用a而是用li包括li+a的做法
search搜索框:
一个search大盒子里面包括2个表单:input文本框和button按钮
背景图片添加
background: url("王者.jpg") no-repeat top center;
侧导航栏subnav
浮动的盒子没有外边距合并的问题
推荐下载网站:
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?2hayrw');
src: url('fonts/icomoon.eot?2hayrw#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?2hayrw') format('truetype'),
url('fonts/icomoon.woff?2hayrw') format('woff'),
url('fonts/icomoon.svg?2hayrw#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
html标签内添加小图标
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8qjlMyLV-1642940919657)(D:\A_study\html-css\study_image\css_小图标.png)]
修改格式
span {
font-family: "icomoon";
}
把压缩包里面的selection.json从新上传,然后选中自己想要的新图标,从新下载压缩包,并替换原来的文件即可
/*原理*/
.box1 {
width: 0;
height: 0;
border-top: 10px solid pink;
border-left: 10px solid red;
border-right: 10px solid blue;
border-bottom: 10px solid green;
}
/*使用方法*/
.box2 {
width: 0;
height: 0;
/*照顾兼容性*/
line-height: 0;
font-size: 0;
border: 10px solid transparent;
border-right-color: pink;
}
所谓界面样式,就是更改一些用户操作方式,以便提高更好的用户体验
cursor 属性规定要显示的光标的类型(形状)。
语法:
li { cursor:pointer; }
属性:
值 | 描述 |
---|---|
default | 默认光标(通常是一个箭头) |
text | 此光标指示文本。 |
move | 此光标指示某对象可被移动。 |
wait | 此光标指示程序正忙(通常是一只表或沙漏)。 |
pointer | 光标呈现为指示链接的指针(一只手) |
not-allowed | 禁止 |
outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
语法:
/*取消表单轮廓线*/
input {
outline: none;
}
属性:
值 | 描述 |
---|---|
outline-color | 规定边框的颜色。 |
outline-style | 规定边框的样式。 |
outline-width | 规定边框的宽度。 |
文本域的拖拽问题:
textarea {
/*防止拖拽文本域*/
resize: none;
}
vertical-align属性使用场景:设置图片或者表单(行内块元素)和文字垂直对齐
注意:它只针对于行内元素或者行内块元素有效
语法:
img {
vertical-align:baseline|top|middle|bottom;
}
属性:
值 | 描述 |
---|---|
baseline | 默认。元素放置在父元素的基线上。 |
top | 把元素的顶端与行中最高元素的顶端对齐 |
middle | 把此元素放置在父元素的中部。 |
bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
线的位置:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5mtSvAIR-1642940919657)(D:\A_study\html-css\study_image\css_基线中线顶线.jpg)]
此时可以给图片、表单这些行内块元素实现与文字垂直居中对齐: vertical-align:middle;
单行文本溢出显示省略号
满足三个条件
/*1.先强制一行内显示文本*/
white-space: nowrap;
/*2.超出部分隐藏*/
overflow: hidden;
/*3.文本用省略好代替超出部分*/
text-overflow: ellipsis;
多行文本溢出显示省略号
多行文本溢出显示省略号,有较大的兼容性问题,适用于webkit浏览器或移动端
满足的条件
overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient: vertical;
更推荐后台来做这个工作
巧妙利用一个技巧更快更好的布局
给一行四个盒子添加左右边框,边框会出现1+1=2的问题
解决方法:这时候运用margin负值是盒子向左移动压住前面一个边框
给盒子添加hover效果会出现右侧边框不会改变
解决方法:提高当前盒子的层级即可(如果没有定位,则加相对定位(保留位置),如果有定位,则加z-index)
用于解决页码制作,如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LUTK4htH-1642940919658)(D:\A_study\html-css\study_image\css_行内块技巧.png)]
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行内块巧妙运用title>
<style>
.box {
text-align: center;
}
.box a {
display: inline-block;
width: 36px;
height: 36px;
background-color: #f7f7f7;
border: 1px solid #ccc;
text-align: center;
line-height: 36px;
text-decoration: none;
color: #333;
font-size: 14px;
}
.box .prev,.box .next {
width: 85px;
}
.box .current,
.box .elp {
background-color: #fff;
border: none;
}
style>
head>
<body>
<div class="box">
<a href="#" class="prev"><<上一页a>
<a href="#" class="current">2a>
<a href="#">3a>
<a href="#">4a>
<a href="#">5a>
<a href="#">6a>
<a href="#" class="elp">...a>
<a href="#" class="next">下一页>>a>
div>
body>
html>
直角做法
.box1 {
width: 50px;
/*1.只保留右边的边框有颜色*/
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z9U5doHu-1642940919658)(D:\A_study\html-css\study_image\css_直角做法.png)]
不同浏览器对有些标签的默认值是不同的,为了消除差异,对css初始化
简单理解:css初始化是指重设浏览器的样式(也称为cssreset)
京东初始化代码:
/*把我们所有标签的内外边距清零*/
* {
margin: 0;
padding: 0
}
/*em和i斜体 斜体文字不斜体*/
em, i {
font-style: normal
}
/*去掉li的小圆点*/
li {
list-style: none
}
img {
/*border照顾低版本浏览器*/
border: 0;
/*取消图片底侧有空白缝隙问题*/
vertical-align: middle
}
button {
/*当我们鼠标经过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;
/*"\5B8B\4F53" 是宋体的意思,浏览器兼容性好*/
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide, .none {
display: none
}
/*清除浮动*/
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
: 1px solid #ccc;
text-align: center;
line-height: 36px;
text-decoration: none;
color: #333;
font-size: 14px;
}
.box .prev,.box .next {
width: 85px;
}
.box .current,
.box .elp {
background-color: #fff;
border: none;
}
直角做法
.box1 {
width: 50px;
/*1.只保留右边的边框有颜色*/
border-color: transparent red transparent transparent;
border-style: solid;
border-width: 100px 50px 0 0;
}
[外链图片转存中…(img-Z9U5doHu-1642940919658)]
不同浏览器对有些标签的默认值是不同的,为了消除差异,对css初始化
简单理解:css初始化是指重设浏览器的样式(也称为cssreset)
京东初始化代码:
/*把我们所有标签的内外边距清零*/
* {
margin: 0;
padding: 0
}
/*em和i斜体 斜体文字不斜体*/
em, i {
font-style: normal
}
/*去掉li的小圆点*/
li {
list-style: none
}
img {
/*border照顾低版本浏览器*/
border: 0;
/*取消图片底侧有空白缝隙问题*/
vertical-align: middle
}
button {
/*当我们鼠标经过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;
/*"\5B8B\4F53" 是宋体的意思,浏览器兼容性好*/
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide, .none {
display: none
}
/*清除浮动*/
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}