css
文章平均质量分 52
芳月存心
活着高兴,就不怕穷。
活着本身,就不是为了谁,仅仅是因为活着就是为了活着
展开
-
【CSS】CSS 处理空白、换行、制表符
<span> ddddddddd</span>在html文档中,有此节点,需要展示换行效果,该如何处理才有换行呢?1. 使用 < pre > 标签pre 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来。(紧跟在 < pre > 开始标签后的换行符也会被省略)pre标签默认样式:pre { display: block;原创 2021-03-10 19:40:01 · 1332 阅读 · 0 评论 -
【CSS】CSS解决样式冲突的基本机制-继承、特指度、层叠
css:h1 { color: red; }h1 { color: blue; } html:<h1> 你好啊 <span>~世界</span><h1>一、关于冲突在以上的例子中,创建了两个同样的样式规则作用于h1上,这两个规则冲突了,但是哪个规则才对h1起作用呢?在这种冲突中,层叠和特指度是对此冲突进行解决的机制。所以需要了解层叠和特指度的工作机制,才能知道当前h1的字体颜色究竟显示什么。其中,还原创 2021-03-09 19:29:19 · 648 阅读 · 0 评论 -
【CSS】CSS BEM思想
1. 什么是BEM?Block将所有东西都划分为一个独立的模块,一个header是block,header里嵌套的搜索框是blockElement!误区:如果一个Element-son是另一个Element-father的子元素,那么写法是 Block__Element-father__Element-son_Modifer,嵌套多了会很长么?不是的!!!一个Block下的所有Element无论相互层级如何,都要摊开扁平的属于Block所以 BEM 最多只有 B+E+M 三级,不可能出原创 2021-01-27 22:24:06 · 178 阅读 · 0 评论 -
【H5 CSS】progress元素样式
progress以下是progress的基本标签<progress></progress>根据w3c的定义,progress元素代表任务的完成度。一个progress元素标签有开始标签和结束标签。除了通用的全局属性外,它还拥有两个自己的属性max -表示有多少任务需要完成。如果未设置,默认为1.0value -表示现在的完成的进度。value的取值最好是 0.0<=value<=1.0进度条的状态一个进度条有两种状态:不确定和已确定不确定-即翻译 2020-12-31 19:16:54 · 3176 阅读 · 1 评论 -
【css flex】关于flex布局的一些缩写
flex-flowflex-flow : flex-direction flex-wrapflex-flow:row nowrap (默认值)flexflex : flex-grow flex-shrink flex-basisflex: 0 1 auto (默认值)该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。flex-basis...原创 2020-04-30 18:26:08 · 1128 阅读 · 0 评论 -
【css】页面适配
1.认识vm,rem,em,pxvw [ Viewport Width ]1vw = 1% * 视口宽度。也就是说,一个视口就是100vw。px [ pixel ]。px是屏幕设备物理上能显示出的最小的一点。这个点不是固定宽度的,是相对长度单位。在桌面浏览器中,1个像素往往是对着电脑屏幕的1个物理像素,但是在移动端,随着Retina屏的流行,分辨率提高了,css中的1px并不等于设...原创 2019-12-23 18:16:34 · 418 阅读 · 0 评论 -
【css】table-border样式小结
关于table这个tag内嵌标签: thead(可选)、tbody(可选)、td、tr、colgroup 、caption(可选)属性:align ,bgcolor ,bordercolor,border ,cellpadding ,cellspacing ,frame ,width ,summary ,rules 。现在的table的属性基本已经过时,都使用css进行设置table样式。...原创 2019-09-25 20:30:04 · 807 阅读 · 0 评论 -
用Html5和csss3做出漂亮的登录注册界面
用html5和css3切换登录注册界面首先我们先创造两个HTML5 forms,那样我们可以利用css3进行设置,使用icon font,这个案例就是来展示如何连接两个form之间的切换。HTML代码<div id="container_demo" > <!-- hidden anchor to stop jump http://www.css3crea...翻译 2017-02-06 22:04:33 · 52938 阅读 · 0 评论 -
【css】多个子项目中间间隔固定排列
<!DOCTYPE html><html><head><style>.flex-container { display: flex; width:640px; flex-wrap:wrap; align-items: stretch; background-color: #f1f1f1;}.flex-contain...原创 2018-10-08 10:20:06 · 1284 阅读 · 0 评论 -
【css】svg 注意事项
给个原文链接: https://css-tricks.com/using-svg/转载 2018-10-08 10:20:19 · 310 阅读 · 0 评论 -
【css】 元素垂直居中
第一种:利用css的transform变形。ps:这个真好用。 position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%)第二种:ie9就不用想了。flex布局ps: 宽高是一定要的,这是外层元素设置内层子元素的垂直居中。display:flex;just-conte...原创 2018-09-30 15:12:13 · 179 阅读 · 0 评论 -
【css】css图标---删除和十字
原创 2018-09-30 15:00:54 · 1511 阅读 · 0 评论 -
【css】关于图片自适应的问题
1. 两个div,外层div设置宽高,内层div设置图片具体格式,利用background进行图片的一系列设置.此处做到的是图片的剪裁置放。内层div的css:/*设置图片样式*/.stu-img{ width: 100%; height: 100%; background-position: center; background-size:cover; background...原创 2018-06-18 22:38:49 · 1113 阅读 · 0 评论