css
文章平均质量分 70
姜小衰
这个作者很懒,什么都没留下…
展开
-
[css选择器] :first-child与:first-of-type的区别
:first-child与:first-of-type的区别原文链接: https://www.cnblogs.com/xuan52rock/p/4416228.html:first-child:first-child 选择器是 CSS2中定义的选择器,从字面意思上来看也很好理解,就是第一个子元素。比如有段代码:<div> <p>第一个子元素</p>...转载 2019-08-26 15:42:04 · 278 阅读 · 0 评论 -
[CSS] max-height 属性
max-height 属性原文链接:max-height 属性实例设置段落的最大高度:p { max-height: 100px;} 在 jsrun 中查看示例 浏览器支持IEFirefoxChromeSafariOpera支持支持支持支持支持所有主流浏览器都支持 max-height 属性。注释: 任何版本的 Internet Exp...转载 2019-03-28 22:43:08 · 1303 阅读 · 0 评论 -
[CSS] height 属性
height 属性实例设置段落的高度和宽度:p { height: 100px; width: 100px;} 在 jsrun 上查看示例 浏览器支持IEFirefoxChromeSafariOpera支持支持支持支持支持所有主流浏览器都支持 height 属性。注释: 任何版本的 Internet Explorer (包括 IE8 )...转载 2019-03-28 22:28:08 · 585 阅读 · 0 评论 -
[CSS] width 属性
width 属性原文链接: CSS width 属性实例设置段落的高度和宽度:p { height:100px; width:100px; } 在 jsrun 上查看示例 浏览器支持IEFirefoxChromeSafariOpera支持支持支持支持支持所有主流浏览器都支持 width 属性。注释: 任何版本的 Intern...转载 2019-03-28 23:06:22 · 798 阅读 · 0 评论 -
[css] 实现文字一行居中,多行左对齐效果
实现文字一行居中,多行左对齐效果其实这种需求还是蛮常见的,主要用于产品列表页面,用于产品图片下面,显示产品的名称。想要实现的效果为:未知文字长度,当文字长度小于盒子宽度,也就是一行时,文字居中。当文字长度大于盒子的宽度,会自动换行,成为多行文字,此时文字左对齐利用行内元素我首先想到了这个思路,思路如下:p 标签设置为display:inline-block,并让 p 居中,p...转载 2019-04-09 22:45:49 · 7832 阅读 · 0 评论 -
[css] vertical-align 探索使用
vertical-align 探索使用 在 jsrun 中打开示例 <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user...原创 2019-05-08 10:10:36 · 289 阅读 · 0 评论 -
[css3] input 移动端 ios 点击有黑色背景闪一下
input 移动端 ios 点击有黑色背景闪一下给 input 添加样式input { -webkit-tap-highlight-color: transparent;}根据我的探索给 body 添加此样式也可以解决body { -webkit-tap-highlight-color: transparent;}...原创 2019-07-15 09:27:15 · 882 阅读 · 0 评论 -
[css] input移动端适配问题
input移动端适配问题input 顶部有阴影问题input { -webkit-appearance: none; -moz-appearance: none; appearance: none;} 边框有圆解问题input { border-radius: 0}原创 2019-06-27 10:29:38 · 641 阅读 · 0 评论 -
[CSS] 单位 em 和 rem 的区别
单位 em 和 rem 的区别原文链接: css中单位em和rem的区别在 css 中单位长度用的最多的是 px、em、rem,这三个的区别是:px 是固定的像素,一旦设置了就无法因为适应页面大小而改变。em 和 rem 相对于 px 更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。对于 em 和 rem 的区别一句话概括:em 相对于父元素,rem 相对于...转载 2019-05-13 15:11:27 · 376 阅读 · 0 评论 -
[css3] 深入理解 css3 中的 flex-grow、flex-shrink、flex-basic
深入理解 css3 中的 flex-grow、flex-shrink、flex-basic原文链接: 深入理解css3中的flex-grow、flex-shrink、flex-basisflex为 css 的布局带来了新的时代,作为一个重构工程师,我们再也不用局限于 float 和 position,特别是在移动端,我们可以利用 flex 轻松实现以往 float 和 position 很难实...转载 2019-05-24 14:19:01 · 2705 阅读 · 1 评论 -
[css] margin 为负值产生的影响和常见布局应用
margin 为负值产生的影响和常见布局应用原文链接: margin为负值产生的影响和常见布局应用前言前几天去了一家公司面试前端,问了我双飞翼的布局,说实话,之前真没好好研究过实现原理。面试回来,查了下,主要都是用到了 margin-left 负数产生的效果。所以今天整理些 margin:负数会对哪些元素或者定义产生影响、margin 为负值在 web 布局中的应用做下总结。(不能说最全...转载 2019-05-10 10:33:26 · 1790 阅读 · 0 评论 -
[css] display为inline-block会默认扩展为父元素的高度吗
display为inline-block会默认扩展为父元素的高度吗答案为不会,看下面的代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...原创 2019-05-07 11:43:49 · 1846 阅读 · 0 评论 -
[css] margin-left 为负值的应用
margin-left 为负值的应用按钮组中双边框隐藏要点:按钮设置为浮动,按钮组中非第一个按钮设置为向左浮动边框的距离<style type="text/css">.btn { padding: 6px 12px; border: 1px solid #ccc; display: inline-block; vertical-align: middle; ...原创 2019-05-09 14:11:42 · 3324 阅读 · 0 评论 -
[css3] :empty 选择器
:empty 选择器原文链接: CSS3 :empty 选择器实例指定空的 p 元素的背景色:p:empty { background: #ff0000;}在 jsrun 中打开示例 浏览器支持IEFirefoxChromeSafariOpera支持支持支持支持支持所有主流浏览器均支持 :empty 选择器,除了 IE8 及更早的版本。...转载 2019-05-09 13:21:07 · 388 阅读 · 0 评论 -
[css3] text-overflow 属性
text-overflow 属性原文链接:CSS3 text-overflow 属性实例div.test { text-overflow: ellipsis} 在 CodePen 中打开实例 浏览器支持IEFirefoxChromeSafariOpera支持支持支持支持支持定义和用法text-overflow 属性规定当文档溢出包含元素时...转载 2019-03-22 08:50:27 · 739 阅读 · 0 评论 -
[CSS] background-position 属性
background-position 属性原文链接: CSS background-position 属性实例如何定位背景图像body{ background-image:url('bgimage.gif');background-repeat:no-repeat;background-attachment:fixed;background-position:center;}...转载 2019-03-13 08:57:06 · 356 阅读 · 0 评论 -
[css选择器] 类选择器
类选择器原文链接:类选择器类选择器允许以一种独立于文档元素的方式来指定样式类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用,也可以与其他元素结合使用。提示: 只有适当地标记文档后,才能使用这些选择器,所以使用这两种选择器通常需要先做上些构想和计划。要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。修改 HTML 代码在使用类选择器之前,需要修改具体...转载 2019-03-10 13:35:15 · 1732 阅读 · 0 评论 -
[css选择器] 分组选择器
分组选择器原文链接:CSS 分组假设希望 h2 元素和段落都有灰色。为达到这个目的,最容易的做法是使用以下声明:h2, p {color:gray;}将 h2 和 p 选择器放在规则左边,然后用逗号分隔,就定义了一个规则。其右边的样式color:gray; 将应用到这两个选择器所引用的元素。逗号告诉浏览器,规则中包含两个不同的选择器。如要没有这个逗号,那么规则的含义将完全不同。参见后代选...转载 2019-03-10 11:32:59 · 1620 阅读 · 0 评论 -
[css选择器] 元素选择器
CSS 元素选择器原文链接: CSS 元素选择器最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器。如果设置 HTML 样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:<html><head><style type="text/css">html {color:black;}...转载 2019-03-10 10:45:16 · 236 阅读 · 0 评论 -
[css] body的默认margin值
body的默认margin值一般浏览器中都对body标签进行默认的margin设置为8px,当然,不同的浏览器会设置成不同的值,它是由浏览器的user-agent-stylesheet提供了,chrome提供的如下:body { display: block; margin: 8px;}有些浏览器的user-agent-stylesheet可以由用户进行修改,而有的浏览器...原创 2019-03-22 15:25:34 · 4851 阅读 · 2 评论 -
[css选择器] ID选择器
ID选择器原文链接:CSS ID 选择器详解ID 选择器允许以一种独立于文档元素的方式来指定样式。CSS ID 选择器在某些方面,ID 选择器类似于类选择器,不过也有些重要差别。语法首先,ID 选择器前面有一个 # 号 ——也称为棋盘号或井号。*#intro {font-weight:bold;}与类选择器一样,ID 选择器中可以忽略通配符选择器。前面的例子也可以写作:#int...转载 2019-03-10 15:04:56 · 202 阅读 · 0 评论 -
[css选择器] 属性选择器
属性选择器CSS2引入了属性选择器属性选择器可以根据元素的属性及属性值来选择元素简单属性选择如果希望选择有某个属性的元素,而不论属性是什么 ,可以使用简单属性选择器。例子 1如果您希望把包含标题(title)的所有元素变为红色,可以写作:*[title] {color:red;}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra...转载 2019-03-10 16:32:40 · 277 阅读 · 0 评论 -
[css选择器] 后代选择器
后代选择器原文链接: 后代选择器后代选择器(descendant selector) 又称为包含选择器后代选择器可以选择作为某元素后代的元素。根据上下文选择元素我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。举例来说,如果您希望只对 h1 元素中的 em 元素应用样式,可以这样写:h1 em {color:red;}上面这个规则...转载 2019-03-10 17:33:44 · 673 阅读 · 0 评论 -
[css] backgroun-attachment属性
backgroun-attachment属性实例如何设置固定的背景图像body { background-image: url(bgimage.gif); background-attachment: fixed; }浏览器支持IEFirefoxChromeSafariOpera支持支持支持支持支持所有浏览器都支持 back...转载 2019-03-13 08:41:04 · 225 阅读 · 0 评论 -
[css] transform: scale 实战应用
transform: scale 实战应用突破浏览器显示最小字号的限制我们都知道,浏览器对最小字号显示是有限制的,一般默认为12px。我们来作个测试吧<style type="text/css"> .size-2 { font-size: 2px; } .size-4 { font-...原创 2019-03-21 09:49:35 · 2730 阅读 · 0 评论 -
[前端] Chrome浏览器默认显示最小字号为12px
Chrome浏览器默认显示最小字体为12pxChrome默认最小字号是12px(最新版英文也有此问题),这个是Chrome为了更好显示中文设计的。但是这样一来就会出现,设置为8px字体的元素在Chrome显示仍为12px,导致网页排版错误的问题。.f8 { font-size: 8px}其为浏览器默认对最小字号有限制吗?既然Chrome浏览器有对默认最小显示字体的限制,那么其它浏览...原创 2018-12-22 23:32:13 · 10695 阅读 · 3 评论 -
[css] scale
scale原文链接:scale这是一个实验中的功能此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。CSS 属性 scale允许你可以分别且独立地指定 CSS 属性transform缩放的比例。这更好地映射到典型的 UI (用户界面)用法中,并免去了在指定变...转载 2019-03-21 09:06:46 · 1684 阅读 · 0 评论 -
[css] transform-origin
transform-origin原文链接: transform-origintransform-origin CSS 属性让你更改一个元素变形的原点。在 CodePen中打开示例 转换起点是应用转换的点。例如,rotate()函数的转换原点是旋转中心。(这个属性的应用原理是先用这个属性的负值转换该元素,进行变形,然后再用这个属性的值把元素转换回去)语法/* One-value sy...转载 2019-03-21 08:24:42 · 565 阅读 · 0 评论 -
[css] CSS伪元素(Pseudo-elments)
CSS伪元素(Pseudo-elments)原文链接: CSS 伪元素 (Pseudo-elements)CSS 伪元素用于向某些浏览器设置特殊效果语法伪元素的语法:selector:pseudo-element {property:value;}css 类也可以与伪元素配合使用:selector.class:pseudo-element {property:value;}:f...转载 2019-03-11 20:27:19 · 303 阅读 · 0 评论 -
[css选择器] element1~element2 选择器
element1~element2 选择器参考文章: CSS3 element1~element2 选择器#b~p,匹配所有在#b 元素之后的同级 p 元素。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie原创 2019-03-07 22:46:31 · 252 阅读 · 0 评论 -
[css选择器] 相邻兄弟选择器
相邻兄弟选择器原文链接: CSS 相邻兄弟选择器相邻兄弟选择器(Adjacent sibling selector) 可选择紧接在另一元素后的元素,且二者有相同父元素。只会选择第一个相邻的匹配元素选择相邻兄弟如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。例如,如果要增加紧接在 h1 元素后出现的...转载 2019-03-07 22:43:19 · 852 阅读 · 1 评论 -
[css选择器] 子元素选择器
子元素选择器原文链接:CSS 子元素选择器与后代选择器相比, 子元素选择器(Child selectors) 只能选择作为某元素子元素的元素选择子元素如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:h1 > strong {...转载 2019-03-10 17:42:39 · 745 阅读 · 0 评论