css3
hzxOnlineOk
这个作者很懒,什么都没留下…
展开
-
【flex】设置容器横向滚动 内容超出一屏 但是最左边的内容被遮住的原因 space-around的坑
我们经常会使用flex布局,但也因为这个让我遇到了个问题。设置div容器横向滚动,内容超出一屏,并且容器设置。但是出现了最左边的内容被遮住的情况。或者不设置该项即可正常显示。原创 2023-01-12 19:03:35 · 1269 阅读 · 0 评论 -
【css】伪元素before after增加自定义色块、图标
/ 必须有这个属性,否则不显示 display : inline-block;// 必须有,因为是行内元素 background-color : green;当我们使用有序()和无序()列表的时候,两者都会显示浏览器的默认样式。使用::before伪元素,我们则可以自定义显示样式,可以是图标或者其他的CSS样式都可以。转载 2023-01-05 19:19:20 · 2818 阅读 · 0 评论 -
【css】height: 100%无效 不生效的原因及解决办法
参考的父级是离它最近的有定位属性的父级而非直接父级(因为脱离文档流了);参考的依旧是直接父级,无论直接父级是否有定位属性;如果子元素为绝对定位元素,则。原创 2022-12-20 10:16:10 · 1761 阅读 · 0 评论 -
【css基础】实现左边div固定宽度 右边div自适应撑满剩下的宽度
简单来说,实现布局最好的方式是 flex,简单兼容现代浏览器和机型。当然,我是因为还没有学 grid(但 grid 要记得参数比较多)。绝对定位和浮动各有优缺点float 区别于其他三种,不需要父元素做容器grid 区别于其他三种,不需要设置子元素(左元素的)宽绝对定位区别于其他三种,它的方法不仅要父元素有高,其子元素也要有高flex 最简单。转载 2022-11-14 15:02:44 · 2613 阅读 · 0 评论 -
一文解读CSS Modules(脚手架为什么会自己生成hash类名)
本文使用的是 Webpack 的css-loader插件,因为它对 CSS Modules 的支持最好,而且很容易使用。CSS Modules 还提供一种显式的局部作用域语法:local(.className),等同于.className,所以上面的App.css也可以写成下面这样。css-loader默认的哈希算法是[hash:base64],这会将.title编译成._3zyde4l1yATCOkgn-DBWEL这样的字符串。CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。......转载 2022-08-12 15:49:35 · 575 阅读 · 0 评论 -
html 中js 如何给字符串加换行符
let msg= `网络错误\n请联系管理员13959901011`;现象这种写法在html中会被识别为"网络错误\n请联系管理员13959901011",并非我们要的效果。解决办法在对应元素类名的样式中加入white-space: pre样式原创 2021-12-22 11:10:53 · 2320 阅读 · 0 评论 -
两个div分上下堆叠,上部分高度不固定,下面部分自动填满剩余高度
<div class="wrapper" id="wrapper" style="height: 100%;"> <div class="searchForm" id="searchForm"></div> <div class="tableContent" id="tableContent"></div></div>方法一:var wrapper= document.getElementById('wrappe原创 2021-11-16 19:19:57 · 977 阅读 · 0 评论 -
css如何显示svg图片
<embed src="logo.svg" type="image/svg+xml"/><object data="logo.svg" type="image/svg+xml"></object><iframe src="logo.svg"></iframe>原创 2021-11-16 09:40:25 · 789 阅读 · 0 评论 -
解决相邻元素margin高度重叠的方法
相邻的块元素之间的margin高度会重叠,下面是解决办法:1、如果容器为flex布局,则将开启BFC模式,自动取消重叠2、为其中一个元素设置一个容器,并且设置overflow: hidden原创 2021-11-03 11:49:36 · 458 阅读 · 0 评论 -
box-sizing简单理解
box-sizingcontent-box假如给了该元素一个width或者height,不计算border、padding、margin,元素内容区就为该width或者height的值border-box假如给了该元素一个width或者height,计算border、padding、margin,元素内容区就为该width或者height的值 - (border+padding+margin)...原创 2021-11-03 11:45:22 · 111 阅读 · 0 评论 -
html 中 包含img标签的父容器元素p、div、a等类型的高度多出一块 且css查询不到margin和padding的原因及解决
问题 当p、div、a这些作为父元素容器且包含img子元素标签时,父元素的总体高度会比img图片的高度多出一些px<div class="content"><img src="https://www.baidu.com/images/asfwqdr1fgh44.png"><div>F12排查了父元素是否存在margin或者padding,但是没有找到对应的间距设置,又排查了html文本,看看是否是空格或者换行符导致的。仍不行,排除html空格的问题原创 2021-01-15 10:54:32 · 636 阅读 · 1 评论 -
移动端H5 实现0.5px边框
此文章转载自:https://blog.csdn.net/Love_your_life/article/details/80499334内容亲测有效项目中应设计师要求,1px的边框觉得不精致。。遂要实现0.5px边框 实现方式如下: 伪类 + transform 实现 单条border样式设置: .scale-1px{ position: relative; border:none; } .scale-1px:after{ .转载 2020-10-16 16:30:08 · 1173 阅读 · 0 评论 -
css less 文件:global的写法
css:global #close-button { margin-bottom: 20px !important;}.attachItem :global #nprogress { background: #eee; height: 0;}less:global { .signin_list .am-list-item .am-list-line .am-list-content { padding-top: 15px; padding-botto.原创 2020-09-10 17:22:31 · 10708 阅读 · 0 评论 -
html 中的div或者span或者p标签文本超出宽度不会自动换行 span设置不了margin的原因
html 中的div或者span或者p标签文本超出宽度不会自动换行的原因.am-list-item .am-list-line .am-list-extra { flex-basis: 60%; white-space: no-wrap; // 就是这行导致的}span设置不了margin(非块元素需要设置display: 'inline-block',)<span style={{ display: 'inline-block', color: 'red',..原创 2020-09-01 16:15:30 · 1379 阅读 · 0 评论 -
absolute绝对定位的元素显示不出来的可能原因
在父元素position: relative相对定位后对子元素position: absolute绝对定位,如果没有指定width,会显示空白,当然,如果同时设置left和right,相当于会默认计算一个width,所以也可以正常显示 <View style={{ position: 'absolute', width: '100%', left: 0, // r原创 2020-08-07 16:29:12 · 10404 阅读 · 0 评论 -
调试移动端h5的新闻详情页 对于空格pc谷歌浏览器调试的渲染效果与手机终端的渲染效果不同
我接到了一个需求,实现新闻列表以及对应的新闻详情这是一个react-native项目,但是要求用移动端h5开发详情页,打包成dist后,作为一个链接以供rn列表项点击跳转问题来了,详情页的内容会在后台系统填写一些空格格式,pc谷歌浏览器调试移动端h5对于空格的渲染和手机终端的app的webview上看到的空格渲染宽度不同,这直接导致了文案无法同步对齐有鉴于此,决定采用iframe去做展示...原创 2020-07-01 10:09:21 · 593 阅读 · 2 评论 -
react 行内样式的!important不生效怎么处理
React本身不支持在行内style里直接写成fontSize: `${fontSize}px !important`,具体原因不清楚解决办法如下代码所示,使用ref的方式去处理该h1虚拟元素的样式: <h1 className="contentTitle" style={{ textAlign: titleCenter ? 'center' : 'left', .原创 2020-06-13 10:08:02 · 4131 阅读 · 0 评论 -
react或者css实现多行文本超出加省略号(多行省略)
width: 200px; // 必须指定宽度overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;正常的写法是这样, 但是对于react不适用, React的jsx写法应该是这样子的:width: 20...原创 2019-03-16 20:00:17 · 2741 阅读 · 2 评论 -
移动端Android真机上 scrollTop一直为0的解决方案
确保html,body的高度为auto!!! 不能是100%原创 2020-05-25 15:07:34 · 888 阅读 · 1 评论 -
HTML文章页面,由其他文档拷贝过来的换行符识别不了问题的解决(一行样式解决)
今天做一个文章展示页面,当我将填充文章copy上去的时候,发现页面并没有识别文字的换行,而是将文字都挤在同一行我尝试用<pre></pre>标签,但效果并不好百度过后才知道,CSS中由“white-space” 属性设置如何处理元素内的空白包括:但是保留换行符、是否合并空白符、是否自动换行、值 描述normal 默认。空白会被浏览器忽略。pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap...转载 2020-05-24 22:44:06 · 451 阅读 · 0 评论 -
react 写移动端H5页面 引用本地图片 且路径正确,但是图片无法正确展示(会展示成默认图片)
错误的图片如下:Card.js(这边直接在img标签写的相对路径,但是无法正确显示)import React from 'react'import styles from './card.less'export default class extends React.Component { constructor(props) { super(props) this.state = { // isShow: false, } ..原创 2020-05-23 21:52:14 · 806 阅读 · 0 评论 -
css3属性选择器以及属性选择器正则匹配的真实案例讲解
首先,提供w3c的完整文档:https://www.w3school.com.cn/css/css_selector_attribute.asp先看我们要实现的效果图(表情包和图片的自适应做的应该还行):我们不想要看到的情况:又或者这样:接下来谈一下我如何在项目中使用它:在我的react-native项目中,需要做一个h5的详情页,当然有很多种方式...原创 2020-04-24 20:08:47 · 571 阅读 · 0 评论 -
css实现图片自适应容器的几种方式
css实现图片自适应容器经常有这样一个场景,需要让图片自适应容器的大小。1、img标签的方式我们马上就能想到,把width、height 设置为100%啊。来看一哈效果。<div class='div1'> <img src="./peiqi.png" alt=""></div>.div1 { width:500px...转载 2020-04-22 12:19:40 · 298 阅读 · 0 评论 -
实现react移动端渐变骨架屏简单案例
首先是封装各部分骨架的Skeleton.jsimport React from 'react';import moment from 'moment';import styles from './skeleton.css';import Title from './Title';import Paragraph from './Paragraph';import ImageCont...原创 2020-03-30 11:16:50 · 1577 阅读 · 0 评论 -
HTML5的十大新特性
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等(1)语义标签 语义化标签使得页面的内容结构化,见名知义标签 描述 <hrader></header> 定义了文档的头部区域 &...转载 2020-01-09 16:38:23 · 161 阅读 · 0 评论 -
关于html的父元素div高度为0时 子元素本该看不到 而事实是子元素不受影响的原因
我们这边以自己用js实现的select组件来说明:我们会发现当.bm类名没有overflow:hidden;属性时,当我们点击input组件js对父元素类名为HMF-1的div时,动态改变该父元素的高度。当该父元素height为0时,子元素不受影响,仍旧屹立不倒。。。如下图,框框没了,父元素高度为0:这边没有用浮动,没有清除浮动一说,也没有所谓的脱离文档流一说。我个...原创 2019-12-31 16:54:43 · 2271 阅读 · 2 评论