css一些常见问题

已于 2022-04-03 20:22:14 修改
阅读量470 收藏 3
点赞数
文章标签： css
于 2022-03-23 21:58:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46239267/article/details/123684003
版权

用纯CSS创建一个三角形的原理是什么？

实际上border它不是由矩形，它是由三角形组合而成的

 .triangle {
        width: 50px;
        height: 50px;
        border: 50px solid;
        border-color: #f7c1c3 #f3c5b1 #bdbbde #8a8bd1;
      }
<!-- 三角形 -->
    <div class="triangle"></div>

可以看到它四边实际不是矩形
在这里插入图片描述
当我们将其height、width设置为0时

.triangle {
        width: 0;
        height: 0;
        border: 50px solid;
        border-color: #f7c1c3 #f3c5b1 #bdbbde #8a8bd1;
      }

在这里插入图片描述
实现三角形，只需要将其中三个边的颜色设置为transparent

布局和包含块

可见官网文档
一个元素的尺寸和位置经常受其包含块(containing block)的影响。
大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。
许多开发者认为一个元素的包含块就是他的父元素的内容区。但事实并非如此。
当浏览器展示一个文档的时候，对于每一个元素都产生一个盒子。每个盒子都被划分为四个区域：内容区、内边距区、边框区、外边距区
在这里插入图片描述
包含块的影响：
元素的尺寸和位置，常常会受到它的包含块所影响。
对于一些属性，例如width、height、padding、margin、绝对定位元素的偏移值（比如 position 被设置为 absolute 或 fixed），当我们对其赋予百分比值时，这些值的计算值，就是通过元素的包含块计算得来。

确定包含块：
依赖于这个元素的position属性：

  1. 如果position为static、relative、sticky，它的包含块可能是它最近的祖先块元素（比如说inline-block, block 或 list-item元素）的内容区的边缘组成
  2. position：absolute，包含块就是它最近的position值为fixed、absolute、relative或stick（static不是）的祖先元素的内边距区的边缘组成
  3. 如果 position 属性是 fixed，在连续媒体的情况下(continuous media)包含块是 viewport ,在分页媒体(paged media)下的情况下包含块是分页区域(page area)。
  4. 如果 position 属性是 absolute 或 fixed，包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的：
    transform 或 perspective 的值不是 none
    will-change 的值是 transform 或 perspective
    filter 的值不是 none 或 will-change 的值是 filter(只在 Firefox 下生效).
    contain 的值是 paint (例如: contain: paint;)

根据包含块计算百分值：
如上所述，如果某些属性被赋予一个百分值的话，它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性：

  1. 要计算 height top 及 bottom 中的百分值，是通过包含块的 height 的值。如果包含块的 height 值会根据它的内容变化，而且包含块的 position 属性的值被赋予 relative 或 static ，那么，这些值的计算值为 auto。
  2. 要计算 width, left, right, padding, margin 这些属性由包含块的 width 属性的值来计算它的百分值。

例子：
接下来的示例，都使用如下 HTML 代码:

<body>
  <section>
    <p>This is a paragraph!</p>
  </section>
</body>

下面的示例，只有 CSS 不同。
Example 1：
这个示例中，P 标签设置为静态（static）定位，所以它的包含块为

，因为距离最近的父节点即是她的包含块。 

body {
  background: beige;
}

section {
  display: block;
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  width: 50%;   /* == 400px * .5 = 200px */
  height: 25%;  /* == 160px * .25 = 40px */
  margin: 5%;   /* == 400px * .05 = 20px */
  padding: 5%;  /* == 400px * .05 = 20px */
  background: cyan;
}

在这里插入图片描述
Example 2：
在这个示例中，P 标签的包含块为 元素，因为

不再是一个块容器，所以并没有形成一个格式上下文。 

body {
  background: beige;
}

section {
  display: inline;
  background: lightgray;
}

p {
  width: 50%;     /* == half the body's width */
  height: 200px;  /* Note: a percentage would be 0 */
  background: cyan;
}

在这里插入图片描述
Example 3：
这个示例中，P 元素的包含块是

，因为
的 position 为 absolute 。P 元素的百分值会受其包含块的 padding 所影响。不过，如果包含块的 box-sizing 值设置为 border-box ，就没有这个问题。 

body {
  background: beige;
}

section {
  position: absolute;
  left: 30px;
  top: 30px;
  width: 400px;
  height: 160px;
  padding: 30px 20px;
  background: lightgray;
}

p {
  position: absolute;
  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
  background: cyan;
}

在这里插入图片描述
Example 4：
这个示例中，P 元素的 position 为 fixed，所以它的包含块就是初始包含块（在屏幕上，也就是 viewport）。这样的话，P 元素的尺寸大小，将会随着浏览器窗框大小的变化，而变化。

body {
  background: beige;
}

section {
  width: 400px;
  height: 480px;
  margin: 30px;
  padding: 15px;
  background: lightgray;
}

p {
  position: fixed;
  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
  background: cyan;
}

在这里插入图片描述

Example 5：
这个示例中，P 元素的 position 为 absolute，所以它的包含块是

，也就是距离它最近的一个 transform 值不为 none 的父元素。 

body {
  background: beige;
}

section {
  transform: rotate(0deg);
  width: 400px;
  height: 160px;
  background: lightgray;
}

p {
  position: absolute;
  left: 80px;
  top: 30px;
  width: 50%;   /* == 200px */
  height: 25%;  /* == 40px */
  margin: 5%;   /* == 20px */
  padding: 5%;  /* == 20px */
  background: cyan;
}

在这里插入图片描述

flexbox弹性布局

详情可查看该博客

水平垂直居中

水平垂直分为内联元素和块级元素的居中。
最简单是的flex布局，但要注意浏览器兼容性问题
**内联元素：**使用text-align: center;和line-height解决；text-align的用法解释：设置块级元素内文本（准确的说是内联元素）的水平对齐方式。因此要设置在父级元素上
块级元素：

  1. 宽高固定（只能水平居中）：使用margin：0 auto可解决
  2. 使用固定定位（水平垂直）：left:50%; top；50%，将子元素定位到父元素1/2宽高的位置
    宽高固定：margin-left:-1/2 margin-top:-1/2自身宽高 将子元素向左移动自身宽高度的一半
    当宽高不固定：transform:translateX(-50%)；transform:translateY(-50%)
  3. flexbox布局：

接下来的实例都用该html代码：

<div class="parent">
   <div class="children"></div>
</div>

 /* 使用固定定位 */
      .parent {
        width: 200px;
        height: 200px;
        background-color: tomato;
        position: relative;
      }
      .children {
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%;
        //也可以设置margin-left和margin-top，但是要自己计算
        transform: translateX(-50%) translateY(-50%);
        background-color: pink;
        position: absolute;
      }

flex布局的垂直居中：

 .parent {
        width: 100px;
        height: 100px;
        background-color: tomato;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .children {
        width: 50px;
        height: 50px;
        background-color: pink;
      }

在这里插入图片描述

盒子模型

有两种盒子，分为W3C标准盒子模型和怪异盒子（IE盒子模型）
在这里插入图片描述
标准模式下：
一个块的宽度=width+padding+border+margin
W3C模型中：
　　　　　　CSS中的宽（width）=内容（content）的宽
　　　　　　CSS中的高（height）=内容（content）的高

怪异盒：
一个块的宽度=width+margin
其中width包含content、padding、border
怪异盒中：
　　　　　　CSS中的宽（width）=内容（content）的宽+（border+padding）*2
　　　　　　CSS中的高（height）=内容（content）的高+（border+padding）*2
采用css3的box-sizing可以切换盒模型标准
box-sizing:content-box||border-box||inherit
box-sizing:content-box; 将采用标准模式的盒子模型标准（默认）
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。

样式与选择器

1.初始化css样式

因为浏览器的兼容性问题，不同浏览器对有些标签的默认值不同，如果没有对css初始化往往会造成浏览器页面显示差异。

2.css预处理器

用的最多的：Less、Scss、Stylus
CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

3.css优先级算法计算

优先级关系：!important > style > id > class、属性、伪类 > 元素、伪元素

  • !important声明的样式优先级最高，如果冲突再进行计算。
  • 如果优先级相同，则选择最后出现的样式。
  • 继承得到的样式的优先级最低。
    https://img2020.cnblogs.com/blog/1019981/202004/1019981-20200415210400571-750637811.png
    权重计算：
    在这里插入图片描述

4. css选择器

CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=“external”]）、伪类选择器（a:hover, li:nth-child）

5.可以继承的css属性

  • 可继承的属性：visibility、color、cursor、zoom、direction（特殊：< a >标签的字体颜色不能被继承）
  • 字体全部都可以继承：font、font-style、font-variant、font-weight、font-size、font-family、font-stretch
  • 文本除了vertical-align，其它都可继承：text-align、text-justify、text-indent、line-height、word-wrap等等
  • 文本装饰：text-underline-position、text-shadow
  • li相关：list-style、list-style-image、list-style-position、list-style-type
  • 不可继承的样式：定位、布局、尺寸、内边距、外边距、背景、边框相关等等

6.伪元素和伪类

伪元素： （创建对象，添加一个元素对象，这个元素对象不会占用dom元素节点）用于创建一些不在文档树中的元素，并为其添加样式。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中。比如说，我们可以通过:before来在一个元素前增加一些文本，并为这些文本添加样式。
在这里插入图片描述

伪类： （基于Dom,不创建任何元素，添加了一个类对元素进行修饰）用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7.浏览器是怎么样解析css选择器的

浏览器在碰到HTML中指向CSS文件的链接时，会获取并解析CSS文件。CSS文件会被浏览器转为CSS对象模型。不仅是外部CSS，内部style元素或行内style属性中的CSS也会被解析并添加到这个对象模型中。这个对象模型是一个树形结构，包含页面中样式的层次结构。

每个CSS选择符都会匹配一个DOM节点，然后浏览器会基于层叠、继承和特殊性来计算每个DOM节点的最终样式。
在这里插入图片描述

CSS3

CSS3新增伪类有那些?

  • p:first-of-type 选择属于其父元素的第一个出现的p
  • p:last-of-type 选择属于其父元素最后一个出现的p
  • p:only-of-type 选择属于其父元素唯一的p元素
  • p:only-child 选择属于其父元素的唯一子元素（没有任何兄弟元素的p元素）
  • p:nth-child(2) 选择属于其父元素的第二个子元素
  • :enabled :disabled 表单控件的禁用状态。
  • :checked 单选框或复选框被选中。

CSS3有哪些新特性

下面列出容易记的几个

  • 媒体查询（@media (min-width:600px)）
  • 嵌入web字体（@font-face）
  • 过渡（transition）与动画（animation）
  • 【阴影】box-shadow
  • 【边框】创建圆角（border-radius）、边框图片（border-image）
  • 【背景】背景图片尺寸（background-size）、背景图片定位（background-origin）、背景裁剪（background-clip）、多重背景（background-image:url(1.jpg),url(2.jpg);）
  • 【文字】允许长单词换行（word-wrap:break-word）、文字阴影（text-shadow）
  • 【颜色】rgba和透明度opacity
  • 【渐变】线性渐变（gradient）
  • 【布局】flex、grid、多栏布局
  • 【盒模型】box-sizing

BFC

详细内容可以查看该博客

对BFC规范(块级格式化上下文：block formatting context)的理解？
BFC指的是块级格式化上下文，简单的来说，BFC就是创建一个div盒子或者给已存在的盒子激活BFC，盒子内部的元素布局不影响盒子外部的元素。也就是所谓的相互隔绝，互不影响。
常见的创建BFC方式：
float：none以外的属性值。如：left 、 right
overflow：visible以外的属性值。如：hidden、auto 、 scroll
position属性值为：absolute、fixed（只有这两个可以）
dispaly属性值为：inline-block、 flex、 inline-flex、 table-cell、 table-caption 反正block不行就是了
BFC应用：
解决margin重叠
解决使用float时浮动元素和非浮动元素重叠（也是一种清除浮动的方法啦）
解决使用float时容器高度塌陷

网页中应该使用奇数还是偶数字体？

偶数：

  • 相对来说偶数字号比较容易和页面中其他部分的字号构成一个比例关系。
  • 低版本的浏览器ie6会把奇数字体强制转化为偶数，即15px渲染为16px。

常见的兼容性问题

  • 不同浏览器的标签默认的margin和padding不一样。
    *{margin:0;padding:0;}
  • 表单元素行高不一致
  • 给表单元素添加 vertical-align:middle
  • Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示
    针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放。经测试，发现对内联元素无效
  • 图片添加超链接，在IE10及以下版本中会有蓝色的边框：img{border}

display与visibility

display有哪些值？说明他们的作用?
none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间。
inline：指定对象为内联元素。
inline-block：指定对象为内联块元素。
block：指定对象为块级元素。
flex：指定对象为弹性盒。
区别：
一、display：none

  1. 不会为隐藏的元素保留空间
  2. 该元素以及其所有的后代都会继承该属性，并且给后代设置非none没用
  3. 在回流和重绘中，元素隐藏后脱离文档流，会引起回流（优化：建议用visibility:hidden替换display:none）

二、visibility：hidden；
4. 只是将对象隐藏起来，它在文档中的位置还是保留
5. 子元素会继承，但是子元素重新设置值，可以显示
6. 隐藏后还占用空间，只会引起重绘，不会导致回流

inline、block、inline-block区别

inline特点：

  1. 内联元素会在水平排列，直到一行排不下才会换行。
  2. 内联元素设置高、宽、margin、padding的上下无效（竖直无效）
  3. 内联元素设置line-height、margin左右、padding左右有效（水平有效）
  4. 内联元素的宽高被内容撑开

常见的元素： span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））

block特点：

  • 独占一行，默认情况下其宽度==父元素宽度
  • 可以设置width、height，margin、padding但仍然独占一行

常见的block： div、p、h1…h6、ol、ul、dl、table、address、blockquote、form

inline-block 特点：

  • 可以看成是结合了inline和block两者，可以设置width、height，margin、padding，也不会独占一行
  • 显示间隙？ 同行显示的inline-block元素中间会有间隙（换行符、空格间隙问题）
  • 如何解决8？在下一个问题

常见的inline-block： img、input

为什么inline-block之间有空间间隙

浏览器的默认行为是把inline-block元素间的空白间隙（空格换行tab）渲染成一个空格
例如也就是

  • 换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。
    方法一：既然是因为
  • 换行导致的，那就可以将
  • 代码全部写在一排（但是可读性不高）。
    方法二：既然是空格占一个字符的宽度，那我们索性就将
    • 内的字符尺寸直接设为0， ul{font-size:0px;}。
      方法三：消除ul中的间隔 ul{letter-spacing: -5px;}，恢复li中的间隔 ul li{letter-spacing: normal;}。
      方法四：使用浮动。
      在这里插入图片描述 

  •     <style>
      .box {
      //加在父元素身上
        letter-spacing: -5px;
      }
      img {
        width: 200px;
        height: 200px;
        letter-spacing: normal;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="xxx" alt="" srcset="" />
      <img src="xxx" alt="" srcset="" />
      <img src="xxx" alt="" srcset="" />
    </div>
  </body>

    在这里插入图片描述

    浮动

    • 浮动盒子会脱离文文档流，不会再占用空间。
      在这里插入图片描述

    • 非浮动元素几乎当浮动盒子根本不存在一样该怎么布局怎么布局不会被影响

    • 非浮动元素中的文本内容会记住浮动元素的大小，并在排布时避开它,为其留出响应的空间
      在这里插入图片描述

    如何清楚浮动：
    清除浮动的两大方式：
    在这里插入图片描述
    div2浮动后div1高度塌陷了
    解决方法：

    1. 在浮动元素后创建一个块级元素，这个块级元素会clear:both清除浮动
      在这里插入图片描述
      <style type="text/css">
      .div1 {
        width: 200px;
        border: 1px solid black;
        background-color: pink;
      }
      .div2 {
        width: 50px;
        height: 50px;
        background-color: rgb(243, 243, 85);
        float: left;
      }
      .clear {
        clear: both;
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <div class="div2">div2</div>
      <div class="clear"></div>
    </div>
  </body>
    1. 创建一个伪类元素（相当于方法1，只是使用伪类来创建块级元素并清除浮动）
    /* 创建一个伪元素，作为已选中元素的最后一个子元素 */
.div1::after {
    content: "";
    display: block;
    clear: both;
}
    1. 开启BFC

    overflow与text-overflow

    overflow：
    visible：对溢出内容不做处理，内容可能会超出容器。 hidden：隐藏溢出容器的内容且不出现滚动条。
    scroll：隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
    auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为body对象和textarea的默认值。

    text-overflow：
    clip： 当内联内容溢出块容器时，将溢出部分裁切掉。 ellipsis：
    当内联内容溢出块容器时，将溢出部分替换为（…）。

    css优化

    主要从文件大小和减少回流和重绘两方面
    这篇博客写得挺仔细的

chainnnn
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS基础常见问题汇总
04-12
CSS常见问题
CSS3常见问题列表布局特效
07-24
CSS3常见问题列表布局特效是一款通用的css3常见问题列表，标题内容展开收缩ui布局特效。
css常见问题总结
技术前端，忠于热爱 @0.活在风浪里
01-05 719
①什么是回流？ 页面中元素的尺寸，布局，改变而需要重新构建页面，就会引起回流。 什么是重绘？ 页面中元素属性发生改变，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。 回流必将引起重绘，而重绘不一定会引起回流(重新构建页面肯定重绘外观) ②为什么要清除浮动？四种 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 父盒子没有高度内部放两个盒子一个big 一个small，未给big和small设置浮动，
CSS常见问题
qq_54334713的博客
03-24 989
常见的CSS问题 多个盒子之间的外边距影响 1. 行内盒子水平排放的外边距 描述：水平排放的盒子，水平间距是margin的叠加。 2. 块级盒子垂直排放的外边距 描述：垂直排放的盒子，垂直间距是合并的（取最大值）。 3. 父,子盒子的垂直外边距合并 未设置子盒子的外边距 设置子盒子的外边距   在给子盒子添加外边距后，父、子盒子同时下移，这说明父、子盒子的外边距合并了。   为子盒子添加的外边距也就是为父盒子添加了外边距，这对网页排版造成了一定影响。 解决方式： 父盒子添加 overflow：
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
最新发布
秋刀鱼不做梦的编程日常
05-01 1297
有关CSS中排版常见问题（清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题）
前端CSS常见问题记录（持续更新）
小灰灰的博客
04-15 1163
前端CSS常见问题记录 因为我不是专攻前端，所以有很多前端函数以及样式用法不是很了解，故此将我遇到的一些问题都记录到此处。 问题1：怎么设置DIV高度或者宽度将父级容器剩余空间充满？ 需求是这样的，我父级容器A宽度是70%，容器A里面有两个容器B和C，我给B设置了固定宽度100px，这个时候C容器的宽度就不好设置了。 解决： 使用CSS中的函数：“calc” C容器的宽度就可以设置为： width: calc(100% -100px); 问题2：当鼠标移动到指定DIV上时鼠标从箭头变成手势。 需求：一般的D
css transtion不生效_css3 transition过度详解
weixin_29866423的博客
01-14 924
CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。它的工作原理就是元素从一种样式逐渐改变为另一种的效果要实现这一点，必须规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。div {width: 100px;height...
DIV+CSS常见问题的14条原因分析
09-25
【DIV+CSS常见问题的14条原因分析】 在网页设计中，使用DIV+CSS布局是一种常见的技术，但在实现过程中可能会遇到各种浏览器兼容性问题。本文将深入解析14个常见的问题及其解决方案，帮助开发者更好地理解和处理这些...
CSS 速记口诀 可以解决一些常见问题
09-25
如果在用CSS设计布局时遇到BUG，请认真阅读以下内容，非常容易记忆的，不知道哪位高人把CSS BUG编成了顺口溜了！看看好不好记住呢？
关于css兼容性问题及一些常见问题汇总
09-24
以下是一些关于CSS兼容性问题及其解决方案的详细说明： 1. **浮动元素与高度塌陷**： 在IE6中，如果一个父容器内的元素有浮动（如`float:left`或`float:right`），而父容器没有设置固定高度，其高度不会自动扩展以...
CSS常见小问题解决
11-21
CSS常见小问题解决，很实用的噢！里面有案例
CSS常见问题汇总
yiyueqinghui的博客
10-15 733
1、CSS3有哪些新特性？ RGBA和透明度 background-image background-origin(content-box/padding-box/border-box) background-size background-repeat word-wrap（对长的不可分割单词换行）word-wrap：break-word 文字阴影：text-shadow： 5px 5px 5px #FF0000;（水平阴影，垂直阴影，模糊距离，阴影颜色） font-face属性：定义自己的字体 圆角（边
CSS一些常见解决方案
weixin_39651356的博客
08-15 214
文章目录1.margin塌陷问题 - 父元素随子元素移动2.文字、图片居中2.1单行文字2.2多行文字2.3图片 1.margin塌陷问题 - 父元素随子元素移动 原因：根据规范一个元素没有border-top、padding-top，则该元素上边距与孩子上边距重合 <!--该结构当 inner的margin-top:20px时，父元素跟随子元素一同移动--> <div ...
css基础常见的问题笔记
LQlove1的博客
05-17 195
一些css常见的问题
CSS应用常见问题
yangkewei的专栏
09-24 635
CSS是Cascading Style Sheets的简称，中文译作“层叠样式表单”，我把它叫作“层叠样式表”，我感到这样顺口一点，没别的意思。实际上它是一组样式。你可能对CSS这个名词比较陌生，实际上无论你用Internet Explorer还是Netscape Navigator在网上冲浪，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页，都有在
CSS总结及常见问题汇总
QIu_zero的博客
07-11 1590
CSS总结一.前言二.css基本属性三.常见问题总结1.text-align和margin:0 auto2.父子元素之间的重叠问题3.浮动问题 一.前言 自己在使用过程中对css的一些总结 二.css基本属性 css,（Cascading Style Sheet层叠样式表 ） ，学习CSS就是学习一堆选择器和属性的选择和使用。我们常用css来进行布局的构造和整体美化。 布局：盒子模型设置、浮动设置、定位设置。 美化：字体设置、文本设置、列表设置、表格设置。 字体设置： font-style:设置字体是
css 常见问题
babulongbo的博客
02-18 303
隐藏滚动条并可以滚动内容 1.计算滚动条宽度并隐藏起来 页面向右偏移一定的距离。可以使用绝对定位或者translate。 2.使用三个容器包围起来，不需要计算滚动条的宽度 未知 css隐藏滚动条 这个方法不兼容IE，做移动端的可以使用。那就是自定义滚动条的伪对象选择器::-webkit-scrollbar chrome 和Safari: .element::-webkit-scrollbar { ...
css问题汇总
唯心所现，唯识所变
01-12 254
1、外层盒子背景色为灰色，内层盒子背景色为白色，要求：使白色盒子外边露出点灰色。 margin失效: 在内层盒子加个margin，来显示出白边，但是失效了。在外层盒子中使用 overflow:hidden 显示出来。 <template> <view> <view class="bg"> <view class="bg2">背景色为白色</view> </view> </view> </tem
html网页制作css里常见的问题
06-13
在 HTML 网页制作中，CSS 常见的问题包括以下几个方面： 1. 盒模型问题：不同浏览器对盒模型的解析方式不同，导致布局出现差异。可以使用 `box-sizing` 属性来规定盒模型的解析方式。 2. 浮动问题：浮动元素可能会...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值