CSS
关注
分享
扫一扫
文章平均质量分 65
izwell
这个作者很懒，什么都没留下…
展开
-
置换和非置换元素
可替换元素和不可替换元素 当初听到置换元素和非置换元素时，我是一脸懵逼的，通过查阅资料，得知所谓的置换元素和非置换元素就是可替换元素和不可替换元素，下面是我查阅资料后对这一块知识的总结。可替换元素（置换元素）MDN对于可替换元素的定义如下(https://developer.mozilla.org/zh-CN/docs/Web/CSS/Replaced_element)...转载 2018-08-28 10:04:54 · 442 阅读 · 0 评论 -
absolute 与overflow:hidden常见bug
我们使用第三方的组件时，第三方组件有时会依据我们引入组件的DOM的位置进行定位，很常见的CSS写法就是使用position：relative和position:absolute进行搭配使用，有时在父容器的外层添加了overflow:hidden之后，就会出现一些莫名奇妙的bug.下面举个例子你可以访问如下页面：https://alizwell.github.io/front-end/CSS/ab...原创 2019-03-26 21:37:18 · 2651 阅读 · 0 评论 -
CSS的padding实现百分比布局
在我以前的文章中，我讲过CSS中的一系列的百分比单位，其中margin和padding是相对于容器的宽度的，最近看到了一个文章，讲的是用padding来实现图片等比例布局。大概的需求如下，我们需要将图片按照我们希望的比列进行显示，图片的宽度是按照百分比响应式。你可能觉得这没啥，因为img标签在没有设定固定的高度时，其高度会按照图片本身的比列进行计算。但是我们的图片本身可能不是按照我们希望的比列。这...原创 2019-03-14 15:05:26 · 1439 阅读 · 0 评论 -
行内元素设置padding和margin
先说结论1、margin在水平方向有效，垂直方向无效。2、padding在水平方向有效，垂直方向可以有视觉效果，但是不影响布局3、高度height和宽度width的设置是无效的，高度可用line-height设置举个列子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...原创 2019-02-18 10:58:42 · 1975 阅读 · 0 评论 -
CSS未解之谜
今天再帮同事调试一个样式的问题时，我发现了一个很神奇的现象，而其中的原由我个人却不得而知，现记录如下，待日后破解。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &原创 2019-02-22 10:58:44 · 222 阅读 · 0 评论 -
CSS3巧妙实现空心三角箭头
前几天在浏览一个网站时，看到了一个常见的会话框右边显示箭头界面。当时自己就想了想，如果自己来实现，应该就是我以前写的文章中的使用before和after伪元素创建两个三角形来相互重叠覆盖实现。抱着试试看的心态，看了下网站的实现，结果还是有些收获的，下面将我的收获写下来。实现效果如下简单描述下具体的实现原理，就是使用伪元素before以及CSS3中的transform实现的。<st...原创 2018-12-21 18:16:35 · 1582 阅读 · 0 评论 -
CSS实现三角形
关于CSS实现三角形很早以前就看到过了，今天突然心血来潮，想着不就是利用border来实现么，想着自己动手试一下，没想到这么简单的功能没写出来。。。下面总结一下这个问题吧。实现三角形的基本原理CSS.triangle{ height:0; width:0; border:40px solid transparent; border-top-color:red; bo...原创 2018-10-29 17:50:47 · 440 阅读 · 0 评论 -
CSS设置溢出文字显示省略号
文章目录CSS设置溢出文字显示省略号相关CSS``overflow:hidden````white-space:nowrap````text-overflow:ellipsis``CSS设置溢出文字显示省略号相关CSS .text-ellipse{ width: 100px; height:50px; border:2px solid red; overflow:h...原创 2018-10-08 13:41:12 · 1324 阅读 · 0 评论 -
CSS九宫格的4种实现
文章目录实现效果实现方法1. float布局2. flex布局3. grid布局4. table布局总结实现效果效果如下，就是一个九宫格，点击九宫格中的任意一个小方块，其边框变成红色。实现方法我自己总结了一共4中方法来实现这个效果，其中前三种都是大同小异，只有第四种表格布局比较特殊，下面我直接给出每一种布局方式的相关的样式和DOM结构源码。1. float布局&amp;lt;style&amp;gt...原创 2018-09-27 23:45:30 · 12939 阅读 · 5 评论 -
CSS垂直居中24法
今天看到一篇神文，讲解了23中垂直居中的方法，现在自己参照原文进行每一种方法的详细讲解。1. line-height使用情景： 单行文字垂直居中。在没有设置高度的时候，高度与行高一致，此时文字会位于行高的垂直居中的位置。如果设置了高度，将行高设置为与高度相同即可。CSS.content{ width: 400px; margin: auto; ...转载 2018-10-12 10:18:37 · 343 阅读 · 0 评论 -
CSS百分比单位总结
CSS中的很多地方都是可以使用百分比单位的，之前一直理所当然的认为百分比就是相对于容器的宽高设定的，后来在自己实现垂直居中的多种写法时，才意识到这个问题，遂收集资料进行整理。相对于容器的宽度的 相对于content-box宽度 width | max-width | min-width | margin | padding | grid-template-columns ...原创 2018-09-07 10:12:03 · 2115 阅读 · 1 评论 -
float布局
float相关的设置 none | left | right | inherit 其中 float: left | right是我们比较常用的 下面讲解几个我自己总结比较重要的关于float的知识点float的定位方式 当一个元素浮动后，它会被移出正常的文档流， 然后向左或向右平移，一直平移到碰到碰到所处的容器的边框，或者碰到另外一个浮动元素。float会将元素 inl...原创 2018-09-03 17:18:16 · 1282 阅读 · 0 评论 -
flex布局
ffff原创 2018-09-03 09:53:10 · 157 阅读 · 0 评论 -
table-cell布局
display:table-cell属性简介 display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding...原创 2018-09-04 11:29:59 · 32525 阅读 · 0 评论 -
CSS盒模型
盒模型所谓的盒模型，就是浏览器在渲染一个DOM元素时，给其分配的块容器。主要包含如下4个部分 内容(content)、填充(padding)、边框(border)、边界(margin)其中padding,border,margin都好说，问题就出现在这个content。 在W3C的标准盒模型中，我们设置的height或者width就是content内容区的大小 而在IE的...原创 2018-08-28 16:29:25 · 259 阅读 · 0 评论 -
rgba转16进制
今天工作中遇到如下需求，需要将rgba的颜色值，转换为16进制的颜色值将rgb转换为16进制我们都知道，但是将rgba装换为16进制知道的人可能就很少了，经过我查阅资料发现，国内几乎没有对于这个转换的正确解释，下面我将讲解如何进行装换。其实很简单，将rgba就是转换为8位的16进制即可。前6位为正常的rgb的转换，最后一位是透明度的转换。其中使用00 — 代表0%， 使用ff – 代表100...原创 2019-06-04 15:48:56 · 15504 阅读 · 0 评论