HTML5+CSS3基础

最新推荐文章于 2024-05-21 13:46:15 发布

zzzzzzrrryyy

最新推荐文章于 2024-05-21 13:46:15 发布

阅读量1.1k

点赞数 3

本文链接：https://blog.csdn.net/qq_43194919/article/details/105738817

版权

HTML空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
就是没有关闭标签的元素
空元素有以下这些：

<area>
<base>
<br>
<col>
<colgroup> when the span is present
<command>
<embed>
<hr>
<img>
<input>
<keygen>
<link>
<meta>
<param>
<source>
<track>
<wbr>

css盒模型

在这里插入图片描述
css两种盒模型

W3C标准盒模型
在标准盒模型中，width指的是content部分的宽度
IE的盒模型
在IE盒子模型中，width值的是content+padding+border这三个部分的宽度

box-sizing
如果想要切换盒模型，则可以使用css3的box-sizing属性

box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型

box-sizing的默认属性是content-box
盒子实际的宽高是content+padding+border+margin

css可以继承的属性

所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。（字体系列属性和文本系列属性）
1、字体系列属性
font：组合字体
font-family：规定元素的字体系列
font-weight：设置字体的粗细
font-size：设置字体的尺寸
font-style：定义字体的风格
font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。
font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。
font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
2、文本系列属性
text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：增加或减少单词间的空白（即字间隔）
letter-spacing：增加或减少字符间的空白（字符间距）
text-transform：控制文本大小写
direction：规定文本的书写方向
color：文本颜色
块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse

html文件头部参数的含义

DOCTYPE

标签告知浏览器文档使用HTML 还是XHTML 规范。

<!DOCTYPE html>

lang

lang属性设置或返回当前内容显示的语言

<html lang="en">

en表示english，zh表示chinese。<html lang="“en”>可以输出中文,只是会让你的浏览器提示你要不要翻译此页,如果改成zh-cn就没有翻译的选项了

meta（metadata）

<meta charset="UTF-8">/*表示编码 */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

name属性
name属性主要用于描述网页，与之对应的属性值为content, content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
meta标签的name属性语法格式是: < meta name=”参数" content=“具体的参数值” >
其中name属性主要有以下几种参数:
A、Keywords(关键字)
说明: keywords用来告诉搜索引擎你网页的关键是什么。
举例: < meta name =”keywords" content=”science,
education,culture,politics,ecnomics, relationships, entertaiment, human" >
B、description(网站内容描述)
说明: description用来告诉搜索引擎你的网站主要内容。
举例: < meta name=“description” content= “This page is about the meaning of
science, education,culture.” >
C、robots(机器人向导)
说明: robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有ll,none,index,noindex, follow,nofollow。默认是all.
举例: < meta name=”robots" content= “none” >
D、author(作者)
说明:标注网页的作者
举例: < meta name= " author" content= " root,root@21cn.com" >

content属性 :
width:可视区域的宽度，值可为数字或关键词device-width
intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放，no 禁止缩放
http-equiv属性
　　http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
　　meta标签的http-equiv属性语法格式是：＜meta http-equiv=“参数” content="参数变量值"＞；其中http-equiv属性主要有以下几种参数：
　　A、Expires(期限)
　　说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。
　　用法：＜meta http-equiv=“expires” content="Fri, 12 Jan 2001 18:18:18 GMT"＞
　　注意：必须使用GMT的时间格式。
　　B、Pragma(cache模式)
　　说明：禁止浏览器从本地计算机的缓存中访问页面内容。
　　用法：＜meta http-equiv=“Pragma” content="no-cache"＞
　　注意：这样设定，访问者将无法脱机浏览。
　　C、Refresh(刷新)
　　说明：自动刷新并指向新页面。
　　用法：＜meta http-equiv=“Refresh” content="2；URL=http://www.root.net"＞
　　注意：其中的2是指停留2秒钟后自动刷新到URL网址。
　　D、Set-Cookie(cookie设定)
　　说明：如果网页过期，那么存盘的cookie将被删除。
　　用法：＜meta http-equiv=“Set-Cookie” content="cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/“＞
　　注意：必须使用GMT的时间格式。
　　E、Window-target(显示窗口的设定)
　　说明：强制页面在当前窗口以独立页面显示。
　　用法：＜meta http-equiv=“Window-target” content=”_top"＞
　　注意：用来防止别人在框架里调用自己的页面。
　　F、content-Type(显示字符集的设定)
　　说明：设定页面使用的字符集。
　　用法：＜meta http-equiv=“content-Type” content="text/html; charset=gb2312"＞

锚点链接

在这里插入图片描述

文本缩进

text-indent使首行文字缩进，单位为em时表示相对于当前字体的两个字体大小的距离

行间距

line-height属性用于设置行间的距离，可以控制文字行与行之间的距离
在这里插入图片描述

css引入方式

内部样式表
行内样式表
外部样式表

<link href="../css/style.css" rel="stylesheet" type="text/css">

复合选择器

后代选择器
例如 ul li {} .nav ul li{}
子元素选择器

例如.nav>a{}
并集选择器
例如div,p{color:pink}
记得有逗号！！！
伪类选择器
链接伪类选择器
注意链接伪类选择器的顺序 linked visited hover active

：focus伪类选择器

css元素显示模式

块元素
可以设置宽高
行内元素
不能设置宽高
行内块元素

案例：侧边栏：

a {
    /* a是行内元素 这里要转换成块元素才能对其宽高进行设置 */
    display: block;
    width: 230px;
    height: 40px;
    background-color: #55585a;
    font-style: 14px;
    text-decoration: none;
    color: #fff;
    text-indent: 2em;
    line-height: 40px;
}

a:hover {
    background-color: #ff6700;
}

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

图片背景

在这里插入图片描述

在这里插入图片描述
超大背景图片一般使其水平center，垂直top，方位名词和精确单位可混合使用

background-attachment可实现视差滚动

权重

在这里插入图片描述

表格的细线边框

页面布局三大核心，盒子模型，浮动和定位

border-radius

在这里插入图片描述

了解border-radius

盒子模型

内边距

内边距和边框都会影响盒子的实际大小

外边距

使行内元素或者行内块元素水平居中给其父元素添加text-align:center即可

相邻块元素垂直外边距的合并
在这里插入图片描述
解决方案，尽量只给一个盒子添加margin值
嵌套块元素垂直外边距的塌陷
当两个盒子嵌套，且父盒子有上外边距，子盒子也有上外边距的时候，会发生如下的塌陷：
父盒子上外边距为50px，子盒子的上外边距为40px时，塌陷较大的那个：
在这里插入图片描述
父盒子上外边距为50px，子盒子的上外边距为100px时，塌陷较大的那个：

.div1 {
    width: 400px;
    height: 400px;
    background-color: lightpink;
    margin-top: 50px;
    /* 为父元素添加上边框
    border-top: 1px solid coral; 
    */
    /* 为父元素添加上内边距
    padding-top: 10px; 
    */
    /* 为父元素添加overflow：hidden
    overflow: hidden; 
    */
}

.div2 {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: 40px;
}

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

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

盒子阴影

在这里插入图片描述

文字阴影

在这里插入图片描述

浮动

浮动产生的本质是实现文字环绕效果，所以一个盒子添加了浮动之后，在其周围的文字不会占据盒子原本的位置，而是环绕在盒子周围

浮动特性

浮动使
在这里插入图片描述

清除浮动
为什么要清除浮动：因为父级盒子再很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父盒子高度为0时，就会影响下面的标准流盒子
清除浮动的方法
额外标签法：

给父级添加overflow

：after伪元素法

在这里插入图片描述
双伪元素清除浮动

css书写顺序

在这里插入图片描述

导航栏书写方法

在这里插入图片描述

定位

定位模式

static 静态定位
是元素默认的定位方式，即无定位
relative 相对定位

相对于原来的位置来移动
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它，继续保留原来的位置

absolute 绝对定位
子绝父相
绝对定位是元素在移动位置的过程中，是相对于它祖先元素来说的

在这里插入图片描述
加了绝对定位的盒子不能通过margin：0 auto实现水平居中，但是可以一下方式实现水平居中：

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

固定在版心右侧位置而不是以可视窗口为参照物固定

.div3 {
    position: fixed;
    width: 200px;
    height: 200px;
    background-color: pink;
    left: 100%;
    margin-left: -200px;
}

sticky 粘性定位
可以被认为是相对定位和固定定位的混合
实现刚开始随着页面滚动的效果，到了最边上的时候就不随着页面滚动的效果

定位的扩展

给盒子设置浮动的效果：

给盒子设置绝对定位的效果：

边偏移
top bottom left right

z-index

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

元素的显示与隐藏

display显示隐藏不保留原来位置
display：none将元素隐藏，隐藏元素后不在占有原来的位置
display：block除了转换为块级元素之外，还有显示元素的意思
visibility显示隐藏保留原来位置
visibility：visible 元素可视
visibility：hidden 元素隐藏
visibility隐藏元素后，继续占有原来的位置
overflow对溢出的内容显示隐藏
overflow：visible
overflow：hidden
overflow：scroll 显示滚动条
overflow：auto 自动判断是否添加滚动条
对于有定位的盒子，慎用overflow：hidden，因为它会隐藏多余的部分

注意以下写法，鼠标经过“tudou”盒子，让“mask”显示出来
在这里插入图片描述

精灵图

为了有效的减少服务器接收和发送请求的次数，提高页面的加载速度，出现了css精灵技术。
核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

字体图标

字体图标展示的是图标，本质属于字体
轻量级：一个图标字体要比一系列的图像要小，一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
灵活性：本质其实是文字，可以很随意的改变颜色，产生阴影，透明效果，旋转等
兼容性：几乎支持所有的浏览器
字体图标不能取代精灵技术

字体图标下载：
字体图标的引入
打开demo.html，复制相应图标

css三角的做法

在这里插入图片描述

鼠标样式

在这里插入图片描述

去掉表单轮廓线

在这里插入图片描述

防止放大文本域

在这里插入图片描述

vertical-align属性

vertical-align用于设置图片或者表单（行内块元素）和文字的垂直对齐
只针对行内元素和行内块元素有效
在这里插入图片描述

默认基线对齐：

底线对齐：

中线对齐：

顶部对齐：

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

在这里插入图片描述

溢出文字用省略号表示

在这里插入图片描述

1、-webkit-line-clamp:2; （用来限制在一个块元素显示的文本的行数,2表示最多显示2行。为了实现该效果，它需要组合其他的WebKit属性）

2、display: -webkit-box; （和1结合使用，将对象作为弹性伸缩盒子模型显示）

3、-webkit-box-orient:vertical;（和1结合使用，设置或检索伸缩盒对象的子元素的排列方式。）

4、overflow:hidden; （顾名思义超出限定的宽度就隐藏内容）

5、text-overflow: ellipsis;（规定当文本溢出时显示省略符号来代表被修剪的文本）
例如：

.div4 {
    width: 200px;
    /*不要给高度！！！！给了高度的话，第二行后面的内容也会显示出来*/
    /* height: 200px; */
    background-color: pink;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

<div class="div4">
    dsfjsfsdifjsiadfj反倒是飞机迪斯科浪费绝对是开发第三方打扫房间肯定是发窘打扫房间的司法鉴定是方式开发深刻搭街坊看的司法鉴定是开发
</div>

没给高度：
在这里插入图片描述
给了高度：

常见布局技巧

margin布局技巧
并排放的盒子如果都设置1px的边框，则在两个盒子的中间位置边框会变成2px，此时可以设置盒子margin-left：-1px；
如果要设置鼠标经过某个盒子出现边框，可以设置相对定位（保留位置），如果盒子原本没有定位，则可以设置z-index
在这里插入图片描述
文字围绕浮动元素

设置左图片右文字的效果，不用左边一个盒子右边一个盒子，只要设置左边图片为左浮动，右边的文字自然的就会围绕这张图片

行内块巧妙运用
可以用来实现页面居中的按钮
在这里插入图片描述

zzzzzzrrryyy

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
HTML5+CSS3基础

锚点链接文本缩进text-indent使首行文字缩进，单位为em时表示相对于当前字体的两个字体大小的距离行间距line-height属性用于设置行间的距离，可以控制文字行与行之间的距离css引入方式内部样式表行内样式表外部样式表复合选择器后代选择器例如 ul li {} .nav ul li{}子元素选择器例如.nav>a{}并集选择器...
复制链接

扫一扫