2021 年 12月随笔档案 - 叮当2000

CSS3学习笔记（十五、字体-续二）

摘要：9.9文本的水平对齐和垂直对齐：text-align、vertical-align 1）水平对齐：text-align 可选值：（1）left：左对齐，默认值（2）right：右对齐（3）center：居中对齐（4）justify：两端对齐 2）垂直对齐：vertical-align 子元素阅读全文

posted @ 2021-12-15 10:51 叮当2000 阅读(77) 评论(0) 推荐(0)

CSS3学习笔记（十四、字体-续一）

摘要：9.5图标字体：阿里iconfont 官网：https://www.iconfont.cn/ 1）登录 2）选择图标库 3）选图标，并加入购物车。可以多选一些 4）打开购物车，将所选图标加入项目。如果没有项目，可以新建项目。 5）下载，得到压缩文件download.zip 6）解压缩，文件demo_ 阅读全文

posted @ 2021-12-15 10:32 叮当2000 阅读(59) 评论(0) 推荐(0)

CSS3学习笔记（十三、字体）

摘要：9字体 9.1字体相关样式 1）color：用来设置前景色，包括字体颜色、边框等。 2）font-size：设置字体大小。 font-size的单位：（1）px：像素（2）em：相当于当前元素的1个font-size （3）rem：相当于根元素的1个font-size 3）font-family 阅读全文

posted @ 2021-12-15 10:22 叮当2000 阅读(277) 评论(0) 推荐(0)

CSS3学习笔记（十二、定位：position用于细节调整-续）

摘要：8.5固定定位：fixed 当position属性设置为fixed时，就开启了元素的固定定位。固定定位的特点：（1）固定定位也是一种绝对定位，所以固定定位的大部分特点和绝对定位一样。也会改变元素的性质，提升元素层级等等。（2）唯一不同的是，固定定位永远参照于浏览器的视口进行定位。固定定位的阅读全文

posted @ 2021-12-15 09:58 叮当2000 阅读(151) 评论(0) 推荐(0)

CSS3学习笔记（十一、定位：position用于细节调整）

摘要：8定位：position用于细节调整 8.1定位（position）简介 1）需求：将下图中box2移动到box1右侧，box1和box3位置保持不变。通过设置box2和box3的外边距，可以实现上述需求。下面的代码中为了移动了box2，修改了box2和box3的样式。使用外边距进行布局，比较阅读全文

posted @ 2021-12-15 09:49 叮当2000 阅读(164) 评论(0) 推荐(0)

CSS3学习笔记（十、浮动：float用于宏观布局-续二）

摘要：7.7clear：清除浮动元素的影响 1）clear作用：清除浮动元素对当前元素产生的影响如果不希望某个元素因为其它元素浮动的影响而改变位置，可以使用clear属性来清除影响。 clear清除box1浮动对box3的影响。 2）clear的可选值：（1）left：清除左侧浮动元素对当前元素产生的阅读全文

posted @ 2021-12-15 09:33 叮当2000 阅读(53) 评论(0) 推荐(0)

CSS3学习笔记（九、浮动：float用于宏观布局-续一）

摘要：7.4页面简单布局 1）实现纵向排列布局 2）main模块中增加3个水平排列的模块 7.5高度塌陷父元素的高度默认是被子元素撑开的。当子元素浮动后，完全脱离文档流。子元素从文档流中脱离将无法撑起父元素的高度，导致父元素高度丢失。父元素高度丢失后，其下的元素会自动上移，导致页面布局混乱。浮动前阅读全文

posted @ 2021-12-15 09:17 叮当2000 阅读(46) 评论(0) 推荐(0)

CSS3学习笔记（八、浮动：float用于宏观布局）

摘要：7浮动：float用于宏观布局 7.1浮动简介浮动可以使一个元素向其父元素的左侧或右侧移动。 1）使用float属性设置元素的浮动，可选值： none：默认值，元素不浮动 left：元素向左浮动 right：元素向右浮动 2）注意：（1）元素设置浮动以后，水平布局等式（7个值之和=行宽）不需要强阅读全文

posted @ 2021-12-15 08:58 叮当2000 阅读(207) 评论(0) 推荐(0)

CSS3学习笔记（七、布局 layout-续二）

摘要：6.3浏览器的默认样式 6.36.3.1浏览器的默认样式介绍 1）通常情况下，浏览器会为元素设置一些默认样式。 2）我们在浏览器的开发模式下，可以查看元素的默认样式：（1）body的默认样式（2）div元素没有默认样式（3）p标签的默认样式（4）ul标签的默认样式 6.3.2除浏览器的默认样阅读全文

posted @ 2021-12-14 15:07 叮当2000 阅读(53) 评论(0) 推荐(0)

CSS3学习笔记（六、布局 layout-续一）

摘要：6.2.7外边距的折叠相邻的垂直方向外边距会发生重叠现象。 1）兄弟元素间的相邻垂直外边距，取两者之间的较大值（两个外边距都是正的）。兄弟元素的外边距对开发有利，不需要处理。特殊情况：（1）相邻外边距一正一负，间距值取两者之和。（2）相邻外边距都是负值，间距值取绝对值大的。 2）父子元素间阅读全文

posted @ 2021-12-14 14:51 叮当2000 阅读(145) 评论(0) 推荐(0)

CSS3学习笔记（五、布局 layout）

摘要：6 布局（layout） 6.1文档流（normal flow） 1）概念网页是一个多层结构，一层压着一层。通过CSS可以为每一层来设置样式。用户只能看到最顶上一层。这些层中，最底下的一层称为文档流。文档流是网页的基础。我们所创建的元素默认都是在文档流中进行排列。 2）元素主要有两个状态：（1 阅读全文

posted @ 2021-12-14 14:33 叮当2000 阅读(464) 评论(0) 推荐(0)

CSS3学习笔记（四、CSS样式）

摘要：CSS样式 5.1样式的继承我们为一个元素设置的样式，也会应用到它的后代元素上。继承发生在祖先和后代之间。继承的设计是为了方便开发。并不是所有的样式都会被继承：背景相关的样式、布局相关的样式等不会被继承。如果可以继承背景，当祖先标签的背景是图片时，后代的背景下也是完整的图片。页面中会显示多阅读全文

posted @ 2021-12-14 14:00 叮当2000 阅读(115) 评论(0) 推荐(0)