MondayCui-CSDN博客

原创 css--浮动的简介

通过浮动可以使一个元素向其父元素的左侧或右侧移动使用 float 属性来设置于元素的浮动可选值：none 默认值，元素不浮动left 元素向左浮动right 元素向右浮动注意，元素设置浮动以后，水平布局的等式便不需要强制成立元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置，所以元素下边的还在文档流中的元素会自动向上移动浮动的特点：1、浮动元素会完全脱离文档流，不再占据文档流中的位置2、设置浮动以后元素会向父元素的左侧或右侧移动，3、浮动元素默认不会从父元素中移出4.

2020-09-23 20:39:31 246 1

原创 css--轮廓、阴影、圆角

轮廓outline 用来设置元素的轮廓线，用法和border一模一样轮廓和边框不同的点，就是轮廓不会影响到可见框的大小<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮.

2020-09-23 19:58:49 259

原创 css--盒子的尺寸

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

2020-09-23 19:31:36 1273

原创 css--浏览器的默认样式

单独去除每一个元素的边距<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浏览器的默认样式</title> <style> ....

2020-09-23 19:04:08 209

原创 css--行内元素的盒模型

行内元素的盒模型 - 行内元素不支持设置宽度和高度 - 行内元素可以设置padding，但是垂直方向padding不会影响页面的布局 - 行内元素可以设置border，垂直方向的border不会影响页面的布局 - 行内元素可以设置margin，垂直方向的margin不会影响布局 display 用来设置元素显示的类型

2020-09-23 18:32:35 291

原创 css--外边距的折叠

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

2020-09-20 20:02:16 173

原创 css--盒子的垂直布局

默认情况下父元素的高度被内容撑开子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出使用 overflow 属性来设置父元素如何处理溢出的子元素可选值： visible，默认值子元素会从父元素中溢出，在父元素外部的位置显示 hidden 溢出内容

2020-09-20 19:37:02 467

原创 css--盒子的水平布局

元素的水平方向的布局：元素在其父元素中水平方向的位置由以下几个属性共同决定“ margin-left border-left padding-left width padding-right

2020-09-20 19:07:16 372

原创 css--盒模型的外边距

外边距（margin） - 外边距不会影响盒子可见框的大小 - 但是外边距会影响盒子的位置 - 一共有四个方向的外边距： margin-top - 上外边距，设置一个正值，元素会向下移动 margin-right

2020-09-20 17:02:36 624

原创 css--盒模型的内边框

内边距（padding） - 内容区和边框之间的距离是内边距 - 一共有四个方向的内边距： padding-top padding-right padding-bottom padding-left

2020-09-20 16:44:03 209 1

原创 css--盒模型的边框

边框边框的宽度 border-width 边框的颜色 border-color 边框的样式 border-styleborder-width: 10px; 默认值，一般都是 3个像素 border-width可以用来指定四个方向的边框的宽度值的情况

2020-09-20 15:36:54 134

原创 css--盒模型

盒模型、盒子模型、框模型（box model） - CSS将页面中的所有元素都设置为了一个矩形的盒子 - 将元素设置为矩形的盒子后，对页面的布局就变成将不同的盒子摆放到不同的位置 - 每一个盒子都由一下几个部分组成：内容区（content）内边距（padding）边框（border）外边距（margin

2020-09-20 15:13:55 104

原创 css--文档流

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

2020-09-20 14:50:43 116

原创 css--颜色单位

颜色单位：在CSS中可以直接使用颜色名来设置各种颜色比如：red、orange、yellow、blue、green ... ... 但是在css中直接使用颜色名是非常的不方便 RGB值： - RGB通过三种颜色的不同浓度来调配出不同的颜色

2020-09-15 20:42:54 252

原创 css--长度单位

像素 - 屏幕（显示器）实际上是由一个一个的小点点构成的 - 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰 - 所以同样的200px在不同的设备下显示效果不一样百分比 - 也可以将属性值设置为相对于其父元素属性的百分比 - 设置百分比可以使子元素跟随父.

2020-09-15 20:18:55 112

原创 css--样式的权重

样式的冲突 - 当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值时，此时就发生了样式的冲突。发生样式冲突时，应用哪个样式由选择器的权重（优先级）决定选择器的权重内联样式 1,0,0,0 id选择器 0,1,0,0 类和伪类选择器 0,0,1,0

2020-09-15 19:52:22 597

原创 css--样式的继承

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

2020-09-15 19:19:03 392

原创 css--伪元素选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪元素选择器</title> <style> /* 伪元素

2020-09-14 20:15:32 103

原创 css--超链接的伪类

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>超链接的伪类</title> <style> /* :link 用来表示没访问过的链接

2020-09-14 19:52:51 711

原创 css--伪类选择器

伪类（不存在的类，特殊的类） - 伪类用来描述一个元素的特殊状态比如：第一个子元素、被点击的元素、鼠标移入的元素... - 伪类一般情况下都是使用:开头 :first-child 第一个子元素 :last-child 最后一个子元素 :nth-child() 选中第n个子元素特殊值：

2020-09-14 19:33:08 91

原创 css--属性选择器

[属性名] 选择含有指定属性的元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>属性选择器</title> <style> .

2020-09-14 16:30:36 128

原创 css--关系选择器

父元素 - 直接包含子元素的元素叫做父元素子元素 - 直接被父元素包含的元素是子元素祖先元素 - 直接或间接包含后代元素的元素叫做祖先元素 - 一个元素的父元素也是它的祖先元素后代元素 - 直接或间接被祖先元素包含的元素叫做后代元素 - 子元素也是后代元素兄弟元素 - 拥有相同父元素的元素是兄弟元素子元素选择器作用：选中指定父元素的指定子元素语法：父元素 > 子元素<!DOCTYPE htm...

2020-09-14 16:06:28 174

原创 zeal离线文档下载

第一种下载方式–软件内下载打开zeal–>Tools–>Docsets–>Available–>Refresh–>搜索栏搜索要下载的文档–>Installed查看已下载的文档下载速度很慢很慢o(╥﹏╥)o第二种方法–在目录下直接添加文档离线文档存储目录：Edit–>Preferences–>Docset storage在该目录下存放离线文档，再重新打开zeal即可看到离线文档。离线文档下载地址：HTML/CSS/JavaScript.

2020-09-14 12:29:05 2064 2

原创复合选择器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>复合选择器</title> <style> /* 将class为red的元素设置为红色（字体） */ .red{ color:red; } /* 将class为red的div字

2020-09-13 20:25:26 156

原创 CSS-常用选择器

元素选择器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>常用选择器</title> <style> /* 将所有的段落设置为红色（字体）元素选择器作用：根据标签名来选中指定的元素

2020-09-13 20:05:34 155

原创 CSS语法

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS语法</title> <style> /* CSS中的注释，注释中的内容会自动被浏览器所忽略 CSS的基本语法: 选择器声明块选择器，通过选择

2020-09-13 19:38:43 85

原创内联框架

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>内联框架</title></head><body> <!-- 内联框架：用于向当前页面引入一个其他页面（用的不多） src 指定要引入的网页的路径 frameborder 指定

2020-09-13 17:10:13 247

原创 CSS简介

网页分成三个部分：结构(HTML) 表现(CSS) 行为(JavaScript) CSS - 层叠样式表 - 网页实际上是一个多层的结构，通过CSS可以分别为网页的每一个层来设置样式而最终我们能看到只是网页的最上边一层 - 总之一句话，CSS用来设置网页中元素的样式使用CSS来修改元素的样式<!DOCT

2020-09-13 17:08:50 141

原创 html--音视频播放

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>音视频播放</title></head><body> <!-- audio 标签用来向页面中引入一个外部的音频文件的音视频文件引入时，默认情况下不允许用户自己控制播放停止属性：

2020-09-13 14:26:48 280

原创图片标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片标签</title></head><body> <!-- 图片标签用于向当前页面中引入一个外部图片使用img标签引入外部图片，img是一个自结束标签 img元素属于替换元

2020-09-12 19:47:47 241

原创超链接相对路径

超链接简介<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>超链接</title></head><body> <!-- 超链接可以从一个页面跳转到另一个页面，或者当前页面的其他位置使用a标签来定义超链接属性：

2020-09-10 16:31:08 1638

原创语义化标签—列表

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- 有三种列表： 1.无序列表：（使用较多）使用ul标签创建无序标签

2020-09-10 14:28:09 126

原创语义化标签3

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- header 表示网页的头部，一个网页可以有多个头部 main 表示网页的主体，一个网页中只有一个main footer

2020-09-10 14:09:26 92

原创语义化标签2

代码编写：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- 块元素（block element） -- 对页面进行布局行内元素（inline element）

2020-09-10 13:49:42 430

原创语义化标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- （Ctrl+回车光标下移换行）在网页中HTML专门来负责网页的结构，所以在使用HTML标签时应关注标签的语义而不是样式

2020-09-09 20:58:36 127

原创 meta标签

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- meta主要用于设置网页中的一些元数据，元数据不是给用户看的 charset 指定网页的字符集 name 指定的数据的名称 content 指定的数据的内容 keywords 表示网

2020-09-09 20:05:58 145

原创实体

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>实体</title></head><body> <!-- 在网页中编写的多个空格默认情况下会自动被浏览器解析为一个空格在HTML中有些时候不能直接书写一些特殊符号

2020-09-09 19:32:48 105

原创 VSCode的安装

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body>  <!-- 1.

2020-09-09 19:06:06 78

原创文档声明、字符编码

文档声明<!doctype html><!doctype html><html> <head> <title>网页的基本结构</title> </head> <body> <!-- 迭代网页的版本 HTML4 XHTML2.0 HTML5 ... 文档声明（doctype） -文档声明用来高速浏览器当前网页的

2020-09-07 22:49:46 172

原创自结束标签、注释、标签中的属性

标签一般成对出现，但也存在一些自结束标签。自结束标签：**<img>**或<img />**<input>**或<input />注释：<!--HTML的注释，网页中不会显示，只在源码显示。注释不能嵌套。--!>...

2020-09-07 19:44:05 1071

zeal离线文档下载

空空如也