CSS
TwoZeroZero
这个作者很懒,什么都没留下…
展开
-
CSS:关于px、em、rem、vw和vh的理解
px:像素,绝对单位;em:相对单位,以父元素字体大小font-size为基准计算的,因此整个页面内1em并不是一个固定的值。浏览器默认的font-size是16px;rem:相对单位,以根节点html的大小为基准计算的,CSS3新属性,可以实现只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合,避免了em单位所带来的弊端。vw / vh:相对于视口的宽度viewpoint width和高度viewpoint height;1vw等于视窗宽度的1%;1vh等于视窗高度的1%。vmi.原创 2020-10-24 11:27:37 · 326 阅读 · 0 评论 -
CSS:实现多行文本垂直居中的四种方法
对于单行文本,可以使用行高等于高度来设置垂直居中,但多行文本不适用。实现多行文本垂直居中的四种方法1. 利用表格元素table+vertical-align实现将父元素设置为块级表格来显示,再将子元素设置为一个表格单元格显示后,设置vertical-align: middle;即实现效果。<body> <div class="text"> <span>扩展: Vue.js 是一套构建用户界面的渐进式框架。 它与其他重量级框架不同的是,Vue原创 2020-10-15 19:07:35 · 10503 阅读 · 0 评论 -
CSS:对盒模型的理解,以及CSS中如何设置盒模型来使浏览器辨别盒模型
1. 对盒模型的理解盒模型有两种,分别是W3C定义的盒模型和IE定义的盒模型。W3C定义的盒模型包括margin、padding、border、content,其中width = contentIE定义的盒模型与W3C盒模型的区别:width = content + padding + border相比之下,IE盒模型较为合理。2. CSS中如何设置这两种模型?默认情况下,为W3C盒模型,可以通过CSS3的新属性box-sizing来设置。W3C盒模型:box-sizing: content-原创 2020-10-15 15:56:07 · 413 阅读 · 0 评论 -
CSS:实现自适应三栏布局的方法及双飞翼和圣杯布局的区别
两边固定,中间自适应三栏布局的实现方法1. 利用flex弹性盒子模型将父元素设置为弹性布局,则其子元素全自动成为容器成员,将中间部分子元素设置flex占比为1,则可填满剩余空间,两边设置固定宽度,即实现两边固定中间自适应。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device原创 2020-09-26 13:12:43 · 163 阅读 · 0 评论 -
CSS:BFC是什么以及BFC的相关应用
1. 什么是BFCBFC:是一个独立的布局环境,其中的元素布局是不受外界的影响。如果一个元素符合了成为BFC的条件,那么该元素就成为了一个隔离的独立容器,BFC的区域不会与外部浮动元素重叠,且在同一个BFC内的两个相邻块级元素的外边距会重叠,但不同 BFC外边距不会重叠;在计算BFC高度时,将它内部的浮动元素也包含在内。2. 触发BFC的方法(常用overflow:hidden;)float属性不为noneposition为absolute或fixedoverflow的值不为visible原创 2020-09-26 08:54:50 · 155 阅读 · 0 评论 -
CSS:清除浮动的方法
为什么需要清除浮动?因为一旦父元素没有设置高度,而子元素设置了浮动,那么浮动元素会脱离文档流,包含它的父元素并不会因为这个浮动元素的存在而自动撑高,造成高度塌陷。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-09-25 12:59:04 · 126 阅读 · 0 评论 -
CSS:实现自适应两栏布局的四种方法
实现两栏布局的方法1. 什么是BFCBFC:是一个独立的布局环境,其中的元素布局是不受外界的影响。如果一个元素符合了成为BFC的条件,那么该元素就成为了一个隔离的独立容器,BFC的区域不会与外部浮动元素重叠,且在同一个BFC内的两个相邻块级元素的外边距会重叠,但不同 BFC外边距不会重叠;在计算BFC高度时,将它内部的浮动元素也包含在内。2. 触发BFC的方法(常用overflow:hidden;)float属性不为noneposition为absolute或fixedoverflow的值原创 2020-09-25 10:56:05 · 2502 阅读 · 0 评论 -
CSS:margin纵向重叠和负值问题
margin纵向重叠问题相邻元素的margin-top和margin-bottom会发生重叠 ;空白内容的<p></p>也会重叠margin负值问题margin-top和margin-left设置负值的话,元素会分别向上或向左移动;margin-right设置负值,右侧元素左移,自身不受影响;margin-bottom设置负值,下方元素上移,自身不受影响;...原创 2020-09-24 21:18:18 · 410 阅读 · 0 评论 -
CSS:关于 link 和 @import 的区别
语法link:<link href="CSS路径" rel="stylesheet" type="text/css" />@import:在HTML中,<style type="text/css"> @import url(CSS文件路径);</style>在CSS中@import url(CSS文件路径);link 和 @import 的共同点都是用于外部引入CSS的方式link 和 @import 的区别link是在页面载入时同时加载原创 2020-09-18 12:01:35 · 95 阅读 · 0 评论 -
CSS:移动端设置文字超过某个行数用省略号表示
设置文字超过某个行数用省略号表示利用弹性伸缩盒子模型 /* 将对象设置为弹性伸缩盒子模型 */ display: -webkit-box; /* 设置对象的子元素的排列方式:从上到下垂直排列子元素 */ -webkit-box-orient: vertical; /* 限制块元素显示的文本行数 */ -webkit-line-clamp: 2; overflow: hidden; /* 多行文本溢出显示省略号 */ text-overflow: ellipsis;原创 2020-09-08 12:50:28 · 695 阅读 · 0 评论