![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Css
野生松
笨鸟要用力飞
展开
-
【Css 基础】-- 块元素和行内元素、行内块元素
1、块元素display:block常见的块元素有哪些:<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中 <div> 标签是最典型的块元素特点:自己独占一行 高度,宽度、外边距以及内边距都可以控制。 宽度默认是容器(父级宽度)的 100% 是一个容器及盒子,里面可以放行内或者块级元素2、行内元素display:inline常见的行内元素有哪些:原创 2022-05-19 21:14:32 · 3893 阅读 · 0 评论 -
opacity: 0、 visibility: hidden、display: none 对比记录
简单记录:display:none:会让元素完全从渲染树中消失,渲染的时候不占据任何空间, 不能点击。更改时会触发回流,性能消耗大不可继承,影响子元素visibility: hidden:不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,不能点击 更改时会触发重绘,性能消耗小可继承,不影响子元素opacity: 0:不会让元素从渲染树消失,渲染元素继续占据空间,只是内容不可见,可以点击更改时会触发重绘,性能消耗小不可继承,影响子元素...原创 2020-11-17 22:07:09 · 145 阅读 · 0 评论 -
CSS实现滚动条样式
默认情况下这样:改完之后是这样:CSS如下: .left_tree { max-height: calc(100vh - 150px); overflow-y: scroll; /*定义滚动条高宽及背景*/ &::-webkit-scrollbar { width: 4px; } /*定义滚动条*/ &::-webkit-scrollbar-thumb { border-radius: 10px;原创 2020-10-24 20:11:35 · 474 阅读 · 0 评论 -
Css 问题记录
1、lii与li之间存在空白间隔原因:行框的排列会受到中间空白(回车空格)等的影响,因为空格也属于字符,这些空白也会被应用样式,占据空间,所以会有间隔。解决方法: 可以将<li>代码全部写在一排 浮动li中float:left 在ul中用font-size:0;可以使用letter-space:-3px ...原创 2020-10-20 11:23:44 · 138 阅读 · 0 评论 -
深入学习BFC(块级格式化上下文)
一、什么时BFCBFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用,并且与这个区域外部毫不相干。二、BFC生成根元素 浮动元素 (元素的 float 不是 none) 绝对定位元素 (元素具有 position 为 absolute 或 fixed) 内联块...原创 2020-03-16 22:01:08 · 82 阅读 · 0 评论 -
移动端开发时使用到的css单位
常用:(px除外)em:定义字体大小时以父级的字体大小为基准;定义长度单位时以当前字体大小为基准。例父级font-size: 14px,则子级font-size: 1em;为font-size: 14px;;若定义长度时,子级的字体大小如果为14px,则子级width: 2em;为width: 24px。 rem:以根元素的字体大小为基准。例如html的font-size: 14px,则子级1rem = 14px。 %:以父级的宽度为基准。例父级width: 200px,则子级width: 50%;原创 2020-05-21 21:21:41 · 652 阅读 · 0 评论 -
CSS画圆半圆扇形三角梯形
直接上代码:div{ margin: 50px; width: 100px; height: 100px; background: red;}/* 半圆 */.half-circle{ height: 50px; border-radius: 50px 50px 0 0;}/* 扇形 */.sector{ border-radius: 100px 0 0;}/* 三角 */.triangle{ width: 0px;原创 2020-05-08 20:14:31 · 374 阅读 · 0 评论 -
CSS三栏布局问题
纪录多种实现CSS三栏布局的方法(左右固定宽度 中间自适应)圣杯布局 左右两侧浮动,中间元素使用margin <div class="container"> <div class="left">Left</div> <!-- 右栏部分要写在中间内容之前。因为如果右侧元素在中间元素后面,由于浮动元素位置上不能高于(或平级)前...原创 2020-05-07 21:40:10 · 247 阅读 · 0 评论 -
伪类与伪元素的区别
伪类伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。获取不存在与DOM树中的信息。比如a标签的:link、visited等,这些信息不存在与DOM树结构中,只能通过CSS选择器来获取; 获取不能被常规CSS选择器获取的信息。比如:要获取第一个子元素,我们无法用常规的CSS选择器获取,但可以通过 :first-child 来获取到。...原创 2020-04-15 22:05:31 · 184 阅读 · 0 评论 -
CSS水平居中、垂直居中
div水平居中// 行内元素.parent { text-align: center;}// 块级元素.son { margin: 0 auto;}// flex布局.parent { display: flex; justify-content: center;}// 绝对定位.son { position: absolute;...原创 2020-04-15 21:22:14 · 77 阅读 · 0 评论 -
彻底搞懂CSS层叠顺序、z-index
一、什么是“层叠顺序”“层叠顺序”(stacking order)表示元素发生层叠时按照特定的顺序规则在Z轴上垂直显示。在不考虑CSS3的情况下,当元素发生层叠时,层叠顺讯遵循上面途中的规则。 这里值得注意的是:左上角"层叠上下文background/border"指的是层叠上下文元素的背景和边框。 inline/inline-block元素的层叠顺序要高于block(块...原创 2020-02-10 19:41:10 · 1206 阅读 · 0 评论 -
Css样式权重
一、Css样式权重!important,权重最大为10000 内联样式,权重为1000 ID选择器,权重为100 类选择器、属性选择器、伪类选择器(:hover),权重为10 标签选择器、伪元素选择器(:nth-of-type()),权重为1 通用选择器(*)、子选择器(>)、相邻选择器(+)、同胞选择器(~)、权重值为0...原创 2020-03-02 09:36:08 · 432 阅读 · 0 评论