real_laugh-CSDN博客

原创前端学习：元素的显示与隐藏、滤镜及calc函数

类似网站广告，当我们点击关闭就不见了，但是重新刷新页面，就会重新出现，这些涉及到了元素的显示与隐藏。display属性：用于设置一个元素应如何显示。 display: none; 隐藏对象 display: block; 除了转换为块级元素意外，同时还有显示元素的意思。display隐藏元素后，不再占有原来的位置。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8...

2022-02-28 16:17:59 565

原创前端学习：定位

定位是将盒子定位定在某一个位置或自由的在某个盒子内移动，并且可以压住其他盒子。所以定位也是在摆放盒子，按照定位的方式移动盒子。定位的组成定位 = 定位模式 + 边偏移。定位模式用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。定位模式决定元素的定位方式，通过CSS的position属性来设置，属性值如下表：属性值描述 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 s

2022-02-28 16:05:31 313

原创前端学习：浮动

浮动用于改变标签默认的排列方式。float属性用于创建浮动框，将其移动到一边，知道左边缘或右边缘触及包含块或另一个浮动框的边缘。语法：选择器 { float: 属性值; } 属性值如下表：属性值描述 none 元素不浮动(默认值)。 left 元素向左浮动。 right 元素向右浮动。例如：<!DOCTYPE html><html lang="en">...

2022-02-28 15:43:34 2309

原创前端学习：圆角边框、盒子阴影、文字阴影

一、圆角边框border-radius属性可以使盒子编程圆角。原理：语法： border(-top/bottom-left/right)-radius: length;注：length可以为数值或百分比形式。如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。如果是个矩形，想要设置为圆角矩形，把数值修改为高度的一半即可。该属性可以设置多个值。两个值：分别代表左上和右下，左下和右上四个...

2022-02-17 17:14:54 946

原创前端学习：盒子模型

盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括：边框、外边距、内边距和实际内容。盒子的组成：border边框，content内容、padding内边距、margin外边距。一、border可以设置元素的边框。边框由三部分组成：边框宽度(粗细)、边框样式、边框颜色。注：边框会影响盒子实际大小，会额外增加盒子的实际大小。因此在测量盒子大小的时候，不量边框；或者测量时包含边框，再减去边...

2022-02-17 16:57:15 3217

原创前端学习：CSS三大特性

CSS有三个特性：层叠性、继承性、优先级。层叠性：相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突的问题。层叠性原则：样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式。样式不冲突，不会层叠。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m...

2022-02-17 16:31:48 361

原创前端学习：元素显示模式与背景属性

元素显示模式元素显示模式就是元素(标签)以什么方式进行显示，比如<div>自己占一行，一行可以放多个<span>。HTML元素一般分为块元素和行内元素。块元素：常见的有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等。块级元素的特点：独占一行。高度、宽度、外边距以及内边距都可以控制。宽度默认是容器(父级宽度)的100%。是一个容器及...

2022-02-17 16:22:41 433

原创前端学习：CSS选择器（二）

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。后代选择器可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代。元素1 元素2 { 样式声明}.类名元素1 { 样式声明}上述语法表示元素1中的所有元素2。注：元素1(类)和元素2中间必须用空格隔开。元素1(类)是父级，元素2是子级，最终选择的是元素2。元素2可以是儿子，也可以是孙子等，只要是元素1(...

2022-02-16 17:05:20 760

原创前端学习：CSS字体属性与文本属性

字体(font)属性用于定义字体系列，大小、粗细和文字样式。font-family设置文本的字体系列。语法格式：font-family: 属性值;注：属性值可以有多个，但之间必须用“,”隔开。如果有由空格隔开的多个单词组成的字体，则需加引号。当设有多个属性值时：若电脑中有属性值1的字体，则使用属性1，否则判断属性值2。若所有电脑中不含所给的所有字体，则使用浏览器默认字体。font-size设置文本的字体大小。语法格式：font-size: 属性值;font-weight设置文本的字体粗细。

2022-02-16 16:40:09 938

原创前端学习：CSS选择器（一）

选择器是用于指定CSS样式的HTML标签，就是根据不同需求把不同的标签选出来，说白了就是选择标签用的，括号内是对该对象设置的具体样式。选择器分为基础选择器和复合选择器。基础选择器是由单个选择器组成的，包括标签选择器、类选择器、id选择器和通配符选择器。1. 标签选择器。为某一类的所有标签指定统一的CSS样式，无法实现差异化选择。标签名 { 属性1：属性值; 属性2：属性值; ……}<!DOCTYPE html><html lang="en">...

2022-02-16 16:29:04 439

原创前端学习：html标签(补充)

一、 HTML5新增的语义化标签。这种语义化标准主要是针对搜索引擎的，<header></header>：头部标签。<nav></nav>：导航标签。<article></article>：内容标签。<section></section>：定义文档某个区域。<aside></aside>：侧边栏标签。<footer></footer>：尾部标签。注

2022-02-16 16:17:01 144

原创前端学习：html标签

<h1></h1> ————<h6></h6>：标题标签。<p></p>：段落标签。<br/>：换行标签。加粗标签： <strong></strong>(推荐) <b></b>倾斜标签； <em></em>(推荐) <i></i>删除线标签： <del></...

2022-01-17 10:53:22 377

real_laugh的博客