css
少油少盐不要辣
趁着年轻,去折腾,去改变吧
展开
-
如何使用css隐藏掉滚动条
(注:PC端浏览器滚动条为8px)使元素偏移原来位置8px,目的就是将滚动条区域移动到父元素边框外面,然后,父元素上添加。选中元素后,绿色区域就是被移动到父元素外的滚动条。原创 2024-01-07 20:31:30 · 1176 阅读 · 0 评论 -
font-face和font-family不生效
transfonter原创 2024-01-01 22:19:30 · 1343 阅读 · 0 评论 -
如何让元素height:100%生效?
有两种方式:元素设定显示的高度值普通流元素的百分比高度起作用的话,其父级元素必须有一个生效的高度值!元素使用绝对定位例如:.child{ height: 100%; position: absolute;}原创 2022-05-21 15:28:20 · 317 阅读 · 0 评论 -
页面模块文字数量是动态的,少的时候居中显示,多的时候左对齐显示,不用js如何实现呢
1.示例如下:文字少的时候:文字多的时候:2.实现思路可以利用inline-block元素具有包裹性来实现。两个父子元素,父元素块级元素,子元素inline-block元素。代码如下:html:<div class="box"> <div class="content">方式方法大方式方法大方式方法大方式方法大</div> </div>css:.box{ text-align: center原创 2022-01-09 22:10:40 · 366 阅读 · 0 评论 -
如何实现背景图片距离不定宽度的元素右侧50px位置定位
1.实现方式背景图片定位方式:background-position。 这个位置是相对于由 background-origin 定义的位置图层的。默认是以元素的padding-box进行定位的。我们可以利用元素的透明border来实现距离元素右侧50px定位。2.代码实现<template> <div class="hello"> <div class="box"></div> </div></template&原创 2020-12-11 15:29:27 · 691 阅读 · 0 评论 -
布局题:实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A,文字需要水平垂直居中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ .原创 2020-07-26 10:09:22 · 1172 阅读 · 0 评论 -
CSS经典布局之圣杯布局
1.首先,什么是圣杯布局?圣杯布局满足以下特点:两侧宽度固定,中间宽度自适应。中间部分在DOM结构上优先,以便先行渲染。允许三列中的任意一列成为最高列。只需要使用一个额外的div标签。2.如何实现?使用弹性盒子注意:因为中间部分要先行渲染,所以,在代码上应该是放在.wrapper父元素第一个子元素的位置上的。为了让中间部分在视觉上显示在中间,这里使用了css的order属性。该属性的作用就是:使得元素在视觉上改变位置,不影响元素的实际结构。<!DOCTYPE html>原创 2020-06-20 11:59:24 · 739 阅读 · 3 评论 -
多个行内元素在垂直方向上居中
可设置vertical-align: middle;原创 2020-04-19 15:53:49 · 580 阅读 · 0 评论 -
background-position设置百分比“失效了”!!
1.background-position设置百分比的计算原理当指定百分比值的时候,实际上执行了以下的计算公式(该公式可以用数学方式定义图片和容器相对位置重合):这是当background-size: auto;时,百分比有效。(container width - image width) * (position x%) = (x offset value)(container heigh...原创 2020-04-11 11:57:07 · 1242 阅读 · 0 评论 -
div包裹图片时,底部有空隙
现象原因img是一种类似text的元素,在结束的时候,会在末尾加上一个空白符,所以就会多出3px解决办法设置display:blockimg { vertical-align: middle; }原创 2020-04-11 09:43:40 · 1174 阅读 · 0 评论 -
absolute定位元素的特点
1.什么是定位元素?就是元素的position属性值为:fixed,absolute,relative三者之一,则为定位元素。那么static的元素呢?为常规流元素。网页布局中,元素的排列方式一般三种,常规流,浮动,定位2.先说下absolute,fixed元素的特点该元素变为块盒,即display值为block。- 当元素为fixed时,可以利用该特点,实现网页布局中,水平,垂直...原创 2020-03-28 09:43:38 · 1382 阅读 · 0 评论 -
移动端去除overflow:scroll所带来的滚动条
用overflow:scroll会带来滚动条,那么如何去除呢?我这里用的方法,是在用该属性的元素外,再次套一个父元素,并让滚动的内容区的高度和该父元素的高度相同。直接上代码,以下是未套元素前:html代码<ul> <li></li> <li></li> <li></li> &原创 2019-02-26 22:53:24 · 6630 阅读 · 1 评论 -
css浮动特性
css浮动特性先来看看浮动元素的特点浮动元素之间的外边距不会发生折叠。不管什么元素都可以被“浮动”,浮动元素的display属性值为block。被浮动的元素,若是非替换元素(如span、a),一般显示指定宽度值。浮动元素之间不会重叠。定位元素则不同,有可能会重叠。向左浮动元素的左外边界是其包含块的左内边界或者是之前向左浮动元素的右边界。同理,可以得到向右浮动元素的特点。浮动元素的...原创 2020-01-05 11:02:46 · 501 阅读 · 1 评论 -
BFC(Block Formatting Context)
1.什么是BFCBFC(Block Formatting Context),块级格式化上下文,它规定了内部的块级元素的布局方式,默认情况下只有根元素(即body)一个块级上下文。2.BFC布局规则内部的块级元素会在垂直方向,一个接一个地放置;块级元素垂直方向的距离由margin决定。属于同一个BFC的两个相邻的块级元素会发生margin合并,不属于同一个BFC的两个相邻的块级元素不会发生...原创 2019-12-15 10:33:16 · 189 阅读 · 0 评论 -
background-size属性详解
css background-size 属性详解,background-size 指定背景图像大小,以象素或百分比显示,当指定为百分比时,大小会由所在区域的宽度、高度以及 background-origin(图片的起始位置) 的位置决定,还可以通过 cover 和 contain 来对图片进行伸缩。background-size 属性1、定义:background-size 用来调整背景图像...原创 2019-06-05 16:46:27 · 116554 阅读 · 0 评论 -
rgba和opacity区别
1.opacity属性的值,可以被其子元素继承,给父级div设置opacity属性,那么所有子元素都会继承这个属性,并且,该元素及其继承该属性的所有子元素的所有内容透明度都会改变。而RGBA设置的元素,只对该元素的背景色有改变,并且,该元素的后代不会继承该属性。...原创 2019-06-05 16:15:31 · 1612 阅读 · 0 评论 -
移动端,蒙版底部页面滑动问题
1.移动端项目中,经常会有弹出弹窗的需求,并且,当用户在弹窗上有滑动时,弹窗底部的页面,是不能滑动的。就像下面这样。当在弹窗上滑动观看学生信息时,其底部的页面不能有滑动。目前,我这里有两种个人方案:1.在点击弹出弹窗的时候 ,给HTML和body元素加上如下代码:html,body{overflow:hidden;}取消弹窗的时候,删除上面代码即可。2.在点击弹出弹窗的时候 ,...原创 2019-04-12 08:18:34 · 678 阅读 · 0 评论 -
css中fixed布局嵌套的问题
1.若父级用了fixed布局,或者transform,则子元素用fixed布局会受影响。(子元素的fiexd布局是相对于父元素的了)。 html,body{ width: 100%; height: 100%; } .parent{ transform: translate(50%,50%)...原创 2019-04-02 21:40:27 · 5338 阅读 · 0 评论 -
margin+padding实现等高布局
原创 2019-01-02 22:51:38 · 758 阅读 · 0 评论 -
min-width、max-width和margin:0 auto
div{ min-width:1100px; max-width:1920px; margin:0 auto;}上述代码可以保证网页在宽度超过1920px的浏览器窗口中居中显示,但是也会在小于1100px的浏览器窗口中有横向滚动条...原创 2019-01-25 22:58:12 · 1236 阅读 · 0 评论 -
了解层叠规则
z-index的默认值为auto,1.值0在值auto的上面。2.若两个兄弟元素a,b;a 的z-index=1,b的z-index=2。则b在a的上面,若a中有一个子元素c的z-index=999,则b也会在c的上面。...原创 2019-02-13 22:13:37 · 730 阅读 · 0 评论 -
css 强制不换行
css中强制不换行,文本不会换行,文本会在在同一行上继续,直到遇到 br 标签为止。white-space:nowrap;原创 2019-03-11 22:41:10 · 150649 阅读 · 0 评论 -
解决IOS移动端fixed固定头部问题
1.废话不多说,直接上代码:css部分 body{ padding: 0; margin: 0; } html,body{ width: 100%; height: 100%; } .page{ display...原创 2019-04-11 23:30:48 · 3281 阅读 · 0 评论 -
css分组选择器
&amp;lt;div class=&quot;wrapper&quot;&amp;gt; &amp;lt;div class=&quot;box&quot;&amp;gt; &amp;lt;a href=&quot;&quot;&amp;gt;121212&amp;lt;/a&原创 2018-12-18 22:30:36 · 471 阅读 · 0 评论