CSS
Milk595
努力做自己喜欢做的事
展开
-
【CSS基础】「一劳永逸」48张小图带你领略flex布局之美
前言最近在项目中,遇到布局问题,有时候,需要堆叠很多的样式,去排版,一定程度上增加了代码量,那么有没有更加方便的布局方式呢?????48张图带你从0到1掌握flex布局方式。flex布局在某种程度上,简便我们布局的一个难题,接下来的篇幅将介绍它的使用????flex基本概念要想熟练掌握flex布局的话,你需要理解两个概念:轴和容器????从上面图来看,我们将flex布局分为两部分讲,轴和容器。「轴」主轴(mian axis)交叉轴(cross axis)「容器」父容器(con转载 2020-10-15 00:24:15 · 222 阅读 · 0 评论 -
【CSS基础】文字垂直居中
文字垂直居中1、高度为百分比,line-height 不知道设置具体的数值的情况,利用伪元素进行居中HTML <div class="father"> <div class="son">这是要居中的文字</div> </div>CSS.father{ height: 300px; width: 300px; background: red;}.son { height: 50%; background: bl转载 2020-10-10 09:29:17 · 268 阅读 · 0 评论 -
【CSS基础】你了解word-wrap和word-break的区别吗?
word-break:break-all和word-wrap:break-word的区别尼玛,说这两个声明不是兄弟都没人信,都有word都有break,位置都还一样,一个有2个break, 一个有2个word, 妥妥儿的用来迷惑大家的。我是花了好多年才没有把这两个记混淆,之前,每次用到都要查一下,晕死人的要~这两个声明都能是连续英文字符换行,那区别在哪里呢?您可以狠狠滴点击????:https://www.zhangxinxu.com/study/201511/word-break-break-转载 2020-10-09 18:17:37 · 246 阅读 · 0 评论 -
【CSS基础】word-break 文本打断
word-break 文本打断这个属性主要用来处理英文单词,在超出一行之后如何换到下一行的规则。1. 官方定义word-break 属性规定自动换行的处理方法。2. 慕课解释一段英文段落,在其文本所在的元素边缘通常都会把整个单词另起一行,而这个属性可以打破这种排版方式,让这个段落的英文单词都是分开的,同汉字一样,在元素的边缘只是最后一个字母换行。3. 语法4.兼容性5. 实例1.对超出元素区域的的文本换行。效果图说明: 上图是没有使用换行属性的效果。下图使用了换行属性 1.转载 2020-10-09 17:59:58 · 1134 阅读 · 0 评论 -
【CSS基础】关于height:100%和height:100vh的区别
关于height:100%和height:100vh的区别vh就是当前屏幕可见高度的1%,也就是说height:100vh == height:100%;但是当元素没有内容时候,设置height:100%,该元素不会被撑开,此时高度为0,但是设置height:100vh,该元素会被撑开屏幕高度一致。...转载 2020-09-11 15:31:16 · 1954 阅读 · 0 评论 -
【CSS基础】calc() 函数
CSS calc() 函数实例使用 calc() 函数计算<div>元素的宽度:<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style>#div1 { position: absolute; width: calc(100% - 100px); bor原创 2020-09-11 15:00:07 · 153 阅读 · 0 评论 -
【CSS基础】后代 > + ~ 选择器
一、后代选择器选取指定元素的后代元素与子元素选择器相比,后代选择器选取的不一定是直接后代(儿子),而是作用于所有后代元素(儿子、孙子、重孙…)都可以。实例:(选取类为 box的元素的 id为aa后代元素)<!DOCTYPE html><html lang="en"><head> <title>后代选择器</title> <style> .box #aa { background: palegr原创 2020-09-04 09:46:31 · 688 阅读 · 0 评论 -
【CSS基础】&符号该怎么用?
&符号这是less、sass的语法,代表上一级选择器,实际编译成css就是 .el-row:last-child{}& 表示嵌套的上一级,比如你的代码中,& 表示 .el-row 可以看做是嵌套里面的一个变量,值是代表上一级选择器...转载 2020-09-01 11:58:52 · 4688 阅读 · 0 评论 -
【CSS基础】linear-gradient() 函数
linear-gradient() 函数定义与用法linear-gradient() 函数用于创建一个线性渐变的 “图像”。为了创建一个线性渐变,你需要设置一个起始点和一个方向(指定为一个角度)的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡,并且你必须指定至少两种,当然也会可以指定更多的颜色去创建更复杂的渐变效果。语法代码例子#grad { background-image: linear-gradient(red, yellow, blue);}代码效果更原创 2020-08-31 19:40:20 · 231 阅读 · 0 评论 -
【CSS基础】flex-shrink
flex-shrinkflex-shrink 属性指定了 flex 元素的收缩规则含义及用法:flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。注意:如果元素不是弹性盒对象的元素,则 flex-shrink 属性不起作用。flex-shrink用来干嘛呢?比如你设置了一个父元素400px,然后来了三个子元素,宽度分别200px。 那么加起来600px。超了怎么办?还有得救。转载 2020-08-31 19:32:59 · 3867 阅读 · 2 评论 -
【CSS基础】position:fixed,如何水平垂直居中?
宽高不确定的情况下.modal-content { position: fixed; left: 50%; height: 50%; transform: translate(-50%, -50%); z-index:9500;}原创 2020-08-22 00:34:58 · 2593 阅读 · 1 评论 -
【CSS基础】文本溢出省略号表示
CSS文本溢出省略号表示前提条件所引用的元素是块级元素,因为使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端。单行溢出处理.text-overflow{ /*当内容溢出元素框时,内容会被修剪,并且其余内容是不可见的 */ overflow: hidden; /* 显示省略符号来代表被修剪的文本 */ text-overflow:ellipsis; /* 处理元素内的空白,文本不会换行,文本会在在同一行上继续,直到遇到 &原创 2020-08-14 15:09:05 · 123 阅读 · 0 评论 -
【CSS基础】vertical-align该怎么使用呢?
vertical-align该怎么使用呢?vertical-align是用来设置行内元素对齐方式的。说白了就是display属性值为inline、inline-block、inline-table另加一个table-cell的元素。先了解一些概念一、 基线相关基线的位置并不是固定的:在文本之类内联元素中,基线是字符x的下边缘位置在像img元素中基线就是下边缘。在inline-block元素中,也分两种情况如果该元素中有内联元素,基线就是最后一行内联元素的基线。如果该元素内没有内联元素或原创 2020-08-14 14:17:41 · 358 阅读 · 0 评论 -
【CSS】normalize.css 介绍和使用
normalize:normalize.css是很小的CSS文件,它在HTML元素样式上提供了跨浏览器的高度一致性。相比与传统的CSS reset,normalize.css是一种现代化,为HTML5准备的优质替代方案,是一种CSS reset的替代方案normalize.css有以下有几个作用:保护有用的浏览器 样式而不是去掉他们。Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。相比之下,Normalize.css保持了许多磨人的浏览器样式。这就意味着你不用再为所有公原创 2020-07-28 17:44:53 · 721 阅读 · 0 评论 -
【HTML/CSS/计算机网络】75道高频面试题【看这一篇就够啦!】
1.(常考)常见浏览器的内核分别是?2. Doctype的作用告诉浏览器按照何种规范解析页面3.(常考) HTML5行内元素有哪些?块级元素有哪些?空元素有哪些?语义化标签有哪些?(列举常见的)行内元素:abr(换行)em(斜体强调) i(斜体) strong(粗体强调)imginput label(表格标签) textarea(多行文本输入框)span(常用,定义文本内区块)sub(下标)、sup(上标)块级元素:div(常用)p(段落)h1-h6(标题,层次明确)h原创 2020-07-26 16:35:01 · 7389 阅读 · 0 评论 -
【CSS面试题】CSS响应式
1. rem是什么?rem是一个长度单位px是绝对长度单位,最常用(但无法做响应式)em,相对长度单位,相对于父元素,不常用rem,相对长度单位,相对于根元素,常用于响应式布局核心代码演示:初始化: <style> html{ font-size: 100px; } div{ background-color: #ccc; margin-top: 10px; } </style>原创 2020-07-17 21:01:18 · 391 阅读 · 0 评论 -
【CSS面试题】图文样式--line-height的如何继承?
Line-height的如何继承?写具体数值,如30px,则继承该值(比较好理解)写比例,如2/1.5,则继承该比例(比较好理解) 比如body中line-height设为2,则p标签继承line-height为2,则算出来的p标签line-height为font-size * 2 =32px;写百分比,比如200%,则继承计算出来的值(考点)—当前的font-size * 200% 例子中:20 * 200% = 40px;核心代码演示:初始化 <style> bo原创 2020-07-17 18:29:24 · 285 阅读 · 0 评论 -
【CSS面试题】CSS定位/居中对齐方式
1. absolute和relative分别依据什么定位?Relative:依据自身定位,对外界元素不会有影响Absolute: 依据最近的一层的定位元素定位定位元素:Absolute、relative、fixed、body核心代码演示:<style> body{ margin:20px; } .relative{ position: relative; width: 400px; heigh原创 2020-07-17 18:24:40 · 423 阅读 · 0 评论 -
【CSS面试题】Flex布局的问题【画色子】
Flex实现一个三点的色子常用语法回顾:1.flex-direction:主轴方向,横向或纵向2.justify-content:主轴对齐方式,从开始对齐、居中对齐、两侧对齐、结束对齐3.align-items:其他轴对齐方式,其他轴就是和主轴垂直的那个轴,有开始对齐、居中对齐、两侧对齐、结束对齐…4.flex-wrap:换行,什么时候换行5.align-self:子元素在交叉轴对齐的方式,有开始对齐、居中对齐、两侧对齐、结束对齐…熟练掌握这五个属性!核心代码演示:初始化: <原创 2020-07-17 18:11:56 · 505 阅读 · 0 评论 -
【CSS面试】Float布局的问题,以及clearfix?
如何实现圣杯布局和双飞翼布局?(PC端常见—使用float的经典布局)圣杯布局和双飞翼布局的目的:① 三栏布局,中间一栏最先加载和渲染(内容最重要)② 两侧内容固定,中间内容随着宽度自适应(不管屏幕放大缩小,中间内容都是自适应)③ 一般用于PC网页圣杯布局和双飞翼布局的技术总结:① 使用float布局② 两侧使用margin负值,以便和中间内容横向重叠③ 防止中间内容被两侧覆盖,一个用padding,一个用margin核心代码演示:初始化:<!DOCTYPE html&g原创 2020-07-17 08:00:51 · 486 阅读 · 0 评论 -
【CSS面试题】BFC理解和应用
什么是BFC?如何应用?BFC:Block format context ,块级格式化上下文一块独立渲染区域,内部元素的渲染不会影响边界以外的元素比如说:任何的BFC元素,它里面无论如何渲染都不会影响外界的元素,这样的话,对我们界面的布局,界面的定位就有很大的好处,如果说内部的渲染对外部会有影响,就不好了。BFC有了这么一个好处,所以说,BFC是我们布局中特别常见的概念。形成BFC的常见条件:float不是none 比如说:我们对元素设置了float,这样的话元素就形成了BFCposit原创 2020-07-16 20:22:07 · 359 阅读 · 0 评论 -
【CSS面试题】Margin负值的问题
对margin 的 top left right bottom设置负值,有何效果?margin-top和margin-left负值,元素向上、向左移动margin-right负值,右侧元素左移,自身不受影响例子:比如 a 元素和 b元素是左右的关系,a元素的右边是b元素,给a元素的margin-right设置-10px;自身不受影响,a元素里面的内容不受影响,但b元素会向左移动10px3.如果margin-bottom负值,下方元素上移,自身不受影响例子:比如 a 元素和 b元素是上下原创 2020-07-16 20:12:54 · 598 阅读 · 0 评论 -
【CSS面试题】margin纵向重叠的问题
margin纵向重叠的问题答案:15px相邻元素的margin-top和margin-bottom会发生重叠(必须记住)空白内容的也会重叠核心代码演示: <style> p{ font-size: 16px; line-height: 1; margin-top: 10px; margin-bottom:15px; } </style></head><b原创 2020-07-16 20:06:40 · 738 阅读 · 0 评论 -
【CSS面试题】盒子模型的宽度如何计算?
盒子模型的宽度如何计算?offsetWidth与offsetHeight有个特点,就是这两个属性的值只与该元素有关,与周围元素(父级和子级元素无关)。它们的大小取决于元素的宽高、padding以及边框border,有无滚动条都没有影响,下面是他们的计算方式。offsetWidth = (内容宽度 + 内边距 + 边框),无外边距因此,答案是122px补充:如果让offsetWidth等于100px,该如何做?做法:添加属性:box-sizing:border-box;这个的意思就是:加了b原创 2020-07-16 20:03:06 · 2560 阅读 · 0 评论 -
CSS控制前端图片HTTP请求的各种情况示例
图片的http请求,有很多种情况,那么究竟什么情况下面不会发生请求呢?下面我用案例一一列举一下1.隐藏图片<img src="haorooms.jpg" style="display: none" /> http请求如下:结论:只有Opera不产生请求。 注意:用visibility: hidden隐藏图片时,在Opera下也会产生请求。2.重复图片<img src="haorooms.jpg" /> <img src="haorooms.jpg" /&g转载 2020-07-13 10:45:29 · 185 阅读 · 0 评论 -
CSS盒模型的详解
CSS盒模型详解CSS的盒模型是CSS的基础,同时也是难点,这个问题经常在面试中会被问到,属于经典问题。可以认为每个html标签都是一个方块,然后这个方块又包着几个小方块,如同盒子一层层的包裹着,这就是所谓的盒模型。盒模型分为IE盒模型和W3C标准盒模型。IE盒模型和W3C标准盒模型的区别是什么?1. W3C 标准盒模型:属性width,height只包含内容content,不包含border和padding。2. IE 盒模型:属性width,height包含border和padding,转载 2020-07-11 07:53:27 · 218 阅读 · 0 评论