![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
材女的进击
这个作者很懒,什么都没留下…
展开
-
css常见布局(面试要问的哦)
【代码】css常见布局(面试要问的哦)原创 2023-05-24 15:47:05 · 56 阅读 · 0 评论 -
前端面试题总结(part 2):CSS部分
转自:https://github.com/qiu-deqing/FE-interview1. CSS选择器有哪些?*通用选择器:选择所有元素 #X id选择器 .X 类选择器 X Y后代选择器:选择满足X选择器的后代节点中满足Y选择器的元素 X 元素选择器:选择所有标签为X的元素 :link :visited :focus :hover :active ...转载 2019-05-08 18:08:29 · 491 阅读 · 0 评论 -
CSS3新增的属性
在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,border-radius 属性用于创建圆角。skew():元素转动给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:transform:skew(30deg,20deg);scale():元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:transform:scale(2,4);转载 2023-06-12 14:36:32 · 181 阅读 · 0 评论 -
css的四种加载方式
优缺点:页面使用公共CSS代码,也是每个页面都要定义的,如果一个网站有很多页面,每个文件都会变大,后期维护难度也大,如果文件很少,CSS代码也不多,这种样式还是很不错的。导入样式和链接样式比较相似,采用@import样式导入CSS样式表,在HTML初始化时,会被导入到HTML或者CSS文件中,成为文件的一部分。链式样式使用最多,在标签之间用引入css文件。在head标签之间用标签声明。原创 2023-05-24 14:32:23 · 465 阅读 · 0 评论 -
用css实现已知或者未知宽度的垂直水平居中?
1..wraper {position: relative;.box {position: absolute;top: 50%;left: 50%;width: 100px;height: 100px;margin: -50px 0 0 -50px;}}2..wraper {position: relative;.box {position: abso...原创 2020-01-16 15:55:21 · 184 阅读 · 0 评论 -
CSS3 @media的用法
语法:@media mediatype and | not | only (media feature) { css-code; }媒体类型:mediatype1.all 所有媒体2.braille 盲文触觉设备3.embossed 盲文打印机4.print 手持设备5.projection 打印预览6.screen 彩屏设备7.speech '听觉'类似的媒体类型8...转载 2019-03-12 14:28:27 · 313 阅读 · 0 评论 -
bootstrap4 调整元素之间距离(名称分别以m-开头和p-开头的类)
影响元素之间的间距是可以通过style的margin或padding属性来实现,但这两个属性本意并不相同;margin影响的是本元素与相邻外界元素之间的距离,这里简称外边距;padding影响的元素本身与其内部子元素之间的距离,简称为内填充。bootstrap4...转载 2019-07-24 10:57:03 · 5196 阅读 · 0 评论 -
CSS3伪类与伪元素的区别及注意事项
CSS中伪类与伪元素的概念是很容易混淆的 今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义 w3c中对于它们是这么解释的伪类:用于向某些选择器添加特殊的效果伪元素:用于将特殊的效果添加到某些选择器讲道理,可能我语文不好,我觉得这两句话是等价的 :-) 根本不能看出有什么区别 都是对某些选择器“加特技”标准有这么一句话翻译过来是这样的 CSS 引...转载 2019-08-01 17:38:55 · 142 阅读 · 0 评论 -
HTML CSS 面试题解(不定期更新)
1. HTML基础强化HTML重要属性a [href,target]img [src,alt]table td [colspan,rowspan]form[target,method,enctype]input[type,value]button[type]select>option[value]label[for]HTML语义化标签代码结构清晰,易于阅读,像是...原创 2019-09-18 16:44:12 · 379 阅读 · 0 评论 -
Sass:@mixin和extend的选择
Mixins允许我们在项目中复用样式片段,可以传递参数这个特性使得它们非常灵活,强大。同样,我们也可以使用@extend命令让一个选择器继承其它选择器去复用样式片段。有的时候Mixin和extend好像做了同样的事情,那我们应该选择哪一个呢?向Mixin传递样式片段除了传递参数,也可以直接传递一个样式片段给Mixin。在Mixin中,添加@content;语句,然后传递的样式片段就会代替@...原创 2019-03-12 13:54:31 · 1934 阅读 · 0 评论 -
Sass快速入门:
Sass中文网:https://www.sass.hk/guide/1. 使用变量Sass使用$符号来标识变量。栗子:$highlight-color: #F90;$highlight-border: 1px solid $highlight-color;.selected { border: $highlight-border;}//编译后.selected ...原创 2019-03-12 11:34:28 · 386 阅读 · 0 评论 -
CSS设计指南笔记:浮动篇
浮动文字绕排图片 为了实现文本绕排图片的浮动效果,必须在标记中先写图片,然后再写环绕它的文本。<img …… /><p>…the paragraph text…</p>p {margin:0; border:1px solid red;}img {float:left; margin:0 4px 4px 0;}以上规则会让图片浮动到左侧,从而让...原创 2019-01-11 10:17:47 · 94 阅读 · 0 评论 -
CSS设计指南笔记:定位篇
position 属性有4 个值:static、relative、absolute、fixed,默认值为static静态定位:static在静态定位的情况下,每个元素都处在常规文档流中。相对定位:relative相对的是它原来在文档流中的位置(或者是默认位置)。可以用top 、right 、bottom、left属性来改变它的位置。除了自身相对于原始位置挪动了之外,页面没有发生...原创 2019-01-11 17:27:56 · 105 阅读 · 0 评论 -
CSS设计指南笔记:显示篇
块级元素,比如段落、标题、列表等,在浏览器中上下堆叠显示。 行内元素,比如a、span 和img,在浏览器中左右并排显示,只有前一行没有空间时才会显示到下一行。把块级元素变成行内元素(或者相反)的魔法如下。/*默认为block*/p {display:inline;}/*默认为inline*/a {display:block;} display:none 和 vis...原创 2019-01-11 17:31:25 · 105 阅读 · 0 评论 -
CSS设计指南笔记:选择符篇
上下文选择符 :(后代组合式选择符), 标签1 标签2 {声明} 用于选择作为指定祖先元素后代的标签。例:<body> <article> <h1>Contextual selectors are <em>very</em> selective</h1> ...原创 2019-01-10 15:34:54 · 170 阅读 · 0 评论 -
CSS设计指南笔记:文本篇
以下是几个最有用的 CSS 文本属性: text-indent letter-spacing word-spacing text-decoration text-align line-height text-transform vertical-aligntext-indent 是可以被子元素继承的。如果你在一个div 上设定了text-indent 属性,...原创 2019-03-06 15:05:37 · 107 阅读 · 0 评论 -
CSS设计指南笔记:字体篇
以下是与字体样式相关的6 个属性: font-family font-size font-style font-weight font-variant font(简写属性)font-family 用于设定元素中的文本使用什么字体。用字体栈指定本地字体在指定文本的字体时,需要多列出几种后备字体,以防第一种字体无效。这个字体的列表也叫字体栈。,给font-fami...原创 2019-03-06 14:46:07 · 167 阅读 · 0 评论 -
CSS设计指南笔记:@font-face 规则的使用
设定Web 字体的方式有以下三种。 使用Google Web Fonts 或Adobe 的Typekit 等公共字体库。 使用事先打好包的@font-face 包。 使用Font Squirrel 用你自己的字体生成@font-face 包。公共字体库Google Web Fonts 的使用步骤。打开http://www.google.com/webfonts,找到想要的字体,...原创 2019-03-06 15:30:18 · 233 阅读 · 0 评论 -
在 CSS 中直接引用 fontawesome 图标(附码表)
因此我们如果不想用 Fontawesome 提供的类,只想在 css 里面引用图标的话,可以这样子,请自行脑补:&lt; style="font-family:SimSun,monospace,sans-serif; margin-top:0px; margin-bottom:24px; outline:0px; padding:1px; vertical-align:baseline; l...转载 2019-03-11 17:25:21 · 14454 阅读 · 0 评论 -
CSS设计指南笔记:盒模型篇
盒模型:浏览器为页面中的每个HTML元素生成的矩形盒子,这些盒子按照可见版式模型在页面上排布。可见的页面板式由三个属性控制:position属性、display属性 和float属性。其中,position 属性控制页面上元素间的位置关系,display 属性控制元素是堆叠、并排,还是根本不在页面上出现,float 属性提供控制的方式,以便把元素组成成多栏布局。 每个元素盒子的属性:...原创 2019-01-11 10:16:41 · 136 阅读 · 0 评论