css
社会刘
聪明好学
展开
-
css样式...
//单行显示。多余的内容省略p{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}/* 移动,pc端,p标签显示2行,多出的... */p{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-web...原创 2020-02-07 17:33:27 · 111 阅读 · 0 评论 -
bfc
什么是BFC?32018.02.28 17:46:43字数 1,071阅读 42,118本文总结自饥人谷—方方老师:CSS深入浅出什么是BFC?为什么这个概念一直被提起??为什么每一个人都解释不清BFC???什么是BFC?BFC 全称为 块格式化上下文 (Block Formatting Context) 。从这个概念里你能看出来什么吗?这个名字给我们的信息只有 ...原创 2020-02-07 16:51:03 · 163 阅读 · 0 评论 -
js 原生操作css样式
动态控制元素的样式 style[样式名] = 值 增删改class的方式classList下的方法 增加 class — node.classList.add() 删除 class — node.classList.remove() 切换 class — node.classist.toggle() 判断 class — node.classist.cont...原创 2019-12-24 10:56:50 · 222 阅读 · 0 评论 -
BFC
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等)。虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么? 在解释 BFC 是什么之前,需要先介...转载 2019-04-30 12:03:31 · 109 阅读 · 0 评论 -
margin:0 auto;——使用条件/应用场景/不生效无效果的原因
margin:0 auto;在不同场景下生效条件如下: 块级元素:给定要居中的块级元素的宽度。 行内元素:①设置display:block;②给定要居中的行内元素的宽度。(行内元素设置成块级元素后可以对其宽高进行设置) 行内块元素:设置display:block。(如input、button、img等元素,自带宽度可以不用设置其宽度) ...转载 2019-02-20 14:14:16 · 576 阅读 · 0 评论 -
display flex align-items和align-content区别
看了很多翻译的技术文档,这一块都讲得模糊不清,看到stackoverflow上有人提问后的回答觉得十分清晰,特来分享,有不当之处欢迎指正。 align-itemsThe align-items property applies to all flex containers, and sets the default alignment of the flex items along the...转载 2019-02-12 16:00:48 · 1130 阅读 · 0 评论 -
CSS布局基础——BFC
what's BFC?第一次看到这个名词,我是拒绝的,css什么时候还有这个东西?于是迫不及待的google了一下,才发现原来它无时无刻不在我们的css当中,只不过它并不是一个属性,不需要我们平常使用手写罢了。但是它的重要性确是杠杠的,可以这么说,没有它就就没有什么css布局。BFC,全称 Block Formatting Context,翻译成块级格式化上下文,它就是一个环境,HTM...转载 2019-02-12 14:48:47 · 131 阅读 · 0 评论 -
Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项...转载 2019-01-02 13:49:40 · 110 阅读 · 0 评论 -
vue-cli
一不小心 9W+ 点击量了,为了小伙伴们有更好的体验,我又整理了一篇新的文章,排版更清晰明了。新 vue-cli 教程 点这里 都说Vue2简单上手容易,的确,看了官方文档确实觉得上手很快,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前用jq随便拿全局变量和修改dom的锤子不能用了,vue只用关心数据本身,不用再频繁繁琐的操作dom,注册事件、监听事件、取...转载 2018-12-18 10:21:04 · 180 阅读 · 0 评论 -
CSS3自定义滚动条样式 -webkit-scrollbar
当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义。首先我们要了解滚动条。滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深。 滚动条的css样式主要有三部分组成: 1、::-webkit-scrollbar 定义了滚动...转载 2018-08-30 16:30:21 · 143 阅读 · 0 评论 -
html所有的块级标签和行级标签有哪些
块级元素特点:1.每个块级元素都是独自占一行,其后的元素也只能另起一行,并不能两个元素共用一行。 2.元素的高度、宽度、行高和顶底边距都是可以设置的。 3.元素的宽度如果不设置的话,默认为父元素的宽度。常见的块级元素:<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>转载 2018-08-13 17:16:20 · 11518 阅读 · 0 评论 -
css伪类与伪元素
一直被伪类与伪元素所迷惑,以为是同一个属性名称,这两天看css动画,越来越多的看到诸如 a:hover:after,a.hover:after 的用法,越来越糊涂,索性翻翻定义研究研究。 本文出现的伪类伪元素均为css2、css1中内容。css3中伪类、伪元素还未做整理。 先看定义:伪元素:(pseudo-element)是HTML 中并不存在的元素。用于将特殊的效果...转载 2018-08-08 18:13:05 · 366 阅读 · 0 评论 -
css选择器
组合选择器 h1,.cls,#id{}三个一起设置样式.div1 h1{} class为“div1”下的所有h1,设置样式.div1>h1{} class为“div1”的子h1,设置样式input[name=username]{} 设置样式行级元素只能嵌套行级元素块级元素可以嵌套任何元素但是<p> <div></div> &l...原创 2018-08-11 19:50:41 · 176 阅读 · 0 评论 -
前端轮播图,无缝衔接
1.假设三张图片轮播,首先要把三张图放在一个div里,但只显示一张图 style="width:4560px"> .window{ height: 300px; width: 1140px;原创 2018-01-19 15:02:15 · 1268 阅读 · 0 评论 -
css中的居中(水平和垂直)
text-align:center 水平居中,写在父类元素中,作用于子类行内元素,让其在父类元素中水平居中,如果子类元素是块元素,也想水平居中,可加display:inline-blockvertical-align:center ,这个样式属性只能写在让子类行内元素中,父类也要是行内元素,作用就是让子类行内元素在父类行内元素中垂直居中。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对原创 2018-01-15 10:22:42 · 184 阅读 · 0 评论 -
css3,float和position
float的div,为占据div的本来位置,但是没有高度,不会占据所在的一整行,不会覆盖后面的divposition的div,不占据本来位置,会覆盖后面的div,也就是说后面的div可以补充进来,position absolute/relative:绝对定位,不加x,y坐标时,就在原来的位子不变,相当于z坐标提升一样,大div用position absolute/relative 定位原创 2018-01-10 22:08:37 · 361 阅读 · 0 评论 -
CSS字体大小变化问题
在使用“em”作单位时,一定需要知道其父元素的设置,因为“em”就是一个相对值,而且是一个相对于父元素的值,其真正的计算公式是:1 ÷ 父元素的font-size × 需要转换的像素值 = em值例如你父类的字体大小是10px ,你现在想设置子类字体大小是20px, 1/10*20=2,所以设置2em,em就会随着用户在浏览器中放大缩小变化而变化,如果直接设置成20px的话,就不会随用原创 2017-10-19 11:43:07 · 1795 阅读 · 0 评论