CSS
文章平均质量分 89
一起来看烟花吧
这个作者很懒,什么都没留下…
展开
-
[CSS] vertical-align属性的不同效果
line-boxes模型参考:张鑫旭博客行内级元素(包括display属性为inline和inline-block的元素)会相互挨着排成行。如果一行排不下,就会在下方再建一行。每一行的内容都会被装在一个**行盒子(line-boxes)**中,内容的高度不同,行盒子的高度也不同。在行盒子内部,可以通过vertical-align来对齐个别元素。line-boxes行盒子(line boxes): 概念如上所示。行盒子的高度是该行内各个元素在垂直方向上对齐完之后撑开的最大高度。行内盒子(inlin原创 2022-04-28 22:23:15 · 576 阅读 · 0 评论 -
[CSS] CSS元素定位
元素定位定位就是将指定元素放到页面的任意位置。通过定位可以任意摆放元素,比浮动强大。可以通过position来设置。可以通过position来设置可选值static默认值,元素没有开启定位ralative开启元素相对定位absolute开启元素绝对定位fixed开启元素固定地位(固定定位也是绝对定位的一种)relative通过position: relative;开启相对定位开启后,可以通过left,right,top,bottom来设置元素的偏移量,left表示元素相对于其定位位置的原创 2022-04-14 17:39:42 · 4099 阅读 · 0 评论 -
[JavaScript] 轮播图 利用原生js的setTimeout结合CSS3的过渡transition实现轮播图的无缝滚动
效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .content { width: 4原创 2021-07-26 23:24:58 · 1337 阅读 · 7 评论 -
[CSS] 同一个BFC下的垂直相邻外边距的重叠问题及其解决方案
目录标题同一个BFC下的垂直相邻外边距会发生重叠重叠情况举例兄弟元素之间的垂直方向的相邻外边距重叠父子元素之间的垂直方向的相邻外边距重叠解决外边距重叠问题父子元素之间的垂直方向的相邻外边距重叠兄弟元素之间的垂直方向的相邻外边距重叠设计一个css类可以同时解决高度塌陷(子元素浮动导致)和父子元素垂直相邻外边距重叠问题同一个BFC下的垂直相邻外边距会发生重叠相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的垂直外边距 相邻时, 它们将形成一个外边距。这个外边距的高度等于两个发生折叠的外边距的高度中的较大者。原创 2021-04-18 22:24:37 · 721 阅读 · 0 评论 -
[CSS] 什么是元素的BFC属性,如何应用BFC的特性
目录标题什么是BFC如何开启元素的BFC属性BFC的特性和应用同一个BFC下的垂直相邻外边距会发生重叠通过开启BFC可以避免垂直外边距的重叠的问题开启了BFC的元素可以包含浮动的元素开启BFC的元素不会被浮动的元素覆盖什么是BFC根据w3c的标准,在页面中元素都含有一个隐含的属性叫做Block Formatting Context,简称BFC,该属性可以设置打开或者关闭。默认是关闭。Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区原创 2021-04-18 21:52:31 · 687 阅读 · 0 评论 -
CSS伪元素 利用伪元素为input输入框添加图标 伪元素before的垂直居中
目录标题伪类和伪元素封装一个有前缀和后缀的input输入框总结参考伪类和伪元素伪类专门用来表示元素的一种特殊的状态。比如:访问过的链接,普通的链接,获取焦点文本框伪元素表示元素中的一些特殊的位置。比如::before表示元素最前面的部分CSS中,::before 创建一个伪元素,其将成为匹配选中的元素的第一个子元素。常通过 content属性来为一个元素添加修饰性的内容。此元素默认为行内元素。在CSS3中,通过::创建伪元素,通过:选中伪类。浏览器也接收将::before写做:before封原创 2021-01-29 21:27:35 · 7905 阅读 · 0 评论 -
[CSS] CSS包含块 包含块是如何影响元素的margin padding width height百分比属性值的设置的
这里写目录标题CSS样式中的包含块确定一个元素的包含块position属性确定包含块包含块的影响举例非绝对定位元素的包含块例1-1:包含块例1-2:包含块没有设置宽度例1-3:包含块没有设置高度例1-4:包含块没有设置高度但被子元素撑高例1-5:包含块必然是块元素绝对定位元素(absolute)的包含块例2-1:absolute定位的元素的包含块例2-2:absolute定位元素的包含块例2-3:包含块没有设置宽度例2-4:包含块没有设置高度例2-5:包含块没有设置高度例2-6:包含块没有设置高度但被子元素原创 2021-01-29 21:17:09 · 415 阅读 · 0 评论 -
css水平居中方案 垂直居中方案 块级/内联元素居中方案
水平居中对于块级元素⭐可以设置左右margin为auto<style>.outer { height: 100px; background-color: yellowgreen;}.inner { width: 100px; height: 50px; margin-left: auto;/**/ margin-right: auto;/**/ background-color: red;}</style><原创 2020-11-14 11:24:13 · 226 阅读 · 0 评论 -
DOM元素尺寸位置计算总结clientWidth&offsetWidth&offsetParent&offsetLeft&scrollWidth&scrollLeft
CSS盒模型CSS中的 box-sizing 属性定义了浏览器应该如何计算一个元素的总宽度和总高度。链接:https://blog.csdn.net/chenjie9230/article/details/108718480content-box:包括内容区padding-box:包括内容区+内边距border-box:包括内容区+内边距+边框浏览器内核浏览器内核Google ChromeWebkit 俗称为Chromium内核或Chrome内核Internet E原创 2020-09-23 21:18:39 · 741 阅读 · 0 评论 -
[CSS] 什么是CSS盒模型 块级盒子和内联盒子的区别
文章目录什么是盒子模型盒子的四个组成部分内容区边框内边距注意:当元素的宽度的值被设置为auto时外边距⭐垂直外边距的重叠问题例1例2例3例4例5⭐解决父子元素的外边距重叠问题块级盒子和内联盒子的行为表现区别外部显示类型和内部显示类型内联元素变块元素display属性什么是CSS 盒模型盒模型的各个部分标准盒模型css还有一个替代盒模型(IE盒模型)。参考什么是盒子模型CSS处理网页时,它认为每个元素都包含在个不可见的盒子里。为什么要想象成盒子呢?因为如果把所有的元素都想象成盒子,那么我们对网页的布局就相原创 2020-09-21 20:44:55 · 1520 阅读 · 2 评论