HTMLCSS笔记

HTMLCSS笔记

对应b站视频:【千锋教育web前端入门视频教程,零基础必看的h5(html5)+css3网页制作教程】https://www.bilibili.com/video/BV1XF41187ZJ?vd_source=99b0080c20437dec6ac4e3437f81d47a

01_基础

07_文档声明与字符编码

<!DOCTYPE html> 基于HTML5的标准解析

<html lang=''> 告知浏览器所选用语言
“en” ---- 英文
“zh-CN” ---- 中文
“ja-jp” ---- 日文

meta charset="UTF-8" 告知浏览器解码规范
ASCII ---- 美国信息交换标准代码
ISO-8859-1 ---- 拉丁字母表
GB2312 ---- 汉字编码字符表
UTF-8 ---- 万国码

08_HTML常用标签

<h1></h1> 文本标题 h1……h6
<p></p> 段落文本
<br/> 换行
<hr/> 水平线

<b></b> 加粗(只是显示加粗)
<strong></strong> 加粗(突出文本内容)

<i></i> 倾斜(只是倾斜)
<em></em> 倾斜(突出文本)

<s></s> 删除(只是删除)
<del></del> 删除(突出文本)

<u></u> 下划线
<sup></sup> 上标
<sub></sub> 下标

htmltagwrap Alt+W 快速添加双标签

10_hr标签

属性:color、width、align、noshade

11_特殊符号

&lt 左尖角号
&gt 右尖角号

lorem

&nbsp 空格(占宽度受字体大小的影响)
&emsp 空格(占一个中文字符的宽度)
&copy ©
&trade
&reg ®

12_div和span标签

div 用来划分页面区域,独占一行
div{内容} * n

span 用于对文本进行独立修饰时

02_列表

13_有序列表

<ol></ol> 里面只能放 <li></li>
li 里面可以随意放标签
序号是自动生成的

Ctrl + / 注释

ol 属性:type(1, a, A, i, I)、start(序号从哪开始,取值只能是数字)

14_无序列表

<ul></ul>
ul > li{内容} * n

ul 里面只能放 li
li 里面可以随意放标签
默认是黑色实心圆
ul 属性:type(disc, circle, aquare, none)

15_自定义列表

图文混排

<dl>
	<dt>图片</dt>
	<dd>文字</dd>
</dl>

<dl>
	<dt>图片</dt>
	<dd>文字</dd>
</dl>

dl>dt+dd

03_图片

16_图片标签的路径

<img src="">
./ 当前级
…/ 上一级

17_图片标签的属性

属性:alt(加载失败显示)、title(鼠标悬停显示)、width、height

04_超链接

19_超链接标签

<a href=""></a>
属性:href、title(鼠标悬停后的提示信息)、target(规定在何处打开文档 _self, _blank)

05_表格

20_表格

<table>
	<tr>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
	</tr>
</table>

table>tr*2>td*n

21_表格的属性

table 属性:border、width(百分比写法时是相对于父元素)、height(是靠内容撑开的)、align(left, center, right)、bordercolor、bgcolor、cellspacing(单元格与单元格之间的间距)、cellpadding(单元格与内容之间的空隙)

22_tr(table row)的属性

tr 属性:height、bgcolor、align(文字的水平对齐left, center, right)、valign(文字的垂直对齐top, middle, bottom)

23_td(table data)的属性

属性:width(影响一整列)、height(影响一整行)、bgcolor、align、valign

24_表格的合并

合并列 colspan
合并行 rowspan

06_表单

26_表单(form)

表单控件:

<form action="" method="">
	<input type="text" placeholder="提示信息" name=""> // 文本
	
	<input type="password" placeholder="提示信息" name=""> // 密码
	
	<input type="submit" value="提交(自定义内容)"> // 提交按钮(提交信息到 action 指定地址)
	<button type="submit">提交</button>

	<input type="reset" value="重新输入(自定义内容)"> // 重置按钮
	<button type="reset">重新输入</button>

	<input type="button" value=""> // 配合 js 自定义行为
</form>
  • 必须设置 name 属性否则在提交表单时用户输入的数据不会发送给服务器
  • method=“” get 安全性低, post 安全性高

value 属性对于不同 input 类型,用法也不同:

  • 对于 “button”、“reset”、“submit” 类型 - 定义按钮上的文本
  • 对于 “text”、“password”、“hidden” 类型 - 定义输入字段的初始(默认)值
  • 对于 “checkbox”、“radio”、“image” 类型 - 定义与 input 元素相关的值,当提交表单时该值会发送到表单的 action URL

07_CSS样式

27_CSS内部样式表

<style>
</style>

style 标签放在 head 中
CSS 属性:color(字体颜色)、background-color

28_CSS外部样式表

  1. 创建 XXX.css 文件
  2. <link rel="stylesheet" type="text/css" href="CSS文件位置">
   <style>
	   @import url(CSS文件位置)
   </style>

link 和 import 之间的区别:

  • link 属于 XHTML 标签(兼容性好),@import 是 CSS 提供的方式
  • 页面加载时 link 同时加载,@import 会等页面全部下载完再被加载
  • 推荐 link

29_CSS行内(内联、嵌入式)样式表

<div style="属性名: 属性值; …… ></div>

30_CSS样式表的优先级

!important 属性 > 行内 > 内部 > 外部

08_选择器

31_元素选择器

标签名 {

}

32_类(class)选择器

.类名 {

}

<标签 class="类名(可加多个)"></标签>
  • 多个 class 冲突时,按照 style 中顺序覆盖

33_id 选择器

#id {

}

<标签 id="id(可加多个)"></标签>
  • id 具有唯一性,当 id 重复会导致 js 找不到

34_通配符选择器

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

35_群组选择器和包含(后代)选择器

// 群组选择器
// A 和 B 和 C
A, B, C {

}

// 后代选择器
// A 下的 B
A B {

}

// 亲儿子
A>B {

}
  • 后代选择器的选择方式是从右到左(先找到所有的 B,然后再找到外面有 A 的)

36_伪类选择器

  • 主要用在 a 链接上
// 超链接的初始状态
a:link {}

// 超链接在被访问后的状态
a:visited {}

// 超链接在鼠标悬停(划过)时的状态
a:hover {}

// 超链接在被激活(按下)时的状态
a:active {}
  • 顺序固定

38_选择器的权重

!important > 行内样式 > id选择器 > class选择器 > 元素选择器

包含选择器权重是其包含的选择符权重之和

CSS选择器解析规则:

  • 高覆盖低
  • 相同权重就近(哪个最后定义)原则

09_文本属性

39_大小&字体

属性:

  • font-size(字体大小,默认16px,常用12px)
  • font-family(字体,字体名中间有空格时需加双引号,多个字体中间逗号链接按顺序解析)

40_文字颜色

属性:color

color: red; // 名称写法
color: rgb(255, 0, 0); // RGB写法
color: #ff0000; // 十六进制写法(每两位代表一个颜色,相同可以合并)

41_加粗&倾斜

属性:

  • font-weight(粗体 100-900; 100 lighter 细体, 400 normal 正常, 700 bold 粗体, 900 bolder 更粗体)
  • font-style(斜体; italic 倾斜, oblique 更倾斜, normal 正常)

42_文本水平对齐&单行文本垂直居中

属性:

  • text-align(left, center, right, justify 多行文本两端对齐)
  • line-height(行高)

单行文本垂直居中方法:

line-height: height;
text-align: center;

43_文本间距&首行缩进

属性:

  • letter-spacing(字符间距)
  • word-spacing(词间距,多用于英文)
  • text-indent(首行缩进 2em)

44_文本修饰线

属性:

  • text-decoration(underline 下划线,line-through 中划线,overline 上划线,none 多用于 a 链接)

46_检索大小写和font

属性:

  • text-transfrom(capitalize 每个单词的首字母大写,lowercase 全部转为小写,uppercase 全部转换为大写,none)
  • font(文本属性合并简写,顺序为:font-style font-weight font-size/line-height font-family; 字体 行高 字体大小不能省略)

10_列表属性

47_列表属性

属性:

  • list-style-type(定义列表符合样式;disc 实心圆,circle 空心圆,square实心方块,none)
  • list-style-image(将图片设置为列表符合样式 url() )
  • list-style-position(设置列表项标记的放置位置 outside, inside)
  • list-style(三个属性顺序随意)

常用:list-style: none

11_背景

48_背景属性

属性:

  • background-color:名称/十六进制/rgba() a 为透明度
  • background-image:url() 默认平铺
  • background-repeat(平铺):repeat-x/repeat-y/no-repeat
  • background-position:
    1. px值 10px 10px
    2. 百分比 10% 10%
    3. left/center/right top/center/bottom

49_背景图片的大小

属性:

  • background-size:
    1. px值 400px 400px
    2. 百分比 100% 100%
    3. cover 等比例放到足够大,图片可能部分超出盒子
    4. contain 将图片放大至适应内容区域,可能铺不满盒子

50_背景的固定和滚动

background-attachment:scroll滚动/fixed固定(跳出盒子,相对于浏览器视口)

53_复合写法

background:background-color background-image background-repeat background-position background-attachment(顺序随意,不写则默认为空白,会覆盖之前的)

  • background-size 需要单独设置

12_浮动

54_浮动属性

float:left/right/none

作用:

  1. 让竖着的东西横着来
  2. 让文本环绕显示
  • 设置浮动可以让一个行内元素转变成块元素

55_清浮动

解决高度塌陷(浮动元素高度为0)的问题

  1. 写固定高度
  2. 清浮动 clear: none/left/right/both 不允许前面元素有XX浮动(属性加在后面元素身上)
  3. 在浮动元素后面补一个盒子,不设置宽高,只设置一个属性 clear: both
  4. 在浮动元素的父盒子上加一个属性 overflow: hidden 引发bfc,让浮动元素计算高度

13_盒子模型

57_内边距

属性:
padding:

  1. 1个值;4个方向都一样
  2. 2个值;上下,左右
  3. 3个值;上,左右,下
  4. 4个值;上,右,下,左

58_内边距的特性

  • 背景色可以蔓延到内边距
  • padding-方向值(left, right, top, bottom) 可单独设置一个方向

59_边框

属性:
border:粗细 样式(solid/double/dashed/dotted) 颜色

  • 背景色可以蔓延到边框
  • border-方向值
  • 可拆分为 border-width border-style border-color,这时四个方向可以分别写四个值

60_外边距

margin:

  • 4个值;同padding

  • margin-方向值

  • 背景色无法蔓延到外边距

  • 支持负值

  • 屏幕居中方案 margin: 0 auto;

61_外边距的特性

  1. 兄弟关系
    • 垂直方向,外边距取最大值
    • 水平方向,外边距合并
  2. 父子关系,给子盒子加外边距却作用在了父盒子上如何解决?
    1. 转换为给父盒子加内边距
    2. 给父盒子设置一个边框(transparent 透明的)
    3. 让其中一个盒子浮动
    4. 父盒子加 overflow: hidden

63_

img 标签和 p 标签之间有 3px 的边距?

	img {
		display: block;
	}

14_溢出属性

64_溢出属性

属性:

  • overflow: visible(溢出显示)/hidden(溢出隐藏,文本裁切)/scroll(滚动条,没溢出也有)/auto(溢出时自动添加滚动条)/inherit(继承父元素的效果)
  • overflow-x + overflow-y (同时使用,单独对某个轴设置)

66_溢出省略号

white-space(空余空间): normal/nowrap(不折行)/pre(预格式化)/pre-wrap(会折行,但是回车和空格正常显示)/preline(会折行,只保留回车)/inherit

<pre>预格式化文本</pre>

// 溢出省略号(盒子必须要有宽度)
white-space: nowrap; // 不折行
overflow: hidden; // 溢出隐藏
text-overflow: ellipsis; // 溢出文本显示省略号

15_元素显示类型

67_块元素

  • 默认情况占一行

  • 自上而下排列

  • 可定义自己的宽度和高度

  • 一般作为其他元素的容器( p 标签内部通常不嵌套)

  • div p ul li ol dl dt dd h1-h6

  • display: block;

  • display: list-item;

68_行内(内联)元素&行内块元素

行内元素:

  • 横着排

  • 不能定义宽度和高度

  • 不支持margin padding等

  • a b em i span strong

  • display: inline;

行内块元素:

  • 同时具备内联元素和块元素的特点

  • img input

  • display: inline-block;

69_盒子模型

  • 行内元素,只能设置边距的左右边距,不能设置上下边距
  • 行内块元素,能设置上下左右边距

70_元素类型相互转换

display: block/inline/inline-block

display: none // 隐藏

16_定位

76_属性与属性值

属性:

  • position:
    • static 静态定位(默认)
    • absolute 绝对定位 脱离文档流 没有父元素或者父元素没有定位,偏移时参照物是浏览器窗口的第一屏;有父元素且父元素有定位,参照物是父元素
    • relative 相对定位 不脱离文档流 偏移时参照物是自己的初始位置
    • fixed 固定定位 脱离文档流 偏移时参照物是浏览器当前窗口
    • sticky 粘性定位 可做吸顶效果
  • 偏移位置: top left right bottom(距离哪个部位 XXpx )

77_静态定位&相对定位

  • 相对定位不脱离文档流,盒子原位置依旧被占用

78_绝对定位

  • 脱离文档流,盒子原位置被让出来
  • 有父盒子且父盒子有定位时:子绝(脱)父相(不脱)

79_固定定位

  • 做广告

80_粘性定位

position: sticky;
top: 50px; // 黏在距离顶部50px位置
  • CSS3新增加的,兼容性不好

81_

opacity(透明度): 0~1;

83_层级

  • 不设置时:后来者居上
  • z-index(值越大,层级越高(越靠上显示)):

84_绝对定位的深入探索

  • 父子关系时,只有给子盒子设置 z-index 为负值时,父盒子会才覆盖子盒子

  • 兄弟关系时,层级关系正常

  • 设置绝对定位会让一个行内元素变成块级元素

tip:如何让一个行内元素变成块级元素?

// way1
dispaly: block;

// way2
position: absolute;

// way3
float: ;

85_水平垂直居中

position: absolute;
top: 50%;
left: 50%;
margin-top: -盒子自身高度的一半;
margin-left: -盒子自身宽度的一半;

86_定位与浮动的区别

float:半脱离文档流,文字环绕
absolute:全脱离文档流,不会出现文字环绕效果

17_锚点

87_锚点

  • 实现页面不同区域的跳转,使用 a 链接
<a href='#锚点名字'>

<div id="锚点名字">

18_精灵图(雪碧图)

88_精灵图

  • 将各个分散的背景图有规则地合成一张整背景图,利用 background-position 来实现背景图片定位的技术

优点:

  • 通过图片整合来减少对服务器请求的次数,提高页面加载速度
  • 通过整合图片来减小图片体积
background-image: url();
background-position: ;

19_自适应

89_宽高自适应

宽度自适应:不设置 width 或者 width: auto;

  • 设置 width: 100% 加边距会撑开滚动条
  • 可用于导航栏、通栏布局

高度自适应:不设置 height 或者 height: auto;

  • min-height 最小高度
  • max-height
  • min-width
  • max-width

90_浮动元素之父元素高度自适应-01

  1. 写固定高度 缺点:写死了
  2. 清浮动 clear: none/left/right/both
  3. 在浮动元素后面补一个盒子,设置一个属性 clear: both 缺点:代码可读性下降
  4. 在浮动元素的父盒子上加一个属性 overflow: hidden 缺点:内容多出来会被隐藏(二级菜单)

91_浮动元素之父元素高度自适应-02

伪元素

// XXX标签内的第一个字母
XXX::first-letter {

}

// XXX标签内的第一行
XXX::first-line {

}

// 在XXX标签内的最前添加内容
XXX::before {
	content: ;
}

// 在XXX标签内的最后添加内容
XXX::after {
	content: ;
}

清浮动(终极版):

XXX::after {
	content: "";
	clear: both;
	display: block;
	width: 0;
	height: 0;
	visibility: hidden;
}

visibility: hidden; 占位隐藏
display: none; 不占位隐藏

92_窗口自适应

html, body {
	height: 100%;
}

之后内部盒子才能设置高度 XX%

93_两栏布局

way2:
calc() 函数:用于动态计算长度值

  • width: calc(100% - 200px) 符号前后必须加空格

94_三栏布局

way1:

margin-left: ;
margin-right: ;

<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
// 左、右、中顺序不能变

way2:

calc()

20_表单进阶

  • 包在 form 里

95_单选框

// 一组之内 name 必须一致
<div>
	<input type="radio" name="a" id="man">
	<label for="man"></lable> // for="id" 点击文字也能选中单选框
</div>
<div>
	<input type="radio" name="a" checked>女 // checked 默认选中
</div>

96_复选框

<div>
	<input type="checkbox" name="a">抽烟
	<input type="checkbox" name="a">喝酒
	<input type="checkbox" name="a">烫头
</div>

97_上传文件和隐藏字段

  • 上传文件 <input type="file">
  • 图片按钮 <input type="image" src=""> (用图片代替提交按钮)
  • 隐藏 <input type="hidden" value="带给后端的个人信息,不是给用户看的">
  • 禁用:设置 disabled 属性
  • 只读:设置 readonly 属性

98_下拉菜单

<select size="" multipe="multipe">
	<option value="提供给后端需要的value值">辽宁</option>
	<option selected>山东</option>
	<option>山西</option>
	<option>河南</option>
	<option>河北</option>
</select>
  • size 显示几个
  • multiple 多选
  • value 提供给后端需要的 value 值
  • selected 默认选中

99_文本域(多行文本输入框)

<textarea clos="" rows="" placeholder="请输入你的意见">提前设置好的 value</textarea>

  • 推荐使用 css 的方式控制宽高
textarea {
	width: 300px;
	height: 300px;
	
	// 重新设置大小
	resize: both两个方向(默认)/vertical垂直方向/horizontal水平方向/none;
}
  • placeholder 预置的提示文本
  • 默认 value 值写在双标签内部,注意空格问题

100_字段集

<fieldset>
	<legend>XXX(缺口处)</legend>
</fieldset>
  • 都可以用 css 设置其样式

21_HTML5

101_H5基础与语法

  • 文件扩展符与内容类型保持不变,仍为 “.html” 或 “.htm”
  • DOCTYPE 声明不区分大小写
  • 指定字符集编码 meta charset="UTF-8"
  • 可省略标记的元素:
    • 不允许写结束标记的元素:br、col、embed、hr、img、input、link、meta
    • 可以省略结束标记的元素:li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
    • 可以省略全部标记的元素:html、head、body、colgroup、tbody
  • 属性值可以用双引号,也可以使用单引号

102_H5新增语义化标签

  • header 页面中一个内容区块或整个页面的标题(头部)
  • footer 页面中一个内容区块或整个页面的脚注(底部)
  • section 页面中的一个内容区块
  • nav 页面中导航链接的部分(导航栏)
  • main(IE不兼容) 页面中的主要内容
  • aside 在article之外的,与article内容相关的辅助信息(侧边栏)
  • figure 一段独立的流内容,使用figcaption为其添加标题
  • article 一块与上下文无关的独立的内容

在这里插入图片描述

<header>Header</header>
<section>
	<nav>
		<figure>Nav</figure>
		<ul>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</nav>
	<main>
		<article>
			<header>Article Header</header>
			<p></p>
			<footer>Article Footer</footer>
		</article>
		<article>
			<header>Article Header</header>
			<p></p>
			<footer>Article Footer</footer>
		</article>
	</main>
	<aside>
		<figure>Aside</figure>
		<p></p>
	<aside>
</section>
<footer>Footer</footer>

103_H5新增音频标签

<audio src="" controls loop autoplay muted></audio>

  • controls 出现控制栏
  • loop 循环
  • autoplay 自动播放(刷新失效)( chrome 浏览器不会自动播放)
  • muted 静音

104_H5新增视频标签

<video src="" controls loop autoplay muted poster="" width="" height=""></video>

  • chrome 浏览器不会自动播放,但是加上 muted 属性后就可以设置自动播放
  • poster 视频海报
  • 可 css 设置宽高

22_增强表单

105_input

<input type="">

  • color 生成一个颜色选择的表单
  • tel 唤起拨号盘表单(用于移动端)
  • search 生成一个搜索意义的表单(有快速删除的功能)
  • range 生成一个滑动条表单
    支持属性:min、max、value(默认值)、step(步长)
  • number 生成一个数值表单
    支持属性:min、max、value、step
  • email 限制用户必须输入 email 类型
  • url 限制用户必须输入 url 类型(完整地址)
  • date 限制用户必须输入日期
  • month 限制用户必须输入月类型
  • week 限制用户必须输入周类型
  • time 限制用户必须输入时间类型
  • datatime-local 选取本地时间

106_选项列表(数据列表)

<input type="text" list="datalist的id">

<datalist id="mylist">
	<option value="手机"></option>
	<option value="手表"></option>
	<option value="手镯"></option>
	<option value="手环"></option>
</datalist>

107_属性

  • autofocus 自动获取焦点
  • required 必填项,不能为空
  • multiple 在邮箱中使用时支持多个地址,中间用 “,” 隔开
  • pattern=“正则表达式”

23_CSS3

108_CSS3基础

  • 渐进增强:先针对低版本浏览器进行构建页面,保证最基本的功能;再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
  • 优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容

109_层级选择器

// 子代(亲儿子)选择器
A>B {

}

// 选择A元素后的第一个兄弟B
A+B {

}

// 选择A元素后所有的亲兄弟B
A~B {

}

110_属性选择器

// 选择所有具有“属性”的元素
[class] {

}

// 选择div且身上具有“属性”的元素
div[class] {

}

// 选择div且属性为box的元素(完全匹配)
div[class=box] {

}

// 选择div且属性包含box的元素(包含匹配)
div[class~=box] {

}

// 模糊匹配
class^=b // 以b开头
class$=b // 以b结尾
class*=b // 包含b
  • 可以应用于各种标签+属性

111_结构伪类选择器

// 选择到第一个A
A:first-child {

}

// 选择到最后一个A
A:last-child {

}

// 选择到第x个A
A:nth-child(x) {

}

// 选择到偶数个的A
A:nth-child(2n/even) {

}

// 选择到奇数个的A
A:nth-child(2n+1/2n-1/odd) {

}

// 选择是A下面唯一孩子的B元素(独生子女)
A B:only-child {

}

// 选择A且没有孩子的元素(一点东西都没有,包括空格等)
A:empty {

}

// 根节点选择器(html)
:root {

}

112_目标伪类选择器

// 当前div节点处在目标节点上时(用锚点点击时)
div:target {

}

<a href='#锚点名字'>

<div id="锚点名字">

113_UI状态伪类选择器

  • E:enabled 匹配所有用户界面(form表单)中处于可用状态的E元素
  • E:disabled 匹配所有用户界面(form表单)中处于不可用状态的E元素
  • E:focus 匹配所有用户界面(form表单)中处于聚焦状态的E元素
  • E:checked 匹配所有用户界面(form表单 专门用于 radio 和 checkbox)中处于选中状态的E元素
    (先要清除 checkbox 的默认样式)
// 清除 checkbox 的默认样式
input[style=checkbox] {
	appearance: none;
	
	// 自己设置样式
	……
}
  • E:selection 匹配E元素中被用户选中或处于高亮状态的部分

114_否定和动态伪类选择器

  • 否定伪类选择器:
// 加not
A:not(:first-child) {

}
  • 动态伪类选择器
    E:link
    E:visited
    E:hover
    E:active

115_文本阴影

属性:

  • text-shadow: 水平方向位移 垂直方向位移 模糊程度 颜色, ……(支持多个阴影);

116_盒子阴影

属性:

  • box-shadow: 水平方向位移 垂直方向位移 模糊程度 阴影大小 颜色 inset(内阴影), ……(支持多个阴影);

117_圆角边框(上)

属性:

  • border-radius: px/百分比
    • 一个值;四个角一样
    • 两个值;左上右下、左下右上
    • 三个值;左上、左下右上、右下
    • 四个值;顺时针
  • border-top-left-radius(上下在前,左右在后):
  • border-top-right-radius:
  • border-bottom-right-radius:
  • border-bottom-left-radius:

118_圆角边框(下)

属性:

  • border-radius: 水平(可四个方向) / 垂直(可四个方向)

  • 不支持一个方向单独设置

  • 圆:正方形盒子,设置 border-radius 为边长(padding+宽高+border)的一半/50%

  • 半圆:长方形盒子宽度是高度的两倍,设置 border-radius 左上和右上为“高度值”,左下右下为0

  • 扇形:正方形盒子,设置 border-radius 左上为边长,其他方向为0

120_字体引入

// 定义
@font-face {
	font-family: 自定义字体名称;
	src: url();
	[font-weight: ;]
	[font-style: ;]
}

// 使用
A {
	font-family: 自定义的字体名称;
}

121_怪异盒模型

属性:

  • box-sizing: content-box(默认 标准盒模型)/border-box(怪异盒模型)

  • 在怪异盒模型中,宽度为 width+padding+border;高度为 height+padding+border

24_弹性盒

122_弹性盒

属性:

  • display: flex;

作用:加在父元素身上

  • 子元素自动横向排列
  • 子元素如果是行内元素,转变为块级元素
  • 只有一个子元素时,在子元素上加 margin: auto 可实现该子元素水平、垂直自动居中

123_修改主轴方向

  • 主轴默认水平方向排列
  • 与主轴垂直的轴为侧轴

属性:

  • flex-direction: row(默认 水平)/column(竖直)/row-reverse/column-reverse;

124_主轴侧轴对齐方式

属性:

  • justify-content(主轴对齐方式): flex-start/flex-end/center/space-between(两端对齐)/space-around(距离环绕);
  • align-items(侧轴对齐方式): flex-start/flex-end/center;

125_折行与行间距

属性:

  • flex-wrap: wrap;
  • align-content(调整折行后的行间距): flex-start/flex-end/center/space-between/space-around;

25_项目( flex 下的盒子)身上的属性设置

126_对齐方式

属性:

  • align-self: flex-start/flex-end/center/baseline/stretch(拉伸,不设置宽或高时默认拉伸);

  • 弹性盒 外面的大盒子叫容器,里面的小盒子叫项目

127_调整顺序

属性:

  • order: (默认0,正值向后调,负值向前调);

128_剩余宽高

  • 设置在项目上
  • 可用于三栏布局

属性:

  • flex: 1;
  • 多个 flex 时,值为比例

129_

  • iconfont 使用

    1. 选择图标 添加至购物车
    2. 添加至项目
    3. 下载至本地
    4. 使用
      • 引入 <link rel="stylesheet" href="testfont/iconfont.css">
      • <span class="iconfont icon-XXX"></span> (可用任意标签套)
  • 当做一个普通的字体文件,可设置大小、颜色等

26_移动端布局

133_中

  • 模拟器显示的像素是CSS像素(设备的独立像素)

  • 物理分辨率是设备像素

  • 设备像素比(dpr) = 物理像素/CSS像素

  • 为了清晰的页面,所以设计稿需要按照物理像素提供

  • 只提供一份设计稿

    • 尽量使用百分比布局
    • 尽量使用弹性盒布局
    • 尽量使用 rem 布局

134_下

移动端开发(理想视口):<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  • width=device-width 理想宽度等于设备宽度
  • initial-scale=1.0 缩放比为1
  • user-scalable=no 用户不允许缩放

138_

// 滚动条隐藏
::-webkit-scrollbar {
	display: none;
}

139_

两列单独滚动:

  1. 大盒子 overflow: auto;
  2. 左右两栏分别 overflow: auto;

140_横向滚动(水平方向滚动条)

ul {
	dispaly: flex;
	overflow: auto;
}

ul li {
	flex-shrink: 0; // 不允许挤压
}

141_多列布局(可做瀑布流效果)

属性:

  • column-count(显示的列数): 5;
  • column-gap(调整列间距): 30px;
  • column-rule(列边框): 2px solid red;
  • column-fill(列高度是否统一): balence(均匀)/auto;
  • column-width(调整列宽,容易与列数冲突): 500px;
  • column-span(横跨几列,加给要设置横跨的项目): none/all;

142_

break-inside: avoid; 禁止盒子内部折行

27_响应式布局

优点:

  • 面对不同分辨率设备灵活性强
  • 能快捷解决多设备显示适应问题

缺点:

  • 兼容各种设备工作量大,效率低下
  • 代码冗余,会出现隐藏无用的元素,加载时间长
  • 会受多方面因素影响而达不到最佳效果
  • 一定程度上改变了网站原有布局结构,会出现用户混淆的情况

设计方法:

  • 模块中内容:挤压-拉(布局不变)
  • 模块中内容:换行-平铺(布局不变)
  • 模块中内容:删减-增加(布局不变)
  • 模块位置变换(布局改变)
  • 模块展示方式改变:隐藏-展开(布局改变)

143_媒体查询

@media 设备 and (min-width: XXpx) {
	标签 {
		样式;
	}
}

设备类型:

  • all 所有设备

  • aural 听觉设备

  • braille 电子触觉设备

  • handled 便携设备,如手机、平板电脑

  • print 打印预览图等

  • projection 投影设备

  • screen 显示器、笔记本、移动端等设备==(常用)==

  • tty 如打字机或终端等设备

  • tv 电视机等设备类型

  • embossed 盲文打字机

  • and 是关键字,其他关键字还包括 not(排除某种设备)、only(限定某种设备)

  • (min-widtn: 400px) 是媒体特性

  • (min-width: 1000px) 大于1000时

  • (max-width: 1000px) and (min-width: 500px) 大于500,小于1000时

  • (max-width: 500px) 小于500时

144_横竖屏检测

// 竖屏
@media screen and (orientation: portrait) {

}

// 横屏
@media screen and (orientation: landscape) {

}

28_rem布局

146_em与rem

  • em:相对单位,相对于父元素的字体大小
  • rem(root em):相对单位,相对于根元素(html)的字体大小

147_rem布局准备工作

<script>
	// fontsize 计算
	document.documentElement.style.fontSize = 
	document.documentEmement.clientWidth/750 * 16 + 'px'

	// fontSize = 当前设备的CSS布局宽度/物理分辨率(设计稿的宽度) * 基准font-size
	// rem则为 量多少后除基准font-size
</script>
  • 插件 px to rem&rpx
  • XXXpx-
  • F1 -> 搜索cssrem
  • 文件 -> 首选项 -> 设置 -> 搜索px

149_vh和vw

  • vh(view-height) 100vh === 视口的高度
  • vw(view-width) 100vw === 视口宽度

150_单位转换

  1. 1px = 100vw/CSS像素
  2. 将根节点 font-size 用 vw 表示
  3. 在设计稿上量取长度后需要除“设备缩放比”
  • 没有滚动条时,100vw === 100%
  • 100vw 包含滚动条
  • 100% 刨除滚动条剩余空间占满

29_渐变

151_线性渐变

属性:

  • background: linear-gradient(方向, 颜色1 百分比, 颜色2 百分比, 颜色3 百分比, ……)
    • 支持方向:to top/bottom/left/right/top right/……
    • 支持角度写法:XXXdeg
    • 支持多个颜色,百分比值表示到达此百分比后完全过渡为此颜色

152_径向渐变

属性:

  • background: radial-gradient(中心位置, 形状, 渐变大小, 颜色1 百分比, 颜色2 百分比, ……)
    • 中心位置:两个百分比(默认 center)
    • 形状:circle(圆)/ellipse(椭圆)
    • 渐变大小(-webkit-radial-gradient,兼容性差,需要加当前浏览器内核的前缀):closest-side(最近边)/farthest-side(最远边)/closest-corner(最近角)/farthest-corner(最远角)

153_重复渐变

属性:

  • background: repeating-linear-gradient()
  • background: repeating-radial-gradient()

30_过渡

155_动画过渡属性

属性:

  • transition: 要控制的属性, 动画时间, 动画效果, 延时;

  • 要控制的属性:某个属性或者all

  • 动画时间:s/ms

  • 延时:s/ms

  • 除了 display: none/block ,其余属性都可以控制(可改用高度值配合溢出隐藏实现)

156_动画过渡类型

  • linear(默认) 匀速

  • ease 逐渐慢下来

  • ease-in 加速

  • ease-out 减速

  • ease-in-out 先加速后减速

  • cubic-bezier.com 贝塞尔曲线

157_动画过渡单一属性

  • transition-property: 要控制的属性1 要控制的属性2 要控制的属性3;
  • transition-duration: 动画时间;
  • transition-timing-function: 动画效果;
  • transition-delay: 延时;

31_2D属性

158_平移

属性:

  • transform: translate();

    • translateX(XXXpx) (如果用百分比是相对于自身的百分比)
    • translateY(XXXpx)
    • translate(X轴, Y轴)
  • 设置 left 等属性会频繁造成浏览器回流重排,而 transform 和 opacity 属性不会,因为它们是作为合成图层发送到 GPU 上,由显卡执行渲染。

159_缩放

  • transform: scale(缩放比);

    • 负值:倒向放大效果
    • scaleX
    • scaleY
  • 改变中心点的位置:transform-origin: left top; 从左上角放大

160_旋转

  • transform: rotate(XXXdeg)
    • 正值 顺时针
    • 负值 逆时针
    • rotateX()
    • rotateY()
    • roteteZ() === rotate()
    • 改变绕着哪个点旋转 transform-origin

162_多值属性

  • transform: 值1, 值2, ……;
  • 先位移再缩放、旋转
  • 先缩放再位移会导致位移距离被缩放
  • 先旋转再位移会导致坐标轴被旋转,位移方向改变

163_倾斜

  • transform: skew();
    • skewX(XXdeg)
      • 正值:拽着右下角,向右边拉动,形成30deg夹角
      • 负值:拽着左下角,向左边拉动,形成30deg夹角
    • skewY()
    • skew(x, y)

32_关键帧动画

166_属性

属性:

  • animation: 定义的名字, 动画时间, 动画效果, 延时, 循环次数;
// 声明动画
@keyframes 名字 {
	from {
		初始的状态;
	}
	
	to {
		结束的状态;
	}
}
@keyframes 名字 {
	0% {
		初始的状态;
	}
	
	20% {
		结束的状态;
	}

	……
}
  • 循环次数:数字/infinite(无限次执行)

167_单一属性

属性:

  • animation-name(动画名称):
  • animation-duration(持续时间):
  • animation-timing-function(过渡类型): linear/ease/ease-in/ease-out/ease-in-out
  • animation-delay(延迟时间):
  • animation-iteration-count(循环次数):
  • animation-play-state(运行状态): running{(默认)/paused;
  • animation-direction(动画方向,可做抽屉效果等): normal/reverse/alternate(正常交替)/alternate-reverse(反向交替);
  • animation-fill-mode(保留一帧): none/forwards(最后一帧)/backwards(初始一帧)

169_逐帧动画

将 animation-timing-function 属性值设置为 step(1, end)

  • end 保留当前帧,动画结束时看不到最后一帧 === step-end
  • start 保留下一帧,看不到第一帧,从第一帧很快跳到后一帧 === step-start

170_animate动画库

http://www.animate.net.cn/

  1. 引入文件 <link rel="stylesheet" href="地址">
  2. 使用 <div class="animated 动画名称 自添加CSS样式"></div>
  • 兼容性不好

33_3D

171_平移

属性
父盒子加:

  • transform-style: flat(默认2D)/preserve-3d(要想实现3D效果必须要加);
  • perspective(景深): XXpx; (默认无限远,要想看到Z轴平移效果习惯设置800—900)

自身加:

  • transform: translateZ(XXpx); === transform: translate3d(0, 0, XXpx);

172_旋转

属性:
父盒子加:

  • transform-style: preserve-3d;

自身加:

  • transform: rotateX();
  • transform: rotateY()
  • transform: rotateZ()
  • transform: rotate3d(0~1, 0~1, 0~1, XXdeg) (XXdeg的多少倍)

173_缩放

属性:
父盒子加:

  • transform-style: preserve-3d;
  • perspective: 800px;

自身加:

  • transform: scaleX();
  • transform: scaleY();
  • transform: scaleZ(20) rotateX(45deg); (配合旋转使用才能看出来效果)
  • transform: scaleZ(1, 1, 20);

34_网格布局

175_网格布局

  • flex 布局是轴线布局,只能指定“项目”针对轴线的位置,可以看作是一维布局
  • grid 布局是将容器划分为“行”和“列”,产生单元格,然后指定项目所在的单元格,可以看作是二维布局

属性:

  • display: grid; 块级网格
  • display: inline-grid; 行内块级网格

176_行列属性

属性:
给容器加:

  • grid-template-rows(每个行高): ;
    • 固定值:200px 200px 200px;
    • 百分比:25% 25% 25% 25%;
    • repeat(3, 33.3%);
    • repeat(auto-fill, 20%/300px);
    • fr 片段:1fr 2fr 1fr;
    • minmax:minmax(100px, 200px) 200px 300px;
    • auto:100px auto 200px;
  • grid-template-columns(每个列宽): ;

177_间距

属性:

  • grid-row-gap: ;
  • grid-colum-gap: ;
  • grid-gap: 行间距 列间距;

178_区域命名与合并

属性:
给容器加:

grid-template-areas: 'a a c'
					 'd e f'
					 'g h i'

给项目加:
grid-area: a;

180_对齐方式

属性:
控制项目在容器中的显示位置(给容器加):

  • grid-auto-flow: column; 改变顺序
  • justify-content: start/end/center/stretch/space-around/space-between/space-evenly;
  • align-content: start/end/center/stretch/space-around/space-between/space-evenly;
  • place-content: justify-content align-content;

控制内容在项目中的显示位置(给容器加):

  • justify-items: start/end/center/stretch;
  • align-items: start/end/center/stretch/;
  • place-items: justify-items align-items;

181_项目属性

属性:(给项目加)

  • grid-column-start(起始列网格线):
  • grid-column-end:
  • grid-row-start:
  • grid-row-end:
  • grid-column: 起始/结束;
  • grid-row: 起始/结束;
  • 32
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值