css笔记
文章平均质量分 71
css笔记
岁月可贵
梦想很大,仍需努力
展开
-
【CSS 布局】水平垂直方向居中
【代码】【CSS 布局】水平垂直方向居中。原创 2023-08-09 19:33:13 · 933 阅读 · 4 评论 -
【CSS 弹性布局】色子案例
【代码】【CSS 弹性布局】色子案例。原创 2023-04-09 18:02:59 · 994 阅读 · 0 评论 -
HTML + CSS 实现动态立方体
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>.原创 2022-02-16 11:00:00 · 407 阅读 · 0 评论 -
html + css3 制作简易时钟
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>.原创 2022-02-15 19:44:24 · 534 阅读 · 0 评论 -
页面编程小技巧 —— 大屏图片自适应
一、问题引入最近在实习阶段,遇到了一个问题,主管安排我写一个页面(练习),其中有一个要求就是图片要求自适应,并且图片不能变形????给了我一张设计图纸,但由于不懂得设计图纸需要放大到100%后,才能对元素量大小????一开始有放大图片,但没有放大到100%,导致说页面完成后跟原稿相差很多????图片自适应,我用了一个很笨的方法(我所认为的),网上的方法是将图片套在一个标签里,并且图片宽高设置为100%????然后图片会跟着父标签的大小进行填充,但在实际操作并没法实现????(可能是哪里操作有问题,原创 2022-01-08 13:05:20 · 2941 阅读 · 5 评论 -
快速理解浮动对标准流的影响
一、浮动对标准流的影响<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>浮动和标准流</title> <style type="text/css"> .container{ width: 600px; height: 600px; border: 1px solid blue; } .item-1{原创 2020-10-24 16:28:26 · 476 阅读 · 1 评论 -
vertical-align的使用及解决图片底部默认空白缝隙问题和图像与文本垂直方向居中对齐
一、vertical-align的使用 经常用于设置图片或者表单【行内块级元素】和文字垂直对齐vertical-align属性值basesline:默认,元素放置在父元素的基线上top:把元素的顶端与行中最高元素的顶部对齐middle:把此元素放置在父元素的中部bottom:把元素的顶部与行中最低的元素的顶部对齐二、解决图片底部默认空白缝隙问题 &n原创 2020-10-26 11:36:59 · 734 阅读 · 0 评论 -
最快理解使用CSS弹性盒子
一、默认在这里插入代码片原创 2020-10-09 17:55:07 · 199 阅读 · 0 评论 -
CSS3最常用选择器总结笔记
一、基础选择器 1.1 继承 *(0000) css2 1.2 元素选择器(0001) css1 1.3 类选择器(0010) css1 1.4 ID选择器(0100) css1 &nbs原创 2020-10-27 13:57:17 · 280 阅读 · 0 评论 -
正常网页开发如何解除父容器中子容器的浮动问题
一、问题引入 我们在浏览购物网站时,会出现一种情况就是我们不断滚动浏览器,网站会不断加载出图片。 此时,我们就发现一个问题-------图片肯定是放在每一个小盒子上,所有小盒子又放在一个大盒子上,如果这些小盒子采用浮动的形式排列(这里不考虑弹性盒子可看另外一篇博客),大盒子的高度很明显是不方便给出来的,因为小盒子的个数是不确定的。&nbs原创 2020-10-24 17:38:57 · 333 阅读 · 1 评论 -
实现子元素在父元素中水平垂直都居中笔记
实现子元素在父元素中水平垂直都居中设置子元素绝对定位设置子元素的left值和top值为50%设置父元素相对定位设置子元素margin-left:负自身宽度一半设置子元素margin-top:负自身高度一半<style> //消除默认样式 *{margin: 0;padding: 0;} .father{ width: 500px; height: 500px; background: pink; margin: 1原创 2020-12-23 15:11:13 · 92 阅读 · 0 评论 -
解决嵌套块级元素垂直外边距的塌陷
问题引入此时,要实现的内容是在一个盒子里面在嵌套一个盒子并且距离外层盒子的上边距为100px;<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>嵌套块级元素垂直外边距的塌陷</title> <style type="text/css"> .box{ width: 300px; height: 300px;原创 2020-10-24 16:09:01 · 355 阅读 · 0 评论 -
全网最全实现元素(盒子、图片)水平垂直方向居中
一、布局样式盒子<style> .son { width: 100px; height: 100px; background: red; } </style> <div class="box"> <div class="son"></div> </div>图片<style> img { height: 300px; }</style&g原创 2021-07-19 19:43:08 · 231 阅读 · 0 评论 -
CSS五种定位(相对定位、绝对定位、固定定位、static定位、sticky 定位)模式学习笔记
一、static定位没有定位,遵循正常的文档流对象,不会受到 top, bottom, left, right影响。.static { position: static;/*默认*/ width: 100px; height: 100px; border: 3px solid #73AD21; }二、相对定位相对该元素原本文档流的位置进行定位,且原本的位置保留。<!DOCTYPE html><html> <hea原创 2020-09-29 13:41:32 · 1597 阅读 · 0 评论 -
单行和多行文字溢出省略号显示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>单行和多行文字溢出省略号显示</title> <style type="text/css"> .container1{ width: 150px; height: 80px; background-color: #f5f5f5; margin: 2px a原创 2020-10-26 11:40:19 · 269 阅读 · 1 评论 -
CSS部分样式补充
1、text-align(控制文本的对齐方式)text-align: justify;可以让除最后一行之外的文字两端对齐,即每行的左右两端都紧贴行的边缘。text-align: center;可以让文本居中对齐。text-align: right;可以让文本右对齐。text-align: left;是text-align的默认值,它可以让文本左对齐。2、strong标签(加粗文本)<strong>清华大学</strong>3、u 标签(给文本添加下原创 2020-11-19 11:15:44 · 143 阅读 · 2 评论 -
css笔记
传送门一、CSS 介绍CSS 的全称是 Cascading Style Sheet(层叠样式表),它主要用来控制网页的样式(美化网页)。CSS 早已被所有主流浏览器采用,它允许你轻松控制以下样式:颜色 color背景 background字体 font位置 position显示 display边框 border内边距 padding外边距 margin行高 line-height装饰 text-decoration过渡 transtion变化 transform动画 an原创 2021-07-25 11:50:51 · 2476 阅读 · 0 评论