html+css
关注
分享
扫一扫
文章平均质量分 57
html+css学习之路
小王不想秃头@
前端小白的学习之路。
展开
-
字体和图标字体
目录一、字体二、图标字体三、阿里的图标字体库一、字体字体相关的样式 color 用来设置字体颜色 font-size 用来设置字体的大小 和font-size相关的单位 em 相对于当前元素的一个font-size rem 相对于根元素的一个font-size font...原创 2021-10-11 15:16:19 · 184 阅读 · 0 评论 -
绝对定位元素的布局和元素的层级
目录 一、绝对定位元素的布局二、元素的层级一、绝对定位元素的布局水平布局： left+margin-left+border-left+padding-left+width+padding-right+border- right+margin-right+right=包含块内容区的宽度当我们开启了绝对定位...原创 2021-10-10 15:46:32 · 446 阅读 · 0 评论 -
定位的简介和四种定位
一、定位的简介定位（position）定位时一种更加高级的布局手段通过定位可以将元素摆放到页面的任意位置 使用position属性来设置定位可选值：static默认值元素是静止的没有开启定位relative开启元素的相对定位...原创 2021-10-10 15:34:40 · 1075 阅读 · 0 评论 -
高度塌陷的问题及解决方案
目录一、高度塌陷的问题二、高度塌陷问题的解决方案 方案一：给元素开启BFC 方案二：clear 最好的解决方案：clearfix一、高度塌陷的问题在浮动布局中，父元素的高度默认是被子元素撑开的在子元素浮动后，其完全脱离文档流子元素从文档流中完全脱离，将会无法撑起父元素的高度，导致父元素的高度丢失...原创 2021-10-10 15:13:44 · 335 阅读 · 0 评论 -
浮动的简介和特点
目录一、浮动的简介二、浮动的特点三、浮动的其他特点四、脱离文档流的特点一、浮动的简介通过浮动可以使一个元素向其父元素的左侧或右侧移动 使用float属性设置元素的浮动可选值：none默认值元素不浮动left元素向左浮动right元素向右浮动【注...原创 2021-10-10 14:53:27 · 1366 阅读 · 1 评论 -
盒子的尺寸和默认样式
一、盒子的尺寸默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定box-sizing用来设置盒子尺寸的计算方式（设置width和height的作用）可选值：content-box默认值宽度和高度用来设置内容区的大小border-box 宽度和高度用来设置整个盒子可见框的大小...原创 2021-09-29 15:01:26 · 425 阅读 · 0 评论 -
外边距的折叠和行内元素的盒模型
一、外边距的折叠垂直外边距的重叠（折叠）相邻的垂直方向外边距会发生重叠现象 1、兄弟元素兄弟元素间的相邻垂直外边距会取两者之间的较大者（两者都是正值）特殊情况： ① 如果相邻的外边距一正一负，则取两者的和 ② 如果相邻的外边距都是负值，则取两者中绝对值较大的...原创 2021-09-29 14:46:45 · 94 阅读 · 0 评论 -
盒子的水平布局和垂直布局
一、元素的水平方向布局元素在其父元素中水平方向的位置由以下几个属性共同决定margin-leftborder-leftpadding-leftwidthpadding-rightborder-rightmargi...原创 2021-09-29 14:28:42 · 333 阅读 · 0 评论 -
盒子模型中的边框、内边距和外边距
一、边框边框 ① 边框的宽度border-width border-width:10px;可以省略不写，默认值：一般都是三个像素border-width可以用来指定四个方向的边框的宽度值的情况四个值：上右下左三个值：上左右下...原创 2021-09-29 14:12:49 · 2079 阅读 · 0 评论 -
文档流与盒模型
一、文档流（normalflow） 1、文档流（normalflow） 网页是一个多层结构，一层摞着一层 通过CSS可以为每一层来设置样式 作为用户来讲只能看到最顶上一层 这些层中最底下的一层称为文档流，文档流是网页的基础 我们所创建的元素默认都是在文档流中进行排列对于我们来说元素主要有两个状态 ① 在文档流中 ② ...原创 2021-09-29 13:02:25 · 84 阅读 · 0 评论 -
CSS中的单位
1、长度单位长度单位：像素：屏幕（显示器）实际上是由一个一个的小点点构成的不同屏幕的像素大小不同，像素越小显示的效果越清晰所以同样的二百像素在不同的设备下显示效果不一样百分比：也可以将属性值设置为相对于其父元素属性的百分比...原创 2021-09-08 12:03:23 · 98 阅读 · 0 评论 -
CSS中样式的继承和选择器的权重
1、样式的继承样式的继承：我们为一个元素设置的样式同时也会应用到它的后代元素上继承发生在祖先元素和后代元素之间继承的设计是为了方便开发利用继承可以将一些通用的样式统一设置到共同的祖先元素上这样只需设置一次即可让所有元素都有该样式注意：并不是所有样式都会被继承如：背景相关的，布局相关的等这些样式都不会被继承2、选...原创 2021-09-08 11:59:19 · 251 阅读 · 0 评论 -
CSS中超链接的伪类和伪元素选择器
1、超链接的伪类:link用来表示没访问过的链接（正常的链接）:visited用来表示访问过的链接由于隐私的原因，所以visited这个伪类只能修改链接的颜色:hover用来表示鼠标移入的状态:active用来表示鼠标点击的状态2、伪元素选择伪元素：表示页面中一些特殊的并不真实存在的元素（特殊位置）伪元素使用::开头...原创 2021-09-08 11:52:11 · 741 阅读 · 0 评论 -
CSS中的属性选择器和伪类选择器
1、属性选择器<body><ptitle="abc">床前明月光</p><ptitle="abcde">疑是地上霜</p><ptitle="hhhhh">举头望明月</p><p>低头思故乡</p></body>语法：[属性名]选则含有指定属性的元素[属性名=属性值]选则含有指定属性和属性值的元...原创 2021-09-08 11:09:21 · 388 阅读 · 0 评论 -
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 · 184 阅读 · 0 评论 -
CSS中常用的选择器
（1）元素选择器作用：根据标签名来选中指定的元素语法：标签名{}如：p{}h1{}div{}将当前页面中所有p中的内容设为红色，h1中的内容设为绿色p{color:red;}h1{color:green;}（2）id选择器...原创 2021-09-02 15:01:29 · 104 阅读 · 0 评论 -
CSS简介
CSS(层叠样式表)网页实际上是一个多层的结构，通过css可以为网页的每一层来设计样式最终我们能看到的只是网页的最上边一层总之，css可以用来设置网页中元素的样式使用css来修改元素的样式 （1）第一种方式(内联样式；行内样式)：在标签内部通过style属性来设置元素的样式<pstyle="color:red;font-size:30px;">床前明月光，疑是地上...原创 2021-09-02 14:47:26 · 382 阅读 · 0 评论 -
HTML5之内联框架和音视频标签
1、内联框架使用iframe标签向当前页面中引入其他页面 属性： -src指定要引入的网页的路径 -framborder指定内联框架的边框（只有0和1，0表示没有边框，1表示有边框）2、音频标签audio标签用于向页面中引入一个外部的音频文件 音频文件引入时，默认情况下，不允许用户自己控制播放停止属性： -contr...原创 2021-09-01 16:40:14 · 285 阅读 · 0 评论 -
HTML5之图片标签
图片标签：用于向当前页面中引入一个外部图片使用img标签来引入外部图片，img标签是一个自结束标签img属于替换元素（介于块元素和行内元素之间,具有两种元素的特点）（1）属性： -src指定的是外部图片的路径（路径规则与超链接一致） -alt对图片的描述，这个描述默认情况下不显示，有些浏览器会在图片无法加载时显示搜索引擎会根据alt中的内容来识别图片，若不写alt属性则图片不会被搜索引擎所收录...原创 2021-09-01 16:28:46 · 752 阅读 · 0 评论 -
HTML5之超链接与相对路径
超链接可以让我们从一个页面跳转到其他页面，或者当前页面的其他位置。 -使用a标签来定义超链接 -属性：href指定跳转的目标路径值可以是一个外部网站的地址也可以写一个内部页面的地址超链接也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素。示例：<a href="https://www.baidu.com">超链接1</a> &...原创 2021-09-01 16:15:46 · 1564 阅读 · 0 评论 -
HTML5之列表
列表（list） -在html中也可以创建列表，html列表一共有三种：1、有序列表：使用ol标签来创建无序列表，使用li来表示列表项。2、无序列表：使用ul标签来创建无序列表，使用li来表示列表项。3、定义列表：使用dl来表示列表项，使用dt来表示定义的内容，使用dd来对内容进行解释说明。 示例：<ul> <li>结构</li> <...原创 2021-08-31 21:19:19 · 847 阅读 · 0 评论 -
HTML5之标签
1、实体 在网页中编写多个空格没默认情况会自动解析为一个空格在html中，有些情况不能直接写特殊符号如：多个连续的空格，字母两侧的大小于 -实体的语法：&实体的名字; -常见的实体（可以去w3school上查找其余需要的实体）空格 &nbs; 大于号 > 小于号 < 2、meta标签meta标签主要用于设置网页的一些元数据，元数据不...原创 2021-08-31 21:14:45 · 89 阅读 · 0 评论 -
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 · 2575 阅读 · 0 评论