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 595

原创前端学习：定位

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

2022-02-28 16:05:31 363

原创前端学习：浮动

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

2022-02-28 15:43:34 2361

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

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

2022-02-17 17:14:54 1004

原创前端学习：盒子模型

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

2022-02-17 16:57:15 3276

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

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

2022-02-17 16:31:48 389

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

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

2022-02-17 16:22:41 462

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

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

2022-02-16 17:05:20 787

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

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

2022-02-16 16:40:09 1057