小王不想秃头@-CSDN博客

原创字体和图标字体

目录一、字体二、图标字体三、阿里的图标字体库一、字体字体相关的样式 color 用来设置字体颜色 font-size 用来设置字体的大小和font-size相关的单位 em 相对于当前元素的一个font-size rem 相对于根元素的一个font-size font...

2021-10-11 15:16:19 157

原创绝对定位元素的布局和元素的层级

目录一、绝对定位元素的布局二、元素的层级一、绝对定位元素的布局水平布局： left+margin-left+border-left+padding-left+width+padding-right+border- right+margin-right+right=包含块内容区的宽度当我们开启了绝对定位...

2021-10-10 15:46:32 417

原创定位的简介和四种定位

一、定位的简介定位（position）定位时一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置使用position属性来设置定位可选值：static默认值元素是静止的没有开启定位relative开启元素的相对定位...

2021-10-10 15:34:40 1033

原创高度塌陷的问题及解决方案

目录一、高度塌陷的问题二、高度塌陷问题的解决方案方案一：给元素开启BFC 方案二：clear 最好的解决方案：clearfix一、高度塌陷的问题在浮动布局中，父元素的高度默认是被子元素撑开的在子元素浮动后，其完全脱离文档流子元素从文档流中完全脱离，将会无法撑起父元素的高度，导致父元素的高度丢失...

2021-10-10 15:13:44 303

原创浮动的简介和特点

目录一、浮动的简介二、浮动的特点三、浮动的其他特点四、脱离文档流的特点一、浮动的简介通过浮动可以使一个元素向其父元素的左侧或右侧移动使用float属性设置元素的浮动可选值：none默认值元素不浮动left元素向左浮动right元素向右浮动【注...

2021-10-10 14:53:27 1313 1

原创轮廓和圆角

一、轮廓 ① outline用来设置元素的轮廓线，用法和border一模一样轮廓和边框的不同点，就是轮廓不会影响到可见框的大小 ② box-shadow用来设置元素的阴影效果，阴影不会影响页面布局第一个值水平偏移量设置阴影的水平位置正值向右移动负值向左移动第二个值垂直偏移量设置阴影的水平位置正值向下移动负值向上移动...

2021-09-29 15:07:25 95

原创盒子的尺寸和默认样式

一、盒子的尺寸默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）可选值：content-box默认值宽度和高度用来设置内容区的大小border-box 宽度和高度用来设置整个盒子可见框的大小...

2021-09-29 15:01:26 392

原创外边距的折叠和行内元素的盒模型

一、外边距的折叠垂直外边距的重叠（折叠）相邻的垂直方向外边距会发生重叠现象 1、兄弟元素兄弟元素间的相邻垂直外边距会取两者之间的较大者（两者都是正值）特殊情况： ① 如果相邻的外边距一正一负，则取两者的和 ② 如果相邻的外边距都是负值，则取两者中绝对值较大的...

2021-09-29 14:46:45 75

原创盒子的水平布局和垂直布局

一、元素的水平方向布局元素在其父元素中水平方向的位置由以下几个属性共同决定margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargi...

2021-09-29 14:28:42 308

原创盒子模型中的边框、内边距和外边距

一、边框边框 ① 边框的宽度border-width border-width:10px;可以省略不写，默认值：一般都是三个像素border-width可以用来指定四个方向的边框的宽度值的情况四个值：上右下左三个值：上左右下...

2021-09-29 14:12:49 2006

原创文档流与盒模型

一、文档流（normalflow） 1、文档流（normalflow）网页是一个多层结构，一层摞着一层通过CSS可以为每一层来设置样式作为用户来讲只能看到最顶上一层这些层中最底下的一层称为文档流，文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列对于我们来说元素主要有两个状态 ① 在文档流中 ② ...

2021-09-29 13:02:25 68

原创 CSS中的单位

1、长度单位长度单位：像素：屏幕（显示器）实际上是由一个一个的小点点构成的不同屏幕的像素大小不同，像素越小显示的效果越清晰所以同样的二百像素在不同的设备下显示效果不一样百分比：也可以将属性值设置为相对于其父元素属性的百分比...

2021-09-08 12:03:23 77

原创 CSS中样式的继承和选择器的权重

1、样式的继承样式的继承：我们为一个元素设置的样式同时也会应用到它的后代元素上继承发生在祖先元素和后代元素之间继承的设计是为了方便开发利用继承可以将一些通用的样式统一设置到共同的祖先元素上这样只需设置一次即可让所有元素都有该样式注意：并不是所有样式都会被继承如：背景相关的，布局相关的等这些样式都不会被继承2、选...

2021-09-08 11:59:19 227

原创 CSS中超链接的伪类和伪元素选择器

1、超链接的伪类:link用来表示没访问过的链接（正常的链接）:visited用来表示访问过的链接由于隐私的原因，所以visited这个伪类只能修改链接的颜色:hover用来表示鼠标移入的状态:active用来表示鼠标点击的状态2、伪元素选择伪元素：表示页面中一些特殊的并不真实存在的元素（特殊位置）伪元素使用::开头...

2021-09-08 11:52:11 721

原创 CSS中的属性选择器和伪类选择器

1、属性选择器<body><ptitle="abc">床前明月光</p><ptitle="abcde">疑是地上霜</p><ptitle="hhhhh">举头望明月</p><p>低头思故乡</p></body>语法：[属性名]选则含有指定属性的元素[属性名=属性值]选则含有指定属性和属性值的元...

2021-09-08 11:09:21 362

原创 CSS中的复合选择器和关系选择器

1、复合选择器<body><divclass="red">我是div</div><h1id="blue">我是h1</h1><pclass="redablue">我是p元素</p><h2>hhhhhh</h2><span>hahahhahaha</span></body>（1）交...

2021-09-03 09:32:58 158

原创 CSS中常用的选择器

（1）元素选择器作用：根据标签名来选中指定的元素语法：标签名{}如：p{}h1{}div{}将当前页面中所有p中的内容设为红色，h1中的内容设为绿色p{color:red;}h1{color:green;}（2）id选择器...

2021-09-02 15:01:29 84

原创 CSS简介

CSS(层叠样式表)网页实际上是一个多层的结构，通过css可以为网页的每一层来设计样式最终我们能看到的只是网页的最上边一层总之，css可以用来设置网页中元素的样式使用css来修改元素的样式（1）第一种方式(内联样式；行内样式)：在标签内部通过style属性来设置元素的样式<pstyle="color:red;font-size:30px;">床前明月光，疑是地上...

2021-09-02 14:47:26 363

原创 HTML5之内联框架和音视频标签

1、内联框架使用iframe标签向当前页面中引入其他页面属性： -src指定要引入的网页的路径 -framborder指定内联框架的边框（只有0和1，0表示没有边框，1表示有边框）2、音频标签audio标签用于向页面中引入一个外部的音频文件音频文件引入时，默认情况下，不允许用户自己控制播放停止属性： -contr...

2021-09-01 16:40:14 263

图片标签：用于向当前页面中引入一个外部图片使用img标签来引入外部图片，img标签是一个自结束标签img属于替换元素（介于块元素和行内元素之间,具有两种元素的特点）（1）属性： -src指定的是外部图片的路径（路径规则与超链接一致） -alt对图片的描述，这个描述默认情况下不显示，有些浏览器会在图片无法加载时显示搜索引擎会根据alt中的内容来识别图片，若不写alt属性则图片不会被搜索引擎所收录...

2021-09-01 16:28:46 724

原创 HTML5之超链接与相对路径

超链接可以让我们从一个页面跳转到其他页面，或者当前页面的其他位置。 -使用a标签来定义超链接 -属性：href指定跳转的目标路径值可以是一个外部网站的地址也可以写一个内部页面的地址超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素。示例：<a href="https://www.baidu.com">超链接1</a> &...

2021-09-01 16:15:46 1516

原创 HTML5之列表

列表（list） -在html中也可以创建列表，html列表一共有三种：1、有序列表：使用ol标签来创建无序列表，使用li来表示列表项。2、无序列表：使用ul标签来创建无序列表，使用li来表示列表项。3、定义列表：使用dl来表示列表项，使用dt来表示定义的内容，使用dd来对内容进行解释说明。示例：<ul> <li>结构</li> &lt...

2021-08-31 21:19:19 814

原创 HTML5之标签

1、实体在网页中编写多个空格没默认情况会自动解析为一个空格在html中，有些情况不能直接写特殊符号如：多个连续的空格，字母两侧的大小于 -实体的语法：&实体的名字; -常见的实体（可以去w3school上查找其余需要的实体）空格 &nbs; 大于号 > 小于号 < 2、meta标签meta标签主要用于设置网页的一些元数据，元数据不...

2021-08-31 21:14:45 65

原创 HTML5之网页页面的基本结构

1、页面的基本结构<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>标题栏</title></head><body> 网页内容</body></html>2、基本结构中各标签的含义<!Do

2021-08-31 19:58:30 2513

WQuestion的博客