CSS中的一些细节

更新日期: 2020-03-20阅读: 1.4k标签: css

一、塌陷

1.当position设置为:absolute或者fixed时,元素的display会转换为block。(设置float也会产生这样的效应)
2.正常情况下,div会被内容撑开,但是如果设置了1.的情况下,父元素就会产生塌陷,失去高度。

解决办法:

给父元素设置高度。
给父元素设置overflow: hidden;


二、文本的自动换行

对于那种长单词,会超出元素的实际宽度。

解决办法

word-break:break-all;


三、文本溢出部分隐藏

解决办法

overflow: hidden;


四、溢出打点

4.1 单行文本打点

p{
    width: 200px;
    overflow: hidden;
    white-space: nowrap; /*不换行*/
    text-overflow: ellipsis; /*溢出部分点样式*/
}

4.2 多行文本溢出打点

p{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /*行数*/
    -webkit-box-orient: vertical;
}

五、flex布局

当设置了display: flex;后,那么子元素的float、clear和vertical-align属性失效。
flex布局,分为容器和项目两个部分。一般而言,容器就是父元素,项目就是该父元素下的子元素。
(1)flex-direction: row(默认)| row-reverse | column | column-reverse
决定主轴方向,也就是定义容器元素是行方向排列还是列方向排列,
并且定义它的起点方向,例如行方向是从左向右还是从右向左。
反之,列方向是从上到下还是相反呢。(row是行,column是列。)

(2)flex-wrap: nowrap(默认) | wrap | wrap-reverse
决定是否都拍在一行(列)里,也就是是否换行。
以行为例有三种情况,不换行、换行(第一行在上方),换行(第一行在下方)

(3)flex-flow: row nowrap(默认)
这是flex-direction属性和flex-wrap属性的简写形式,
第一个参数定义排列方式,第二个参数定义是否换行。

(4)justify-content: flex-start | flex-end | center | space-between | space-around
调整主轴方向上项目的对齐方式。
以行向排列为例,可以设置为靠左对齐,靠右对齐,水平居中对齐。
还有两个特殊的:
space-between(两端对齐,相当于文本对齐【text-align】里的justify);
space-around(元素两侧间隔相等,且比它与边框的间隔大一倍)

(5)align-items: flex-start | flex-end | center | initial(从父元素继承)
调整交叉轴方向上的项目对齐方式。
如果行方向是主轴方向,那么列方向就是交叉轴方向。
以行方向为例,可以设置垂直在上,垂直在下,垂直居中。
两个特殊的:
baseline(项目元素第一行文字的基线对齐);
stretch是默认的(如果项目元素没有设置高度,那么它就会自动拉伸高度至整个容器高度)


六、rem适配方案

使用 rem 单位来定义文字的大小最大的问题在于这些值有点难以使用。让我们来看一个例子,假设根元素的文字大小是 16px,我们常用的文字大小转换为 rem 值如下:

  • 10px = 0.625rem

  • 12px = 0.75rem

  • 14px = 0.875rem

  • 16px = 1rem (base)

  • 18px = 1.125rem

  • 20px = 1.25rem

  • 24px = 1.5rem

  • 30px = 1.875rem

  • 32px = 2rem

动态修改font-size:

媒体查询方式

@media screen and (max-width: 360px) and (min-width: 321) {
    html : {font-size: 24px}
}

@media screen and (max-width: 320px) {
    html : {font-size: 20px}
}

js代码控制

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;

let htmldom=document.getElementByTagName('html')[0];

htmlDom.style.fontSize = htmlWidth/10 +'px';

 sass计算

@function px2rem($px) {
    $rem: 37.5px;//基准值,iPhone为参考375/10
    @return ($px / $rem) _rem;
}

width: px2rem(50px);

七、元素居中

  1. 文本(img也是)元素水平居中 text-align: center;
  2. 块级元素水平居中 margin: 0 auto;
  3. 单行文本垂直居中 设置line-height和div的height
  4. 不确定高度的文本垂直居中 使用padding-top和padding-bottom
  5. 确定高度的块级元素垂直居中 position: absolute; top:50%; margin-top: -高度的一半;
  6. 绝对定位实现垂直居中 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;
  7. 给父元素设置 display: table-cell; vertical-align: middle;
  8. css3 设置完定位和top,left后设置 transform: translate(-50%,-50%);
  9. 弹性盒子(有兼容问题)


链接: https://www.fly63.com/article/detial/8670

css自动省略号...,通过css实现单行、多行文本溢出显示省略号

网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示。

深入理解letter-spacing,word-spacing的对比区别

word-spacing 属性增加或减少单词间的空白(即字间隔)。 letter-spacing 属性增加或减少字符间的空白(字符间距)。

整理一下CSS最容易躺枪的二十规则,大家能躺中几条?

满屏div之css最容易中枪的二十条规则,你中枪了吗?一、float:left/right 或者 position: absolute 后还写上 display:block?二、认为布局就是 Float,所有的地方都是 Float,全家都是 Float!

如何编写轻量级 CSS 框架

我想每个人都应该归纳总结工作中的常见需求,编写一套适合自己的 CSS 框架。大多数的轻量级框架只是 CSS 框架,不涉及 JS 部分,主要用于网页的布局。

精简CSS代码,提高代码的可读性和加载速度

定义简洁的CSS规则:CSS的每条规则中都包含了规则的属性及属性值。定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值。

css完美解决网页在iphoneX的头部刘海显示问题

css完美解决iphonX白条,网站扩展到整个屏幕,CSS Shapes中有个CSS属性名为shape-outside实现元素滚动自动环绕iPhone X刘海

css中 出现height为100%失效的原因及解决方案

我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用。这是由于:%是一个相对父元素计算得来的高度,要想使他有效,我们需要设置父元素的height。

CSS3 clip-path 用法介绍

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示,区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径,或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切 clip属性。

CSS中可以和不可以继承的属性

这篇文章整理css中无继承性的属性、继承性的属性、所有元素可以继承的属性、内联元素可以继承的属性、块级元素可以继承的属性

你知道我们平时在CSS中写的%都是相对于谁吗?

编写CSS的时候,经常会用到百分比赋值(%)实现自适应。像我们最常使用的流式布局设计模式,基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!