目录
html
- meta标签
- 自结束标签
- 可以提供该网页相关信息,元数据
- charset="utf-8":中文的网页需要用到的声明编码,否则会出现乱码
- name="keywords" content="静夜思,诗词":提供搜索网页的关键字,关键字用,隔开
- name="Description":描述网页的信息
- name="viewport":网页开发移动端页面适配
加粗:strong
斜体:em
表格:table
table:HTML 表格
- tr:元素定义表格行
- th:数据中的表头单元格
- td:表示单元格
table元素里常用的属性
- border(边框)
- cellspacing(规定单元格之间的空白)
- cellpadding(规定单元边沿与其内容之间的空白)
- colspan(用于合并列)
- rowspan(用于合并行)
块级标签
<h1>, <p>, <ul>, <table>,<div>
行内标签
<b>, <td>, <a>, <img>,<span>
CSS
-
css写在哪里?
方式一:内部样式表
写在元素的style标签里面的
示例:
<style>
/* 这里写css样式 */
</style>
方式二:内联样式表
写在styles属性里面的
示例:
<div style="width: 100px;"></div>
方式三:外部样式表
link标签将css资源引⼊
示例:
<link rel="stylesheet" href="./index.css">
-
css的选择器
元素(标签)选择器
<style>
/* 直接使用 标签 编写 css 样式 */
div {
color: red;
}
/* 元素选择器的组合使用,多个标签使用相同的样式,用英式逗号分隔 */
div, p {
color: blue;
}
</style>
<body>
<div>Hello</div>
<p>world</p>
</body>
类选择器
<style>
/* 样式中通过 英式 .类名 的方式获取到指定的标签 */
.test {
color: red;
}
</style>
<body>
<!-- 标签中使用属性 class 给标签定义一个类选择器名称 -->
<div class="test">Hello</div>
</body>
<style>
/* 2:样式如果想指定只有特定的标签使用此样式,可以选择组合的方式 */
div.test {
color: red;
}
</style>
<body>
<!-- 1:当标签中有多个相同名称的类选择器名称 -->
<div class="test">Hello</div>
<p class="test">world</p>
</body>
<style>
/* 2: 可以使用一个类名设置样式,也可以使用链接多个类名的方式设置样式
链接多个类名的时候,必须保证这些类名在同一个标签中都存在样式才生效
*/
.test1.test2 {
color: red;
}
</style>
<body>
<!-- 1:定义一个多个类名的选择器 -->
<div class="test1 test2">Hello</div>
</body>
id选择器
注意:一个id选择器的属性值在html文档中只能出现一次,避免写js获取id时出现混淆
<style>
/* 样式中通过 #名称 的方式获取到指定的标签 */
#test {
color: red;
}
</style>
<body>
<!-- 标签中使用属性 id 给标签定义一个id选择器名称 -->
<div id="test">Hello</div>
</body>
通配符选择器*
<style>
/* 使用 星号,设置全局样式,但是优先级低 */
* {
color: red;
}
</style>
<body>
<div>Hello</div>
</body>
派生选择器
- 后代选择器
<style>
/* 标签里面包裹的标签,通过 标签拿到指定的后代(儿子、孙子)标签 */
div i {
color: red;
}
</style>
<body>
<div>
<p>
<i>hello</i>
</p>
</div>
</body>
- 子元素选择器
<style>
/* 标签里面包裹的标签,通过 标签顺序拿到指定的儿子标签, 注意要按照标签顺序,且只能是下一级儿子级别的标签*/
div>p>i {
color: red;
}
</style>
<body>
<div>
<p>
<i>hello</i>
</p>
</div>
</body>
- 相邻兄弟选择器
<style>
/* 先找到第一个p兄弟,是第二个p,那么第二个p就生效了。+p 继续找第二个p的兄弟,就找到了第三个p,那么第三个也生效了
注意,相同的元素(哥哥是p,弟弟也是p) 一个+号的时候是循环,例如 p+p。超过一个+号的时候,是指定位置的地方开始找下面的兄弟
*/
p+p {
color: red;
}
</style>
<body>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
</div>
</body>
伪类选择器
:first-child {} //第一项
:last-child {} //最后一项
:nth-child(n) {} //第n项
:nth-child(2n+1) {} //奇数项
:nth-child(2n) {} //偶数项
:not(:nth-child(n)) //否定伪类 除了第n项a:link {color:#FF0000;} /*未访问的链接*/
a:visited {color:#00FF00;} /*已访问的链接*/
a:hover {color:#FF00FF;} /*鼠标移动到链接上*/
a:active {color:#0000FF;} /*点击时链接*/
伪元素选择器
::first-letter //第⼀个
::first-line //第⼀⾏ 只能⽤于块级元素
::selection //选中
::before //在开始位置新增
::after //在结束位置新增
选择器的优先级
1:!important // 最高
2:⾏内样式
3:id选择器
4:类选择器
5:标签选择器
6:通配符选择器 // 最低
margin的外边框折叠问题
- 上下两个兄弟盒子的margin都为正取大,都为负取小,一正一负相加
- 父子元素盒子的margin(假设没有内边距或边框把外边距分隔开),也会合并(意思是修改父的盒子属性子的也会生效,修改子的盒子属性父的也会生效);只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并
// 解决父子边距合并: 父元素{ overflow:auto; } 父元素::before{ display: table; content: ""; }
-
css背景的相关属性
background-image // 设置背景图片,取值 url("")
background-repeat // 设置背景图片的平铺方案
* repeat 背景图像将向垂直和水平方向重复。这是默认
* repeat-x 只有水平位置会重复背景图像
* repeat-y 只有垂直位置会重复背景图像
* no-repeat background-image 不会重复
background-size // 设置背景图片的大小
background-position // 设置背景图片的起始位置
background-color // 设置背景颜色,取值 #fff
-
css文字的相关属性
font-size // 字体大小,最小12px
font-weight // 是否加粗,取值
* normal 默认值。定义标准的字符。
* bold 定义粗体字符。
* bolder 定义更粗的字符。
* lighter 定义更细的字符。
* 100-900 越小越细,越大越粗
font-style // 是否斜体,取值
* normal 默认值。浏览器显示一个标准的字体样式。
* italic 浏览器会显示一个斜体的字体样式。
* oblique 浏览器会显示一个倾斜的字体样式。
font-family // 字体
text-indent // 文本缩进
text-align // 文本水平(左右)对齐,取值
* left 把文本排列到左边。默认值:由浏览器决定。
* right 把文本排列到右边。
* center 把文本排列到中间。
* justify 实现两端对齐文本效果
text-height // 字体行高
-
css布局定位
简介
正常元素怎么布局?
- 默认,一个块级元素的内容宽度就是其父元素的100%,他的高度和其内容高度一致
- 行内元素它的宽度和高度度都是根据内容决定的(无法设置行内元素的宽高)
可设置display属性,定义元素的类型(css3定义布局),给行内元素设置宽高
span { /* 行内元素,设置成行内块级元素,不独占一行,这样就可以设置宽高了 */ display: inline-block; /* 行内元素,设置成块级元素,独占一行,这样就可以设置宽高了 */ display: block; }
float 浮动布局
- 使用
float: none; //默认值,元素不浮动
float: left; //元素向左浮动
float: right; //元素向右浮动
- 特点
- 浮动元素会脱离文档流,不再占据文档流空间
- 浮动元素彼此之间是从左往右排列,宽度超过一行自动换行
- 在浮动元素前面元素不浮动时,浮动元素无法上移
- 块级元素和行内元素浮动之后都变成行内块级元素
- 浮动元素不会盖住文字,可以设置文字环绕效果 // 浮动设计之初的目的
清除浮动
div::after {
clear: both;
content: '';
display: block;
}
flex 弹性布局
- 使用
- 父元素属性
/* 设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。*/
display: flex;/* 决定主轴的方向(即子元素的排列方向)row:横向排版,row-reverse:横向排版颠倒
column:纵向排版,column-reverse:纵向排版颠倒 */
flex-direction: row | row-reverse | column | column-reverse/* 是否换⾏,父元素宽度固定的话,多个子元素超出父元素宽度那么子元素会等分父元素的宽度,子元素的宽度将失效,如果想让子元素的宽度生效,就要指定换行, */
flex-wrap: nowrap | wrap | wrap-reverse;
/* 定义⽔平⽅向对⻬⽅式(父元素要有宽度才生效) flex-start:默认从左向右排版, flex-end:正序从右向左排版,center:正序居中排版,space-between:间隔均分父元素宽度排版,两侧紧挨父元素左右两侧,space-around:间隔均分父元素宽度排版,中间的间距是两侧的间距的两倍*/
justify-content: flex-start | flex-end | center | space-between | space-around;
/* 定义垂直方向对齐方式 flex-start:默认原效果,flex-end:放在下面,center:放在中间,baseline:以子元素中的内容的基线水平对齐的方式排版,stretch:子元素没有设置高度的话,使用父元素的高度*/
align-items: flex-start | flex-end | center | baseline | stretch;/* 定义多个轴线(多行/多列)对齐方式,flex-start:父元素设置高度的话,第二行紧挨第一行排着,没有此参数的话,会均分父元素高度排,flex-end:从底部排,center:排在中间,space-between:垂直均分间隔,上下紧贴父元素, space-around:垂直均分间隔,上下距离父元素的高度是中间间距的一半*/
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- 子元素属性
/* 定义子元素的排列顺序,默认为0,数字越小排列越前,数字越大排列越后 */
order: -10 | -1 | 0 | 1 | 10;/* 定义子元素的放大比例,默认为0,1:默认占据剩余的空间,2:是其他元素少的总和的2倍 */
flex-grow: 0 | 1 | 2 | 3;
/* 定义子元素是否可以缩小,默认为1可以缩小,0不可以 */
flex-shrink: 0 | 1;
/* 定义了在分配多余空间之前,子元素占据的主轴空间 */
flex-basis: <length> | auto;
/* flex-grow, flex-shrink 和 flex-basis的简写 */
flex: 0 1 auto;
position 定位布局
- 使用
- 父元素属性
/* 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素 */
position: relative (相对绝对)
/* 当页面滚动时,设置此属性的元素不跟着滚动,始终显示在固定的页面位置,"left", "top", "right","bottom"指定位置*/
position: fixed (固定定位)/* 当页面滚动时,设置此属性的元素滚动到指定的位置时,不再滚动,"left", "top", "right","bottom"指定位置 */
position: sticky (粘性定位)
- 子元素属性
/* 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right","bottom"属性进行移动 */
position: absolute (绝对定位)
- 相关属性
/* 当定位的盒子重叠在一起,有遮挡住的时候可以使用,值越大图层放在越上面 */
z-index
grid 网格布局
- 使用
/* 网格布局 */
display: grid;
/* 显示几列,几个值就是几列,数字是列宽 */
grid-template-columns: 10px 10px 10px;
/* 显示几行,几个值就是几行,数字是行高 */
grid-template-rows: 10px 10px 10px;
/* 百分比的方式 */
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%;
/* repeat()函数简化 */
display: grid;
grid-template-columns: repeat(3, 33.33%); // 第一个参数显示几列,第二个列宽
grid-template-rows: repeat(3, 33.33%); // 第一个参数显示几行,第二个行高
-
水平垂直居中
行内块元素
1.
line-height:取height相同的值
text-align: center
2.display: flex;
justify-content: center;
align-items: center;
块级元素
1. position + margin 清楚子元素的宽高
父元素 {
position: relative;
}
子元素{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
2. position + transform 不清楚子元素的宽高
父元素 {
position: relative;
}
子元素{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3. flex
父元素{
display: flex;
justify-content: center;
align-items: center;
}
-
css 常用属性
VH单位
/* css中高度不好获取,使用vh单位表示可以看到的页面的高度 */
height: 100vh; // 表示可看到的页面的百分百高度
圆角
/* 四个值的顺序是:左上角,右上角,右下角,左下角 */
border-radius: 10px 10px 10px 10px; border-radius: 50% // 圆形
阴影
/*
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表*/
box-shadow: h-shadow v-shadow blur spread color
渐变
/* 从上到下,颜色可以写多个(默认情况下)*/
background-image: linear-gradient(#e66465, #9198e5);
/* 从左到右 */
background-image: linear-gradient(to right, red , yellow);
/* 对角 */
background-image: linear-gradient(to bottom right, red, yellow);/* 透明度 rgb是颜色,a 是是否透明,1不透明,0透明*/
background-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1))
文本阴影
/*
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表*/
text-shadow: 5px 5px 5px #FF0000
文本溢出
- 显示一行,超出部分显示省略号
{
/* 不让换行 */
white-space: nowrap;
/* 溢出的部分隐藏 */
overflow: hidden;
/* 溢出的部分显示... */
text-overflow: ellipsis;
}
- 显示指定几行,超出的部分显示省略号
{
/* 溢出的部分隐藏 */
overflow: hidden;
/* 溢出的部分显示... */
text-overflow: ellipsis;
/* 指定显示行数 */
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
}
文本换行
/* 长文本换行 */
word-wrap:break-word;
/* 单词拆分换行 */
word-break: break-all;
鼠标移动到图片上放大
img:hover {
transform: scale(1.1); // 放大1.1倍
transition: 0.5s ease; // 0.5秒动画
}// 如果不想超出父元素 overflow: hidden 设置溢出的图片隐藏
设置盒子宽度 | width | 参数取值:长度、百分比、auto(默认父级的宽度) | |
设置盒子高度 | height | 参数取值:长度 | |
设置文本颜色 | color: #000 | 参数表示:指定字体颜色 | |
设置背景颜色 | background-color: #aaa | 参数表示:指定背景颜色 | |
盒子设置边框 | border: 5px solid red | 参数分别表示:边框宽度、边框的样式、边框的颜色 | |
盒子设置填充大小 | padding |
| |
盒子设置外边距大小 | margin |
| |
怪异盒子模型 | box-sizing:border-box | 标准盒子模型,设置后会增加原有标签的大小,如果不想改变大小,就要指定成怪异盒子模型 | |
设置盒子的排版 | |||
方式一:兄弟div之间 | float | 浮动布局 取值: left:浮动在左侧 | |
方式二:兄弟div之间,需要有父级div | position | 定位布局 父元素取值: relative:生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 子元素取值: absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right","bottom"属性进行移动。 | |
方式三:兄弟div之间,需要有父级div | display:flex | 弹性布局 指定弹性布局后,默认横向从左到右排列 指定为弹性布局后,取值can:cnblogs.com/wywblogs/p/15403479.html | |
盒子中的内容过多超出盒子外 | overflow | 取值: hidden:超出的部分隐藏,不带滚动, scroll:超出的部分隐藏,滚动, auto:默认值scroll |