【Html+CSS】基础知识点梳理

最新推荐文章于 2022-11-08 22:36:37 发布

王昱潇

最新推荐文章于 2022-11-08 22:36:37 发布

阅读量561

点赞数

分类专栏：前端学习笔记文章标签： html css css3 html5

本文链接：https://blog.csdn.net/qs52955339/article/details/116268871

版权

前端同时被 2 个专栏收录

40 篇文章 1 订阅

订阅专栏

学习笔记

36 篇文章 0 订阅

订阅专栏

alt和title的区别，src和href的区别

Margin塌陷（嵌套块元素垂直外边距的合并）

Html

web标准三层组成

Html标签分类

常规元素双标签例如<p></p>
空元素单标签例如<br />

文档类型，页面语言，字符集

<!DOCTYPE html> 就是告诉浏览器按照HTML5规范解析页面。

<html lang="en"> 指定html的语言种类，可以告诉搜索引擎做精确的识别，帮助翻译器工具做识别，帮助网页阅读程序做识别等等。

alt和title的区别，src和href的区别

1、img标签中，alt和title的区别，alt是图片未能正常显示时显示的内容，title是鼠标放在图片上显示的内容。

2、src和href的区别：

src用于替换当前元素。
href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置。
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接。

网站优化三大标签 SEO

title、description、keyword。

titile：首页标题：网站名-网站介绍

例如：CSDN-专业开发者社区

description：

<title>CSDN-专业开发者社区</title>
<meta name="description" content="xxxxxxx">
<meta name="keywords" content="xxxxxxx">

HTML5

html5新增input表单、表单属性

示例：

    <form>
        <input type="email">
        <input type="submit">
    </form>

CSS

基础选择器

复合选择器

示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*1. 链接 登陆 的颜色为红色  -> 后代选择器*/
        .site-r a {
            color: red;
        }
        /*2. 主导航栏里的所有链接改为橙色  -> 后代选择器*/
        .nav ul li a {
            color: orange;
        }
        /*3. 主导航栏和侧导航栏里面的文子都是14px并且是微软雅黑  -> 并集选择器*/
        .nav,
        .sitenav {
            font: 14px '微软雅黑';
        }
    </style>
</head>
<body>
<div class="nav">
    <ul>
        <li><a href="#">公司首页</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司产品</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>
<div class="sitenav">
    <div class="site-l">左侧侧导航栏</div>
    <div class="site-r"><a href="#">登陆</a></div>
</div>
</body>
</html>

伪类选择器

用于向某些选择器添加特殊的效果，例如：

示例：（实际开发很少写齐四个，这里只做代码示范）

块级元素

常见的块级元素：<h1>~<h6>，<p>，<div>，<ul>，<ol>，<li>等等。

特点：

块级元素单独占一行；
宽度高度内外边距都可以控制；
宽度默认是容器的100%；
块级元素里面可以放行内元素和块级元素。

注：p标签和h标签和dt标签是文字类块级标签，里面不能放块级标签。

行内元素

常见的行内元素：<a>，<strong>，<b>，<em>，<i>，<del>，<span>等等。

特点：

相邻的行内元素默认显示在同一行；
宽度高度直接设置是无效的，默认宽度是它本身内容的宽度；
行内元素只能容纳文本或其他行内元素。

注：链接里面不要再放链接；特殊情况a标签可以放块级元素，但要注意转换为块级元素。

行内块元素(inline-block)

常见的标签：<input />，<img />， <td>

特点：

相邻的行内块在一行上，但之间有空白缝隙，一行显示多个；
默认宽度高度是它本身内容的宽高；
可以设置高度宽度内外边距。

三种标签模式总结

注：三种模式可以相互转换：display: xxxx;

单行文本垂直居中

做法：文字的行高等于盒子的行高，设置line-height属性。

行高和高度的三种关系：

如果行高等于高度，文字会垂直居中
如果行高大于高度，文字会偏下
如果行高小于高度，文字会偏上

综合示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /* 1.变化样式： 有大小，一行显示
           2.鼠标经过时文字颜色和底色变化
           3.文字无下划线，水平垂直居中
        */
        a {
            display: inline-block;
            width: 100px;
            height: 30px;
            background-color: pink;
            text-align: center;
            line-height: 30px;
            text-decoration: none;
            color: #fff;
        }
        a:hover {
            background-color: orange;
            color: yellow;
        }
    </style>
</head>
<body>
<a href="#">新闻</a>
<a href="#">体育</a>
<a href="#">汽车</a>
<a href="#">娱乐</a>
</body>
</html>

CSS三大特性

CSS层叠性

CSS样式冲突的原则：就近原则，哪个样式离结构近就执行哪个样式。不冲突的样式不会层叠。

CSS继承性

子标签会继承父标签的样式，比如text-，font-，line-这些元素开头的可以继承，color属性也可以。恰当的使用继承可以简化代码。

CSS优先级

定义CSS样式时，经常出现两个或多个规则应用在同一元素上，此时：

选择器相同，则执行层叠性
选择器不同，就会出现优先级的问题

1.权重计算公式

specificity用一个四位的数，更像四个级别
值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越
关于CSS的权重，需要一套计算公式计算，这个就是CSS Specificity（特殊性）

2.权重叠加

交集选择器，后代选择器等，是有多个基础选择器组合的，此时会出现权重叠加。

继承的权重是0；如果权重相同，则会根据层叠性使用就近原则。

盒子模型

盒子模型包括：边距，边框，填充，和实际内容。

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

盒子的实际大小=内容宽度/高度 + 内边距 +边框

注：如果没有给一个盒子指定宽度，此时如果给这个盒子指定padding，则不会撑开盒子。

盒子居中对齐

必须有宽度
左右外边距设置为auto

文字居中和盒子居中的区别

盒子内的文字水平居中是text-alignt:center，而且还可以让行内元素和行内块居中。

块级盒子水平居中，左右margin改为auto

text-align: center; /*文字 行内元素 行内块元素水平居中*/
margin: 10px auto; /*块级盒子水平居中 左右margin改为auto就可以了*/

插入图片和背景图片的区别

插入图片移动位置只能靠盒模型 padding margin
背景图片只能通过background-position

清除元素的默认边距

*{
    margin:0;
    padding:0;
}
/*写CSS的第一句代码*/

注：行内元素尽量只设置左右内外边距，不要设置上下内外边距。

Margin塌陷（嵌套块元素垂直外边距的合并）

对于两个嵌套关系的块元素，父元素没有上内边距及边框，父元素的上边距会与子元素的上边距发生合并，合并后的外边距为两者的较大值。

解决方案：

第一种，可以为父元素定义上边框

第二种，可以为父元素定义上内边距

第三种，为父元素添加overflow:hidden，行成块级独立渲染区域（BFC）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 500px;
            background-color: pink;
            /*嵌套关系 垂直外边距合并（Margin塌陷） 解决方案代码*/
            /* 1.为父元素定义上边框 transparent 透明 */
            /* border-top: 1px solid transparent; */
            /*2.为父元素指定一个 上 padding的值*/
            /* padding-top: 1px; */
            /* 3.为父元素添加overflow:hidden */
            overflow: hidden;
        }
        
        .son {
            width: 200px;
            height: 200px;
            background-color: purple;
            margin-top: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

当然，还可以利用浮动，固定，绝对定位来解决。

盒子模型布局稳定性

根据稳定性来分：优先使用宽度(width)，其次使用内边距(padding)，再次使用外边距(margin)

原因：

margin会有外边距合并，且ie6有margin加倍的bug，所以最后使用
padding会影响盒子的大小，需要进行加减计算，其次使用

CSS布局的三种机制

CSS提供了三种机制来设置盒子的摆放位置，分别是标准流（普通流），浮动和定位。

1.标准流（普通流）

块级元素会独占一行，从上向下顺序排列；
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘时自动换行

2.浮动

让盒子从普通流中浮起来，主要作用让多个块级盒子一行显示。

3.定位

将盒子定在浏览器的某一个位置

浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到指定的位置。

作用：

让多个盒子排成一行
实现盒子的左右对齐等等
控制图片实现文字环绕图片的效果

语法：

选择器 {float: 属性值;}

属性值：

none; left; right;

注：float属性会改变元素display的属性，转换后为类似行内块，两个浮动元素之间并没有缝隙。

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

浮动是脱离标准流的，会影响下面的标准流元素，此时就需要给浮动的元素添加一个标准流的父亲，这样可以减小对其他标准流的影响。

浮动元素和父兄盒子的关系：

子盒子的浮动参照父盒子对齐，不会与父盒子的边框重叠，也不会盖住父盒子的内边距。

在一个父级盒子中：

如果前一个兄弟盒子是浮动的，那么当前盒子会与前一个盒子顶部对齐；

如果前一个兄弟盒子是标准流的，那么当前盒子会显示在前一个兄弟盒子的下方。

清除浮动

为什么要清除浮动？因为父盒子很多的情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子的高度为0，就影响了下面的标准流盒子。

准确的说，并不是清除浮动，而是清除浮动后造成的影响。

清除浮动的本质

清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。

清除浮动的方法

clear属性用于清除浮动。

语法：选择器 {clear:属性值;}

属性值：

方法一：额外标签法（隔墙法）

在浮动元素末尾添加一个空的标签，例如<div style="clear:both"></div>，它的有点是书写方便，缺点是结构化较差且页面中会出现无意义的标签。

方法二：父级元素添加overflow属性方法

为父级元素添加 overflow：hidden/auto/scroll都可以，但它的缺点是内容增多时容易造成不会自动换行导致内容被隐藏，无法显示需要溢出的元素。

方法三：使用after伪元素清除浮动

:after方式是空元素额外标签的升级版，好处是不用单独加标签了

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    visibility:hidden;
    clear:both;
}
.clearfix {
    *zoom:1 ;  /*IE6,IE7专用*/
}

方法四：使用双伪元素清除浮动

.clearfix:before,
.clearfix:after {
    content: "",
    display: table;
}
.clearfix:after: {
    clear: both;
}
.clearfix {
    *zoom:1;
}

清除浮动的总结：

何时使用：父级没高度，子盒子浮动了，影响下面布局了。

定位

定位由两部分组成，定位=定位模式+边偏移。

定位模式

在CSS中，通过position属性定义元素的定位模式，语法如下：

选择器 { position: 属性值; }

静态定位

静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none，不要定位的时候用。
静态定位按照标准流特性摆放位置，它没有边偏移。
很少用到。

相对定位

相对定位是元素相对于它原来在标准流中的位置来说的。

特性：

相对于自己原来在标准流中位置来移动。
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。

绝对定位

绝对定位是元素以带有定位的父级元素来移动位置。

特性：

完全脱标—— 完全不占位置。
父元素没有定位，则以浏览器为准定位。
父元素有定位，则以父元素为准定位。

（也可以是祖先元素，不一定是上一级的父元素）

子绝父相

父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

固定定位

固定定位是绝对定位的一种特殊形式，它是完全脱标的，完全不占位置。它的定位只认浏览器的可视窗口，跟父元素没有任何关系，不随滚动条滚动。

注：IE6不支持。

绝对定位盒子的居中对齐

绝对定位、固定定位的盒子不能通过margin: auto设置水平居中！

方法：

left:50%;：让盒子的左侧移动到父级元素的水平中心位置；
margin-left:-100px;: 让盒子向左移动自身宽度的一半。

堆叠顺序（z-index）

只能用于相对定位、绝对定位和固定定位的元素，其他标准流，浮动和静态定位是无效的。

定位小结

注：

边偏移需要和定位模式联合使用，单独使用是无效的。
top和bottom不要同时使用。
left和right不要同时使用。

元素的显示与隐藏

display:none; 特点：隐藏元素，不再保留位置。

visibility:hiddden; 特点：隐藏对象，保留位置。

overflow:hidden; 特点：溢出隐藏。

vertical-align垂直对齐

vertical-align垂直对齐，它只针对行内元素或者行内块元素，不影响块级元素中的内容对齐。通常用来控制图片/表单与文字的对齐。

CSS精灵技术

CSS精灵技术主要针对背景图片，它解决的问题是当用户访问页面时，只需要向服务器发送一次请求，网页中的背景图像即可全部展示出来。

需要使用CSS的：
backgrouod-image
backgroup-repeat，no repeat
backgroud-position属性进行定位

1.精准测量每个小背景图片的大小和位置

2.给盒子指定小背景图片时，背景定位基本是负值

CSS三角形

边框模拟三角效果

原理：

每两条边框交汇的地方是一个斜角，当盒子宽高慢慢变小时……此处意会。

        div{
            width:50px;
            height:50px;
            border:10px solid #f00283;
            border-color: #000 #aaa #333 #999;
        }

步骤：

1.宽高设置为0

2.四个边框都写，但只需要保留边框颜色，其余的不能省略，要改成transparent透明。

3.为了照顾低版本浏览器，加上font-size:0; line-height:0;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 0;
            height: 0;
            border-top: 10px solid red;
            border-right: 10px solid green;
            border-bottom: 10px solid blue;
            border-left: 10px solid pink;
            border-color: red transparent transparent transparent;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        p {
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 100px;
            border-color: red transparent transparent transparent;
            font-size: 0;
            line-height: 0;
        }
    </style>
</head>
<body>
<p></p>
</body>
</html>

带三角形的div

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            position: relative;
            width: 200px;
            height: 100px;
            background-color: pink;
            margin: 100px auto;
        }
        p {
            position: absolute;
            top: -40px;
            left: 50%;
            margin-left: -20px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 20px;
            border-color: transparent transparent pink transparent;
            font-size: 0;
            line-height: 0;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>

CSS3

属性选择器

，，，

结构伪类选择器

，

注：nth-child只按顺序选子元素，不分类型，指定类型类型的需要使用nth-of-type。

伪元素选择器

注：
before和after必须有content属性
before在内容的前面，after在内容的后面
before和after创建一个元素，但是属于行内元素
因为在dom里面看不见刚才创建的元素，所以称为伪元素
伪元素和标签选择器的权重都是1

应用：伪元素字体图标

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,
        p {
            position: relative;
            width: 200px;
            height: 35px;
            border: 1px solid red;
        }
        
        p::after {
            position: absolute;
            top: 8px;
            right: 10px;
            font-family: 'icomoon';
            content: '▽';/*也可以用\ea50 但是部分浏览器兼容性有问题*/
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

其他Tips

1.没有给宽度的div，它的宽度和父盒子一样，但是给它设置padding无法撑开盒子。

2.浮动元素、绝对定位（固定定位）元素都不会触发外边距合并问题（margin塌陷）。

3.行高等于高度，只能让单行文本垂直居中，如果有图片或双行文字，则不起效。

4.去除图片底部的空白缝隙的两种方法：1.为img设置vertical-align，让图片不要喝基线对齐。2.将img转换为block。

5.溢出的文本省略号显示：

/*1.先强制一行内显示文本*/
white-space: nowrap;
/*2.超出的部分隐藏*/
overflow: hidden;
/*3.文字用省略号代替超出的部分*/
text-overflow: ellipsis;

6.好用的字体图标网站https://icomoon.io/

王昱潇

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
【Html+CSS】基础知识点梳理

Htmlweb标准三层组成标准说明结构用于对网页元素进行整理和分类。（Html）表现用于设置网页元素的版式、颜色、大小等外观（CSS）行为指网页模型的定义及交互的编写（Javascript） Html标签分类常规元素双标签例如<p></p> 空元素单标签例如<br />文档类型，页面语言，字符集<!DOCTYPE html> 就是告诉浏览器按照...
复制链接

扫一扫