随笔分类 - HTML和CSS
摘要：W3C中伪类和伪元素的官方定义文档： In CSS 2, style is normally attached to an element based on its position in the document tree. This simple model is sufficient for
阅读全文
摘要：绝对行为元素是以相对定位元素的border内边缘为基准进行定位的。
阅读全文
摘要：当元素内容区域大于容器区域，就会出现溢出现象。通常这种溢出并非是原本页面设计的排版效果，需要进行代码优化。通过对容器设置滚动条就是最常见的处理方式。 复合属性语法： overflow:scroll;//=>水平、垂直方向均添加滚动条 单一属性： overflow-x:scroll;//=>水平方向添
阅读全文
摘要：行内元素 display属性为inline的元素为行内元素。行内元素只占它对应标签的边框所包含的空间。 格式：默认情况下，行内元素不会以新行开始，而块级元素会新起一行。 内容：一般情况下，行内元素只能包含数据和其他行内元素。 默认状态下为行内元素的元素： b, big, i, small, tt a
阅读全文
摘要：绝对定位元素若无已定位的祖先元素，它是相对于什么进行定位的? 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。 在CSS中，有事一个元素的位置和尺寸的计算都相对于一个矩形，这个矩形被称作包含块。包含块是一个相对的概念，比如子元素的初始化布
阅读全文
摘要：transition属性可直译为“过渡”，主要用于检索或设置对象变换的过渡。 语法： transition:property duration [timing-function] [delay]; timing-function可以省略，其默认值为ease; delay可以省略，其默认值为0; tr
阅读全文
摘要：在《JS模拟百度分享侧边栏效果》一文中对于Div区块的运动通过JS实现了鼠标移入滑出显示，鼠标移出滑入隐藏的效果。其实在CSS3中通过transition属性就可以较为轻松实现。 参考代码：
阅读全文
摘要：html的height:100%;高度是多少 html设置height:100%;表示一屏高度，类似于100vh。未设置则根据子元素的高度来自适应高。在实际应用中，设置页面高度为1屏幕高度通常设置： 可以通过案例设置来查看html的实际高度。通过案例中改变窗口的高度大小，可以发现html的高度也是在
阅读全文
摘要：通常在设置绝对定位元素相对于其定位的祖先元素水平垂直居中时，通过绝对定位元素设置margin:auto; top:0; bottom:0; right:0; left:0;就可以实现。下面简单探索一下绝对定位元素这么设置就可以实现水平居中和垂直居中的原理。 核心CSS代码： 绝对定位元素的布局由元素
阅读全文
摘要：(1)对于a标签可以通过name属性定义锚的位置 (2)对于其他标签可以通过id属性定义锚的位置 a标签创建锚连接基本格式： id属性创建锚连接基本格式： 锚链接的使用示例：
阅读全文
摘要：1、采用英文字母、数字以及“-”和“_”命名。 2、以小写字母开头，不能以数字和“-”、“_”开头。 3、命名形式：单字，连字符，下划线和驼峰。 4、使用有意义命名。 其中(3)、(4)条规定主要是便于编程者“望文生义”，快速通过class名称了解该定位元素的位置和作用。这点对于对于合作编程的项目以
阅读全文
摘要：justify-content 用于设置或检索弹性盒子元素在主轴方向上的对齐方式。 属性值：flex-start 属性值：flex-end 属性值：center 属性值：space-between 属性值：space-around 通过具体代码示例各个属性值的效果。 HTML结构 CSS样式： 属性
阅读全文
摘要：慕课网5-2编程练习：flex布局制作卡片布局案例 小伙伴们，学习了卡片布局，接下来我们根据效果图，也写出一个卡片布局的页面吧! 效果图如下： 任务 1、主体内容的卡片一行只能显示两个。 2、卡片与卡片之间的距离相等，行与行之间的距离也相等。 3、卡片的主体内容居中显示。 4、当鼠标放在按钮上时，按
阅读全文
摘要：2-5编程练习 我们刚学习了通过媒体查询进行响应式布局，接下来我们来实现图片在显示器大小变化时，布局由4列变3列变2列变1列的响应式效果吧。 要求： (1)显示器宽度大于960px时，图片呈一行4列布局; (2)宽度小于960px大于780px时，呈一行3列布局; (3)宽度小于780px大于440
阅读全文
摘要：在flex弹性盒模型中align-content属性控制容器内多行在交叉轴上的排列方式 默认值：stretch 可用值： 属性值：flex-start 属性值：flex-end 属性值：center 属性值：stretch (默认值) 属性值：space-between 属性值：space-arou
阅读全文
摘要：2-3编程练习 我们刚学习过了媒体查询的用法，接下来我们事先一个小的响应式效果吧。（建议到本地践行测试哦） 要求： （1）浏览器窗口宽度大于1100px时，文字颜色为红色； （2）小于1100px大于960px时，文字颜色为橙色； （3）小于960px大于800px时，文字颜色为黄色； （4）小于8
阅读全文
摘要：在VS code编辑器中，“1”（阿拉伯数字1）和“l”（字母L的小写）仅凭肉眼几乎无法区别开来。测试图片不显示，而且控制台提示图片资源不存在，当时怎么看都没有代码逻辑或语法错误。代码一点点对比，在纯文本中才能发现一些显示上的区别。这真是一个不大不小的坑。 还有类似的坑，搜狗输入法状态下的“丨”（竖
阅读全文
摘要：小伙伴们，伸缩容器的属性我们已经学完了，接下来使用我们所学的伸缩容器属性完成下面的效果图。 要求： 1、logo、导航项、登录注册按钮这三项在水平和垂直方向上都对齐，而且他们之间的距离也相等。 2、导航项各项之间的距离也是一样的。 3、登录、注册按钮之间的距离也是一样的。 慕课网logo图： 效果图
阅读全文
摘要：小伙伴们，我们学习了伸缩容器的一些属性，接下来使用我们所学的伸缩容器属性完成下面的效果图。 完成效果： 任务 1、先将容器设置为伸缩容器 2、在垂直方向上对齐，行与行之间的空白距离一样 3、在水平方向上对齐，第一个和最后一个项目位于容器的最左边和最右边 参考代码：
阅读全文
浙公网安备 33010602011771号